您的位置：首页 > Web前端

iOS转前端之仿写宠物网（适配不同尺寸）

2017-07-27 11:24 204 查看
前一篇说到了适配问题，这篇就来写个Demo用一用。

代码我会放到我的github，记得去看看哦~

都是一些之前常用知识的，这里就不详细解释了。直接上代码：

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>宠物网</title>
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<!--头部-->
<div id="header"></div>
<!--导航-->
<div id="nav">
<ul>
<li><a href="#" class="selected">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<!--主要内容-->
<div id="list">
<div class="animal">
<img src="images/pic.jpg">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
<a href="#">READ MORE</a>
</div>
<div class="animal">
<img src="images/pic1.jpg">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
<a href="#">READ MORE</a>
</div>
<div class="animal">
<img src="images/pic2.jpg">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
<a href="#">READ MORE</a>
</div>
<div class="animal">
<img src="images/pic2.jpg">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
<a href="#">READ MORE</a>
</div>
<div class="animal">
<img src="images/pic1.jpg">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
<a href="#">READ MORE</a>
</div>
<div class="animal">
<img src="images/pic.jpg">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
<a href="#">READ MORE</a>
</div>
<div class="animal">
<img src="images/pic2.jpg">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
<a href="#">READ MORE</a>
</div>
<div class="animal">
<img src="images/pic1.jpg">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
<a href="#">READ MORE</a>
</div>
<div class="animal">
<img src="images/pic2.jpg">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
<a href="#">READ MORE</a>
</div>
<div class="animal">
<img src="images/pic.jpg">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
<a href="#">READ MORE</a>
</div>
<div class="animal">
<img src="images/pic1.jpg">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
<a href="#">READ MORE</a>
</div>
<div class="animal">
<img src="images/pic2.jpg">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
<a href="#">READ MORE</a>
</div>
</div>
<!--尾部-->
<div id="footer">
<h2>CONTACT US</h2>
<ul>
<li><a href="#"><img src="images/fb.png"></a></li>
<li><a href="#"><img src="images/g+.png"></a></li>
<li><a href="#"><img src="images/tw.png"></a></li>
<li><a href="#"><img src="images/rss.png"></a></li>
</ul>
</div>
</body>
</html>

下面来看css的部分：
/*导入字体*/
@font-face {
font-family: BebasNeue-webfont;
src: url("../fonts/BebasNeue-webfont.ttf");
}

a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
padding: 0;
margin: 0;
}

body {
background: url(../images/pattern.gif);
font-family: BebasNeue-webfont
}

a {
text-decoration: none;
}

#header {
background-color: red;
height: 3px;
}

/*导航*/
#nav {
/*background-color: white;*/
text-align: center;
margin-bottom: 100px;
}

/*#nav ul li {*/
/*float: left;*/
/*}*/

#nav ul {
display: inline-block;
}

#nav ul li {
display: inline-block;
}

#nav ul li a {
margin: 0 10px;
display: inline-block;
width: 200px;
height: 60px;
color: white;
line-height: 50px;
font-size: 28px;
}

#nav ul li a.selected {
background-color: white;
color: black;
}

#nav ul li a:hover {
background-color: white;
color: black;
}

/*中间列表*/
#list{
text-align: center;
background-color: white;
}

#list .animal {
width: 382px;
display: inline-block;
text-align: left;
padding: 20px;
}

#list .animal p {
font-family: 'sans-serif';
text-indent: 40px;
margin: 5px 5px;
}

#list .animal a {
background-color: #C0392B;
color: white;
display: inline-block;
height: 36px;
width: 120px;
font-size: 25px;
line-height: 36px;
text-align: center;
}

#list .animal a:hover {
background-color: black;
}

/*尾部*/
#footer {
margin: 20px 0;
text-align: center;
}

#footer h2 {
color: white;
margin: 5px 0;
}

#footer ul {
display: inline-block;
}

#footer ul li {
display: inline-block;
}

#footer ul li a {
margin: 0 3px;
}

#footer ul li a:hover {
opacity: 0.8;
}

/*适配*/
@media screen and (max-width: 1154px) {
#nav ul li a {
width: 150px;
font-size: 28px;
}
}

@media screen and (max-width: 897px) {
#nav ul li a {
width: 130px;
font-size: 25px;
}
}

@media screen and (max-width: 746px) {
#nav ul li a {
width: 80px;
font-size: 20px;
}

#nav {
margin-bottom: 60px;
}
}

@media screen and (max-width: 629px) {
#nav ul li a {
width: 65px;
font-size: 20px;
height: 40px;
line-height: 40px;
}

#nav {
margin-bottom: 30px;
}

#list .animal {
width: 362px;
padding: 20px;
}

#list .animal img {
width: 355px;
}
}



最后的这个'@media'就是针对不同屏幕的适配，‘max-width’代表最大的宽度。
ok，下面来看看运行的效果图：



好了，下一篇开始我们来介绍介绍JS的具体语法和用法~
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航