今天学到了什么
1 盒子的传参
margin:100px 四个方向全部改变
margin:100px 200px; top,bottom-- 100px left,right -- 200px
//传三个参数 top--100 left,right -- 200 bottom --300
margin:100px 200px 300px;
//传四个参数（顺时针）
margin:100px 200px 300px 400px
top right bottom left
2 html 元素特点
元素内容的起始位置,是基于它自身width,height的起始位置
padding就可以移动元素宽高
标签的分类
- 块标签 特点①单独成行
②可以被设置宽高width height
h1 p dl ul li dt dd div
- 内标签 特点①并排显示
②不可被设置宽高width height
③不可设置margin-top，margin-bottom
a span i em strong
-内联块 特点①并排显示
②可以被设置宽高width height
input button img
- 各个标签默认
块标签默认 display:block;
内联默认 display:inline;
内联块默认 display:inline-block
- 内联元素和内联块元素水平居中
{
display:block;
margin-left:auto;
margin-right:auto;
}
图片居中（内联块）
/*方法一*/
/*给父级加 text-align: center; */
/*body{
text-align: center;
}*/
.header{
text-align: center;
}
/*方法二*/
img{
display: block;
margin-left: auto;
margin-right: auto;
}
(注意：图片大小不要超过父标签设置范围之外 不然无法居中
两个图片要不同大小 至少需要定义一个 两个都居中用img定义就行 )
3选择器
<style>
/* p{
color:red;
} */
/* .one{
color:yellow;
} */
/* #two{
color:green;
} */
/* 伪类选择器 */
/*li：hover，p:hover（悬浮）{
color:black;
cursor：pointer（光标变手）
} */
/* 分组选择器 */
p,h1,div{
color:red;
}
</style>
</head>
<body>
<p class="one" id="two">hello world</p>
<h1>h1</h1>
<div>div</div>
</body>
</html>
4 后代选择器
.parent>p{} 亲儿子
.parent>p{
color:red;
}//前两个变红
.parent p{
color:red;
} 选择parent之后的所有p元素 //前三个变红
<div class="parent">
<p>hello world</p>
<p>hello world</p>
<div>
<p>hello world</p>
</div>
</div>
<div>
<p>hello world</p>
</div>
5 兄弟选择器
div+p{
color:red;
}//选中div之后的第一个p元素
div~p{
color:yellow;
}//选中div之后的所有p元素
- 伪类选择器
input:focus{}
input:focus{
background: #ff2d51;
}//点击时输入框变红
<body>
<input type="text">
</body>
6 伪元素
用css自定义生产的元素
div:before{
content:"前面"
宽高
}//div:before{
width:100px;
height:100px;
background: red;
content:"前面";
display: block;
}//注意 分号一定要用英文模式
7属性选择器
element[attr=value]{
}//[class="one"]{
color:red;
}//[class="one"]和.one 差不多
8选择器优先级别
9 选择器的权重
2.png
10 文字双背景
-
一个div 一个h2//注意设置宽高背景
3png.png
-两个div 中间一个a（网站的应用）
// .nav{
height: 60px;
width: auto;
background: yellow;
}
.nav2{
text-decoration-line: none;
display: block;
text-align: center;
line-height: 60px;
height: 60px;
width: 100px;
background: blue;
margin-left: auto;
margin-right: auto;
}
.nav2 a{
text-decoration-line: none;
color: black;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav2">
<a href="#">关于远大</a>
</div>
</div>
11关于表格
-
表格跨越列
image.png
-
表格跨越行
5.png
不太流畅有
-1跨行
竖为<th rowspan="3">商城</th><td>衣服</td><td>电脑</td>//三行任意列 三列一行被商城替代
-2跨列
横为<tr>
<th colspan="2">商城</th>
</tr>
<tr><td></td> <td></td></tr>(任意行2列 一列三行被商城替代)
-3 表格合并
table{border-collapse: collapse;}
-4 线的问题
table,td,th{border:1px solid #333}（边界实心）
-5 字的让位（定义了盒子宽度）
text-indent: 20px;
-div a {text-decoration-color: none;}//网页导航下划线颜色
网友评论