今天开始我们用前面学的各种布局技巧,模仿php中文网移动端的首页做一个网页出来。过程不容易,最终呈现的效果还是可以的,下面先上代码。
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./static/css/style1.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>php中文网首页</title> </head> <body> <!-- 头部 --> <div class="header"> <div class="left"> <a href=""><img src="./static/images/ironman.png" alt=""></a> </div> <div class="logo"> <a href=""><img src="./static/images/logo.png" alt=""></a> </div> <div class="right"><img src="./static/images/right.png" alt=""></div> </div> <!-- banner --> <div class="banner"> <img src="./static/images/banner.jpg" alt=""> </div> <!-- 导航栏 --> <div class="nav"> <ul> <li> <a href=""><img src="./static/images/html.png" alt=""><br>HTML/CSS</a> </li> <li> <a href=""><img src="./static/images/JavaScript.png" alt=""><br>JavaScript</a> </li> <li> <a href=""><img src="./static/images/code.png" alt=""><br>服务端</a> </li> <li> <a href=""><img src="./static/images/sql.png" alt=""><br>数据库</a> </li> </ul> <ul> <li> <a href=""><img src="./static/images/app.png" alt=""><br>移动端</a> </li> <li> <a href=""><img src="./static/images/manual.png" alt=""><br>手册</a> </li> <li> <a href=""><img src="./static/images/tool2.png" alt=""><br>工具</a> </li> <li> <a href=""><img src="./static/images/live.png" alt=""><br>直播</a> </li> </ul> </div> <!-- 课程区 --> <h3>推荐课程</h3> <div class="courses"> <ul> <li> <a href=""><img src="./static/images/tjkc1.jpg" alt=""></a> </li> <li> <a href=""><img src="./static/images/tjkc2.jpg" alt=""></a> </li> </ul> </div> <div class="courseslist"> <a href=""><img src="./static/images/tjkc3.jpg" alt=""></a> <p> <a href="">CI框架30分钟极速入门</a> <br> <span>中级</span><span>49877次播放</span> </p> </div> <div class="courseslist"> <a href=""><img src="./static/images/tjkc4.jpg" alt=""></a> <p> <a href="">2018前端入门_HTML5</a> <br> <span>中级</span><span>210875次播放</span> </p> </div> <h3>最新更新</h3> <div class="courseslist2"> <a href=""><img src="./static/images/tjkc5.jpg" alt=""></a> <p> <a href="">Laravel 5.8 中文文档手册</a> <br> <span>《Laravel 5.1/5.8速查表:https://www.php.cn/phpkj/laravel/c...</span> <br> <span>中级</span><span>210875次播放</span> </p> </div> <div class="courseslist2"> <a href=""><img src="./static/images/tjkc6.jpg" alt=""></a> <p> <a href="">JavaScript极速入门</a> <br> <span>本套课程将帮助大家迅速掌握JavaScript这门高端的、动态的、</span> <br> <span>初级</span><span>210875次播放</span> </p> </div> <div class="courseslist2"> <a href=""><img src="./static/images/tjkc7.jpg" alt=""></a> <p> <a href="">第七期_直播体验课</a> <br> <span>php中文网第七期线上***今晚(2019.7.1)正式开课啦~~</span> <br> <span>初级</span><span>210875次播放</span> </p> </div> <div class="courseslist2"> <a href=""><img src="./static/images/tjkc8.jpg" alt=""></a> <p> <a href="">CSS3 极速入门</a> <br> <span>html和css是组成WEB前端开发最核心的部分,所以结合之前的</span> <br> <span>初级</span><span>210875次播放</span> </p> </div> <div class="courseslist2"> <a href=""><img src="./static/images/tjkc9.jpg" alt=""></a> <p> <a href="">HTML5 极速入门</a> <br> <span>在本套课程中,你将学习如何使用 HTML 来创建站点,完成静态网页布局</span> <br> <span>初级</span><span>210875次播放</span> </p> </div> <div class="courseslist2"> <a href=""><img src="./static/images/tjkc10.jpg" alt=""></a> <p> <a href="">nodejs开发基础教程</a> <br> <span>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js对</span> <br> <span>初级</span><span>210875次播放</span> </p> </div> <h3>最新文章</h3> <div class="news"> <p> <a href=""> <span>PHP之十六个魔术方法详解(总结)</span> <br> <span>发布时间:2019-07-29</span> </a> </p> <a href=""><img src="./static/images/new1.jpg" alt=""></a> </div> <div class="news"> <p> <a href=""> <span>PHP生成折线图和饼图等</span> <br> <span>发布时间:2019-08-02</span> </a> </p> <a href=""><img src="./static/images/new2.png" alt=""></a> </div> <div class="news"> <p> <a href=""> <span>PHP实现动态规划之***问题</span> <br> <span>发布时间:2019-08-13</span> </a> </p> <a href=""><img src="./static/images/new3.jpg" alt=""></a> </div> <div class="news"> <p> <a href=""> <span>ThinkPHP6源码:从Http类的实例化看依赖注入是如何实现的</span> <br> <span>发布时间:2019-08-16</span> </a> </p> <a href=""><img src="./static/images/new4.jpg" alt=""></a> </div> <div class="news"> <p> <a href=""> <span>PHP7中php.ini、php-fpm和www.conf 配置</span> <br> <span>发布时间:2019-08-23</span> </a> </p> <a href=""><img src="./static/images/new5.png" alt=""></a> </div> <div class="more"> <a href="">更多内容</a> </div> <h3>最新博文</h3> <div class="article"> <a href=""> <span>mysql查询时间戳和日期的转换</span><span>2019-09-07</span> </a> </div> <div class="article"> <a href=""> <span>小程序实现复制文本内容</span><span>2019-09-06</span> </a> </div> <div class="article"> <a href=""> <span>js获取url链接中的域名部分</span><span>2019-09-07</span> </a> </div> <div class="article"> <a href=""> <span>小程序实现头像图片裁剪</span><span>2019-09-03</span> </a> </div> <div class="article"> <a href=""> <span>《悦帮到家》小程序</span><span>2019-09-03</span> </a> </div> <div class="more"> <a href="">更多内容</a> </div> <h3>最新问答</h3> <div class="article"> <a href=""> <span>语法错误,意外':'</span><span>2019-09-12</span> </a> </div> <div class="article"> <a href=""> <span>栏目链接不对吧???</span><span>2019-09-12</span> </a> </div> <div class="article"> <a href=""> <span>用的编辑软件是啥</span><span>2019-09-12</span> </a> </div> <div class="article"> <a href=""> <span>没有弹框</span><span>2019-09-12</span> </a> </div> <div class="article"> <a href=""> <span>管理员账户密码都不修改</span><span>2019-09-12</span> </a> </div> <div class="more-last"> <a href="">更多内容</a> </div> <!-- 底部 --> <div class="footer"> <ul> <li> <a href=""><img src="./static/images/zhuye.png" alt=""><br><span>首页</span></a> </li> <li> <a href=""><img src="./static/images/video.png" alt=""><br><span>视频</span></a> </li> <li> <a href=""><img src="./static/images/luntan.png" alt=""><br><span>论坛</span></a> </li> <li> <a href=""><img src="./static/images/geren.png" alt=""><br><span>我的</span></a> </li> </ul> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
body { font-size: 14px; min-width: 320px; max-width: 720px; margin: 0 auto; padding: 0; background-color: #edeff0; overflow-y: initial; position: relative; overflow-x: hidden; -webkit-tap-highlight-color: transparent; } .header { position: fixed; top: 0; left: 50%; width: 100%; min-width: 320px; max-width: 720px; background-color: #444; transform: translateX(-50%); } .header { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: row; align-items: center; } .header .left img { width: 23px; height: 23px; border-radius: 50%; padding-left: 5px; } .header .logo { text-align: center; flex: 1; } .header .logo img { width: 94px; height: 45px; } .header .right img { width: 32px; height: 32px; padding-right: 5px; } .banner img { width: 100%; margin-top: 55px; } .nav { height: 170px; background-color: white; box-sizing: border-box; margin-top: -4px; } .nav ul { margin: 0; padding: 0; list-style-type: none; display: flex; text-align: center; justify-content: space-around; padding: 6px; } .nav ul li { height: 75px; flex: 1; } .nav ul li a { text-decoration: none; color: #888; font-weight: 555; } .nav ul li a img { width: 45px; height: 45px; } /* 课程区 */ h3 { color: grey; } .courses ul { margin: 0; padding: 0; display: flex; } .courses ul li { list-style-type: none; flex: 1; } .courses ul li:first-child { margin-right: 10px; } .courses ul li img { width: 100%; } .courseslist { background-color: #fff; padding: 10px; margin-top: 10px; height: 90px; display: flex; } .courseslist>a { flex: .4; } .courseslist a img { width: 100%; height: 90px; } .courseslist>p { flex: 0.6; margin-left: 15px; color: grey; } .courseslist p a { text-decoration: none; color: grey; } .courseslist p span:first-of-type { font-size: 0.8rem; background-color: black; color: white; padding: 0 2px; border-radius: 30%; } .courseslist p span:last-of-type { font-size: 0.8rem; } .courseslist p span { color: grey; font-size: 60%; } .courseslist2 { background-color: #fff; padding: 10px; margin-top: 10px; height: 90px; display: flex; } .courseslist2>a { flex: .4; } .courseslist2 a img { width: 100%; height: 90px; } .courseslist2>p { flex: 0.6; margin-left: 15px; color: grey; line-height: 23px; } .courseslist2 p a { text-decoration: none; color: grey; } .courseslist2 p span:nth-of-type(2) { font-size: 0.8rem; background-color: black; color: white; padding: 0 2px; border-radius: 30%; } .courseslist2 p span:last-of-type { font-size: 0.8rem; position: absolute; right: 7%; } .courseslist2 p span { color: grey; font-size: 60%; } .news { background-color: white; padding: 10px; margin-top: 10px; height: 90px; display: flex; } .news p { flex: 0.7; } .news a { flex: .3; text-decoration: none; color: grey; } .news a span:first-of-type { font-size: 16px; font-weight: bold; display: block; margin-bottom: 10px; } .news a img { width: 100%; height: 90px; } .more { background-color: white; padding: 10px; margin: 10px 0; } .article { background-color: white; padding: 10px; margin-bottom: 10px; } .article a { display: flex; text-decoration: none; color: grey; justify-content: space-between; } .article a span:first-of-type { font-size: 14px; font-weight: bold; } .more a { display: block; text-decoration: none; color: grey; text-align: center; } .more-last { background-color: white; padding: 10px; margin: 10px 0; margin-bottom: 90px; } .more-last a { display: block; text-decoration: none; color: grey; text-align: center; } .footer { border-top: 1px solid #999; padding: 10px; position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; min-width: 320px; max-width: 720px; background-color: #eee; } .footer ul { padding: 0; margin: 0; display: flex; } .footer ul li { list-style-type: none; text-align: center; flex: 1; } .footer ul li a { display: block; text-decoration: none; color: #888; } .footer ul li img { width: 25px; height: 25px; }
运行实例 »
点击 "运行实例" 按钮查看在线实例
导航栏以前我们是用左浮动去做的,现在会了flex布局之后,要做一个导航栏非常简单,我们只需要将ul变成一个flex盒子,里面的子元素就会自动横向排列了。因为头部和底部是一直固定在窗口上面和下面的,所以是用fixed固定定位去做,把头部底部固定在窗口。
banner图因为还没学习js,所以做不到轮播的效果,就放了一张图片上去。但是因为头部是用固定定位,已经脱离了文档流,所以banner图会有一部分会被头部覆盖掉,我是给banner图加上一个margin-top,把他顶下来。
导航栏也是用ul标签来做的,这里有个小技巧,因为导航栏有两行,我们就用两个ul,这样我们不用考虑两行的问题,只要解决掉一行就可以了。也是用flex自动填充空间的特性,很简单就能够把导航栏做出来了。
下面的课程列表样式挺像的有很多样式是可以复用的,通过flex,浮动或者是绝对定位都可以把效果实现出来。不过目前我写的代码自适应的地方很少,有很多地方的宽度啊,高度啊是用px写死了,如果设备的宽高发生变化,现在看的很正常的画面有可能会变形。这个是之后要去思考和提升的地方。我观察php中文网,是根据宽度自适应显示多少字进去,但是我这边字体只能是自己去删减,但是如果屏幕宽度再缩小的话,还是会变形,不知道这个是后端通过什么去实现的。
底部的代码跟导航栏是很像的,把背景颜色改一改就行了。
通过这个仿前端的实战训练,我对电脑端和移动端的页面设计基本上都能开发了,之后就是不断去仿页面,去熟练自己的代码。