web笔记day11
一、文本溢出处理显示省略号
1、单行文本溢出显示省略号
方法1：省略号
单行文本： width：200px；设置盒子的宽度(限制宽度) white-space：nowrap；设置文本不换行 overflow：hidden；溢出隐藏 text-overflow：ellipsis；文本溢出的显示省略号
<style>
.box{width:200px;background-color:red;height:40px;line-height:40px;/* 关键代码 */text-overflow: ellipsis; /* 溢出显示省略号 */overflow: hidden; /* 溢出隐藏 */white-space: nowrap; /* 强制不换行 */
}
</style>
<body>
<div class="box">MONTBLANC万宝龙 男士经典系列椭圆形针扣皮带/腰带 38157</div>
</body>
方法2：伪元素
<style>.box {width: 200px;height: 40px;line-height: 40px;background-color: orchid;
overflow: hidden;/* 溢出隐藏 */white-space: nowrap;/* 强制不换行 */position: relative;/* 子绝父相 */
}.box:after {content: "...";position: absolute;right: 0px;bottom: 0px;/* 设置宽度可以微调省略号的盒子大小，盖住多余的文字 */width: 20px;background-color: red;}
</style>
</head>
<body><div class="box">可以沉迷，可以抱怨，可以奔溃，可以抱怨，可以奔溃，人要有自愈能力</div>
</body>
2、多行文本溢出显示省略号
方法1：伪元素
<style>.box {width: 200px;/* 通过行高和高度控制显示的行数 */height: 120px;line-height: 30px;
background-color: red;position: relative;/* 文本两端对齐方式 */text-align: justify;/* 溢出隐藏 */overflow: hidden;
}
.box:after {content: "...";position: absolute;right: 0;bottom: 0;background-color: red;
width: 16px;}</style>
<body><div class="box">MONTBLANC万宝龙 男士经典系列椭圆形针扣皮带/腰男士经典系列椭圆形针扣皮带男士经典系列椭圆形针扣皮带男士经典系列椭圆形针扣皮带带 38157</div>
</body>
方法2：弹性盒
width：200px；设置盒子的宽度(限制宽度) display：-webkit-box；将对象作为弹性伸缩盒子模型显示 -webkit-line-clamp：2；用来限制在一个快元素显示的文本行数 -webkit-box-orient：vertical；设置或检索伸缩盒对象的子元素的排列方式
overflow：hidden；溢出隐藏
<style>.box2 {/* 1.设置宽度 */width: 200px;background-color: pink;line-height: 30px;/* 2.设置旧版弹性盒 */display: -webkit-box;/* 3. 控制行数*/-webkit-line-clamp: 2;/* 4. 设置子元素的排列方式 垂直排列*/-webkit-box-orient: vertical;/* 5.溢出隐藏 */overflow: hidden;}</style>
<body>
<div class="box2">可以沉迷，可以抱怨，可以奔溃，，可以抱怨，可以奔溃，人要有自愈能力可以沉迷，可以抱怨，可以奔溃，，可以抱怨，可以奔溃，人要有自愈能力</div>
</body>
注意：因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端
-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。 display: -webkit-box; 将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 设置或伸缩盒对象的子元素的排列方式 。 vertical:从上到下垂直排列子元素
HTML参考手册
作用
帮助我们快速查阅完整的html元素并给出目标元素的相应释义
方便我们学习和使用
经常查阅文档是一个好的学习习惯
推荐的网址
W3C : w3school 在线教程
MDN: MDN Web Docs
扩展
word-wrap: break-word; 单词,数字强制换行white-space: nowrap; 文字强制不换行
二、阿里矢量图标(字体图标)
网址：iconfont-阿里巴巴矢量图标库
1.使用步骤
1.登录阿里矢量图标网站
2.搜索想要的图标且加到购物车
3.点击右上角的购物车
4.选择下载代码，下载完成后解压文件
5.把下载的文件放到你的项目中
6.引入iconfont.css文件或者iconfont.js文件
使用三种方式：下载代码
1、Unicode 方式引用
Unicode 是字体在网页端最原始的应用方式，特点是：
兼容性最好，支持 IE6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式
使用步骤如下：
第一步：引入项目下面生成的 fontclass 代码：
<link rel="stylesheet" href="./iconfont.css">
第二步：挑选相应图标并获取字体编码，应用于页面
<span class="iconfont">3</span>
2、font-class 方式引用
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
与 Unicode 使用方式相比，具有如下特点：
兼容性良好，支持 IE8+，及所有现代浏览器。
相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
不过因为本质上还是使用的字体，所以多色图标还是不支持的。
使用步骤如下：
第一步：引入项目下面生成的 fontclass 代码：
<link rel="stylesheet" href="./iconfont.css">
第二步：挑选相应图标并获取类名，应用于页面：
<span class="iconfont icon-xxx"></span>
" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。
3、Symbol方式引用
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过
font-size,color来调整样式。兼容性较差，支持 IE9+，及现代浏览器。
浏览器渲染 SVG 的性能一般，还不如 png。
使用步骤如下：
第一步：引入项目下面生成的 symbol 代码：
<script src="./iconfont.js"></script>
第二步：加入通用 CSS 代码（引入一次就行）：
<style>
.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
//改变样式.icon{width: 100px;height: 100px;font-size: 20px; display: block;}
</style>
第三步：挑选相应图标并获取类名，应用于页面：
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use> </svg>
2.引入字体图标第二种方式：添加至项目
1.添加至项目
2.选择要添加的项目（如果没有项目点击右上角新建项目），点击确定
3.点击查看在线链接，复制在线链接即可
4.新添加图标后点击更新代码（ 下方新 icon 来袭，点击更新代码，更新后将支持 WOFF2 格式）
5.把之前的链接替换掉就可以了
<!-- 在线链接 --> <!-- .css文件 --><link rel="stylesheet" href="http://at.alicdn.com/t/font_2384465_pdfxvb7qtdg.css"><!-- .js文件 --><script src="http://at.alicdn.com/t/font_2384465_pdfxvb7qtdg.js"></script> <span class="iconfont"></span> <span class="iconfont icon-meinv"></span> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-qipao1"></use></svg>
三、图片格式
PSD
.psd是Photoshop默认保存的文件格式，可以保留所有有图层、色版、通道、蒙版、路径、未栅格化文字以及图层样式等。
JPG：
色彩丰富 【不支持透明】
压缩比高，生成文件体积小，
支持多种压缩级别可以控制文件大小
适用于：色彩丰富的图片（摄影图像（产品图，照片，渐变，banner图））
GIF：
支持动画
支持透明（全透明）
颜色不够丰富，只支持256种颜色、文件小
适用于：色彩简单的logo/icon/动图
PNG
png8(与gif相似)
png24
颜色丰富
支持alpha透明（全透明和全不透明，半透明）
早期的浏览器不支持PNG图像 （IE6不支持）
适用于：透明背景图片【投影，发外光, 线条复杂（文字）】
WebP
谷歌（google）10年推出一种新型图片格式
文件小，支持有损和无损压缩，支持动画、透明
但并不是所有浏览器都支持 webp
四、布局技巧
等高布局
等高布局是指多列子元素在父元素中实现等高视觉效果的布局技巧。
实现要点（需求）
多列
每一列背景不同
其中任意一列变高，其它列同步变高
方法一：利用内外间距相抵消，父元素设置overflow:hidden;属性实现
原理：利用padding和margin负值 相抵销
实现步骤
每一列使用padding-bottom值提前撑开背景颜色；
将每一列用padding值撑开的多余的占位让margin负值抵消；
父元素设置溢出隐藏(把多余撑开的部分隐藏掉)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.clearfix::after {content: "";display: block;clear: both;}
* {margin: 0;padding: 0;}
.warp {width: 1200px;margin: 0 auto;/* 溢出隐藏 */overflow: hidden;}
.left,.center,.right {/* 最小高度 ----指定盒子可以大于等于100px 不用最小高度否则父盒子溢出隐藏就实现不了等高效果了 */min-height: 200px;float: left;padding-bottom: 10000px;margin-bottom: -10000px;}
.left {width: 200px;background-color: blue;}
.center {width: 700px;background-color: tomato;}
.right {width: 300px;background-color: purple;}</style>
</head>
<body><div class="warp clearfix"><div class="left">左侧</div><div class="center">中间</div><div class="right">右侧</div></div>
</body>
</html>
优缺点
伪等高，需要合理的控制padding和margin值
可以实现任意列等高布局
方法二:利用内容撑开父元素的特点，实现等高布局
原理：嵌套元素内容能够撑开外部所有元素的高度
实现 三个嵌套div负责背景，三列放在最内部的div中； 通过相对定位，分配三列背景的位置； 通过margin负值，将内容移动到对应的背景处； 父元素设置溢出隐藏
实现步骤
结构——左侧背景盒中嵌套中间背景盒，中间背景盒中嵌套右侧背景盒；在右侧背景盒中设置左、中、右盒
左侧背景盒、中间背景盒、右侧背景盒分别设置背景颜色。左、中、右盒分别设置宽度，高度（最小高度）、浮动
通过相对定位移动背景盒到指定位置。将中间背景盒向右移动左侧盒子宽度（left: 左侧盒宽度）、右侧背景盒向移动中间盒子宽度（left: 中间盒宽度）
通过margin-left负值移动内容到指定背景处。将左侧盒子向左移动 左盒宽度+中间盒子的宽度（margin-left: -（左盒+中盒宽度））；将中间盒子向左移动中间盒的宽度（margin-left - 中间盒子的宽度）
父元素设置overflow: hidden;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.clearfix::after {content: "";display: block;clear: both;}
* {margin: 0;padding: 0;}
.warp {width: 1200px;margin: 0 auto;overflow: hidden;}
.col1 {background-color: yellow;}
.col2 {background-color: blue;position: relative;left: 200px;
}
.col3 {background-color: pink;position: relative;left: 700px;}
.left,.center,.right {float: left;min-height: 200px;}
.left {width: 200px;margin-left: -900px;
}
.center {width: 700px;margin-left: -700px;}
.right {width: 300px;
}</style>
</head>
<body><div class="warp clearfix"><div class="col1"><div class="col2"><div class="col3 clearfix"><div class="left">左侧</div><div class="center">中间</div><div class="right">右侧</div></div></div></div></div>
</body>
</html>
优缺点
结构复杂
可以创建任意列数
web笔记day11相关推荐
- python web笔记
python web笔记 目的:开发一个平台(网站)~ 前端开发:HTML.CSS.JavaScript~ Web框架:接收请求并处理~ Mysql数据库:存储数据的地方快速上手:基于Flask We ...
- Web笔记-session及cookie
此博文笔记并不全(对于像本人这样开发经验不足的已经够了),只是记录了本人目前对session和cookie的理解,以及在开发时,应该注意些什么. 首先看下两个概念: session:对象存储特定用户会 ...
- Google IO 16 / Mobile Web 笔记
移动的 Web IO16 的 Web 技术话题大类直接叫作 "Mobile Web",移动的概念已经涵盖了整个 Web,而非只是 Web 的一部分了. 最近几天看了不少 IO16 ...
- html css web笔记,Web/HTML/CSS/的笔记
一.web基本介绍 1.Web 是 Worl wide web 的缩写,称为全球广域网,俗称www 2.我们可以将Web理解为当前的一种互利网,对于我们来说更多的就是网站服务. 3.网站我们可以认为是 ...
- web笔记Error：That IP address
前言 题主最近在做一个web服务 在实现过程中有苦有乐,现在记录一下,既方便自己以后回顾,也方便后来的人. 具体细节 在实现过程终遇到了下面的问题: >python manage.py runs ...
- Web笔记——Filter过滤器
○ 概念:Filter表示过滤器,是JavaWeb三大组件(Servlet.Filter.Listener)之一. ○ 过滤器可以把对资源的请求拦截下来,从而实现一些特殊的功能. ○ 过滤器一般完成一 ...
- Java Web笔记之Struts2.1 +Hibernate3.3 +Spring3.0
2019独角兽企业重金招聘Python工程师标准>>> 1.Struts2 1.1.了解Struts2 Struts2是基于MVC设计模式的Java Web框架技术之一,按照MVC设 ...
- Web笔记-session盗用安全问题(Spring Boot获取所有session及提高安全性)
此处本人的过滤代码如下: 仅仅是判断了这个session有没有被记录,有没有attribute! 某些IT论坛,就是这样的,通过session,就可以进行批量帐号操作,发取http协议. 这里演示如下 ...
- Web笔记-使用jsonp解决跨域请求（CROS）问题
目录 基本概念 代码与实例 基本概念 当我在某web站点,这个站点里面发出了像其他站点的请求(不同链接,或者同一链接的不同端口),是会失败的,因为是浏览器的安全检测问题,当然,这个只是主流浏览器的功能 ...
- web前端 day11今日大纲
今天内容 HTML常用标签 声明HTML5的文档<!DOCTYPE HTML> html标签 整个文档根标签 语义化 HTML体现了网页的结构 - head标签 标签是不会展示到网页上 m ...
最新文章
- 【前沿技术】严重事故！实习生删除字节跳动所有轻量级机器学习模型
- java求婚代码_屌丝程序员的求婚道具--内含视频
- 测试ASP_NET 生命周期
- 信息系统项目管理师-战略管理知识点
- em算法怎么对应原有分类_EM算法原理
- 容联雷辉：视频系统由标清进入到移动高清时代
- ACM练习 校赛183F:公平的游戏（TLE）【set的使用，给迭代器增加指定偏移量】
- STM32 FreeRTOS USART DMA空闲中断和消息队列的使用
- 数据科学 IPython 笔记本 8.4 简单的折线图
- 荣耀Magic 3渲染图曝光：超大主摄暗示顶级成像效果
- 4.3 朴素贝叶斯分类实战——新闻分类、垃圾邮件识别
- QQlook--QQ空间密码 相册密码查看工具 国庆版 V2.4
- python如何获取免费的可以商用的字体
- 免费会员管理系统实现门店微信会员营销
- 详解：Salesforce元数据支撑SASS架构设计
- 网易蓝牙耳机怎么切换双耳_2020双十一蓝牙耳机怎么选？有哪些便宜又好用的蓝牙耳机？有哪些适合学生党的蓝牙耳机？《选购指南》...
- 解锁bitlocker码
- 在线网校教育平台的开发，题库的搭建必不可少
- 目标检测——小目标检测问题
- 什么是Bugzilla