📳题目要求
- 阅读下列说明、效果图和代码,完成移动端布局。
说明
- 在某项目中,项目中的文件包含index.html、style.css和images文件夹。请根据现有的代码 和效果图补全代码(1)-(5)
效果图
📳html代码
<htmllang="en"><head><metacharset="UTF-8"><title>在线公开课学习app</title><metacontent="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"name="viewport"/><linkhref="css/style.css"rel="stylesheet"type="text/css"/></head><body><headerclass="header"><divclass="center"><divclass="search-box"><iclass="icon icon-search"></i><inputtype="text"placeholder="搜索课程"></div></div></header><sectionclass="scrollView"><divclass="slider-wrapper"><imgsrc="images/banner.png"alt=""></div><divclass="item"><ahref="javascript:;"class="palace-grid"><divclass="palace-grid-icon"><imgsrc="images/nav-001.png"alt=""></div><divclass="palace-grid-text"><h2>临床学院</h2></div></a><ahref="javascript:;"class="palace-grid"><divclass="palace-grid-icon"><imgsrc="images/nav-002.png"alt=""></div><divclass="palace-grid-text"><h2>科研学院</h2></div></a><ahref="javascript:;"class="palace-grid"><divclass="palace-grid-icon"><imgsrc="images/nav-003.png"alt=""></div><divclass="palace-grid-text"><h2>医考学院</h2></div></a><ahref="javascript:;"class="palace-grid"><divclass="palace-grid-icon"><imgsrc="images/nav-004.png"alt=""></div><divclass="palace-grid-text"><h2>科员学院</h2></div></a></div><divclass="flex"><h1>精品推荐</h1></div><divclass="list-theme"><ahref="javascript:;"class="list-item"><divclass="list-theme-img"><imgsrc="images/pd-001.png"alt=""></div><divclass="list-theme-message"><h3class="list-theme-title">从基础到实战:全面讲解补液</h3><p>¥215.00 <i>新课特惠</i><em>¥398</em></p></div></a><ahref="javascript:;"class="list-item"><divclass="list-theme-img"><imgsrc="images/pd-002.png"alt=""></div><divclass="list-theme-message"><h3class="list-theme-title">Meta 分析零基础的实用教程</h3><p>¥215.00 <em>¥398</em></p></div></a><ahref="javascript:;"class="list-item"><divclass="list-theme-img"><imgsrc="images/pd-003.png"alt=""></div><divclass="list-theme-message"><h3class="list-theme-title">脊柱MRI进阶指南 分析零基础的实用教程</h3><p>¥215.00 <i>新课特惠</i><em>¥398</em></p></div></a><ahref="javascript:;"class="list-item"><divclass="list-theme-img"><imgsrc="images/pd-004.png"alt=""></div><divclass="list-theme-message"><h3class="list-theme-title">从基础到实战:全面讲解补液</h3><p>¥215.00<em>¥398</em></p></div></a></div></section></body></html>
📳css代码
html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, textarea, th, td { margin: 0; padding: 0; } html,body { color: #333; margin: 0; height: 100%; font-family: '微软雅黑'; font-weight: normal; } * { box-sizing: border-box; } a { text-decoration: none; color: #000; } img { width: 100%; height: auto; display: block; border: 0; } body { background: #fff; color: #666; } ul,ol{ list-style: none; } .clearfix::after { clear: both; content: ""; display: block; } .header{ height: 44px; position: relative; display: flex; z-index: 102; background:#fefefe; } .header.center{ box-ordinal-group: 3; /* ___(1)_____设置弹性盒子 */display: flex; /* 设置弹性盒子 */justify-content: center; align-items: center; height: 44px; width: 90%; margin-left: 4%; } .search-box { background: #ededed; border-radius: 22px; position: relative; width: 100%; margin: 0auto; height: 32px; } .icon-search { position: absolute; background-image: url("../images/index.png"); left: 8px; top: 0.4rem; background-size: 19px; } .search-boxinput { width: 100%; background: none; border: none; font-size: 0.85rem; text-align: left; height: 32px; border-radius: 3px; padding: 0.55rem00.55rem1.8rem; } .scrollView { width: 100%; height: 100%; /* _____(2)_____剩余空间全部分给盒子 */flex: 1;/*剩余空间全部分给盒子*/overflow-y: auto; overflow-x: hidden; position: relative; padding-bottom: 53px; } .slider-wrapper { display: flex; width: 96%; margin:0auto; transform: translate3d(0px, 0px, 0px); position: relative; z-index: 1; padding:0.55rem; } .slider-wrapperimg { width: 100%; height: auto; display: block; border: none; } .item { width: 96%; margin:0auto; padding: 0.5rem; position: relative; overflow: hidden; /* ____(1)______; */display: flex; justify-content: space-between; } .palace-grid.palace-grid-icon{ width: 40px; height: 40px; margin:0auto; } .palace-grid.palace-grid-text { display: block; text-align: center; color: #333; font-size: 0.85rem; /* ____(3)_____阻止换行 *//* _____(4)____文字溢出显示省略号 */white-space: nowrap;/*阻止换行*/text-overflow: ellipsis;/*文字溢出显示省略号*/overflow: hidden; padding-top: 0.2rem; } .palace-grid.palace-grid-texth2 { font-size: 0.8rem; font-weight: normal; color: #666666; } .flex { display: flex; align-items: center; padding: 15px; position: relative; } .flexh1 { flex: 1; min-width: 0; font-size: 14px; color: #333; } .list-theme{ width: 96%; margin:0auto; display: flex; flex-wrap: wrap; justify-content: space-between; } .list-item { width: 46%; margin: 02%2%2%; background: #fff; display: block; overflow: hidden; } .list-theme-message { background: #fff; padding: 0.3rem0; } .list-theme-title { color: #333; font-size: 0.92rem; margin: 0.2rem0; overflow: hidden; font-weight: normal; /* font-size: 0.85rem; *//* ____(3)_____阻止换行 *//* _____(4)____文字溢出显示省略号 */white-space: nowrap;/*阻止换行*/text-overflow: ellipsis;/*文字溢出显示省略号*/} .list-theme-messagep { color: #f68f40; font-size: 0.99rem; font-weight: 500; height: 1.5rem; } .list-theme-messagepi { font-style: normal; font-size: 0.7rem; border: 1pxsolid#f68f40; border-radius: 2px; /* padding: 0 0.2rem; */} .list-theme-messagepem { font-style: normal; font-size: 0.7rem; padding: 00.2rem; color: #999999; /* ____(5)_____;删除线 */text-decoration: line-through;/*删除线*/}
📳题目分析
1️⃣flex布局是什么?
flex是fexible box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为flex布局。
2️⃣剩余空间全部分给盒子
假设一个父盒子包含两个子盒子,父盒子已设置display:flex;和宽高子盒子1设置宽高,那么子盒子设置flex:1;时会占满剩余空间。
3️⃣阻止换行
用到white-space属性
可能的值
值 | 描述 |
normal | 默认。空白会被浏览器忽略。 |
pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
nowrap | 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 |
pre-wrap | 保留空白符序列,但是正常地进行换行。 |
pre-line | 合并空白符序列,但是保留换行符。 |
inherit | 规定应该从父元素继承 white-space 属性的值。 |
4️⃣文字溢出显示省略号
用到text-overflow属性(使用时最好与overflow:hidden;一起使用)
5️⃣给文字设置删除线
用到text-decoration属性
删除线是line-through
🎯实现效果