iphone 6/7/8
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>项目二，百度导航界面</title>
<style type="text/css">
/* 所有边距位0 */
* {
margin: 0px;
padding:0px;
}
/* loge框 */
.loge {
height: 50px;
margin: 10px;
}
/* 搜索框 */
.shouSuo {
height: 30px;
}
/* 输入框*/
.shuRuKuang {
height: 26px;
width: 240px;
float:left;
}
/* 按钮 */
.anNiu {
height: 28px;
width:128px;
float: left;
margin: 0px 0px 0px 5px;
border-radius: 9px;
}
/* 导航 */
.daoHang {
height: 25px;
background-color: pink;
font-size:18px;
}
.a{
padding-left: 50px;
}
.DangHangZi li{
list-style-type: none;
display: inline-block;
float: left;
margin: 0px 10px;
}
/* 厂商框 */
.changShang {
height: 156px;
margin: 5px 10px;
}
.diYiGe,
.diErGe,
.diSanGe,
.diSiGe {
height: 70px;
width: 40px;
margin: 5px 15px 5px 15px;
float: left;
border-bottom: solid 1px black;
font-size:14px;
}
/* 新闻框 */
.xinWen {
height: 40px;
margin: 5px 10px;
}
.L1 li {
list-style-type: none;
display: block;
float: left;
margin: 10px 19px ;
font-family:"宋体";
font-size:15px;
}
/* 财经框 */
.caiJing {
height: 40px;
margin: 5px 10px;
}
/* 汽车板块 */
.qiChe {
height: 40px;
margin: 5px 10px 30px;
}
/* 板块信息 */
.banQuan {
height: 20.6667px;
margin: 10px;
}
</style>
</head>
<body>
<!-- loge界面 -->
<div class="loge">
<center>
<img src="logo.png" height="55px" width="50%" title="百度一下你就知道"/>
</center>
</div>
<!-- 搜索页面 -->
<div class="shouSuo">
<input type="text" class="shuRuKuang" />
<input type="button" value="百度一下" class="anNiu" />
</div>
<!-- 导航界面 -->
<div class="daoHang">
<center>
<!-- 使用ul li 技术实现导航 -->
<ul class="DangHangZi">
<li class="a">首页</li>
<li>新闻</li>
<li>体育</li>
<li>娱乐</li>
<li>导航</li>
</ul>
</center>
</div>
<!-- 这里放的是别的软件的图标 -->
<div class="changShang">
<div class="diYiGe">
<img src="baidu.png" width="40px" height="40px" />
<center>
京东
</center>
</div>
<div class="diErGe">
<img src="fwangyi.png" width="40px" height="40px" />
<center>
苏宁
</center>
</div>
<div class="diSanGe">
<img src="fsina.png" width="40px" height="40px" />
<center>
芒果
</center>
</div>
<div class="diSiGe">
<img src="ftaobao.png" width="40px" height="40px" />
<center>
唯品
</center>
</div>
<div class="diSiGe">
<img src="项目二img/img/ftianmao.png" width="40px" height="40px" />
<center>
猎聘
</center>
</div>
<div class="diYiGe">
<img src="项目二img/img/f58.png" width="40px" height="40px" />
<center>
58
</center>
</div>
<div class="diErGe">
<img src="项目二img/img/ftrip.png" width="40px" height="40px" />
<center>
同城
</center>
</div>
<div class="diSanGe" style=" height: 70px;
width: 42px;
margin: 5px 15px 5px 15px;
float: left;
border-bottom: solid 1px black;
font-size:14px;">
<img src="项目二img/img/fshop.png" width="40px" height="40px" />
<center>
赶集网
</center>
</div>
<div class="diSiGe" style=" height: 70px;
width: 42px;
margin: 5px 15px 5px 15px;
float: left;
border-bottom: solid 1px black;
font-size:14px;">
<img src="项目二img/img/hotel.png" width="40px" height="40px" />
<center>
房天下
</center>
</div>
<div class="diSiGe" style=" height: 70px;
width: 42px;
margin: 5px 0px 5px 10px;
float: left;
border-bottom: solid 1px black;
font-size:14px;">
<img src="项目二img/img/800.png" width="40px" height="40px" />
<center>
折800
</center>
</div>
</div>
<!-- 这是新闻模块 -->
<div class="xinWen">
<ul class="L1">
<li>新闻</li>
<li style="margin:10px 9px;">房产资讯</li>
<li style="margin:10px 15px;">新浪</li>
<li style="margin:10px 23px;">网易</li>
<li>腾讯</li>
</ul>
</div>
<!-- 这是财经模块 -->
<div class="caiJing">
<ul class="L1">
<li>财经</li>
<li style="margin:10px 24px;">东方</li>
<li style="margin:10px 16px;">和讯</li>
<li style="margin:10px 21px;">新浪</li>
<li>凤凰</li>
</ul>
</div>
<!-- 这是汽车模块 -->
<div class="qiChe">
<ul class="L1">
<li>汽车</li>
<li style="margin:10px 5px 10px 13px;">二手车</li>
<li style="margin:10px 3px 10px 13px;">新浪汽车</li>
<li style="margin:10px 5px 10px 11px;">汽车之家</li>
<li style="margin:10px 5px 10px 10px;">太平洋</li>
</ul>
</div>
<!-- 这是底部的信息 -->
<div class="banQuan">
<center style="font-size:10px;">
Copyright @ 2016 baidu.com
</center>
</div>
</body>
</html>
