仿PHP中文网移动端案例
演示地址:http://www.fantianlong.com/php11/0410/m.php.cn/
1.源代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="css/icon-font.css"><style>* {margin: 0;padding: 0;}html {width: 100vw;height: 100vh;font-size: 14px;}body {background-color: rgb(238, 239, 240);}.container {display: flex;flex-flow: column nowrap;}a {text-decoration: none;}header {width: 100vw;height: 42px;display: flex;justify-content: space-between;align-items: center;padding: 0 10px;box-sizing: border-box;position: fixed;background-color: rgb(47, 53, 60);}.avatar img {width: 2.2rem;height: 2.2rem;border-radius: 50%;}.logo img {height: 3.2rem;}.banner img {margin-top: 40px;width: 100vw;}nav {height: 210px;display: flex;flex-flow: row wrap;justify-content: space-around;padding: 10px 0;box-sizing: border-box;font-size: 1.2rem;}nav a {color: #888;font-weight: bold;}nav>div {width: 25%;display: flex;flex-flow: column nowrap;align-items: center;margin-bottom: 30px;}nav img {width: 4rem;height: 4rem;margin-bottom: 5px;}.recommend-course {display: flex;flex-flow: column nowrap;}h2 {margin-bottom: 20px;}.recommend-course>.top {display: flex;flex-flow: row nowrap;justify-content: space-around;}.recommend-course>.top img {width: 48vw;height: 90px;}.bottom>.item {display: flex;margin: 10px;padding: 10px;background-color: #ffffff;}.item img {width: 48vw;height: 80px;margin-right: 10px;}.item p {color: #888;}.item p:nth-of-type(1) {font-size: 1.2rem;margin-bottom: 10px;}.course-info {display: flex;flex-flow: column nowrap;}.course-info>p:nth-of-type(1) {width: 220px;}.course-info>p:nth-of-type(2) {width: 250px;}.course-info span {width: 2rem;height: 2rem;border-radius: 13px;padding: 5px;box-sizing: border-box;background-color: rgb(89, 87, 87);color: #ffffff;}footer {display: flex;flex-flow: row nowrap;text-align: center;height: 40px;border-top: 1px solid #cccccc;background-color: rgb(236, 236, 236);}footer>p {display: flex;flex-flow: column nowrap;width: 25vw;}footer>p>a {color: #888888;}</style><title>php中文网-教程_手册_视频-免费php在线学习平台</title></head><body><div class="container"><!-- 头部 --><header><div class="avatar"><a href=""><img src="images/avatar.jpg" alt="avatar"></a></div><div class="logo"><a href=""><img src="images/logo.png" alt="logo"></a></div><div class="menu"><a href=""><i class="iconfont" style="color: #ccc;"></i></a></div></header><!-- banner --><div class="banner"><a href=""><img src="images/banner.png" alt="banner"></a></div><!-- 导航 --><nav><div><img src="images/html.png" alt="html/css"><a href="">HTML/CSS</a></div><div><img src="images/javascript.png" alt="JavaScript"><a href="">JavaScript</a></div><div><img src="images/server.png" alt="server"><a href="">服务端</a></div><div><img src="images/sql.png" alt="sql"><a href="">数据库</a></div><div><img src="images/app.png" alt="app"><a href="">移动端</a></div><div><img src="images/manual.png" alt="manual"><a href="">手册</a></div><div><img src="images/tool.png" alt="tool"><a href="">工具</a></div><div><img src="images/live.png" alt="live"><a href="">直播</a></div></nav><!-- 推荐课程 --><div class="recommend-course"><h2>推荐课程</h2><div class="top"><a href=""><img src="images/tlbb.jpg" alt="tlbb"></a><a href=""><img src="images/tlbb.jpg" alt="tlbb"></a></div><div class="bottom"><div class="item"><a href=""><img src="images/ci.jpg" alt="ci"></a><div class="course-info"><p>CI框架30分钟极速入门</p><p><span>中级</span>61289次播放</p></div></div><div class="item"><a href=""><img src="images/ci.jpg" alt="ci"></a><div class="course-info"><p>CI框架30分钟极速入门</p><p><span>中级</span>61289次播放</p></div></div></div></div><!-- 最近更新 --><div class="recommend-course"><h2>最近更新</h2><div class="bottom"><div class="item"><a href=""><img src="images/ci.jpg" alt="ci"></a><div class="course-info"><p>Thinkphp6.0正式版视频教程</p><p>Thinkphp6.0从2019年10月24日正式发</p><p><span>中级</span>61289次播放</p></div></div><div class="item"><a href=""><img src="images/ci.jpg" alt="ci"></a><div class="course-info"><p>CI框架30分钟极速入门</p><p><span>中级</span>61289次播放</p></div></div></div></div><!-- 底部 --><footer><p><a href="">首页</a><i class="iconfont"></i></p><p><a href="">视频</a><i class="iconfont"></i></p><p><a href="">社区</a><i class="iconfont"></i></p><p><a href="">我的</a><i class="iconfont"></i></p></footer></div></body></html>
2.效果图
3.总结
- flex布局还不是很熟练,之前一直搞PC端固定布局的
- 还需加强练习,在学习后端的时候也不能放松前端布局的练习
- 基础知识虽然掌握,但是实战还是有些问题
