昨天最后一课的作业:按照ps图完成代码
style
* {
margin: 0;
padding: 0;
}
.clear {
clear: both;
}
.fl {
float: left;
}
.fr {
float: right;
}
.box {
width: 1920px;
margin: auto;
}
.top {
width: 1200px;
height: 72px;
margin: auto;
}
.logo {
width: 126px;
height: 72px;
}
.nav {
width: 604px;
height: 72px;
text-align: center;
margin-left: 159px;
}
.nav>li {
list-style: none;
width: 80px;
height: 72px;
line-height: 72px;
float: left;
margin-right: 23px;
}
.first {
background-color: #5696ff;
color: #fefeff;
}
.button {
color: #3c3d46;
line-height: 72px;
font-size: 18px;
font-family: 微软雅黑;
}
.main_pic {
height: 600px;
background: url(../img/main_pic.jpg) no-repeat center;
position: relative;
}
.pic_pot1 {
position: absolute;
left: 935px;
bottom: 29px;
}
.pic_pot2 {
position: absolute;
left: 970px;
bottom: 29px;
}
.research {
width: 1200px;
height: 170px;
margin: auto;
}
.intro {
margin: auto;
width: 327px;
height: 82px;
}
.intro_top {
margin: auto;
width: 327px;
height: 36px;
}
.intro_top>p {
color: #3c3d46;
line-height: 36px;
font-size: 36px;
float: left;
margin-left: 14px;
color: #5696ff;
font-family: 微软雅黑;
}
.left,
.right {
width: 79px;
height: 7px;
background-color: #666666;
margin-top: 14px;
}
.intro_bottom>p {
margin-top: 22px;
font-size: 22px;
color: #666666;
text-align: center;
font-family: 微软雅黑;
}
body
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这是我的titile</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="box">
<div class="top">
<div class="logo fl">
<img src="img/logo.png" style="float: left;margin-top: 7px;">
<img src="img/logo_name.png" style="margin-left: 8px; float: left;margin-top: 21px;">
<div class="clear"></div>
</div>
<ul class="nav fl">
<li class="first">
<p>首页</p>
</li>
<li>
<p>地区</p>
</li>
<li>
<p>特惠</p>
</li>
<li>
<p>资讯</p>
</li>
<li>
<p>游记</p>
</li>
</ul>
<span class="button fr">登录 | 注册</span>
<div class="clear"></div>
</div>
<div class="main_pic">
<img class="pic_pot1" src="img/pot1.png">
<img class="pic_pot2" src="img/pot2.png">
</div>
<div class="research">
</div>
<div class="intro">
<div class="intro_top">
<div class="left fl"></div>
<p>地区旅游</p>
<div class="right fr"></div>
<div class="clear"></div>
</div>
<div class="intro_bottom">
<p>从这开始有意思的地方</p>
</div>
</div>
</div>
</body>
</html>