本文介绍了一个模仿自特定网站的旅行主题网页设计案例，该案例重点展示了响应式布局与交互设计的应用，包括不同屏幕尺寸下的布局调整及鼠标交互效果。
本次实现的动态响应主要有
1. 页面布局随着显示宽度的大小变化而发生调整 此实现基于学堂在线课程所讲解的媒体查询（media query）
2. 将鼠标放在或者点击某些元素会出现一些效果，利用伪类选择器实现，比如鼠标悬停时的动画效果
网页的除时间轴部分，均参考自：http://qhucl245.ip2g55.tumm.top/original/bootstrap/（网页加载可能较慢）
这是根据原网页一些效果模仿后的网页：http://qhucl245.ip2g55.tumm.top/second/
码云链接：https://gitee.com/chenlang1314/codes/vzjktgo4ae06bldr1inmh17
原网站效果截图：
模仿效果截图：
html代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Traveling</title> 7 <link rel="shortcut icon" href="./favicon.png" /> 8 <link href="css/templatemo_style.css" rel="stylesheet"> 9 </head> 10 <body> 11 <div class="banner" id="templatemo_banner_slide"> 12 <ul> 13 <li class="templatemo_banner_slide_01"> 14 <div class="slide_caption"> 15 <h1>我的最爱</h1> 16 <p>旅行，其实是需要具有一些流浪精神的，这种精神使人能在旅行中和大自然更加接近，悠然享受和大自然融合之乐。旅行，有一种苍凉，“浮云游子意，落日故人情”，孑然一身，隐入苍茫自然，自有一种孤独的意味；旅行，更有一种逍遥，浑然忘我，与大自然交融的境界令人心弛神往。</p> 17 </div> 18 </li> 19 </ul> 20 </div> 21 22 <div id="templatemo_mobile_menu"> 23 <ul class="nav nav-pills nav-stacked"> 24 <li><a href="#templatemo_banner_slide"><i class="glyphicon glyphicon-home"></i> Home</a></li> 25 <li><a href="#templatemo_about"><i class="glyphicon glyphicon-briefcase"></i> About</a></li> 26 <li><a href="#templatemo_events"><i class="glyphicon glyphicon-bullhorn"></i> Events</a></li> 27 <li><a href="#templatemo_timeline"><i class="glyphicon glyphicon-calendar"></i> Timeline</a></li> 28 29 </ul> 30 </div> 31 <div class="container_wapper"> 32 <div id="templatemo_banner_menu"> 33 <div class="container-fluid"> 34 <div class="col-xs-4 templatemo_logo"> 35 <a rel="nofollow" href="https://www.cnblogs.com/CLFTing/" target="_blank"> 36 <img src="images/templatemo_logo.jpg" id="logo_img" alt="dragonfruit free html5 template" /> 37 <h1 id="logo_text">Lang<span>.com</span></h1> 38 </a> 39 </div> 40 <div class="col-sm-8 hidden-xs"> 41 <ul class="nav nav-justified"> 42 <li><a href="#templatemo_banner_slide">首页</a></li> 43 <li><a href="#templatemo_events">景点</a></li> 44 <li><a href="#templatemo_timeline">推荐路线</a></li> 45 </ul> 46 </div> 47 <div class="col-xs-8 visible-xs"> 48 <a href="#" id="mobile_menu"><span class="glyphicon glyphicon-th-list"></span></a> 49 </div> 50 </div> 51 </div> 52 </div> 53 <div class="copyrights">Powered by<a href="http://www.cssmoban.com/" >QHU</a></div> 54 55 56 <div id="templatemo_events" class="container_wapper"> 57 <div class="container-fluid"> 58 <h1>景点</h1> 59 <div class="col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-0"> 60 <div class="event_box_wap event_animate_left"> 61 <div class="event_box_img"> 62 <img src="images/templatemo_event_01.jpg" class="img-responsive" alt="Web Design Trends" /> 63 </div> 64 <div class="event_box_caption"> 65 <h1>安徽旅游</h1> 66 <p><span class="glyphicon glyphicon-map-marker"></span> 安徽安庆 <span class="glyphicon glyphicon-time"></span> 4月 到 6月 </p> 67 <p>安徽是一大旅游的好地方，4月到6月是绝佳的旅游时机，具体好在哪里，我也不知道。安徽大地锦绣多姿，文化古迹甚多，安徽是中国旅游资源最丰富的省份之一。</p> 68 </div> 69 </div> 70 </div> 71 <div class="col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-0"> 72 <div class="event_box_wap event_animate_right"> 73 <div class="event_box_img"> 74 <img src="images/templatemo_event_02.jpg" class="img-responsive" alt="Free Bootstrap Seminar" /> 75 </div> 76 <div class="event_box_caption"> 77 <h1>河南旅游</h1> 78 <p><span class="glyphicon glyphicon-map-marker"></span> 河南 <span class="glyphicon glyphicon-time"></span> 5月 到 6月 </p> 79 <p>河南是一大旅游的好地方，5月到6月是绝佳的旅游时机，具体好在哪里，我也不知道，请自行查阅相关资料</p> 80 </div> 81 </div> 82 </div> 83 <div class="clearfix"></div> 84 <div class="col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-0"> 85 <div class="event_box_wap event_animate_left"> 86 <div class="event_box_img"> 87 <img src="images/templatemo_event_03.jpg" class="img-responsive" alt="" /> 88 </div> 89 <div class="event_box_caption"> 90 <h1>湖北旅游</h1> 91 <p><span class="glyphicon glyphicon-map-marker"></span> 湖北仙桃 <span class="glyphicon glyphicon-time"></span> 7月 到 8月 </p> 92 <p>湖北是中国中部的一个省，在东周时期存在的强大的楚国之后，有着名的“楚”。悠久灿烂的历史赋予了该省丰富的文化景点，包括黄鹤楼，荆州城墙，明代仙陵陵墓和武当山古建筑群</p> 93 </div> 94 </div> 95 </div> 96 <div class="col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-0"> 97 <div class="event_box_wap event_animate_right"> 98 <div class="event_box_img"> 99 <img src="images/templatemo_event_04.jpg" class="img-responsive" alt="" /> 100 </div> 101 <div class="event_box_caption"> 102 <h1>旅游</h1> 103 <p><span class="glyphicon glyphicon-map-marker"></span> 四川南充 <span class="glyphicon glyphicon-time"></span> 11月 到 12月</p> 104 <p>四川好玩的景点有很多：像九寨沟、黄龙景区、阆中古城、若尔盖草原等等。她们主要就是做品质自由行，全程很注重品质</p> 105 </div> 106 </div> 107 </div> 108 </div> 109 </div> 110 <div id="templatemo_timeline" class="container_wapper"> 111 <h1>安徽旅游推荐路线</h1> 112 <div class="container-fluid"> 113 <div class="time_line_wap"> 114 <div class="time_line_caption">第一天</div> 115 <div class="time_line_paragraph"> 116 <h1>黄山 </h1> 117 <p> 118 <span class="glyphicon glyphicon-user"></span> <a href="#">旅游办陈总</a> 119 <span class="glyphicon glyphicon-bookmark"></span> <a href="#">联系</a> 120 <span class="glyphicon glyphicon-edit"></span> <a href="#">3 评论</a> 121 </p> 122 <p>黄山雄踞于中国安徽省南部，是蜚声中外的旅游胜地，黄山与黄河、长江、长城齐名，成为中华民族的又一象征。1990年12月被联合国教科文组织列入“世界文化与自然遗产”名录，令世人神往。以“奇松、怪石、云海、温泉”四绝而闻名于世。她是中国十大风景名胜中唯一的山岳风景区，作为中国山之代表，黄山集中国名山之大成，自古就有“五岳归来不看山，黄山归来不看岳”的说法。黄山还兼有“天然动物园和天下植物园”之称</p> 123 </div> 124 </div> 125 <div class="time_line_wap"> 126 <div class="time_line_caption">第三天</div> 127 <div class="time_line_paragraph"> 128 <h1>宏村</h1> 129 <p> 130 <span class="glyphicon glyphicon-user"></span> <a href="#">旅游办王总</a> 131 <span class="glyphicon glyphicon-bookmark"></span> <a href="#">联系</a> 132 <span class="glyphicon glyphicon-edit"></span> <a href="#">2 评论</a> 133 </p> 134 <p>宏村，位于黄山南麓黟县东北部，是古黟桃花源里一座奇特的牛形水系古村落，被誉为“中国画里乡村”。南宋绍兴年间，宏村人独具匠心开仿生学之先河，建造出堪称“中国一绝”的人工水系村落</p> 135 </div> 136 </div> 137 <div class="time_line_wap"> 138 <div class="time_line_caption">第六天</div> 139 <div class="time_line_paragraph"> 140 <h1>九华山</h1> 141 <p> 142 <span class="glyphicon glyphicon-user"></span> <a href="#">旅游凡总</a> 143 <span class="glyphicon glyphicon-bookmark"></span> <a href="#">联系</a> 144 <span class="glyphicon glyphicon-edit"></span> <a href="#">3 评论</a> 145 </p> 146 <p>九华山位于安徽省池州市境内，是以佛教文化和自然与人文胜景为特色的山岳型国家级风景名胜区，是中国佛教四大名山之一、国家首批5A级旅游景区、国家首批自然与文化双遗产地，安徽省“两山一湖”</p> 147 </div> 148 </div> 149 <div class="time_line_wap"> 150 <div class="time_line_caption">第九天</div> 151 <div class="time_line_paragraph"> 152 <h1>黄山市古徽州文化旅游区</h1> 153 <p> 154 <span class="glyphicon glyphicon-user"></span> <a href="#">旅游办党总</a> 155 <span class="glyphicon glyphicon-bookmark"></span> <a href="#">联系</a> 156 <span class="glyphicon glyphicon-edit"></span> <a href="#">6 评论</a> 157 </p> 158 <p>古徽州文化旅游区位于徽文化发祥地安徽省黄山市，由徽州古城、牌坊群鲍家花园、唐模、潜口民宅、呈坎五大精品景区组成，北依黄山，南接千岛湖。徽州古城是徽州府治所在地，是保存最为完好的中国四大古城之一。</p> 159 </div> 160 </div> 161 <div class="time_line_wap"> 162 <div class="time_line_caption">第十二天</div> 163 <div class="time_line_paragraph"> 164 <h1>龙川风景名胜区</h1> 165 <p> 166 <span class="glyphicon glyphicon-user"></span> <a href="#">旅游办王总</a> 167 <span class="glyphicon glyphicon-bookmark"></span> <a href="#">联系</a> 168 <span class="glyphicon glyphicon-edit"></span> <a href="#">4 评论</a> 169 </p> 170 <p>龙川是坑口村古称，村前有龙须山，村中有一条小溪(称川)穿村而过，古称龙川。后人认为小溪(又称坑)出口流入登源大河，龙可以畅溪，故改为坑口。这个传说至今仍在百姓中流传。距绩溪县城约10公里，是一个古老的徽州村落。</p> 171 </div> 172 </div> 173 <div class="time_line_wap"> 174 <div class="time_line_caption">第15天</div> 175 <div class="time_line_paragraph"> 176 <h1>徽州古城</h1> 177 <p> 178 <span class="glyphicon glyphicon-user"></span> <a href="#">旅游办马总</a> 179 <span class="glyphicon glyphicon-bookmark"></span> <a href="#">联系</a> 180 <span class="glyphicon glyphicon-edit"></span> <a href="#">5 评论</a> 181 </p> 182 <p>徽州古城——坐落在国家历史文化名城歙县县城徽城镇中心，千年徽州府治所在地，主体建筑有仁和楼、得月楼、茶楼、惠风石坊、徽园第一楼、过街楼、古戏楼等以及镶嵌其间的古色古香商品住宅楼百余间，是展示和体现徽州文化的重要实物建筑。徽州“一府六县”格局始于唐大历五年（770年）。</p> 183 </div> 184 </div> 185 </div> 186 </div> 187 188 <div id="templatemo_footer"> 189 <div> 190 <p>Copyright © CL 谢谢观赏</p> 191 </div> 192 </div> 193 194 </body> 195 </html>
css代码：
1 body { 2 font-family: 'Century Gothic', sans-serif; 3 } 4 .container-fluid { 5 max-width: 1600px; 6 } 7 .container_wapper { 8 width: 100%; 9 background: #c0c0c0; 10 } 11 .rcolor { 12 background: #f00; 13 } 14 .gcolor { 15 background: #0f0; 16 } 17 .bcolor { 18 background: #00f; 19 } 20 h1 { 21 margin-top: 60px; 22 margin-bottom: 60px; 23 text-align: center; 24 font: normal normal normal 34px/60px 'Century Gothic', sans-serif; 25 color: #3b3b3b; 26 } 27 28 .templatemo_logo a:hover { 29 text-decoration: none; 30 } 31 /*菜单样式*/ 32 #templatemo_mobile_menu { 33 top: 0; 34 width: 250px; 35 height: 100%; 36 background: #f9f9f9; 37 position: fixed; 38 z-index: 5500; 39 right: -1500px; 40 display: none; 41 overflow: auto; 42 } 43 #templatemo_mobile_menu ul li a { 44 text-align: left; 45 background: #f15556; 46 color: #000; 47 } 48 #templatemo_mobile_menu ul li:hover a { 49 background: #c83233; 50 color: #fff; 51 } 52 #templatemo_banner_menu { 53 width: 100%; 54 background: #f9f9f9; 55 height: 94px; 56 border-bottom: 1px solid #f15556; 57 position: fixed; 58 top: 0; 59 z-index: 5000; 60 } 61 #templatemo_banner_menu #logo_img { 62 max-height: 90px; 63 float: left; 64 } 65 #templatemo_banner_menu #logo_text { 66 font: normal normal normal 36px/1em 'Century Gothic', sans-serif; 67 margin-top: 30px; 68 padding-left: 60px; 69 text-align: left; 70 color: #e35354; 71 } 72 #templatemo_banner_menu #logo_text span { 73 color: #9fb038; 74 } 75 76 #templatemo_banner_menu ul li a:hover , 77 #templatemo_banner_menu ul li a.current 78 { 79 background-position: 0 0px ; 80 background-color: #f15556; 81 color: #ffffff; 82 } 83 #templatemo_banner_menu #mobile_menu { 84 padding-top: 25px; 85 font-size: 30px; 86 float: right; 87 color: #e35354; 88 } 89 /*景点栏目的样式*/ 90 #templatemo_events { 91 background: #6698b5; 92 float: left; 93 overflow: hidden; 94 } 95 #templatemo_events h1{ 96 color: #fff; 97 } 98 #templatemo_events .event_box_wap { 99 overflow:hidden; 100 margin-bottom: 30px; 101 cursor: pointer; 102 position: relative; 103 } 104 #templatemo_events .event_box_wap .event_box_img { 105 position: relative; 106 top: 0; 107 } 108 #templatemo_events .event_box_wap .event_box_caption { 109 position: relative; 110 top: 0; 111 padding-bottom: 10px; 112 background: #fff; 113 width: 100%; 114 border-top: 3px solid #3c6f8c; 115 } 116 #templatemo_events .event_box_wap h1, 117 #templatemo_events .event_box_wap p { 118 margin: 0; 119 color: #000000; 120 text-align: left; 121 } 122 #templatemo_events .event_box_wap p { 123 padding: 5px 20px 15px 20px; 124 } 125 #templatemo_events .event_box_wap h1 { 126 padding: 20px 20px 20px 20px; 127 font-size: 24px; 128 line-height: 24px; 129 } 130 /*推荐路线的css样式*/ 131 #templatemo_timeline { 132 background: #fff; 133 float: left; 134 } 135 #templatemo_timeline .container-fluid { 136 max-width: 1600px; 137 position: absolute; 138 margin: auto; 139 margin-bottom: 80px; 140 background: url("../images/time_line_bg.jpg") repeat-y center top; 141 } 142 #templatemo_timeline .time_line_wap { 143 position: absolute; 144 display: none; 145 } 146 #templatemo_timeline .time_line_caption { 147 background: #f15556; 148 padding: 10px 20px 10px 20px ; 149 border-radius: 5px; 150 height: 40px; 151 clear: both; 152 color: #fff; 153 } 154 #templatemo_timeline .time_line_paragraph { 155 background: #e6e6e6; 156 padding: 10px; 157 border-radius: 5px; 158 width: 100%; 159 margin-top: 50px; 160 font-family: 'Century Gothic', sans-serif; 161 } 162 #templatemo_timeline .time_line_paragraph a { 163 color: #000; 164 text-decoration: underline; 165 } 166 #templatemo_timeline .left_timeline { 167 margin-left: 30px; 168 } 169 #templatemo_timeline .left_timeline .time_line_caption { 170 float: right; 171 margin-right: 0px; 172 } 173 #templatemo_timeline .right_timeline .time_line_caption { 174 float: left; 175 } 176 #templatemo_timeline .time_line_paragraph h1 { 177 text-align: left; 178 margin: 0; 179 font-size: 24px; 180 line-height: 30px; 181 color: #000; 182 padding: 20px 20px 20px 20px; 183 } 184 #templatemo_timeline .time_line_paragraph p { 185 padding: 0px 20px 20px 20px; 186 text-align: left; 187 margin: 0; 188 font-size: 14px; 189 line-height: 2em; 190 color: #000; 191 } 192 #templatemo_timeline .left_timer { 193 float: right; 194 background: url("../images/arrow_left.png") 0 5px; 195 } 196 #templatemo_timeline .right_timer { 197 float: left; 198 background: url("../images/arrow_right.png") 0px 5px; 199 } 200 #templatemo_timeline .left_timer , 201 #templatemo_timeline .right_timer { 202 padding-left:30px; 203 width: 101px; 204 position: absolute; 205 } 206 #templatemo_timeline .left_timer span, 207 #templatemo_timeline .right_timer span { 208 border-radius: 20px; 209 width: 30px; 210 height: 30px; 211 background: #e6e6e6; 212 text-align: center; 213 color: #fff; 214 font-size: 24px; 215 padding-top: 3px; 216 margin-top: 3px; 217 } 218 219 /*网页底部的样式*/ 220 #templatemo_footer { 221 width: 100%; 222 border-top: 2px solid #507f9a; 223 height: 70px; 224 background: #447693; 225 float: left; 226 } 227 #templatemo_footer p { 228 padding-top: 20px; 229 color: #fff; 230 text-align: center; 231 } 232 #templatemo_footer a { 233 color: #fff; 234 text-decoration: underline; 235 } 236 /* Small devices (tablets, 768px and up) */ 237 @media (max-width: 768px ) { 238 #templatemo_about .pre_next { 239 font-size: 15px; 240 } 241 #templatemo_timeline .right_timer { 242 background-position: center center; 243 } 244 } 245 /* Medium devices (desktops, 992px and up) */ 246 @media (max-width: 970px ) { 247 #templatemo_timeline .right_timer { 248 background-position: 100px 5px; 249 } 250 #templatemo_banner_menu #logo_text { 251 font: normal normal normal 30px/1em 'Century Gothic', sans-serif; 252 } 253 #templatemo_timeline .container-fluid { 254 background: url("../images/time_line_bg.jpg") repeat-y 28px 0; 255 } 256 } 257 /* Large devices (large desktops, 1200px and up) */ 258 @media (min-width: 1200px ) { 259 }
扫一扫
1225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
