标签知识点
- name = “viewport”；屏幕设定
- maximum-scale = 1.0, minimum-scale = 1.0, initial-scale = 1.0；最大最小缩放比例为1，其实就是不允许点击缩放
- user-scalable = 0, width = device-width；设定内容和设备的屏幕等宽等高
- float：left；浮动；作用就是可以让块元素不换行，而是从左向右排列
- margin：0px；设置外边框，可以去掉body和内容的白边
- overflow：auto； 内容超出父标签容器后，自动加滚动条
- text-decoration：none；给a标签去掉下划线
- padding：0px；四边统一内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合应用 移动端练习</title>
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0,
width=device-width, initial-scale=1.0">
<style type="text/css">
body{margin: 0px;}
h3{display: inline;}
header{width:100%; height: 50px; background: #aaffdd;}
aside{width: 20%; height: 540px; background: #ddc660; float: left;}
section{width: 80%; height: 540px; background: #5bb4e4; float: left; overflow: auto;}
footer{width: 100%; height: 50px; background: #28f1f1; clear: left;}
figure{padding: 0px;}
img{max-width: 80%;}
ul{list-style-type: none;}
li{display: inline;}
a{text-decoration: none;}
</style>
</head>
<body>
<header>
<hgroup>
<img src="imgs/ss.png", width="10%">
<h3>移动端页面练习</h3>
</hgroup>
</header>
<aside>
<nav>
<ul>
<li><a href=""><img src="imgs/tu1.png" alt=""></a></li>
<li><a href=""><img src="imgs/tu2.png" alt=""></a></li>
<li><a href=""><img src="imgs/tu3.png" alt=""></a></li>
<li><a href=""><img src="imgs/tu4.png" alt=""></a></li>
<li><a href=""><img src="imgs/tu5.png" alt=""></a></li>
<li><a href=""><img src="imgs/tu6.png" alt=""></a></li>
<li><a href=""><img src="imgs/tu7.png" alt=""></a></li>
<li><a href="">一张图片</a></li>
</ul>
</nav>
</aside>
<section>
<figure>
<figcaption>风景</figcaption>
<img src="imgs/img0.jpg", alt="hhh", width="50%">
<img src="imgs/img1.jpg", alt="", width="50%">
</figure>
<figure>
<figcaption>风光</figcaption>
<img src="imgs/img2.jpg", alt="", width="50%">
<img src="imgs/img3.jpg", alt="", width="50%">
</figure>
<figure>
<figcaption>景色</figcaption>
<img src="imgs/img4.jpg", alt="", width="50%">
<img src="imgs/img5.jpg", alt="", width="50%">
<img src="imgs/img6.jpg", alt="", width="50%">
</figure>
</section>
<footer>
<nav>
<ul>
<li><a href=""><img src="imgs/tu1.png" alt="" width="30"></a></li>
<li><a href=""><img src="imgs/tu2.png" alt="" width="30"></a></li>
<li><a href=""><img src="imgs/tu3.png" alt="" width="30"></a></li>
<li><a href=""><img src="imgs/tu4.png" alt="" width="30"></a></li>
</ul>
</nav>
</footer>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
