实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php中文网手机版首页</title> <link rel="stylesheet" href="static/css/init.css"> <link rel="stylesheet" href="static/css/style.css"> </head> <body> <!--布局原则: 宽度自适应,高度固定--> <!--顶部固定定位--> <header> <img src="static/images/user-pic.jpeg" alt=""> <img src="static/images/logo.png" alt=""> <img src="static/images/user-nav.jpg" alt=""> </header> <!--banner轮播图,这里用图片暂时代替--> <div class="banner"> <img src="static/images/banner.jpg" alt=""> </div> <!--导航区--> <nav> <ul> <li> <a href=""> <img src="static/images/html.png" alt=""> <span>HTML/CSS</span> </a> </li> <li> <a href=""> <img src="static/images/JavaScript.png" alt=""> <span>JavaScript</span> </a> </li> <li> <a href=""> <img src="static/images/code.png" alt=""> <span>服务端</span> </a> </li> <li> <a href=""> <img src="static/images/sql.png" alt=""> <span>数据库</span> </a> </li> </ul> <ul> <li> <a href=""><img src="static/images/app.png" alt=""> <span>移动端</span> </a> </li> <li> <a href=""> <img src="static/images/manual.png" alt=""> <span>手册</span> </a> </li> <li> <a href=""><img src="static/images/tool2.png" alt=""> <span>工具</span> </a> </li> <li> <a href=""> <img src="static/images/live.png" alt=""> <span>直播</span> </a> </li> </ul> </nav> <!-- 课程区--> <main> <!-- 推荐课程--> <article class="recommend"> <h3>推荐课程</h3> <section> <a href=""><img src="static/images/tjkc1.jpg" alt=""></a> <a href=""><img src="static/images/tjkc2.jpg" alt=""></a> </section> <section> <div> <a href=""><img src="static/images/tjkc3.jpg" alt=""></a> <span> <a href="">CI框架30分钟极速入门</a> <span><i>中级</i>49738次播放</span> </span> </div> <div> <a href=""><img src="static/images/tjkc4.jpg" alt=""></a> <span> <a href="">2018前端入门基础</a> <span><i>初级</i>209952次播放</span> </span> </div> </section> </article> <article class="newupdate"> <h3>最新更新</h3> <div class="update"> <a href=""><img src="static/images/5db2b53c67bca626.jpg" alt=""></a> <span> <a href="">2019python自学视频</a> <p>本课程适合想从零开始学习 Python 编程语言的开发人</p> <span> <i>初级</i> <span>6997次播放</span> </span> </span> </div> <div class="update"> <a href=""><img src="static/images/5da7e9b7895ed229.jpg" alt=""></a> <span> <a href="">2019python自学视频</a> <p>本课程适合想从零开始学习 Python 编程语言的开发人</p> <span> <i>初级</i> <span>6997次播放</span> </span> </span> </div> <div class="update"> <a href=""><img src="static/images/5da51b8ff1224244.png" alt=""></a> <span> <a href="">2019python自学视频</a> <p>本课程适合想从零开始学习 Python 编程语言的开发人</p> <span> <i>初级</i> <span>6997次播放</span> </span> </span> </div> <div class="update"> <a href=""><img src="static/images/5d9ec555ee63b448.png" alt=""></a> <span> <a href="">2019python自学视频</a> <p>本课程适合想从零开始学习 Python 编程语言的开发人</p> <span> <i>初级</i> <span>6997次播放</span> </span> </span> </div> <div class="update"> <a href=""><img src="static/images/5da16c1d7f658408.jpg" alt=""></a> <span> <a href="">2019python自学视频</a> <p>本课程适合想从零开始学习 Python 编程语言的开发人</p> <span> <i>初级</i> <span>6997次播放</span> </span> </span> </div> <div class="update"> <a href=""><img src="static/images/5da6a50535529903.jpg" alt=""></a> <span> <a href="">2019python自学视频</a> <p>本课程适合想从零开始学习 Python 编程语言的开发人</p> <span> <i>初级</i> <span>6997次播放</span> </span> </span> </div> </article> <!--最新文章--> <!--这个模块与上面的最新课程几乎是一样的, 只是左右顺序交换了一个,样式略有不同--> <article class="newarticle"> <h3>最新文章</h3> <div class="article"> <a href=""> <span> <h2>java中常用的数据类型有哪些</h2> <span>发布时间:2019-12-02</span> </span> <img src="static/images/5de4c847c3fec232.jpg" alt=""> </a> </div> <div class="article"> <a href=""> <span> <h2>java中常用的数据类型有哪些</h2> <span>发布时间:2019-12-02</span> </span> <img src="static/images/5de4c847c3fec232.jpg" alt=""> </a> </div> <div class="article"> <a href=""> <span> <h2>java中常用的数据类型有哪些</h2> <span>发布时间:2019-12-02</span> </span> <img src="static/images/5de4c847c3fec232.jpg" alt=""> </a> </div> <div class="article"> <a href=""> <span> <h2>java中常用的数据类型有哪些</h2> <span>发布时间:2019-12-02</span> </span> <img src="static/images/5de4c847c3fec232.jpg" alt=""> </a> </div> <div class="article"> <a href=""> <span> <h2>java中常用的数据类型有哪些</h2> <span>发布时间:2019-12-02</span> </span> <img src="static/images/5de4c847c3fec232.jpg" alt=""> </a> </div> <a href="">更多内容</a> </article> <!-- 最新博文,最新问答,做为作业,交给大家课后完成 --> <!--最新博文--> <article class="blog"> <h3>最新博文</h3> <div> <a href=""> <h2>1129_抽象类和接口 第25课</h2> <span>2019年12月03号</span> </a> </div> <div> <a href=""> <h2>queryList可以下载图片吗?</h2> <span>2019年12月03号</span> </a> </div> <div> <a href=""> <h2>demo1的id限制最小1位,输入1,会和demo3 isOk冲突吗?</h2> <span>2019年12月03号</span> </a> </div> <div> <a href=""> <h2>1129_抽象类和接口 第25课</h2> <span>2019年12月03号</span> </a> </div> <a href="">更多内容</a> </article> <article class="blog"> <h3>最新问答</h3> <div> <a href=""> <h2>默认安装的PHP版本太低了啊怎么换成安装php7.1版本以上的</h2> <span>2019-12-03</span> </a> </div> <div> <a href=""> <h2>默认安装的PHP版本太低了啊怎么换成安装php7.1版本以上的</h2> <span>2019-12-03</span> </a> </div> <div> <a href=""> <h2>默认安装的PHP版本太低了啊怎么换成安装php7.1版本以上的</h2> <span>2019-12-03</span> </a> </div> <div> <a href=""> <h2>默认安装的PHP版本太低了啊怎么换成安装php7.1版本以上的</h2> <span>2019-12-03</span> </a> </div> <a href="">更多内容</a> </article> </main> <!--下面咱们做一下底部,底部与头部类似,也是固定定位实现--> <footer> <a href=""><img src="static/font-icon/zhuye.png" alt=""> <span>主页</span> </a> <a href=""> <img src="static/font-icon/video.png" alt=""> <span>视频</span> </a> <a href=""> <img src="static/font-icon/luntan.png" alt=""> <span>社区</span> </a> <a href=""> <img src="static/font-icon/geren.png" alt=""> <span>我的</span> </a> </footer> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
/*************** 头部样式 ***************/ header { /*固定定位*/ position: fixed; top: 0; /*固定定位元素必须设置宽度与高度*/ width: 100%; height: 42px; background: #444444; color: white; /*设置最小尺寸*/ min-width: 320px; max-width: 768px; /*转为Flex容器,设置元素排列*/ display: flex; /*元素主轴分散,两端对齐*/ justify-content: space-between; /*元素交叉轴居中对齐*/ align-items: center; } /*第一张,最后一设置通用样式*/ header>img:first-of-type, header>img:last-of-type { width: 26px; height: 26px; margin: 5px; } /*第一张用户头像应该是正圆*/ header>img:first-of-type { border-radius: 50%; /* 13px */ } /*设置中间LOGO样式*/ header>img { width: 94px; } /*************** 轮播图设置 ***************/ .banner { display: flex; height: 200px; } /*************** 导航区 ***************/ nav { background-color: white; display: flex; /*主轴为垂直方向, 禁止换行*/ flex-flow: column nowrap; } /*图片默认大小*/ nav img { width: 45px; height: 49px; } /*每一行导航都应该是一个弹性容器以方便布局*/ nav>ul { display: flex; /*每个菜单项水平且不换行*/ flex-flow: row nowrap; } /*每一菜单项均分全部空间*/ nav ul li { flex: 1; } /*图片与文本应该做为一个组件,统一设置*/ nav ul li a { display: flex; /*图片, 链接文本垂直排列*/ flex-flow: column wrap; /*交叉轴上居中显示*/ align-items: center; /*外边距可以使菜单项之间不太拥挤*/ margin: 10px; } /*菜单项文本与上面图标有一个间隙*/ nav ul li a span { margin-top: 5px; } /*************** 主体内容区 ***************/ /******** 推荐课程区 *******/ main { display: flex; flex-flow: column nowrap; } /*设置水平排列的推荐课程*/ main>.recommend>section:first-of-type { display: flex; flex-flow: row nowrap; } /*每个课程图片平分全部空间*/ main>.recommend>section:first-of-type>a { margin: 5px; flex: 1; } /*设置图片高度*/ main>.recommend>section:first-of-type>a>img { height: 90px; } /*设置垂直排列的推荐课程*/ main>.recommend>section:last-of-type { display: flex; flex-flow: column nowrap; } main>.recommend>section:last-of-type>div { background-color: #fff; margin: 5px; /*也转为弹性容器*/ display: flex; flex-flow: row nowrap; } /* 图片宽高 */ main>.recommend>section:last-of-type>div img { width: 350px; height: 90px; } main>.recommend>section:last-of-type>div>span { display: flex; /*文本垂直排列*/ flex-flow: column nowrap; margin-top: 5px; padding-left: 10px; } main>.recommend>section:last-of-type>div>span i { font-style: normal; background-color: #333333; color: white; border-radius: 4px; padding: 0 5px; font-size: smaller; } /* 最新更新 */ main .newupdate { display: flex; flex-flow: column nowrap; margin: 5px; } main .newupdate .update { display: flex; flex-flow: row nowrap; background-color: #fff; margin-bottom: 20px; padding: 9px 0px; } main .newupdate .update >a img { width: 350px; height: 90px; } main .newupdate .update >span { display: flex; flex-flow: column nowrap; margin-left: 10px; } main .newupdate .update > span > span > span{ float: right; font-size: smaller; } main .newupdate .update > span > span i { /* normal:默认正常样式 */ font-style: normal; background-color: #333333; /* 圆角 */ border-radius: 4px; color: #fff; /* smaller 小号字体 */ font-size: smaller; padding: 0 5px; } /* 最新文章 */ .newarticle { display: flex; flex-flow: column nowrap; } .newarticle .article { background-color: #fff; padding: 0 9px 8px 9px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1); margin-bottom: 20px; } .newarticle .article img{ margin-top: 8px; width: 250px; height: 65px; } .newarticle .article > a { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } .newarticle .article > a > span >h2 { margin-top: 3px; font-size: 14px; } .newarticle .article > a > span >span { font-size: 12px; } .newarticle > a { background-color: #fff; display: block; text-align: center; padding: 5px 0; font-size: 14px; } /*************** 最新博文 ***************/ .blog { display: flex; flex-flow: column nowrap; } .blog > div { border-bottom: 1px solid #eee; padding-bottom: 8px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1); background: #fff; margin-bottom: 10px; } .blog > div > a { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; padding: 0 10px; } .blog > div > a > h2 { font-size: 14px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .blog > div > a > span { font-size: 12px; } .blog > a { background-color: #fff; display: block; text-align: center; padding: 5px 0; font-size: 14px; } /*************** 最新问答 ***************/ /*底部*/ footer { /* 固定定位固定在底部 */ position: fixed; bottom: 0; display: flex; flex-flow: row nowrap; justify-content: space-around; border-top: 1px solid #ccc; } /* footer中a标签转为弹性容器 */ footer a { display: flex; flex-flow: column nowrap; align-items: center; margin-top: 5px; } /* 图片大小 */ footer > a img { width: 10%; } /* 字体大小 */ footer > a span { padding-top: 3px; font-size:12px ; } /*暂时将高度设置为2000px,让滚动条出来*/ body { height: 2000px; } main > article > .gengduo > a { }
运行实例 »
点击 "运行实例" 按钮查看在线实例
手写:
总结:
熟悉了flex布局的使用,了解了移动页面的布局