收藏
批改状态：合格
老师批语：弹性布局的核心之处在于对容器中的剩余空间的有效利用, 使弹性元素可以自动的缩放来有效利用可用空间, 多写多领会
多行弹性布局，可设置容器最大和最小宽度，控制一行显示最大和最小个数
控制个数，主要是避免缩小后一行只显示一个，观感上不太好/看
另外还有column实现弹性布局方式。
其中还简单封装了几个css。
疑问：其实目前为止，这样封装css反而觉得有点麻烦，还要另外重写css样式，调用读取也要写一大串样式名，需要调整也比较麻烦，请老师帮忙解惑一下，该怎么使用这种才能体现出它的优势呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>读书网</title>
<style>
body {
min-width: 420px;
max-width: 768px;
margin: 0 auto;
background: #edeff0;
background-color: rgb(236, 236, 236);
overflow-y: initial;
position: relative;
/*不要出现水平滚动条*/
overflow-x: hidden;
/*设置点击链接跳转时出现高亮,设置为透明: ios / ipad*/
-webkit-tap-highlight-color: transparent;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
/* 简单封装css */
.read-bgc-w {
background-color: white;
}
.read-cr-g {
color: gray;
}
.read-hl-45 {
height: 45px;
line-height: 45px;
}
.read-hl-57 {
height: 57px;
line-height: 57px;
}
.read-nx-320768 {
min-width: 320px;
max-width: 768px;
}
.read-mb-45 {
margin-bottom: 45px;
}
/* 头部信息 */
.top {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 90px;
background-color: rgb(85, 150, 85);
min-width: 420px;
max-width: 768px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.top .header {
display: flex;
height: 45px;
}
.top .header img:first-of-type {
width: 25px;
height: 25px;
border-radius: 50%;
padding: 10px 0 0 8px;
}
.top .header img:last-of-type {
width: 25px;
height: 25px;
padding: 10px 8px 0 0;
}
.top .header span {
flex: 1;
color: white;
text-align: center;
line-height: 45px;
font-size: 1.5rem;
}
/* 导航nav */
.top .nav {
overflow: hidden;
}
.top .nav ul {
margin: 0;
list-style-type: none;
padding-left: 5px;
display: flex;
}
.top .nav ul li {
flex: 1;
text-align: center;
}
.top .nav ul li a {
text-decoration: none;
color: gray;
font-size: 1.1rem;
}
/* main */
.main {
margin-top: 90px;
padding: 0;
}
.main .box {
/* min-width: 320px;
max-width: 768px; */
}
.main .box .box-more {
display: flex;
margin-bottom: 10px;
}
.main .box .box-more h2 {
margin-top: 5px;
padding: 5px 5px 5px 15px;
font-size: 20px;
flex: 0.9;
}
.main .box .box-more a {
margin-top: 5px;
padding: 5px;
font-size: 18px;
flex: 0.1;
text-decoration: none;
color: #444444;
}
.main .box ul {
margin: 0;
padding: 0;
}
.main .box ul .box-news {
list-style-type: none;
display: flex;
width: 100%;
box-sizing: border-box;
background-color: white;
}
.main .box ul .box-news .box-pic {
flex: 0.3;
padding: 15px;
}
.main .box ul .box-news .box-pic img {
width: 200px;
height: 124px;
}
.main .box ul .box-news .box-inner {
flex: 0.9;
width: 530px;
border-bottom: 1px solid #444444;
margin-bottom: 15px;
}
.main .box ul .box-news .box-inner .box-inner-title {
display: flex;
margin: 10px 0;
}
.main .box ul .box-news .box-inner .box-inner-title span:first-of-type {
flex: 0.9;
font-size: 22px;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.main .box ul .box-news .box-inner .box-inner-title span:last-of-type {
flex: 0.1;
font-size: 16px;
border: 1px solid #444444;
text-align: center;
padding: 5px;
margin-right: 5px;
}
.main .box ul .box-news .box-inner .box-inner-info {
font-size: 20px;
/* -webkit-line-clamp用来限制在一个块元素显示的文本的行数。
为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
- webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.box .box-new ul {
background-color: white;
display: flex;
list-style-type: none;
flex-flow: wrap;
justify-content: space-evenly;
align-content: space-evenly;
}
.box .box-new ul .box-new-pic {
padding: 10px 25px;
}
.box .box-new ul .box-new-pic img {
width: 150px;
height: 150px;
}
.box .box-new ul .box-new-pic span {
display: block;
text-align: center;
}
/* online */
.box .box-online-ul .box-online {
background-color: white;
display: flex;
}
.box .box-online-ul .box-online {
list-style-type: none;
}
.box .box-online-ul .box-online .box-online-pic {
flex: 0.2;
padding: 15px 0;
}
.box .box-online-ul .box-online .box-online-pic img {
width: 200px;
height: 200px;
}
.box .box-online-ul .box-online .box-online-intro {
flex: 0.8;
display: flex;
flex-flow: column;
justify-content: space-evenly;
align-content: space-evenly;
border-bottom: 1px solid #444444;
margin-bottom: 15px;
}
.box .box-online .box-online-intro span {
font-size: 18px;
margin: 0;
padding: 0;
}
.box .box-online .box-online-intro span:last-of-type {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
/* 底部信息 */
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
border-top: 1px solid #ccc;
background-color: rgb(85, 150, 85);
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.footer ul {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
flex: 1;
color: white;
}
.footer ul li:first-of-type {
flex: 0.8;
}
.footer ul li:first-of-type span {
float: left;
padding-left: 10px;
}
.footer ul li:last-of-type {
flex: 0.2;
}
.footer ul li:last-of-type span {
float: right;
padding-right: 10px;
}
</style>
</head>
<body>
<div class="top">
<div class="header">
<!-- 图片暂替 -->
<img src="https://m.php.cn/static/images/user_avatar.jpg" alt="">
<span>读书</span>
<img src="https://m.php.cn/static/images/user_avatar.jpg" alt="">
</div>
<div class="nav read-bgc-w read-hl-45 read-of-h">
<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>
<div class="main read-mb-45">
<div class="box">
<div class="box-more">
<h2>资讯</h2><a href="">更多</a>
</div>
<ul>
<li class="box-news">
<div class="box-pic">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568480821586&di=2f3868f9474bb6612a647a6327cdab02&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171203%2F790e8e6750754e24b6d0f9466efcdde8.jpeg"
alt=""></a>
</div>
<div class="box-inner">
<div class="box-inner-title">
<span>浙大艺博馆开馆，一派“汉唐奇迹”致敬艺术史</span>
<span>文化</span>
</div>
<span class="box-inner-info">9月8日，浙江大学艺术与考古博物馆历经十余年筹备正式开馆。浙大艺博馆的定位是文明史、艺术史教学博物馆，是与收藏文字文献的图书馆相平行的实物史料库，也是大学的文科实验室，其最大的特点是服务实物教学。唐代</span>
</div>
</li>
</ul>
<ul>
<li class="box-news">
<div class="box-pic">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568480821586&di=2f3868f9474bb6612a647a6327cdab02&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171203%2F790e8e6750754e24b6d0f9466efcdde8.jpeg"
alt=""></a>
</div>
<div class="box-inner">
<div class="box-inner-title">
<span>《牛津大学终极昆虫图鉴》：把昆虫放大数千倍后你看到的世界</span>
<span>书评</span>
</div>
<span class="box-inner-info">昆虫在我们的生活中随处可见，你总能在暖暖的日子里见到勤劳的蜜蜂，也一定见过不知疲倦在觅食的蚂蚁……然而它们过着的生活却总被我们忽视。比如，昆虫作为食物链的一部分，参与了营养物质大循环，是很多其他体型较</span>
</div>
</li>
</ul>
<ul>
<li class="box-news">
<div class="box-pic">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568480821586&di=2f3868f9474bb6612a647a6327cdab02&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171203%2F790e8e6750754e24b6d0f9466efcdde8.jpeg"
alt=""></a>
</div>
<div class="box-inner">
<div class="box-inner-title">
<span>纪念沃勒斯坦：左翼知识群体的过去与未来</span>
<span>人物</span>
</div>
<span class="box-inner-info">伊曼纽尔沃勒斯坦（1930.9.28—2019.8.31）2019年8月31日，“世界体系理论”的创始人伊曼纽尔沃勒斯坦（Immanuel Wallerstein）辞世。其身后悼念者众，旧雨新知无</span>
</div>
</li>
</ul>
</div>
<!-- 多行弹性布局 -->
<!-- 设置固定最小和最大宽度，能控制一行显示多少个 -->
<div class="box">
<div class="box-more">
<h2>出版新书</h2><a href="">更多</a>
</div>
<div class="box-new">
<ul>
<li class="box-new-pic">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569075081&di=5627220cf6cc6a5b243621a7ba9819d8&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.baike.soso.com%2Fp%2F20131221%2F20131221073254-729907505.jpg" alt=""></a><br><span>从入门到放弃</span>
</li>
<li class="box-new-pic">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569075096&di=7ffd30765200562bcf7672d783d5b141&imgtype=jpg&er=1&src=http%3A%2F%2Fpic2.ooopic.com%2F10%2F55%2F05%2F36b1OOOPIC7c.jpg" alt=""></a><br><span>从入门到放弃</span>
</li>
<li class="box-new-pic">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568480547213&di=be8d135fd3d9bc5bf05d54588087b1fa&imgtype=0&src=http%3A%2F%2Fimg3x2.ddimg.cn%2F18%2F22%2F1447699392-1_u_2.jpg" alt=""></a><br><span>从入门到放弃</span>
</li>
<li class="box-new-pic">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568480573782&di=ae7e75aef3dd23c884ed332c784e9c45&imgtype=0&src=http%3A%2F%2Fpic.5577.com%2Fup%2F2016-4%2F201647145814229310.jpg" alt=""></a><br><span>从入门到放弃</span>
</li>
<li class="box-new-pic">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568480602525&di=dd25d1170864502cb713d51de721c9d7&imgtype=0&src=http%3A%2F%2Fimg.tukexw.com%2Fimg%2F757962b9189946e1.jpg" alt=""></a><br><span>从入门到放弃</span>
</li>
<li class="box-new-pic">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568480657671&di=46320f43f483badacd5168c83a8f8198&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20161215%2F73aa95c0ae574075924106f272d29123_th.jpg"
alt=""></a><br><span>从入门到放弃</span>
</li>
</ul>
</div>
</div>
<div class="box">
<div class="box-more">
<h2>在线读书</h2><a href="">更多</a>
</div>
<ul class="box-online-ul">
<li class="box-online">
<div class="box-online-pic">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568480602525&di=dd25d1170864502cb713d51de721c9d7&imgtype=0&src=http%3A%2F%2Fimg.tukexw.com%2Fimg%2F757962b9189946e1.jpg" alt=""></a>
</div>
<div class="box-online-intro">
<span>多少黑名单 曾互道晚安</span>
<span>风茕子 著</span>
<span>这是一本打破你三观的重口味麻辣情感故事集，***看了会沉默、***看了会清醒，不管你是单身80、90后还是正在甜蜜暴击或者被一段非常规的恋情困扰，读完这本书，会让你明白“每一双水晶鞋都会落满尘埃 ”“什么事都抵不过‘心甘情愿’四个字”“虽然百分之九十九的真情终将以无情收场，我们也要为百分之一的真情好好活着”，*终懂得自己过去和现在的每一个选择，都是*好的安排。</span>
</div>
</li>
</ul>
<ul class="box-online-ul">
<li class="box-online">
<div class="box-online-pic">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568480602525&di=dd25d1170864502cb713d51de721c9d7&imgtype=0&src=http%3A%2F%2Fimg.tukexw.com%2Fimg%2F757962b9189946e1.jpg" alt=""></a>
</div>
<div class="box-online-intro">
<span>饮食滋味</span>
<span>徐文兵 著</span>
<span>我们这一代中国人，饮食结构和习惯发生了巨大变化，流行摧毁了传统，营养和元素代替了味道……关于吃的一切都有了变化。怎样吃才是中国人的饮食之道，才真正能抚慰中国人的身心呢？ 为什么选择读《饮食滋味》？因为，《饮食滋味》讲的是适合中国人每个人体质的饮食之道。也许你会觉得，活了这么多年，别的不敢说，如何饮食是根本不用学的。其实，读完这本书，你的饮食观和人生观将会有巨大的改变。 本书是《黄帝内经说什么》的作者徐文兵老师从《黄帝内经》等经典中总结出的zui适合中国人体质的饮食营养智慧，从“以人为本”的角度出发，解答我们的身体真正缺什么，应该吃什么以及怎样吃的重大生命问题。</span>
</div>
</li>
</ul>
<ul class="box-online-ul">
<li class="box-online">
<div class="box-online-pic">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568480602525&di=dd25d1170864502cb713d51de721c9d7&imgtype=0&src=http%3A%2F%2Fimg.tukexw.com%2Fimg%2F757962b9189946e1.jpg" alt=""></a>
</div>
<div class="box-online-intro">
<span>反脆弱：做一个内心强大的人</span>
<span>壹心理 著</span>
<span>生活中，你是不是常常觉得世界不公平，“为什么我那么努力，却还是一事无成”；你常常抱怨别人，甚至嫌弃自己的原生家庭；你什么都想要，却往往最后什么都没得到，最后人生中各种关系——职场关系、亲密关系等等也凌乱如麻。总之前途渺茫，虽怀揣梦想却被时代裹挟其中，无力感、种种大小不如意如影随形……这是一本读完后能够帮你过好丧生活，快乐走上心智成熟之旅的心理学智慧之书，由26位中国知名心理学家鼎力奉献，书中告诉你，“改变命运首先从改变自己顽固的思维模式开始”“你所坚持的事，决定了你将过上什么样的生活”“人生最怕的不是失败，而是连失败的勇气都没有”“永远别相信任何人对你的任何评价，包括你自己”所以，要想拥有不平庸的活法，就要学会做一个会折腾的人，能掌控自己情绪的人，这样，遇上再糟糕的事情，也能从中找到积极的意义，最终才能赢。</span>
</div>
</li>
</ul>
</div>
</div>
<div class="footer read-nx-320768 read-hl-45">
<ul>
<li><span>dushu.com@2018</span></li>
<li><span>关于</span></li>
</ul>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
