在上一课中，我们学习了实战项目九-首页的制作，今天来实现其他主要页面：旅游资讯。
练习一：PC端固定布局
地址：http://www.125jz.com/wp-content/demo/20190113demo1.html
练习二：流体移动布局
地址：马上上线
练习三：兼容响应式布局
地址：马上上线
1.导航下方图片及栏目介绍
<div id="headline"> <div class="center"> <hgroup> <h2>旅游资讯</h2> <h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3> </hgroup> </div> </div>
注意学习hgroup的用法。
#headline {
width: 100%;
min-width: 1263px;
height: 300px;
background-color: #000;
background: linear-gradient(to bottom right, rgba(0,0,0,0.7), rgba(0,0,0,0.0)), url(headline.jpg) no-repeat center;
}
#headline .center {
width: 1263px;
height: 300px;
margin: 0 auto;
}
#headline hgroup {
padding: 100px 0 0 50px;
}
#headline h2 {
color: #eee;
font-size: 36px;
letter-spacing: 1px;
}
#headline h3 {
color: #eee;
letter-spacing: 1px;
font-size: 20px;
}
2.侧边栏制作
主内容区分为左侧列表区域和侧边栏，侧边栏我们用aside，主体结构如下
<div id="container">
<aside class="sidebar">
右侧边栏
</aside>
<div class="list information">
列表区域
</div>
</div>
CSS
#container {
width: 1263px;
margin: 30px auto;
}
#container .sidebar {
width: 340px;
float: right;
}
侧边栏又分三个区域：景点推荐、热卖旅游、旅游百宝箱。
景点推荐html
<div class="recommend">
<h2>景点推荐</h2>
<div class="tag">
<ul>
<li><a href="#">曼谷(12)</a></li>
<li><a href="#">东京(5)</a></li>
……
</ul>
</div>
</div>
景点推荐CSS
#container .sidebar h2 {
height: 40px;
line-height: 40px;
font-size: 20px;
font-weight: normal;
letter-spacing: 1px;
color: #666;
text-indent: 10px;
background-color: #fafafa;
border-bottom: 1px solid #eee;
text-align: left;
}
#container .recommend {
border: 1px solid #eee;
margin: 0 0 10px;
}
#container .tag {
text-align: center;
padding: 10px 0;
}
#container .tag li {
display: inline-block;
background-color: #eee;
width: 100px;
height: 35px;
line-height: 35px;
text-indent: 8px;
text-align: left;
margin:2px 0;
}
#container .tag a {
display: block;
color: #999;
}
#container .tag a:hover {
color: #fff;
background-color: #458B00;
}
热卖旅游html
<div class="hot">
<h2>热卖旅游</h2>
<div class="figure">
<figure>
<img src="images/hot1.jpg" alt="曼谷-芭提雅6日游">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="images/hot2.jpg" alt="马尔代夫双鱼6日游">
<figcaption>马尔代夫双鱼6日游</figcaption>
</figure>
……
</div>
</div>
注意<figure>用法
<figure>
<img src="images/hot1.jpg" alt="曼谷-芭提雅6日游">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
热卖旅游CSS
#container .hot {
border: 1px solid #eee;
margin: 0 0 10px;
text-align: center;
}
#container .figure {
padding: 10px 0;
}
#container .hot figure {
display: inline-block;
color: #666;
padding: 4px;
}
旅游百宝箱HTML
<div class="treasure">
<h2>旅游百宝箱</h2>
<div class="box">
<a href="#" class="trea1">天气预报</a>
<a href="#" class="trea2">火车票查询</a>
<a href="#" class="trea3">航空查询</a>
<a href="#" class="trea4">地铁线路查询</a>
</div>
</div>
旅游百宝箱CSS
#container .treasure {
border: 1px solid #eee;
margin: 0 0 10px;
}
#container .box {
text-align: center;
padding: 10px 0;
}
#container .box a {
display: inline-block;
background-color: #eee;
width: 150px;
height: 40px;
line-height: 40px;
text-indent: 35px;
text-align: left;
margin:3px 0;
color: #999;
}
#container .box a.trea1 {
background: #eee url(trea1.png) no-repeat 10px center;
}
#container .box a.trea2 {
background: #eee url(trea2.png) no-repeat 10px center;
}
#container .box a.trea3 {
background: #eee url(trea3.png) no-repeat 10px center;
}
#container .box a.trea4 {
background: #eee url(trea4.png) no-repeat 10px center;
}
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/3193.html
微信扫一扫 
支付宝扫一扫