1200字范文 > web应用开发：css构建移动版旅游网站界面

web应用开发：css构建移动版旅游网站界面

时间：2020-01-10 11:57:24

要求：

侧边栏使用< aside>标签嵌套< nav>标签来实现，在< nav>标签中嵌套< ul>列表实现导航菜单。页面右侧部分从上至下依次使用< header>标签、< section>标签和< footer>来实现，并且这些标签全部嵌套在一个< section>中。< header>标签中文字使用< h1>标签，并设置样式。两个旅游信息的< section>中分别嵌套两个< div>标签，用来设置旅游图片和文字信息在节目中中的位置。< footer>标签使用< p>、< span>、< a>链接来添加一些文字和链接信息。

新建travel.html文件

代码如下：

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><title>国内旅游</title><link href="common.css" rel="stylesheet" type="text/css"><link href="main.css" rel="stylesheet" type="text/css"></head><body><section class="qui-page"><header class="qui-header"><h1>国内旅游计划</h1></header><section class="container"> <div class="plcRouteList"><a href="#"><img src="fengjing.jpg"width="100%" alt="" class="pic"/><div class="bottom"><p class="face"><img src="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> <p>昆明 - 香格里拉 - 西藏</p></div></section><section class="container"><div class="plcRouteList"><a href="#"><img src="华东.jpg" width="100%" alt="" class="pic" /><div class="bottom"><p class="face"><img src="touxiang.jpg" width="38" height="38" alt="" /></p><h2 class="title">我的旅游行程</h2></div><p class="day">15天</p></a><div><em>城市</em><p>北京 - 常州 - 苏州</p></div></div></section><footer class="qui-footerBasic"><p class="switchStyle"><span>手机版</span><a href="#"><span>电脑版</span></a><span><a href="#">APP</a></span></p></footer></section><aside class="qui-asides"><section class="qui-aside"><nav class="qui-asideNav"><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></body></html>

新建common.css文件

代码如下：

html{height: 100%;overflow-x: hidden;/*表示水平方向隐藏溢出，没有滚动条*/background: #f5f5f5;color: #444;/*设置字体样式，！important设置该元素的样式具有最高权值*/font: 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;/*盒子阴影：水平偏移，垂直偏移模糊值，阴影颜色（其中rgb指颜色，a指透明度）*/box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);}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文件

代码如下：

.qui-page{width: 640px;}.qui-header{width: 100%;height: 80px;overflow: hidden;/*隐藏溢出内容*/background-color: #2bab79;/*背景颜色为#2bab79*/}.container{width: 100%;-webkit-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、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;/*背景颜色：线性渐变，从上到下由黑色渐变至透明为60%的黑色*/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));}.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;/*背景颜色：rgb是对应颜色值，a对应的是透明度*/background-color: rgba(43,171,121,0.8);border-radius: 50%;text-align: center;font-size: 18px;line-height: 50px;color: white;}.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;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;}

效果图：

用到的图片：

fengjing.jpg

touxiang.jpg

华东.jpg

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。