Flex 布局学习实践
利用 flex布局对 php中文网移动端进行***完善。以下是主要代码。
index.html
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/init.css"> <link rel="stylesheet" href="static/css/style.css"> <title>php中文网手机端-首页</title> </head> <body> <!--布局原则: 宽宽自适应, 高度是固定--> <!--固定定位: 顶部--> <div class="top"> <img src="static/images/user-pic.jpeg" alt=""> <div class="logo"> <img src="static/images/logo.png" alt=""> </div> <img src="static/images/user-nav.jpg" alt=""> </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> <a href=""><img src="static/images/tjkc3.jpg" alt=""></a> <p> <a href="">CI框架30分钟极速入门</a> <br> <span>中级</span><span>49748次播放</span> </p> </div> <div> <a href=""><img src="static/images/tjkc4.jpg" alt=""></a> <p> <a href="">2018前端入门_HTML5</a> <br> <span>初级</span><span>210066次播放</span> </p> </div> </div> <!--最新更新--> <h3>最新更新</h3> <ul class="last-list"> <li> <a href=""><img src="static/images/last01.jpg" alt=""></a> <div class="right-part"> <a href="">Vue.js急速入门</a> <p> 欢迎朋友们加入Vue.js基础学习的行列，Vue是一套用于构建用户界面的 </p> <p class="sub-info"> <span>中级</span><span>49748次播放</span> </p> </div> </li> <li> <a href=""><img src="static/images/last02.jpg" alt=""></a> <div class="right-part"> <a href="">Laravel 5.8 中文文档手册</a> <p> 《Laravel 5.1/5.8速查表：https://www.php.cn/phpkj/laravel/cheatsheet58 </p> <p class="sub-info"> <span>中级</span><span>49748次播放</span> </p> </div> </li> <li> <a href=""><img src="static/images/last03.jpg" alt=""></a> <div class="right-part"> <a href="">JavaScript极速入门</a> <p> 本套课程将帮助大家迅速掌握JavaScript这门高端的、动态的、弱类型编 </p> <p class="sub-info"> <span>中级</span><span>49748次播放</span> </p> </div> </li> <li> <a href=""><img src="static/images/last04.jpg" alt=""></a> <div class="right-part"> <a href="">第七期_直播体验课</a> <p> php中文网第七期线上***今晚（2019.7.1）正式开课啦~~！为了让广 </p> <p class="sub-info"> <span>中级</span><span>49748次播放</span> </p> </div> </li> </ul> <!-- 最新文章 --> <h3>最新文章</h3> <ul class="article-list"> <li> <a href="javascript:;"> <div> <p>PHP脚本主要用于那些领域</p> <span>发布时间：2019-09-27</span> </div> <img src="./static/images/article1.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <div> <p>PHP检查数组下标是否存在</p> <span>发布时间：2019-09-27</span> </div> <img src="./static/images/article2.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <div> <p>php检测字符串是否包含字符串</p> <span>发布时间：2019-09-27</span> </div> <img src="./static/images/article3.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <div> <p>php检测变量是否存在</p> <span>发布时间：2019-09-27</span> </div> <img src="./static/images/article2.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <div> <p>php检测网站是否正常打开</p> <span>发布时间：2019-09-27</span> </div> <img src="./static/images/article1.jpg" alt=""> </a> </li> </ul> <a href="javascript:;" class="more">更多内容</a> <!-- 最新博文 --> <h3>最新博文</h3> <ul class="blog-list"> <li> <a href="javascript:;"> <p>PHP取整，四舍五入取整、向上取整、向下取整、小数截取</p> <span>2019-07-27</span> </a> </li> <li> <a href="javascript:;"> <p>PHP取整，四舍五入取整、向上取整、向下取整、小数截取</p> <span>2019-07-27</span> </a> </li> <li> <a href="javascript:;"> <p>PHP取整，四舍五入取整、向上取整、向下取整、小数截取</p> <span>2019-07-27</span> </a> </li> <li> <a href="javascript:;"> <p>PHP取整，四舍五入取整、向上取整、向下取整、小数截取</p> <span>2019-07-27</span> </a> </li> <li> <a href="javascript:;"> <p>PHP取整，四舍五入取整、向上取整、向下取整、小数截取</p> <span>2019-07-27</span> </a> </li> </ul> <!-- 最新问答 --> <h3>最新问答</h3> <ul class="blog-list"> <li> <a href="javascript:;"> <p>PHP取整，四舍五入取整、向上取整、向下取整、小数截取</p> <span>2019-07-27</span> </a> </li> <li> <a href="javascript:;"> <p>PHP取整，四舍五入取整、向上取整、向下取整、小数截取</p> <span>2019-07-27</span> </a> </li> <li> <a href="javascript:;"> <p>PHP取整，四舍五入取整、向上取整、向下取整、小数截取</p> <span>2019-07-27</span> </a> </li> <li> <a href="javascript:;"> <p>PHP取整，四舍五入取整、向上取整、向下取整、小数截取</p> <span>2019-07-27</span> </a> </li> <li> <a href="javascript:;"> <p>PHP取整，四舍五入取整、向上取整、向下取整、小数截取</p> <span>2019-07-27</span> </a> </li> </ul> <!--底部--> <div class="footer"> <ul> <li><a href=""><img src="static/font-icon/zhuye.png" alt=""><br><span>主页</span></a></li> <li><a href=""><img src="static/font-icon/video.png" alt=""><br><span>视频</span></a></li> <li><a href=""><img src="static/font-icon/luntan.png" alt=""><br><span>社区</span></a></li> <li><a href=""><img src="static/font-icon/geren.png" alt=""><br><span>我的</span></a></li> </ul> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
style.css
实例
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
color: #888;
}
h3 {
margin: 18px 0 8px;
}
.top {
position: fixed;
top: 0;
width: 100%;
height: 42px;
background-color: #444444;
min-width: 320px;
max-width: 768px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.top {
display: flex;
}
.top img:first-of-type,
.top img:last-of-type {
width: 25px;
height: 25px;
margin-top: 8px;
}
.top img:first-of-type {
border-radius: 50%;
margin-left: 5px;
}
.top .logo {
text-align: center;
flex: 1;
}
.top .logo img {
width: 94px;
height: 42px;
margin: 0;
}
/*轮播图*/
.banner {
display: flex;
margin-top: 42px;
}
.banner img {
width: 100%;
height: 150px;
}
/*导航区*/
.nav {
height: 170px;
background-color: white;
box-sizing: border-box;
}
.nav ul {
margin: 0;
padding: 6px;
}
.nav ul li {
list-style-type: none;
text-align: center;
height: 75px;
}
.nav ul li img {
width: 45px;
height: 45px;
}
.nav ul li a {
text-align: center;
color: gray;
text-decoration: none;
}
.nav ul {
display: flex;
}
.nav ul li {
flex: 1;
}
/*推荐课程区*/
h3 {
color: gray;
}
.courses {
color: gray;
}
.courses ul {
margin: 0;
padding: 0;
list-style: none;
/*flex布局*/
display: flex;
}
.courses ul li {
padding: 5px;
}
.courses ul img {
width: 100%;
height: 90px;
}
.courses div {
background-color: white;
padding: 10px;
margin-top: 10px;
height: 90px;
/*flex布局*/
display: flex;
justify-content: flex-start;
}
.courses div img {
width: 100%;
height: 90px;
}
.courses div a {
text-decoration: none;
color: gray;
flex: 0.45;
}
.courses div p {
flex: .55;
margin-left: 15px;
}
.courses div p span:first-of-type {
margin: 0 5px 0 0;
font-size: 0.8rem;
background-color: #595757;
color: white;
border-radius: 30%;
padding: 0 2px;
}
.courses div p span:last-of-type {
font-size: 0.7rem;
}
.last-list {
margin: 0;
padding: 0;
}
.last-list li {
background-color: #fff;
padding: 10px;
margin-top: 10px;
height: 90px;
display: flex;
justify-content: flex-start;
}
.last-list li>a {
text-decoration: none;
color: gray;
flex: 0.45;
}
.last-list li>a img {
width: 100%;
height: 90px;
}
.last-list .right-part {
flex: .55;
margin-left: 15px;
color: #888;
overflow: hidden;
}
.last-list .right-part a{
color: #888;
}
.last-list .right-part>p {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: 13px;
margin: 16px 0;
}
.last-list .right-part .sub-info {
display: flex;
justify-content: space-between;
}
.last-list .right-part .sub-info span:first-of-type {
margin: 0 5px 0 0;
font-size: 0.8rem;
background-color: #595757;
color: white;
border-radius: 30%;
padding: 0 2px;
}
/* 最新文章 */
.article-list li {
margin-bottom: 10px;
}
.article-list li>a {
display: flex;
justify-content: space-between;
background: #fff;
border-bottom: 1px solid #eee;
padding: 10px 10px 8px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
}
.article-list li>a>div {
flex: 0.6;
height: 65px;
}
.article-list li>a>div p {
margin-bottom: 10px;
font-size: 14px;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.article-list li>a>div span {
font-size: 12px;
}
.article-list li>a>img {
flex: 0.4;
height: 65px;
}
.more {
display: block;
width: 100%;
margin: 0 auto;
line-height: 10px;
text-align: center;
background: #fff;
padding: 10px 0;
font-size: 13px;
}
.blog-list>li {
margin-bottom: 10px;
}
.blog-list>li>a {
border-bottom: 1px solid #eee;
padding: 10px 10px 14px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
background: #fff;
display: flex;
justify-content: space-between;
}
.blog-list>li>a>p {
font-weight: bold;
font-size: 13px;
}
.blog-list>li>a>span {
font-size: 12px;
}
/*底部样式*/
body {
height: 2000px;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 42px;
min-width: 320px;
max-width: 768px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding: 5px 0;
background-color: #fff;
}
.footer ul {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
.footer ul li img {
width: 20px;
height: 20px;
}
.footer ul li a {
color: gray;
text-decoration: none;
}
.footer ul li {
flex: 1;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
效果图
