构建移动版旅游网站页面（大专）一
效果如下：
代码形式：
代码如下：
html：
1.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：
html{
height: 100%;
overflow-x: hidden;
/*表示水平方向隐藏溢出,没有滚动条*/
background:#f5f5f5;
color: #444;
font:14px/24px Helvetica !important;
/*字体样式为;字号大小为14px 行高24px 字体为helvetice
!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);
/**/
}
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;
margin-top: 30px;
color: white;
text-align: center;
}images：
华东.jpg:
touxiang.jpg:
fengjing.jpg:
(写不下了，下一篇写css)
标签：box,大专,--,样式,构建,字体,font,页面 来源： https://blog.csdn.net/Huskylove/article/details/115731111
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。