构建移动版旅游网站页面(大专)一
作者:互联网
构建移动版旅游网站页面(大专)一
效果如下:
代码形式:
代码如下:
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