2018.07.16
絕對定位.PNG
1.相對定位
position:relative;
相對定位是相對于自己的位置而言，而且占據原來的位置；
相對定位.PNG
2.絕對定位
position:absolute;
絕對定位是相對于父級元素（父級元素必須有position，最好為position:relative;）的位置而言，而且不會占據原來的位置；
絕對定位.PNG
3.搜索框
搜索框.PNG
百度搜索框
百度搜索框.PNG
4.垂直水平居中
垂直水平居中.PNG
08.PNG
phone.PNG
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="base.css"/>
<style>
*{margin:0;padding:0}
.logo{
background:#70f3ff;
line-height: 60px;
}
.logo img{
display:block;
margin-left: auto;
margin-right: auto;
}
.header{background: rgba(128, 128, 128, 0.22)}
.container{height:40px;width:1000px;text-align:center;
line-height: 40px;
margin-left:auto;
margin-right:auto;
}
.start{float: left;;overflow:hidden}
.end{float: right;overflow:hidden}
.container a{margin-right:60px;text-decoration: none;font-size: 20px;color:#333;}
.start>.icon{display: block;width:19px;height:19px;background:url("images4/location.png");
position:absolute;top:50%;margin-top:-10px;margin-left:25px;
}
.start>.first{margin-left:60px;}
.start,.end{position:relative}
.end>.icon{
top:50%;
margin-top:-10px;
position:absolute;width:19px;height:19px;
}
.end>.adm{
padding-left:20px;
}
.start,.end{font-size: 12px;cursor:pointer}
.middle{
width: 1000px;
height: auto;
overflow: auto;
margin-left: auto;
margin-right: auto;
}
.middle1{
height:auto;
margin-left: auto;
margin-right: auto;
overflow: auto;
}
.middle11{
float: left;
padding-left: 10px;
margin-top:10px;
margin-bottom:10px;
}
.middle11:not(:last-child):after{
content:">";
}
.middle2{
width: auto;
height: auto;
overflow: auto;
background: #f0f0f4;
}
.middle2>ul{
list-style: none;
overflow: auto;
}
.middle2>ul>li{
display: block;
overflow: auto;
}
.middle2>ul>li>div{
float:left;
margin: 10px;
color:aqua;
}
.middle2>ul>li>ul{
list-style: none;
float:left;
}
.middle2>ul>li>ul>li{
float:left;
margin: 10px;
border: 1px solid transparent;
}
.middle2>ul>li>ul>li:hover{
border: 1px solid #ffb61e;
}
.middle3{
text-align:center;
background-color: rgba(128, 128, 128, 0.22);
overflow: auto;
padding-top: 10px;
padding-bottom: 10px;
}
.middle3>div{
display: inline-block;
}
.middle31{
float:left;
margin-left:10px;
}
.middle32{
overflow: auto;
text-align: center;
background-color: white;
width: 240px;
}
.middle32>input{
outline: none;/*隱藏input的邊框*/
border: none;
}
.middle321{
display: inline-block;
}
.middle33{
float:right;
margin-right: 10px;
}
.middle33 a{
color:aqua;
}
.middle33>a>img{
position: relative;/*修改小人圖片的位置*/
top: 3px;/*下移*/
right: 5px; /*左移*/
}
.middle4{
width:auto;
margin-left:auto;
margin-right:auto;
}
.middle4>div{
float:left;
width:235px;
height:300px;
margin-bottom: 15px;
padding: 15px;
box-sizing: border-box;
/* border:5px solid white; */
/* background-color: rgb(239,239,239); */
border: 1px solid black;
}
.row:after{
content:"";display:table;clear:both;
}
.middle4>.middle41:not(:last-child){
margin-right: 13.222222px;
}
.middle41>p{
font-size: 12px;
}
.middle41>p:last-child>span{
font-size: 12px;
}
.middle41>p:last-child{
font-size: 16px;
font-weight: bold;
color: aqua;
}
.middle41:hover{
color:#ffb61e;
}
.middle41:hover>p:last-child{
color:#ffb61e;
}
.middle5{
width:700px;
text-align:center;
padding-top: 10px;
padding-bottom: 10px;
}
.middle51{
width:auto;
float:left;
overflow: auto;
}
.middle511{
background: rgba(128, 128, 128, 0.22);
width:auto;
float:left;
margin-right:20px;
}
.middle512{
display: inline-block;/*使12345上去*/
}
.middle512:last-child{
margin-right:20px;
}
.middle512>a{
color:black;
text-decoration:none;
}
.middle512>a:hover{
text-decoration:underline;
color:orange;
}
.middle513{
background: rgba(128, 128, 128, 0.22);
width:auto;
float:right;
margin-right:100px;
}
.middle52{
float:left;
margin-left: 150px;
overflow: auto;
}
.middle52>a>button{
background:orange;
color:white;
width:65px;
height:25px;
border:0px solid transparent;/*去除按鈕邊框*/
}
.middle52>a>input{
height:20px;
width:20px;
}
.middle6{
text-align: center;
margin-top:20px;
}
.middle6>img{
height:70px;
width: 70px;
float:left;
}
.middle611{
color:aqua;
font-size: 20px;
margin-top:20px;
margin-bottom: 10px;
text-align: left;
text-indent: 20px;
}
.middle61>p{
text-align:left;
text-indent: 20px;/*設置文字與圖片間的間距*/
}
.middle7{
overflow: auto;
background: #808080;
margin-top:10px;
}
.middle71{
width: 1000px;
height: auto;
margin-left: auto;
margin-right: auto;
overflow: auto;
}
.middle711{
overflow: auto;
border-bottom:1px solid whitesmoke;
margin-right:20px;
}
.middle711 p{
color:whitesmoke;
}
.middle7111{
float:left;
margin-right:60px;
margin-bottom:10px;
}
.middle7111>a>img{
height:20px;
margin-bottom:5px;
}
.middle7112{
float:left;
margin-top:27px;
margin-right:60px;
margin-bottom:5px;
}
.middle7112>p{
color:whitesmoke;
}
.middle7113{
float:left;
margin-right:60px;
margin-top:27px;
margin-bottom:5px;
}
.middle7113>p{
color:whitesmoke;
}
.middle7114{
float:left;
margin-top:27px;
margin-bottom:5px;
}
.middle7114>p{
color:whitesmoke;
}
.middle7114>p>img{
height:15px;
}
.middle712{
overflow: auto;
color:whitesmoke;
margin-top:5px;
}
</style>
</head>
<body>
<div class="logo">
<img src="images4/logo.png">
</div>
<div class="header">
<div class=" center container">
<a href="#">首頁</a>
<a href="#">咨詢</a>
<a href="#">測評</a>
<a href="#">商城</a>
<div class="start">
<i class="icon"></i>
<span class="text first">深圳</span>
<span class="text">切換</span>
</div>
<div class="end">
<span class="icon"></span>
<span class="adm">個人中心</span>
</div>
</div>
</div>
<div class="middle">
<div class="middle1">
<div class="middle11">首頁</div>
<div class="middle11">預防裝修污染</div>
<div class="middle11">材料庫</div>
</div>
<div class="middle2">
<ul>
<li>
<div>類別</div>
<ul>
<li>全部</li>
<li>地板</li>
<li>涂料</li>
<li>墻紙</li>
<li>瓷磚</li>
<li>粘膠劑</li>
<li>油漆</li>
<li>家具</li>
<li>板材</li>
<li>飾品</li>
</ul>
</li>
<li>
<div>類型</div>
<ul>
<li>全部</li>
</ul>
</li>
<li>
<div>材質</div>
<ul>
<li>全部</li>
<li>實木</li>
<li>復合</li>
<li>強化</li>
<li>其他</li>
</ul>
</li>
<li>
<div>品牌</div>
<ul>
<li>圣象</li>
<li>大自然</li>
<li>生活家</li>
<li>北美楓情</li>
<li>德爾</li>
<li>博典</li>
<li>船王</li>
</ul>
</li>
</ul>
</div>
<br>
<div class="middle3">
<div class="middle31">
<a>發(fā)布時間<img src="images4/downicon.png">價格<img src="images4/upicon.png">環(huán)保節(jié)能<img src="images4/upicon.png"></a>
</div>
<div class="middle33">
<a><img src="images4/wenhao.png">了解家居醫(yī)生建材環(huán)保評級標準</a>
</div>
<div class="middle32">
<input type="text">
<img src="images4/search.png">
<div class="middle321">搜索</div>
</div>
</div>
<br>
<div class="middle4 row">
<div class="middle41">
<img src="images4/data_image.png">
<p>德爾 都市系列3001</p>
<p>木地板 復合地板</p>
<p>單價： 128/m<sup>2</sup> </p>
<p>環(huán)保評級： B <span>(可以使用)</span></p>
</div>
<div class="middle41">
<img src="images4/data_image.png">
<p>德爾 都市系列3001</p>
<p>木地板 復合地板</p>
<p>單價： 128/m<sup>2</sup> </p>
<p>環(huán)保評級： B <span>(可以使用)</span></p>
</div>
<div class="middle41">
<img src="images4/data_image.png">
<p>德爾 都市系列3001</p>
<p>木地板 復合地板</p>
<p>單價： 128/m<sup>2</sup> </p>
<p>環(huán)保評級： B <span>(可以使用)</span></p>
</div>
<div class="middle41">
<img src="images4/data_image.png">
<p>德爾 都市系列3001</p>
<p>木地板 復合地板</p>
<p>單價： 128/m<sup>2</sup> </p>
<p>環(huán)保評級： B <span>(可以使用)</span></p>
</div>
<div class="middle41">
<img src="images4/data_image.png">
<p>德爾 都市系列3001</p>
<p>木地板 復合地板</p>
<p>單價： 128/m<sup>2</sup> </p>
<p>環(huán)保評級： B <span>(可以使用)</span></p>
</div>
<div class="middle41">
<img src="images4/data_image.png">
<p>德爾 都市系列3001</p>
<p>木地板 復合地板</p>
<p>單價： 128/m<sup>2</sup> </p>
<p>環(huán)保評級： B <span>(可以使用)</span></p>
</div>
<div class="middle41">
<img src="images4/data_image.png">
<p>德爾 都市系列3001</p>
<p>木地板 復合地板</p>
<p>單價： 128/m<sup>2</sup> </p>
<p>環(huán)保評級： B <span>(可以使用)</span></p>
</div>
<div class="middle41">
<img src="images4/data_image.png">
<p>德爾 都市系列3001</p>
<p>木地板 復合地板</p>
<p>單價： 128/m<sup>2</sup> </p>
<p>環(huán)保評級： B <span>(可以使用)</span></p>
</div>
</div>
<div class="middle5">
<div class="middle51">
<div class="middle511">上一頁</div>
<div class="middle513">下一頁</div>
<div class="middle512">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</div>
</div>
<div class="middle52">
<a>共有10頁,去第<input type="text">頁 <button>確定</button></a>
</div>
</div>
<div class="middle6">
<img src="images4/small_weixin.png">
<div class="middle61">
<p class="middle611">建材檢測 需求反饋</p>
<p>親愛的用戶，我們正在不斷的完善和更新建材庫，</p>
<p>若沒有找到您想要的材料信息，請將您想測的建材告訴我們。</p>
</div>
</div>
</div>
<div class="middle7">
<div class="middle71">
<div class="middle711" >
<div class="middle7111">
<a href="#"><img src="images4/footerLogo.png"></a>
<p>為室內環(huán)境健康把好每一關</p>
<p>家居醫(yī)生致力于中國人的家居健康問題，通過專業(yè)的技術研究</p>
<p>和測評，傾力協(xié)助大眾打造綠色、環(huán)保的人居生活環(huán)境</p>
</div>
<div class="middle7112">
<p>關于我們</p>
<p>聯(lián)系我們</p>
<p>加入我們</p>
</div>
<div class="middle7113">
<p>版權說明</p>
<p>用戶隱私</p>
<p>加入我們</p>
</div>
<div class="middle7114">
<p><img src="images4/weixin2.png">官方微信</p>
<p><img src="images4/tianmao.png">天貓旗艦店</p>
<p><img src="images4/shop.png">有贊商城</p>
</div>
</div>
<div class="middle712">
<p>深圳建筑科學研究院股份有限公司 家居醫(yī)生網 <span>粵ICP備08011321號 @Copyright All Rights Reserved</span></p>
</div>
</div>
</div>
</body>
</html>
float和position是難點，我掌握的很不好，希望自己能多加練習。這個代碼是我目前為止寫的最長的代碼，也許上面有很多錯誤，但我還是要發(fā)出來，因為做這個作業(yè)真的很艱難，但本著不放棄的原則，我還是做出來了，我覺得很有意義。以后遇到難題也不要慫，就是敲，不懂就問，相信自己。
