收藏
批改状态：合格
老师批语：对于flex布局, 总结的不错, 不仅会写, 还要记住使用场景哟
利用flex技术仿PHP中文网首页和一个独立手机页面
仿PHP中文网
在线运行页面：http://demo.seogo.me/phpcn/
<style>
/* 初始化样式 */
body {
min-width: 320px;
max-width: 768px;
margin: 0 auto;
background: #edeff0;
position: relative;
overflow-x: hidden;
overflow-y: initial;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
p {
margin: 0;
}
a {
text-decoration: none;
color: #444;
}
/* 头部样式 */
.header {
position: fixed;
z-index: 999;
width: 100%;
min-width: 320px;
max-width: 768px;
height: 42px;
background: #2d353c;
top: 0;
left: 50%;
transform: translate(-50%);
display: flex;
}
.header img:first-of-type,
.header img:last-of-type {
width: 25px;
height: 25px;
margin-top: 8px;
}
.header img:first-of-type {
border-radius: 50%;
margin-left: 5px;
}
.header .logo {
flex: 1;
text-align: center;
height: 42px;
}
.header .logo img {
width: 92px;
height: 42px;
margin-top: 0;
}
.banner {
width: 100%;
height: 160px;
display: flex;
margin-top: 42px;
}
/* 大图 */
.banner img {
width: 100%;
height: 160px;
}
/* 导航菜单 */
.nav {
background-color: #fff;
width: 100%;
}
.nav ul {
margin: 0;
display: flex;
padding: 15px 0;
box-sizing: border-box;
}
.nav ul li {
flex: 1;
text-align: center;
}
.nav ul li a {
color: #888;
font-size: 0.8rem;
font-weight: 700;
}
.nav img {
width: 45px;
height: 45px;
}
.main {
margin: 10px 10px 80px;
}
/* 推荐课程 */
h3 {
color: #888;
}
.course ul {
display: flex;
}
.course ul li {
padding: 5px;
}
.course ul img {
width: 100%;
height: 90px;
}
.course div {
background-color: #fff;
padding: 10px;
height: 90px;
margin-top: 10px;
display: flex;
}
.course div img {
width: 100%;
height: 90px;
}
.course div a {
color: #444;
flex: .45;
}
.course div p {
flex: .55;
margin-left: 10px;
}
.course div a span {
position: relative;
top: 10px;
}
.course div a span:first-of-type {
background: #595757;
color: #fff;
padding: 2px;
font-size: 0.75rem;
border-radius: 8px;
}
.course div a span:last-of-type {
font-size: 0.7rem;
padding-left: 5px;
}
.course.new div {
justify-content: flex-end;
}
/* 最新更新 */
.course.date small {
color: #888;
padding-top: 10px;
}
.course.date div p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.course.date div a span:last-of-type {
float: right;
}
/* 最新文章 */
.article ul {
display: flex;
}
.article ul li {
padding: 5px;
}
.article ul img {
width: 100%;
height: 70px;
}
.article div {
background-color: #fff;
padding: 10px;
height: 70px;
margin-top: 10px;
display: flex;
flex-direction: row-reverse;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
}
.article div img {
width: 100%;
height: 70px;
}
.article div a {
color: #444;
flex: .3;
}
.article div p {
flex: .7;
margin-left: 5px;
font-size: 0.8rem;
}
.article div a span {
position: relative;
top: 10px;
font-size: 0.7rem;
}
.article.new div {
justify-content: flex-end;
}
/* 最新博文 */
.blog div {
width: 100%;
display: flex;
background: #fff;
padding: 10px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
margin-bottom: 20px;
position: relative;
box-sizing: border-box;
}
.blog div a {
flex: .8;
font-size: 0.8rem;
font-weight: 700;
color: #999;
}
.blog div span {
flex: .2;
font-size: 0.7rem;
position: absolute;
right: 30px;
color: #999;
}
.blog .more {
height: 32px;
background: #fff;
padding: 0;
}
.blog .more a {
line-height: 32px;
padding: 0;
text-align: center;
flex: 1;
}
/* 底部 */
.footer {
width: 100%;
position: fixed;
bottom: 0;
border-top: 1px solid #ccc;
min-width: 320px;
max-width: 768px;
z-index: 999;
}
.footer ul {
display: flex;
margin: 0;
width: 100%;
height: 42px;
background: #edeff0;
}
.footer ul li {
flex: 1;
text-align: center;
}
</style>
<!-- 头部 -->
<div class="header">
<img src="static/images/user.jpg" class="user" alt="">
<div class="logo">
<img src="static/images/logo.png" alt="">
</div>
<img src="static/images/menu.png" alt="">
</div>
<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>JavaSript</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>
<div class="main">
<!-- 推荐课程 -->
<h3>推荐课程</h3>
<div class="course">
<ul>
<li>
<a href=""><img src="static/images/course.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="static/images/course.jpg" alt=""></a>
</li>
</ul>
<div>
<a href=""><img src="static/images/course1.jpg" alt=""></a>
<p>
<a href="">CI框架30分钟极速入门<br>
<span>中级</span><span>49872次播放</span>
</a>
</p>
</div>
<div>
<a href=""><img src="static/images/course2.jpg" alt=""></a>
<p>
<a href="">2018前端入门_HTML5<br>
<span>中级</span><span>49872次播放</span>
</a>
</p>
</div>
</div>
<!-- 最新更新 -->
<h3>最新更新</h3>
<div class="course date">
<div>
<a href=""><img src="static/images/date1.jpg" alt=""></a>
<p>
<a href="">Laravel 5.8 中文文档手册<br>
<small>本套课程将帮助大家迅速掌握JavaScript这门高端的、动态的、弱类型编程语言。知识点简单明了，让你学习0压力，适合新手观看学习......</small>
<br>
<span>中级</span><span>49872次播放</span>
</a>
</p>
</div>
<div>
<a href=""><img src="static/images/date2.jpg" alt=""></a>
<p>
<a href="">JavaScript极速入门<br>
<small>php中文网第七期线上***今晚（2019.7.1）正式开课啦~~！为了让广大PHP开发爱好者，了解本期的课程，特安排了直播开放课，感兴趣的小伙伴不要错过哟！ 晚 20:00-22:00直播 ，报名qq：88526（猪哥）。七期线上班详情：http://www.php.cn/k.html</small>
<br>
<span>中级</span><span>49872次播放</span>
</a>
</p>
</div>
<div>
<a href=""><img src="static/images/date3.jpg" alt=""></a>
<p>
<a href="">第七期_直播体验课<br>
<small>html和css是组成WEB前端开发最核心的部分，所以结合之前的html课程，我们再来学习本章节的css，将会获得更好的学习体验。课程内容非常有节奏的安排，知识点简单明了，让你从头到尾学习毫无压力……快来学习吧……</small>
<br>
<span>中级</span><span>49872次播放</span>
</a>
</p>
</div>
</div>
<!-- 最新文章 -->
<h3>最新文章</h3>
<div class="article">
<div>
<a href=""><img src="static/images/course1.jpg" alt=""></a>
<p>
<a href="">CI框架30分钟极速入门<br>
<span>发布时间：2019-08-23</span>
</a>
</p>
</div>
<div>
<a href=""><img src="static/images/course1.jpg" alt=""></a>
<p>
<a href="">CI框架30分钟极速入门<br>
<span>发布时间：2019-08-23</span>
</a>
</p>
</div>
</div>
<!-- 最新博文 -->
<h3>最新博文</h3>
<div class="blog">
<div>
<a href="">mysql查询时间戳和日期的转换</a>
<span>2019-09-07</span>
</div>
<div>
<a href="">小程序实现复制文本内容</a>
<span>2019-09-07</span>
</div>
<div>
<a href="">js获取url链接中的域名部分</a>
<span>2019-09-07</span>
</div>
<div class="more"><a href="">更多内容</a></div>
</div>
<!-- 最新问答 -->
<h3>最新问答</h3>
<div class="blog">
<div>
<a href="">栏目链接不对吧？？？</a>
<span>2019-09-07</span>
</div>
<div>
<a href="">用的编辑软件是啥</a>
<span>2019-09-07</span>
</div>
<div>
<a href="">管理员账户密码都不修改，</a>
<span>2019-09-07</span>
</div>
<div class="more"><a href="">更多内容</a></div>
</div>
</div>
<div class="footer">
<ul>
<li>
<a href=""><img src="static/images/home.png" alt=""></a>
</li>
<li>
<a href=""><img src="static/images/video.png" alt=""></a>
</li>
<li>
<a href=""><img src="static/images/shequ.png" alt=""></a>
</li>
<li>
<a href=""><img src="static/images/us.png" alt=""></a>
</li>
</ul>
</div>点击 "运行实例" 按钮查看在线实例
仿文书帮首页
目标站地址：http://m.wenshubang.com/
仿站地址：http://demo.seogo.me/flex/
<style>
body {
min-width: 320px;
max-width: 740px;
margin: 0 auto;
overflow-x: hidden;
overflow-y: initial;
position: relative;
background-color: #f0f0f0;
}
h3,
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
/* 头部样式 */
.header {
position: fixed;
top: 0;
width: 100%;
height: 45px;
background: #fff;
min-width: 320px;
max-width: 740px;
left: 50%;
transform: translate(-50%);
z-index: 999;
}
.header img {
margin-top: 45px;
position: relative;
width: 170px;
height: 38px;
margin-top: 4px;
left: 50%;
transform: translate(-50%);
}
/* 大图 */
.banner {
margin-top: 45px;
width: 100%;
margin-bottom: -4px;
}
.banner img {
width: 100%;
height: auto;
}
/* 菜单栏 */
.nav {
background: #fff;
width: 100%;
}
.nav ul {
display: flex;
box-sizing: border-box;
}
.nav ul li {
text-align: center;
flex: 1;
padding: 11px;
}
.nav ul li a {
color: #333;
text-decoration: none;
font-size: .9rem;
}
.nav ul li img {
width: 45px;
height: 45px;
}
/* 分类导航栏 */
.menu {
width: 100%;
height: 131px;
background: #fff;
border-bottom: 1px solid #F3F0F0;
}
.menu h3 {
height: 32px;
line-height: 32px;
background: #F9F9F9;
margin-top: 10px;
font-size: 1rem;
color: #333;
border-bottom: 1px solid #F3F0F0;
position: relative;
padding-left: 25px;
}
.menu h3:before {
position: absolute;
content: '';
border-left: 4px solid #F1B605;
height: 16px;
top: 8px;
left: 15px;
}
.subnav {
height: 99px;
border-bottom: 1px solid #F3F0F0;
padding-top: 15px;
}
.subnav ul {
display: flex;
width: 100%;
box-sizing: border-box;
padding-top: 4px;
}
.subnav ul li {
flex: 1;
text-align: center;
padding-bottom: 16px;
}
.subnav ul li a {
color: #666;
text-decoration: none;
}
.subnav ul li a span {
font-size: 14px;
padding: 2px 4px;
color: #fff;
border-radius: 5px;
margin-right: 15px;
}
.subnav ul:first-of-type>li:first-of-type span {
background: #F1B605;
border: 1px solid #F1B605;
}
.subnav ul:first-of-type>li:nth-of-type(2) span {
background: #069DD0;
border: 1px solid #069DD0;
}
.subnav ul:first-of-type>li:last-of-type span {
background: #28A281;
border: 1px solid #28A281;
}
.subnav ul:last-of-type>li:first-of-type span {
background: #15C2C3;
border: 1px solid #15C2C3;
}
.subnav ul:last-of-type>li:nth-of-type(2) span {
background: #F1B605;
border: 1px solid #F1B605;
}
.subnav ul:last-of-type>li:last-of-type span {
background: #FF5D43;
border: 1px solid #FF5D43;
}
/* 列表栏*/
.index_list {
margin-top: 0;
background: #fff;
margin-bottom: 8px;
}
.index_list h3 {
height: 36px;
line-height: 36px;
font-weight: normal;
font-size: 1rem;
color: #333;
border-bottom: 1px solid #F3F0F0;
padding-left: 15px;
position: relative;
}
.index_list h3 img {
position: absolute;
top: 8px;
}
.index_list h3 a {
font-size: 12px;
color: #069DD0;
line-height: 36px;
text-decoration: none;
position: absolute;
right: 15px;
}
.index_list h3 span {
height: 36px;
line-height: 36px;
padding-left: 27px;
}
.index_list ul {
width: 100%;
display: flex;
flex-wrap: wrap;
background: #fff;
}
.index_list ul li {
width: 25%;
text-align: center;
height: 24px;
line-height: 24px;
overflow: hidden;
margin: 6px 0 4px;
position: relative;
}
.index_list ul li:after {
position: absolute;
content: '';
border-right: 1px solid #E2E2E2;
height: 24px;
right: 0;
top: 0;
}
.index_list ul li:nth-of-type(4n):after {
border-right: none;
}
.index_list ul li a {
text-decoration: none;
color: #666;
}
/* 文章列表 */
.index_list.article_list ul li {
width: 33.3% !important;
}
.index_list.article_list ul li:nth-of-type(3n):after {
border-right: none !important;
}
.index_list.article_list ul li:nth-of-type(4n):after {
border-right: 1px solid #E2E2E2 !important;
}
.index_list.article_list ul li a {
color: #016cc1 !important;
}
/* 底部 */
.footer {
position: relative;
height: 36px;
line-height: 36px;
background: #fff;
text-align: center;
}
.footer img {
width: 24px;
position: relative;
top: 6px;
}
.footer span {
color: #888;
height: 36px;
line-height: 36px;
padding-left: 5px;
}
</style>
<!-- 头部 -->
<div class="header">
<img src="static/images/logo.png" alt="">
</div>
<!-- 大图 -->
<div class="banner">
<img src="static/images/banner.jpg" alt="">
</div>
<!-- 菜单 -->
<div class="nav">
<ul>
<li>
<a href=""><img src="static/images/gw.png" alt=""><br><span>行政公文</span></span>
</a>
</li>
<li>
<a href=""><img src="static/images/zd.png" alt=""><br><span>规章制度</span></a>
</li>
<li>
<a href=""><img src="static/images/sw.png" alt=""><br><span>事务文书</span></a>
</li>
<li>
<a href=""><img src="static/images/hy.png" alt=""><br><span>会议文书</span></a>
</li>
</ul>
<ul>
<li>
<a href=""><img src="static/images/ly.png" alt=""><br><span>交际礼仪文书</span></a>
</li>
<li>
<a href=""><img src="static/images/fl.png" alt=""><br><span>法律文书</span></a>
</li>
<li>
<a href=""><img src="static/images/jj.png" alt=""><br><span>经济财务文书</span></a>
</li>
<li>
<a href=""><img src="static/images/lw.png" alt=""><br><span>论文</span></a>
</li>
</ul>
<ul>
<li>
<a href=""><img src="static/images/ht.png" alt=""><br><span>合同文书</span></a>
</li>
<li>
<a href=""><img src="static/images/dt.png" alt=""><br><span>总结范文</span></a>
</li>
<li>
<a href=""><img src="static/images/sy.png" alt=""><br><span>实用范文</span></a>
</li>
<li>
<a href=""><img src="static/images/zw.png" alt=""><br><span>作文</span></a>
</li>
</ul>
</div>
<!-- 分类导航区 -->
<div class="menu">
<h3>分类导航</h3>
<div class="subnav">
<ul>
<li> <a href=""><span>事</span>事务类</a></li>
<li> <a href=""><span>启</span>启示类</a> </li>
<li> <a href=""><span>通</span>通知类</a> </li>
</ul>
<ul>
<li> <a href=""><span>总</span>总结类</a> </li>
<li> <a href=""><span>合</span>合同类</a> </li>
<li> <a href=""><span>工</span>工作类</a></li>
</ul>
</div>
</div>
<!-- 列表栏 -->
<div class="index_list">
<h3>
<img src="static/images/1.png" " alt=" "><span>交际礼仪文书</span>
<a target="_blank " href=" ">查看>></a>
</h3>
<ul>
<li>
<a href=" ">聘书</a>
</li>
<li>
<a href=" ">表扬信</a>
</li>
<li>
<a href=" ">道歉信</a>
</li>
<li>
<a href=" ">讣告</a>
</li>
<li>
<a href=" ">悼词</a>
</li>
<li>
<a href=" ">祝词</a>
</li>
<li>
<a href=" ">贺信</a>
</li>
<li>
<a href=" ">邀请函</a>
</li>
<li>
<a href=" ">感谢信</a>
</li>
<li>
<a href=" ">倡议书</a>
</li>
<li>
<a href=" ">答谢信</a>
</li>
<li>
<a href=" ">辞职信</a>
</li>
<li>
<a href=" ">祝福语</a>
</li>
<li>
<a href=" ">推荐信</a>
</li>
<li>
<a href=" ">公开信</a>
</li>
<li>
<a href=" ">离职证明</a>
</li>
<li>
<a href=" ">辞职申请书</a>
</li>
<li>
<a href=" ">简历</a>
</li>
<li>
<a href=" ">求职信</a>
</li>
<li>
<a href=" ">慰问信</a>
</li>
</ul>
</div>
<div class="index_list ">
<h3>
<img src="static/images/2.png " " alt=" "><span>法律文书</span>
<a target="_blank " href=" ">查看>></a>
</h3>
<ul>
<li>
<a href=" ">起诉状</a>
</li>
<li>
<a href=" ">上诉状</a>
</li>
<li>
<a href=" ">申诉状</a>
</li>
<li>
<a href=" ">答辩状</a>
</li>
<li>
<a href=" ">仲裁协议书</a>
</li>
<li>
<a href=" ">仲裁申请书</a>
</li>
</ul>
</div>
<div class="index_list ">
<h3>
<img src="static/images/3.png " " alt=" "><span>规章制度</span>
<a target="_blank " href=" ">查看>></a>
</h3>
<ul>
<li>
<a href=" ">章程</a>
</li>
<li>
<a href=" ">条例</a>
</li>
<li>
<a href=" ">规定</a>
</li>
<li>
<a href=" ">办法</a>
</li>
<li>
<a href=" ">细则</a>
</li>
<li>
<a href=" ">守则</a>
</li>
<li>
<a href=" ">制度</a>
</li>
</ul>
</div>
<div class="index_list ">
<h3>
<img src="static/images/4.png " " alt=" "><span>会议文书</span></h3>
<ul>
<li>
<a href=" ">会议方案</a>
</li>
<li>
<a href=" ">会议通知</a>
</li>
<li>
<a href=" ">会议记录</a>
</li>
<li>
<a href=" ">会议讲话</a>
</li>
<li>
<a href=" ">会议闭幕词</a>
</li>
</ul>
</div>
<div class="index_list ">
<h3>
<img src="static/images/5.png " " alt=" "><span>经济财务文书</span>
<a target="_blank " href=" ">查看>></a>
</h3>
<ul>
<li>
<a href=" ">可行性研究</a>
</li>
<li>
<a href=" ">审计报告</a>
</li>
<li>
<a href=" ">财务分析</a>
</li>
<li>
<a href=" ">资产评估</a>
</li>
</ul>
</div>
<!-- 文章列表 -->
<div class="index_list article_list ">
<h3>
<img src="static/images/hot.png " " alt=" "><span>经济财务文书</span>
<a target="_blank " href=" ">查看>></a>
</h3>
<ul>
<li>
<a href=" ">辅修经贸英语生求职信范文</a>
</li>
<li>
<a href=" ">我惹祸了小学作文350字</a>
</li>
<li>
<a href=" ">野鸭与苍鹰励志小故事</a>
</li>
<li>
<a href=" ">《景阳冈》缩写作文</a>
</li>
<li>
<a href=" ">辅修经贸英语生求职信范文</a>
</li>
<li>
<a href=" ">我惹祸了小学作文350字</a>
</li>
<li>
<a href=" ">野鸭与苍鹰励志小故事</a>
</li>
<li>
<a href=" ">《景阳冈》缩写作文</a>
</li>
<li>
<a href=" ">辅修经贸英语生求职信范文</a>
</li>
</ul>
</div>
<!-- 底部 -->
<div class="footer">
<img src="static/images/m_logo.png" alt=""><span>文书帮</span>
</div>点击 "运行实例" 按钮查看在线实例
总结
本次作业难点在于flex容器和项目的属性，之前flex布局基本没基础过，运用还不是很熟练。
flex容器属性总结
1、flex-direction （控制flex元素方向） ：row、row-reverse、column、column-reverse
2、flex-wrap（元素换行）：nowrap、wrap、wrap-reverse
3、flex-flow（flex-direction和flex-wrap的缩写）：默认为flex-flow：row nowrap
4、justify-content（横轴的对齐方式）：flex-start、flex-end、center、space-between、space-around
5、align-items（纵轴对齐方式）：flex-start、flex-end、center
6、align-content（多根轴线的对齐方式，如果只有一根轴线则该属性无效）：flex-start、flex-end、center、space-between、space-around、stretch
flex项目属性总结
1、order定义项目排列顺序,索引越小超靠前,默认为0
2、flex-grow定义项目的放大比例,默认为0表示不放大, 即就算存在剩余空间也不放大
3、flex-shrink定义了项目的缩小比例,默认为1,即如何空间不足,则自动缩小项目来填充
4、flex-basis定义了项目占据的主轴空间,默认值为auto, 即项目原始大小
5、flex是flex-grow,flex-shrink,flex-basis简写,默认值: 0 1 auto, 后二个属性可选6align-self个性化定定制某单个项目的对齐方式,可覆盖容器`align-items`属性,默认auto
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
