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>发布时间<img src="images4/downicon.png">价格<img src="images4/upicon.png">环保节能<img src="images4/upicon.png"></a>
</div>
<div class="middle33">
<a><img src="images4/wenhao.png">了解家居医生建材环保评级标准</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>环保评级： 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>环保评级： 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>环保评级： 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>环保评级： 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>环保评级： 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>环保评级： 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>环保评级： 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>环保评级： 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>为室内环境健康把好每一关</p>
<p>家居医生致力于中国人的家居健康问题，通过专业的技术研究</p>
<p>和测评，倾力协助大众打造绿色、环保的人居生活环境</p>
</div>
<div class="middle7112">
<p>关于我们</p>
<p>联系我们</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>深圳建筑科学研究院股份有限公司 家居医生网 <span>粤ICP备08011321号 @Copyright All Rights Reserved</span></p>
</div>
</div>
</div>
</body>
</html>
float和position是难点，我掌握的很不好，希望自己能多加练习。这个代码是我目前为止写的最长的代码，也许上面有很多错误，但我还是要发出来，因为做这个作业真的很艰难，但本着不放弃的原则，我还是做出来了，我觉得很有意义。以后遇到难题也不要怂，就是敲，不懂就问，相信自己。
网友评论