效果如图：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>钻戒网</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="nav w">
<ul>
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">购物车(0)</a></li>
<li><a href="#">English</a></li>
</ul>
</div>
<div class="header w">
<div class="log">
<img src="./img/logo.png" alt="">
</div>
</div>
<div class="nav2 w">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">品牌文化</a></li>
<li><a href="#">Darry Ring求婚钻戒</a></li>
<li><a href="#">Darry Ring 爱的礼物</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">最新活动</a></li>
</ul>
</div>
<div class="banner">
<a href="#">
<img src="./img/banner.png" alt="">
</a>
</div>
<div class="dahezi">
<div class="input w">
国家/区域: <select>
<option >中国大陆</option>
<option >北京</option>
<option >上海</option>
<option >广州</option>
<option >深圳</option>
<option >西安</option>
<option >杭州</option>
<option >成都</option>
<option >天津</option>
<option >河北</option>
<option >黑龙江</option>
<option >哈尔滨</option>
<option >辽宁</option>
</select>
<span>先生姓名</span> <input type="text">
<span>身份证号码</span> <input type="text">
</div>
</div>
<ul class="tupian w">
<li><a href=""><img src="./img/实体店.png" alt=""></a></li>
<li><img src="./img/关于.png" alt=""></li>
<li><img src="./img/明星.png" alt=""></li>
<li><img src="./img/定制.png" alt=""></li>
</ul>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.w {
width: 1620px;
margin:0 auto;
}
body {
background-color: #ffffff;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;}
.nav li{
float: right;
}
.nav a{
padding-right: 16px;
padding-left: 16px;
}
.nav li a{
font-family: 宋体;
color:#999999;
font-size: 15px;
}
.header{
height: 100px;
}
.header img{
margin-top: 32px;
width: 437px;
height: 60px;
background-color: #fff;
}
.nav2{
float: left;
margin-top: 10px;
width: 1908px;
height: 40px;
background-color: #ffdede;
}
.nav2 ul{
margin-left: 71px;
}
.nav2 li{
float: left;
margin-left: 90px;
}
.nav2 li a{
font-family: 微软雅黑;
font-size: 16px;
line-height: 40px;
color: #95604b;
}
.dahezi{
width: 1908px;
height: 2025px;
background-color:#ffdede;
}
.input{
height: 60px;
background-color: #fdf8f5;
font-size: 20px;
color:#95604b;
line-height: 55px;
padding-left: 100px;
}
.input select{
vertical-align: middle;
width: 120px;
height: 35px;
font-size: 18px;
}
.input span{
padding-left: 160px;
vertical-align: middle;
}
.input input{
vertical-align: middle;
width: 258px;
height: 35px;
background-color: #fff;
vertical-align: middle;
}
.tupian li{
float: left;
width: 380px;
height: 256px;
background-color: green;
margin-left: 33px;
}
.tupian li:first-child{
margin-left:0;
}
.tupian a{
float: left;
}
.tupian li img{
width: 380px;
height: 192px;
}