flex 布局, 仿php中文网首页,
总结:
1:注意相同属性标签,可以引用同一个 类属性, class中间用空格分开
2,注意固定定位的宽度与页面宽度的最大值的计算基数.
在非100%宽度的情况下,固定定位最大宽度大于页面最大宽度,所以固定定位的最大宽度要单独设定
3 新增加的 flex布局应用:
最新文章及最新博文 延用了之前的0.45/0.55的flex布局应用
最新文章的播放次数 考虑到文字效果的设计, 应用flex布局更为复杂. 采用了 右浮动效果,
相同类的引用 注意不同属性的单独设置,, 相同类的flex继承, 下图中.courses .bw p 继承了之前的 0.55flex布局 需要重新设定为1
最新博文的两端对齐
更多文章的 居中效果
项目截图:
实例
/* 标题统一设计 */
h3 {
text-align: left;
margin-left: 10px;
color: gray;
font-size: 1em;
}
/* 课程居中 两边留白 */
.courses {
width: 98%;
margin: 0 auto;
}
/* ul flex布局 */
.courses ul {
display: flex;
}
/* ul 内li flex居中 */
.courses ul li {
flex: 1;
box-sizing: border-box;
}
/* 图片中间分开 */
.courses ul li:first-of-type {
margin-right: 10px;
}
/* 图片在大小,要设计高度,宽度100% */
.courses ul li img {
width: 100%;
height: 140px;
}
/* 课程部分大小设计及flex布局 */
.courses .kc {
margin: 5px auto;
text-align: left;
background: white;
display: flex;
}
/* 课程图片占比设计 */
.courses .kc>a {
flex: 0.45;
padding: 7px;
height: 90px;
}
/* 课程图片大小 注意与父级的高度关系*/
.courses .kc img {
width: 100%;
height: 90px;
}
/* 课程文字部分效果 */
.courses .kc p {
flex: 0.55;
height: 90px;
line-height: 180%;
/* 多余文字省略号显示 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* 多余文字两边间距 */
margin: 7px;
}
/* 课程标题 选取第一个span进行设计 */
.courses .kc p a span:first-of-type {
font-size: 1rem;
margin-left: 5px;
}
/* 最后一行,播放次数及日期 多余文字大小设计, 单独设计类 .zx */
.courses .zx {
font-size: 0.7rem;
padding: 0 5px;
}
/* 课程级别文字效果从后选取第二个span设计 */
.courses .kc p>span:nth-last-of-type(2) {
color: antiquewhite;
background: #333;
border-radius: 30%;
padding: 0 7px;
font-size: 0.8rem;
margin-left: 5px;
}
/* 播放次数 从前选取第三个span设计 */
.courses .kc p>span:nth-of-type(3) {
float: right;
}
/* 最新文章设计, 引用kc的flex布局 重新分布左7右3,注意内部图片高度设计*/
.courses .xx {
height: 75px;
}
.courses .xx p {
flex: 0.70;
height: 60px;
}
.courses .xx a {
flex: 0.30;
height: 60px;
}
.courses .xx img {
height: 60px;
}
/* 博文内部a标签引用 kc的flex的布局, 重新布局为两端对齐 ,高度设计 */
.courses .bw {
justify-content: space-between;
height: 40px;
line-height: 40px;
box-sizing: border-box;
padding: 0 10px;
}
/* 更多文章内部a标签引用kc的flex布局,布局为居中,高度设计 */
.courses .gd {
justify-content: center;
height: 40px;
line-height: 40px;
margin-bottom: 25px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<div class="courses"> <h3>推荐课程</h3> <ul> <li> <a href=""><img src="static/img/tjkc1.jpg" alt=""></a> </li> <li> <a href=""><img src="static/img/tjkc2.jpg" alt=""></a> </li> </ul> <div class="kc"> <a href=""><img src="static/img/tjkc3.jpg" alt=""></a> <p> <a href=""><span>CI框架30分钟极速入门</span></a> <br> <span>中级</span><span class="zx">49748次播放</span> </p> </div> <div class="kc"> <a href=""><img src="static/img/tjkc4.jpg" alt=""></a> <p> <a href=""><span>2018前端入门_HTML5</a> <br> <span>初级</span><span class="zx">210066次播放</span> </p> </div> <h3>最新更新 </h3> <div class="kc"> <a href=""><img src="static/img/la.jpg" alt=""></a> <p> <a href=""><span>Laravel 5.8 中文文档手册</span></a> <br> <span class="zx"> 《Laravel 5.1/5.8速查表：https://www.php.cn/phpkj/laravel/cheatsheet58.html 》 手册简介：Laravel 5.8 在 Laravel 5.7 的基础上继续进行优化，包括引入新的 Eloquent 关联关系（has-one-through）、优化邮箱验证、基于约定的授权策略类自动注册、 DynamoDB 缓存及 Session 驱动、优化任务调度器的时区配置、支持分配多个认证 guard 到广播频道、PSR-16 缓存驱动规范等等。</span> <br> <span>中级</span><span class="zx">7744次播放</span> </p> </div> <div class="kc"> <a href=""><img src="static/img/la.jpg" alt=""></a> <p> <a href=""><span>Laravel 5.8 中文文档手册</span></a> <br> <span class="zx"> 《Laravel 5.1/5.8速查表：https://www.php.cn/phpkj/laravel/cheatsheet58.html 》 手册简介：Laravel 5.8 在 Laravel 5.7 的基础上继续进行优化，包括引入新的 Eloquent 关联关系（has-one-through）、优化邮箱验证、基于约定的授权策略类自动注册、 DynamoDB 缓存及 Session 驱动、优化任务调度器的时区配置、支持分配多个认证 guard 到广播频道、PSR-16 缓存驱动规范等等。</span> <br> <span>中级</span><span class="zx">7744次播放</span> </p> </div> <div class="kc"> <a href=""><img src="static/img/la.jpg" alt=""></a> <p> <a href=""><span>Laravel 5.8 中文文档手册</span></a> <br> <span class="zx"> 《Laravel 5.1/5.8速查表：https://www.php.cn/phpkj/laravel/cheatsheet58.html 》 手册简介：Laravel 5.8 在 Laravel 5.7 的基础上继续进行优化，包括引入新的 Eloquent 关联关系（has-one-through）、优化邮箱验证、基于约定的授权策略类自动注册、 DynamoDB 缓存及 Session 驱动、优化任务调度器的时区配置、支持分配多个认证 guard 到广播频道、PSR-16 缓存驱动规范等等。</span> <br> <span>中级</span><span class="zx">7744次播放</span> </p> </div> <div class="kc"> <a href=""><img src="static/img/la.jpg" alt=""></a> <p> <a href=""><span>Laravel 5.8 中文文档手册</span></a> <br> <span class="zx"> 《Laravel 5.1/5.8速查表：https://www.php.cn/phpkj/laravel/cheatsheet58.html 》 手册简介：Laravel 5.8 在 Laravel 5.7 的基础上继续进行优化，包括引入新的 Eloquent 关联关系（has-one-through）、优化邮箱验证、基于约定的授权策略类自动注册、 DynamoDB 缓存及 Session 驱动、优化任务调度器的时区配置、支持分配多个认证 guard 到广播频道、PSR-16 缓存驱动规范等等。</span> <br> <span>中级</span><span class="zx">7744次播放</span> </p> </div> <h3>最新文章 </h3> <div class="kc xx"> <p> <a href=""><span>PHP实现动态规划之***问题</span> <br> <span class="zx"> 发布时间：2019-08-13</span></a> </p> <a href=""><img src="static/img/php2.jpg" alt=""></a> </div> <div class="kc xx"> <p> <a href=""><span>PHP实现动态规划之***问题</span> <br> <span class="zx"> 发布时间：2019-08-13</span></a> </p> <a href=""><img src="static/img/php2.jpg" alt=""></a> </div> <div class="kc xx"> <p> <a href=""><span>PHP实现动态规划之***问题</span> <br> <span class="zx"> 发布时间：2019-08-13</span></a> </p> <a href=""><img src="static/img/php2.jpg" alt=""></a> </div> <div class="kc xx"> <p> <a href=""><span>PHP实现动态规划之***问题</span> <br> <span class="zx"> 发布时间：2019-08-13</span></a> </p> <a href=""><img src="static/img/php2.jpg" alt=""></a> </div> <div> <a class="kc gd" href=""><span>更多文章</span></a> </div> <h3>最新博文 </h3> <div> <p> <a class="kc bw" href=""><span>PHP实现动态规划之***问题</span> <span class="zx"> 2019-08-13</span></a> </p> </div> <div> <p> <a class="kc bw" href=""><span>PHP实现动态规划之***问题</span> <span class="zx"> 2019-08-13</span></a> </p> </div> <div> <p> <a class="kc bw" href=""><span>PHP实现动态规划之***问题</span> <span class="zx"> 2019-08-13</span></a> </p> </div> <div> <p> <a class="kc bw" href=""><span>PHP实现动态规划之***问题</span> <span class="zx"> 2019-08-13</span></a> </p> </div> <div> <p> <a class="kc bw" href=""><span>PHP实现动态规划之***问题</span> <span class="zx"> 2019-08-13</span></a> </p> </div> <div> <a class="kc gd" href=""><span>更多文章</span></a> </div> </div>
运行实例 »
点击 "运行实例" 按钮查看在线实例