HTML5+CSS3移动Web开发实战 单元3 旅游景点推荐网页设计
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
序号 01 02 03 04 05 06 HTML 代码 <body> <header class="m-head"> <section class="mdd_sea"> <nav class="mdd_menu"> <section class="mdd_con"> </body> </header> </section> </nav> </section>
续表
序号 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 HTML 代码 <ul> <li><em></em><a href="#" class="on">推荐</a></li> <li><em></em><a href="#" class="">国内</a></li> <li><em></em><a href="#" class="">国际</a></li> </ul> </nav> <section class="mdd_con"> <div class="mdd_box"> <div class="mdd_tit"> <span> <strong style="font-size:16px;font-weight:normal;">诗情画意</strong> ， 山水中的彩墨美学 </span> </div> <div class="slider-wrapper"> <ul class="mdd_silde"> <li><a href="/mdd/10825"> <img class="lazy" data-url="" src="images/04.jpeg" /><span>宏村</span></a></li> <li><a href="/mdd/10445"> <img class="lazy" data-url=" " src="images/01.jpeg" /><span>千岛湖</span></a></li> </ul> <ul class="mdd_silde"> <li><a href="/mdd/12702"> <img class="lazy" data-url=" " src="images/03.jpeg" /><span>武功山</span></a></li> <li><a href="/mdd/12491"> <img class="lazy" data-url=" " src="images/02.jpeg" /><span>霞浦</span></a></li> </ul> </div> </div> <div class="mdd_box"> <div class="mdd_tit"> <span> <strong style="font-size:16px;font-weight:normal;">一朝花枝俏</strong> ， 且行且趁早 </span> </div> <div class="slider-wrapper"> <ul class="mdd_silde"> <li><a href="/mdd/10045"> <img class="lazy" data-url=" " src="images/06.jpeg" /><span>婺源</span></a></li> <li><a href="/mdd/10133"> <img class="lazy" data-url=" " src="images/07.jpeg" /><span>武汉</span></a></li> </ul> </div> </div> </section> </body> </html>
网页0301.html第一和第二部分的CSS代码如表3-5所示。
表3-5 网页0301.html第一和第二部分的CSS代码
序号 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 CSS 代码 .m-head a.btn { width: 50px; height: 50px; display: table-cell; background: url(../images/i_head4.png) no-repeat; background-size: 100px 300px } .m-head a.back { background-position: 0 0 } .m-head .bar-c { display: table-cell; text-align: center; line-height: 0; font-size: 12px; vertical-align: top } .m-head h1 { font-size: 18px; color: #f29406; display: inline-block; height: 50px; line-height: 50px; vertical-align: top; margin-left: 50px; font-weight: bold; } .m-head .bar-r { width: 30px; display: table-cell; padding: 10px 9px 0 0; overflow: hidden; vertical-align: top } 序号 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 CSS 代码 .m-head a.message { background-position: 0 -100px } .m-head a.ka { width: 30px; height: 30px; padding-left: 10px; position: absolute; border: 0; line-height: 30px; color: #fff; right: 0; top: 10px; display: inline-block; font-size: 12px; background-color: #23a9f8; border-radius: 15px 0 0 15px; margin-right: 5px; } .mdd_sea { background-color: #ededed; padding: 8.5px 10px; position: relative } .mdd_sea input { padding: 7.5px 0; width: 100%; border: 0; font-size: 15px; color: #666; background: #fff url(../images/hotel_sprite4.png) -62px 9px no-repeat; background-size: 240px 250px; border-radius: 4px; text-indent: 25px }
单元 3 旅游景点推荐网页设计
旅游网站的景点推荐网页通常会运用大量图片，以使网页变得 更加生动活泼、更加引人入胜。本单元通过对旅游网站的旅游目的 地推荐网页和景点推荐网页设计的探析与训练，重点讲解HTML5中 的图像标签、CSS的背景设置、图像透明度设置等内容。读者应学会 在网页中合理地插入图像和应用图片设计景点推荐网页的方法。
2．网页0301.html的CSS代码探析 网页0301.html通用的CSS代码如表3-3所示。
表3-3 网页0301.html通用的CSS代码
序号 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 CSS 代码 body,ul,p,h1,h2,h3,li,input,textarea,button { margin: 0; padding: 0; word-break: break-all } body { text-align: left; font-family: Arial,Helvetica,sans-serif; background-color: #FFF; font-size-adjust: none; -webkit-text-size-adjust: none } a,a:visited { text-decoration: none; color: #666; outline: 0 } 序号 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 CSS 代码 input,textarea { -webkit-appearance: none; -webkit-border-radius: 0 } ul,li,dl,dt,dd { list-style: none } em,i { font-style: normal } img { vertical-align: middle } ul,li,dl,dt,dd { list-style: none }
网页0301.html主体结构的HTML代码如表3-2所示。该网页主 体结构包括4个组成部分，其中，第一部分使用<header>标签实现， 第二部分使用<section>标签实现，第三分部使用<nav>标签实现， 第四部分使用<section>标签实现。
表3-2 网页01.html主体结构的HTML代码
网页0301.html主体结构的CSS代码如表3-4所示。
表3-4 网页0301.html主体结构的CSS代码
序号 01 02 03 04 05 06 07 08 09 10 11 12 CSS 代码 .m-head { width: 100%; height: 50px; border-bottom: 1px solid #f29406; display: table; position: relative } .mdd_sea { background-color: #ededed; padding: 8.5px 10px; position: relative } 序号 13 14 15 16 17 18 19 20 21 22 23 24 CSS 代码 .mdd_menu { height: 43px; background-color: #fff; border-bottom: solid 1px #c8c8c8; overflow: hidden; white-space: nowrap } .mdd_con { width: 100%; overflow: hidden }
1．网页0301.html的HTML代码探析 网页0301.html的HTML代码如表3-1所示。
图3-1 蚂蜂窝的推荐旅游目的地网页0301.html的浏览效果
表3-1 网页0301.html的HTML代码
序号 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 HTML 代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>旅游目的地精选－蚂蜂窝</title> <meta name="description" content="蚂蜂窝让你的旅行更精彩！" /> <meta name="keywords" content="目的地,旅游攻略,最佳旅游目的地" /> <link href="css/common.css" rel="stylesheet" type="text/css" /> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <header class="m-head"> <a class="btn back" href="/" id="head_return_btn"></a> <div class="bar-c"> <h1>推荐旅游目的地</h1> </div> <a class="btn message" href="#"></a> <div class="bar-r"> <a href="/login.php?s=1" id="btn_card" class="nav ka">打卡</a> </div> </header> <section class="mdd_sea"> <div class="searcher"> <input type="search" name="q" autocomplete="on" id="mdd_search_box_new" placeholder="搜索你想去的地方" /> </div> </section> <nav class="mdd_menu">
续表
序号 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 HTML 代码 <ul> <li><em></em><a href="#" class="on">推荐</a></li> <li><em></em><a href="#" class="">国内</a></li> <li><em></em><a href="#" class="">国际</a></li> </ul> </nav> <section class="mdd_con"> <div class="mdd_box"> <div class="mdd_tit"> <span> <strong style="font-size:16px;font-weight:normal;">诗情画意</strong> ， 山水中的彩墨美学 </span> </div> <div class="slider-wrapper"> <ul class="mdd_silde"> <li><a href="/mdd/10825"> <img class="lazy" data-url="" src="images/04.jpeg" /><span>宏村</span></a></li> <li><a href="/mdd/10445"> <img class="lazy" data-url=" " src="images/01.jpeg" /><span>千岛湖</span></a></li> </ul> <ul class="mdd_silde"> <li><a href="/mdd/12702"> <img class="lazy" data-url=" " src="images/03.jpeg" /><span>武功山</span></a></li> <li><a href="/mdd/12491"> <img class="lazy" data-url=" " src="images/02.jpeg" /><span>霞浦</span></a></li> </ul> </div> </div> <div class="mdd_box"> <div class="mdd_tit"> <span> <strong style="font-size:16px;font-weight:normal;">一朝花枝俏</strong> ， 且行且趁早 </span> </div> <div class="slider-wrapper"> <ul class="mdd_silde"> <li><a href="/mdd/10045"> <img class="lazy" data-url=" " src="images/06.jpeg" /><span>婺源</span></a></li> <li><a href="/mdd/10133"> <img class="lazy" data-url=" " src="images/07.jpeg" /><span>武汉</span></a></li> </ul> </div> </div> </section> </body> </html>
网页0301.html第一和第二部分的CSS代码如表3-5所示。
表3-5 网页0301.html第一和第二部分的CSS代码
序号 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 CSS 代码 .m-head a.btn { width: 50px; height: 50px; display: table-cell; background: url(../images/i_head4.png) no-repeat; background-size: 100px 300px } .m-head a.back { background-position: 0 0 } .m-head .bar-c { display: table-cell; text-align: center; line-height: 0; font-size: 12px; vertical-align: top } .m-head h1 { font-size: 18px; color: #f29406; display: inline-block; height: 50px; line-height: 50px; vertical-align: top; margin-left: 50px; font-weight: bold; } .m-head .bar-r { width: 30px; display: table-cell; padding: 10px 9px 0 0; overflow: hidden; vertical-align: top } 序号 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 CSS 代码 .m-head a.message { background-position: 0 -100px } .m-head a.ka { width: 30px; height: 30px; padding-left: 10px; position: absolute; border: 0; line-height: 30px; color: #fff; right: 0; top: 10px; display: inline-block; font-size: 12px; background-color: #23a9f8; border-radius: 15px 0 0 15px; margin-right: 5px; } .mdd_sea { background-color: #ededed; padding: 8.5px 10px; position: relative } .mdd_sea input { padding: 7.5px 0; width: 100%; border: 0; font-size: 15px; color: #666; background: #fff url(../images/hotel_sprite4.png) -62px 9px no-repeat; background-size: 240px 250px; border-radius: 4px; text-indent: 25px }
单元 3 旅游景点推荐网页设计
旅游网站的景点推荐网页通常会运用大量图片，以使网页变得 更加生动活泼、更加引人入胜。本单元通过对旅游网站的旅游目的 地推荐网页和景点推荐网页设计的探析与训练，重点讲解HTML5中 的图像标签、CSS的背景设置、图像透明度设置等内容。读者应学会 在网页中合理地插入图像和应用图片设计景点推荐网页的方法。
2．网页0301.html的CSS代码探析 网页0301.html通用的CSS代码如表3-3所示。
表3-3 网页0301.html通用的CSS代码
序号 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 CSS 代码 body,ul,p,h1,h2,h3,li,input,textarea,button { margin: 0; padding: 0; word-break: break-all } body { text-align: left; font-family: Arial,Helvetica,sans-serif; background-color: #FFF; font-size-adjust: none; -webkit-text-size-adjust: none } a,a:visited { text-decoration: none; color: #666; outline: 0 } 序号 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 CSS 代码 input,textarea { -webkit-appearance: none; -webkit-border-radius: 0 } ul,li,dl,dt,dd { list-style: none } em,i { font-style: normal } img { vertical-align: middle } ul,li,dl,dt,dd { list-style: none }
网页0301.html主体结构的HTML代码如表3-2所示。该网页主 体结构包括4个组成部分，其中，第一部分使用<header>标签实现， 第二部分使用<section>标签实现，第三分部使用<nav>标签实现， 第四部分使用<section>标签实现。
表3-2 网页01.html主体结构的HTML代码
网页0301.html主体结构的CSS代码如表3-4所示。
表3-4 网页0301.html主体结构的CSS代码
序号 01 02 03 04 05 06 07 08 09 10 11 12 CSS 代码 .m-head { width: 100%; height: 50px; border-bottom: 1px solid #f29406; display: table; position: relative } .mdd_sea { background-color: #ededed; padding: 8.5px 10px; position: relative } 序号 13 14 15 16 17 18 19 20 21 22 23 24 CSS 代码 .mdd_menu { height: 43px; background-color: #fff; border-bottom: solid 1px #c8c8c8; overflow: hidden; white-space: nowrap } .mdd_con { width: 100%; overflow: hidden }
1．网页0301.html的HTML代码探析 网页0301.html的HTML代码如表3-1所示。
图3-1 蚂蜂窝的推荐旅游目的地网页0301.html的浏览效果
表3-1 网页0301.html的HTML代码
序号 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 HTML 代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>旅游目的地精选－蚂蜂窝</title> <meta name="description" content="蚂蜂窝让你的旅行更精彩！" /> <meta name="keywords" content="目的地,旅游攻略,最佳旅游目的地" /> <link href="css/common.css" rel="stylesheet" type="text/css" /> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <header class="m-head"> <a class="btn back" href="/" id="head_return_btn"></a> <div class="bar-c"> <h1>推荐旅游目的地</h1> </div> <a class="btn message" href="#"></a> <div class="bar-r"> <a href="/login.php?s=1" id="btn_card" class="nav ka">打卡</a> </div> </header> <section class="mdd_sea"> <div class="searcher"> <input type="search" name="q" autocomplete="on" id="mdd_search_box_new" placeholder="搜索你想去的地方" /> </div> </section> <nav class="mdd_menu">