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

🎯实现效果


相关文章
|
前端开发
用 CSS Grid 轻松构建复杂布局
用 CSS Grid 轻松构建复杂布局
451 83
|
9月前
|
前端开发 算法 Java
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
284 1
|
9月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
548 0
|
Web App开发 前端开发 数据可视化
用 CSS Grid 实现高效布局的 3 个实战技巧
用 CSS Grid 实现高效布局的 3 个实战技巧
|
12月前
|
前端开发
文字显示在div 最下面,css怎么写
文字显示在div 最下面,css怎么写
739 0
CSS3制作的聚光灯下倒影文字选装动画特效源码
CSS3聚光灯下倒影文字特效是一段基于CSS3实现的聚光灯下带倒影的文字旋转动画效果代码,具有真实的视觉感,同时文字还会在旋转过程中显示出灯光的反射效果,很有意思,欢迎对此段代码感兴趣的朋友前来下载使用。
219 6
|
编解码 前端开发 UED
探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
本文深入探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用。通过实际案例分析和注意事项的讨论,旨在帮助开发者更好地理解和运用媒体查询,提升移动端用户体验。
414 4
|
前端开发 定位技术 索引
【前端第四课】CSS值和单位;CSS文字排版;CSS变换,过渡,动画;CSS定位
【前端第四课】CSS值和单位;CSS文字排版;CSS变换,过渡,动画;CSS定位
【前端第四课】CSS值和单位;CSS文字排版;CSS变换,过渡,动画;CSS定位
|
前端开发
css文字效果(文字剪贴蒙版,text-shodow的应用,文字排版等…)
原文:css文字效果(文字剪贴蒙版,text-shodow的应用,文字排版等…) 记录几种常见的文字效果 示例查看:http://pangyongsheng.github.io/cssFont/ 一、文字剪贴蒙版 在PS中,对文字图层栅格化,然后可将其他图层创建为文字的剪贴蒙版,而在c...
1563 0

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    572
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    434
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    434
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    284
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    548
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    727
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1414
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    315
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1168
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    509