今天学到了什么
盒子的模型
/*
box-sizing:border-box
给元素border,padding不会改变它的width,height
初始情况box-size=content-box
*/
横线
width: 1000px;
color: red;
}
</style>
</head>
<body>
<div>
<hr>
</div>
背景图片、
div{
background:red;
background-image: url(images/logo.png);
background-position:center center;
background-repeat: no-repeat;
height: 100px;
margin-left: auto;
margin-right: auto;
}
第二种
两个div 一个div控制背景颜色
一个div控制图片大小（ /* background-size: 100% 100%; （）cover*/）和位置（ margin-left: auto;
margin-right: auto;）
要注意
1png.png
float
1.png
float和父元素
/*
父元素不设置高度，子元素float,父元素的高度会坍塌
*/
/*
如何让父元素重新获取高度
1.给父元素 overflow:hidden;
2.给父元素公共样式row
.row:after{
content:"";
display:table;
clear:both;
}
*/
导航的几种做法
-1 li的浮动(左浮动 右浮动 调整位置margin)
6.png
-2 相对位置和绝对位置
(大的div相对位置 就可以直接使用left top来移动物体 （ /* 相对定位就是元素在页面上正常的位置 相对定位一般不使用right,bottom */） position:relative;想动的position：absoute）
xiang
)
.content-body1{
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 10PX;
margin-bottom: 10px;
}
.search{
margin-top: 50px;
height:60px;
background:#eee;
position: relative;
line-height: 60px;
}
.s-left{
position: absolute;
left:0;
}
.s-right{
position: absolute;
right:0;color: #44cef6;
}
.s-right2{
position: relative;
}
.i-three{
position: absolute;
top: 50%;
margin-top: -8px;
}
.s-content{
position: absolute;
left:400px;width:240px;height:20px;
}
.s-content1{
position:relative;
width:240px;
}
button{
position:absolute;top:50%;margin-top: -9px;
right:5px;width:23px;height:22px;
background: url("images/icon4.png");border:none;
}
.input1{
padding-left:20px;border:1px solid black;
width:220px;height:28px;background:#eee;
}
<div class="content-body1">
<div class="search">
<div class="s-left">
<span>发布时间</span>
<span>∨价格∧</span>
<span>环保节能∧</span>
</div>
<div class="s-content">
<div class=" s-content1">
<input class="input1" type="text" placeholder="搜索">
<button></button>
</div></div>
<div class="s-right">
<div class="s-right1">
<span class="s-three"><img class="i-three" src="images\wenhao.png" alt=""></span>
<span>了解环保家居建材环保评级标准</span>
</div></div>
</div>
</div>
- 3 内联块和内标签的使用 注意如果有问题（父元素font-size=0）
元素水平居中（因为居中那一点 所以需要margin移动某某一半）
8.png
搜索框去锐化 和 button的移动 和背景图片的移动（绝对位置和相对位置的应用）
9.png
悬浮定位（可以作为狗皮膏药）
div{
width:20px;
height:50px;
background:red;
position:fixed;
/*right:10px;
bottom:130px;*/ (选取位置 和相对位置使用差不多)
}
绝对位置的堆叠顺序
10.png
父元素下第一个选中 所有选中 和单独
种类选中
.right a{
font-size: 12px;
}（和单独种类选中）
.search>div{
width:100px;
height:58px;
border:1px solid #333;
position:absolute;
}（某某后所有div）
父亲-p{}
图片自适应
img{
display:block;
margin-left: auto;margin-right: auto;
height:auto;
max-width: 100%;
}
</style>
</head>
<body>
<img src="images/down.jpg" />
网友评论