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

前一篇说到了适配问题，这篇就来写个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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data:images/fb.png"></a></li><li><a href="#"><img src="data:images/g+.png"></a></li><li><a href="#"><img src="data:images/tw.png"></a></li><li><a href="#"><img src="data: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的具体语法和用法~

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

前端学习——仿原神官网顶部导航栏
前端学习--仿原神官网顶部导航栏通过使用CSS html实现原神官网的导航栏本人做的原神官网后续将把顶部标签hover效果的教程发出下面来看看代码  ...
iOS开源组件__仿写QQ/微信聊天键盘(表情,问题,输入框)纯代码,无依赖
前言 1.由于项目需求,需要一个类似QQ/微信的聊天键盘,包括语音,emoji和发送图片,文件,位置,网上找了一番,要不功能不够完善,要不依赖太多,于是干脆自己写一个(在使用过程中如果发现什么问题或有 ...
Web前端仿小米官网实战总结
Web前端仿小米官网实战总结自学前端至今实在是感慨万千,一个人学习太累,自律能力不太够,学习速度跟不上技术更新速度,所以学习技术是一定不能偷懒的,更不能沉迷游戏,要坚持学习,最好有人带,实在不行就报 ...
帝国CMS仿写朵朵云棋牌游戏官网源码
帝国CMS仿写朵朵云棋牌游戏官网源码下载地址: http://www.bytepan.com/aLBtMe2g40P
礼物说仿写项目iOS源码
礼物说仿写(updating...) 源码下载: http://code.662p.com/view/14507.html api: 礼物说首页精选 banner2: http://api.liwu ...
项目三《小米官网仿写》
文章目录前言一.下载APP 二.下拉菜单三. 小米侧边栏四.登录注册界面五.lation实现界面切换总结前言本次小米官网仿写复习了之前学到的知识点,运用HTML+CSS+JavaScr ...
仿写小米官网简单的HTML+CSS练习
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
仿写某品牌手机官网（静态）
主要采用 HTML + CSS 仿写了一个静态网页,用来巩固 HTML 和 CSS 的基础知识.整体布局并不是和官网一模一样,作了一些改动. 这是效果图: 以下为 HTML 代码 <!DOCTY ...
仿写小米官网右边工具导航栏
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
使用html简单仿写一个静态的绝地求生官网首页
这是我以前写的一个静态网页,算一个html入门的简单的教程.刚刚开始学习前端可以用这个练手 1.首先在vscode新建一个文件夹,点击如图所示,点击蓝笔圈起的图标(左边的是新建文件) 起名为绝地求生. ...

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

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

最新文章

热门文章