今天學到了什么
盒子的模型
/*
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;）
要注意
float
float和父元素
/*
父元素不設置高度，子元素float,父元素的高度會坍塌
*/
/*
如何讓父元素重新獲取高度
1.給父元素 overflow:hidden;
2.給父元素公共樣式row
.row:after{
content:"";
display:table;
clear:both;
}
*/
導航的幾種做法
-1 li的浮動(左浮動 右浮動 調(diào)整位置margin)
-2 相對位置和絕對位置
(大的div相對位置 就可以直接使用left top來移動物體 （ /* 相對定位就是元素在頁面上正常的位置 相對定位一般不使用right,bottom */） position:relative;想動的position：absoute）
)
.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>發(fā)布時間</span>
<span>∨價格∧</span>
<span>環(huán)保節(jié)能∧</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>了解環(huán)保家居建材環(huán)保評級標準</span>
</div></div>
</div>
</div>
- 3 內(nèi)聯(lián)塊和內(nèi)標簽的使用 注意如果有問題（父元素font-size=0）
元素水平居中（因為居中那一點 所以需要margin移動某某一半）
搜索框去銳化 和 button的移動 和背景圖片的移動（絕對位置和相對位置的應用）
懸浮定位（可以作為狗皮膏藥）
div{
width:20px;
height:50px;
background:red;
position:fixed;
/*right:10px;
bottom:130px;*/ (選取位置 和相對位置使用差不多)
}
絕對位置的堆疊順序
父元素下第一個選中 所有選中 和單獨
種類選中
.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" />
