一站式服务！图片+代码-构建移动版旅游网站页面
生活随笔
收集整理的這篇文章主要介紹了
一站式服务！图片+代码-构建移动版旅游网站页面
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 頁面展示
- 技術要點
- 抽象化
- 實現細節
- 代碼實現
- HTML代碼
- CSS代碼
- common.css
- main.css
- 圖片
頁面展示
本項目將使用HTML5語義化結構標簽來構建一個簡單的頁面。與此同時，也通過本項目來回顧一下CSS的基礎知識。頁面效果如右圖所示。
技術要點
抽象化
實現細節
代碼實現
HTML代碼
<!DOCTYPE html> <html lang="zh-cn"><head><meta charset="utf-8" /><title>國內旅游</title><!--鏈入對網頁某類型元素的通用設置樣式表--><link href="css/common.css" rel="stylesheet" type="text/css"/><!--鏈入對某個元素的特定設置的樣式表--><link href="css/main.css" rel="stylesheet" type="text/css" /></head><body><!--右半邊--><section class="qui-page"><!--header--><header class="qui-header"><h1>國內旅游計劃</h1></header><!--/header--><!--begin--><section class="container"> <!--<section></section>語義化元素表示頁面中的一個內容區塊--><div class="plcRouteList"><a href="#"> <img src="images/fengjing.jpg" width="100%" alt="" class="pic" /><div class="bottom "><p class="face"><img src="images/touxiang.jpg" width="38" height="38" alt="" /></p><h2 class="title">我的旅游行程</h2></div><p class="day">14天</p> </a><div class="infos"><div><em>城市</em> <!--<em>標簽表示其中的文本為強調的內容，這段文字顯示為斜體。當然我們可以在樣式表里清除其字體樣式，重新設置其他字體樣式--><p> 昆明 - 香格里拉 - 西藏 </p></div></div><!--</li>--><!--</ul>--></div></section><!--end--><!--begin--><section class="container"> <!--<section></section>語義化元素表示頁面中的一個內容區塊--><div class="plcRouteList"><a href="#"> <img src="images/華東.jpg" width="100%" alt="" class="pic" /><div class="bottom "><p class="face"><img src="images/touxiang.jpg" width="38" height="38" alt="" /></p><h2 class="title">我的旅游行程</h2></div><p class="day">15天</p> </a><div class="infos"><div><em>城市</em> <!--<em>標簽表示其中的文本為強調的內容，這段文字顯示為斜體。當然我們可以在樣式表里清除其字體樣式，重新設置其他字體樣式--><p> 北京 - 常州 - 蘇州 </p></div></div></div></section><!--footer--><footer class="qui-footerBasic"> <!--<footer></footer>表示整個頁面或頁面中一個內容區塊的腳注。--><p class="switchStyle"><span >手機版</span><a href="#"><span>電腦版</span> </a><span><a href="#">APP</a></span></p></footer><!--footer end--></section><!--右半邊end--><!--側邊欄導航--><aside class="qui-asides"> <!--語義化元素<aside></aside>表示article元素內容之外的、與article元素內容相關的輔助信息。--><section class="qui-aside"><nav class="qui-asideNav"> <!--語義化元素<nav></nav>表示頁面中導航鏈接的部分--><ul><li><a href="#" ><span>首頁</span></a></li><li><a href="#" ><span>目的地</span></a></li><li><a href="#" ><span>酒店</span></a></li><li><a href="#" ><span>機票</span></a></li><li><a href="#" ><span>時間</span></a></li><li><a href="#" ><span>點評</span></a></li></ul></nav></section></aside><!--側邊欄導航 end--></body> </html>CSS代碼
common.css
/*第1單元 項目1-2 旅游網站頁面 common.css*/ html {height: 100%;overflow-x: hidden; /*表示水平方向隱藏溢出，沒有滾動條*/background: #f5f5f5;color: #444;font: 14px/24px Helvetica !important; /*字體樣式為：字號大小14px 行高24px 字體為Helvetica，!important設置該元素的樣式具有最高權值*/ } body {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; /*為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。*/position: relative;z-index: 0;width: 100%;max-width: 640px;min-height: 100%;margin: 0 auto; /*頁面水平居中*/overflow-x: hidden;box-shadow: 0 0 10px rgba(0,0,0,0.3); /*盒子陰影：水平偏移，垂直偏移模糊值 ,陰影顏色（其中rgb指顏色，a指透明度*/ } div,ul,li,p {margin: 0;padding: 0;outline: none; /*當元素獲得焦點的時候，焦點框為0，不出現虛線框（或高亮框）*/ } em,strong {font-style: normal; /*字體樣式正常*/font-weight: normal; /*字體粗細正常*/ } ul {list-style: none; /*清除默認樣式*/ } h1 {font-size: 55px; /*字體大小55px*/margin-top: 30px; /*上邊距30px*/color: white; /*字體顏色為白色*/text-align: center;/*文字水平居中*/ }main.css
/*第1單元 項目1-2 旅游網站頁面 main.css*/ .qui-page {width: 640px; } .qui-header {width: 100%;height: 80px;overflow: hidden; /*隱藏溢出內容*/background-color: #2bab79; /*背景顏色為#2bab79*/ } .container {width: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; } .plcRouteList {border-bottom: 1px solid #e6e8ea; /*底部邊框為1px 顏色是#e6e8ea的實線 */background-color: #fff;padding-left: 5px; /*左內邊距為5px*/ } .plcRouteList li {padding: 15px 5px 15px 0; /*上、右、下、左內邊距分別為15px、5px、15px、0*/border-top: 1px solid #e6e8ea; /*頂部邊框為1px 顏色是#e6e8ea的實線 */ } .plcRouteList a {display: block; /*把a由行元素變為塊元素*/position: relative; } .plcRouteList .pic {display: block;min-height: 150px; } .plcRouteList .bottom {position: absolute;left: 0;right: 0;bottom: 0;height: 50px;padding: 30px 0 0 60px;color: #fff;background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.6));background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.6)); /*背景顏色：線性漸變，從上到下由黑色漸變至透明度為60%的黑色*/ } .plcRouteList .bottom .face {float: left; /*向左浮動*/margin-left: -50px;width: 38px;height: 38px;border: 1px solid #fff;border-radius: 50%; /*為元素添加圓角邊框，邊框半徑為寬度的50%*/overflow: hidden; } .plcRouteList .bottom .face img {display: block;border-radius: 50%; } .plcRouteList .bottom .title {width: 100%;overflow: hidden;text-overflow: ellipsis;/*表示當對象內文本溢出時顯示省略標記（...）。*/white-space: nowrap;font-size: 18px;font-weight: bold;line-height: 22px; /*行高為22px*/ } .plcRouteList .day {position: absolute;top: 10px;right: 10px;width: 50px;height: 50px;background-color: rgba(43,171,121,0.8);/*背景顏色：rgb對應的是顏色值，a對應的是透明度*/border-radius: 50%;text-align: center;font-size: 18px;line-height: 50px;color: #fff; } .plcRouteList .infos {margin-top: 7px; /*頂部外邊距為7px*/ } .plcRouteList .infos>div {margin-bottom: 5px; /*底部外邊距為5px*/padding-left: 40px; /*左邊內邊距為40px*/ } .plcRouteList .infos em {float: left;margin-left: -40px;font-size: 15px;font-weight: bold; } .plcRouteList .infos p {max-height: 48px;overflow: hidden; } .qui-footerBasic {width: 100%;margin: 20px 0; /*上下外邊距為20px，左右外邊距為0*/text-align: center;font-size: 10px;line-height: 20px; } .qui-footerBasic .switchStyle {color: #9ea3ab; } .qui-footerBasic .switchStyle span {margin-left: 30px;} .qui-footerBasic .switchStyle a {color: #444; /*字體顏色為#444*/text-decoration: none; /*清除文本樣式*/ } .qui-asides {position: absolute;left: -200px;top: 0;height: 400px;width: 200px; } .qui-aside {position: fixed;top: 0;bottom: 0;width: 200px;overflow-y: scroll; /*垂直方向內容溢出則出現滾動條*/background-color: #2d3741; } .qui-asideNav {padding: 80px 10px 10px; /*上內邊距為80px,左右內邊距都為10px，下內邊距為10px*/ } .qui-asideNav li {border-top: 1px solid #232d34;background-color: #36424b; } .qui-asideNav a {text-decoration: none;display: block;padding-left: 15px;font-size: 16px;line-height: 44px;color: #ced1d5; } .qui-asideNav a:hover {color: white;background-color: #2bab79; }圖片
整理不易！有用就點個贊吧！
超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生總結
以上是生活随笔為你收集整理的一站式服务！图片+代码-构建移动版旅游网站页面的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【附全部代码+图片】使用HTML5+CS
- 下一篇： 史上最全总结！Util、POJO、dom