CSS移动端布局和文字溢出显示省略号

简介: 文章主要学习使用css文字溢出处理和溢出部分效果的处理

 📳题目要求

  • 阅读下列说明、效果图和代码,完成移动端布局。

说明

  • 在某项目中,项目中的文件包含index.html、style.css和images文件夹。请根据现有的代码    和效果图补全代码(1)-(5)

效果图

image.gif

📳html代码

<!DOCTYPE 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>

image.gif

📳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{
-webkit-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;/*删除线*/}

image.gif

📳题目分析

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;一起使用)

image.gif

5️⃣给文字设置删除线

用到text-decoration属性

删除线是line-throughimage.gif

image.gif

🎯实现效果


目录
相关文章
|
26天前
|
编解码 前端开发 UED
探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
本文深入探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用。通过实际案例分析和注意事项的讨论,旨在帮助开发者更好地理解和运用媒体查询,提升移动端用户体验。
43 4
|
1月前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
1月前
CSS3制作的聚光灯下倒影文字选装动画特效源码
CSS3聚光灯下倒影文字特效是一段基于CSS3实现的聚光灯下带倒影的文字旋转动画效果代码,具有真实的视觉感,同时文字还会在旋转过程中显示出灯光的反射效果,很有意思,欢迎对此段代码感兴趣的朋友前来下载使用。
31 6
|
1月前
纯css3发光霓虹灯文字闪烁特效代码
纯css3发光霓虹灯文字闪烁特效代码是一款彩色的店铺名称文字动画特效。
37 6
|
1月前
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局(Flexbox):构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局(Flexbox)是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例,帮助读者快速掌握这一强大布局方法。
|
1月前
jQuery+CSS3模拟过山车动态的文字动画特效源码
jQuery+CSS3模拟过山车动态的文字动画特效源码实现在全黑的背景下,画面中的文本呈现过山车的轨迹动画上下滚动转圈,且伴随文本颜色渐变效果,非常有意思,欢迎对此特效感兴趣的朋友前来下载参考。
24 1
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
114 6
|
1月前
|
前端开发 容器
实现CSS品字布局
【10月更文挑战第27天】
|
2月前
|
前端开发 容器
使用 CSS Grid 布局实现响应式设计
【10月更文挑战第1天】使用 CSS Grid 布局实现响应式设计
67 4