Web前端笔记（7）

阴影效果：

1. CSS3中的文字阴影：

text-shadow: 给文字添加阴影，阴影的默认颜色跟文字的颜色相同

x: x轴偏移的像素

y: y轴偏移的像素

blur: 阴影的模糊值，越大表示阴影越模糊

color: 阴影的颜色

text-shadow: x y color blur的格式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{font-size: 30px;color: red;text-shadow: 10px 10px 5px gray;}</style>
</head>
<body><div>shadow in CSS3</div>
</body>
</html>

阴影的效果：

多阴影：通过逗号分分隔的多阴影效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{font-size: 30px;color: red;text-shadow: 10px 10px 5px gray, -10px -10px 5px green;}</style>
</head>
<body><div>shadow in CSS3</div>
</body>
</html>

2. box-shadow盒子阴影：盒子阴影的默认颜色是黑色

box-shadow: 给盒子添加阴影效果

x: x方向偏移

y: y方向偏移
blur: 模糊值

spread: 阴影的扩散范围

color: 阴影的颜色

inset: 如果有inset则表示内阴影默认值为外阴影

多阴影：逗号分隔

格式为： box-shadow: x, y, blur, spread, color

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{width: 200px;height: 200px;background: red;margin: 100px;box-shadow: 10px 10px 10px 10px gray;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

阴影效果：

小米官网的box-shadow效果：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{padding: 0;margin: 0;}ul{list-style: none;}a{text-decoration: none;}img{display: block;}.box{border: 1px solid rgba(195, 195, 195, 0.11);width: 234px;height: 300px;overflow: hidden;/*margin: 5px 0 0 5px;*//*padding: 20px 0;*/}.box div.picture{width: 100%;margin-top: 15px;}.box img{width: 160px;height: 160px;margin: 0 auto;}.box .text-top{width: 80%;height: 20px;line-height: 20px;text-align: center;font-size: 14px;margin: 0 auto;margin-top: 10px;color: #333;/*cursor: pointer;*/}.box .text-middle{width: 80%;height: 18px;line-height: 18px;font-size: 12px;color: #b0b0b0;text-align: center;margin: 0 auto;margin-bottom: 15px;/*cursor: pointer;*/}.box .text-bottom{width: 100%;height: 20px;line-height: 20px;color: #ff6700;font-size: 14px;text-align: center;margin: 0 auto;/*cursor: pointer;*/}.container ul{}.container ul li{float: left;margin: 40px;cursor: pointer;border-radius: 5px;position: relative;top: 0;transition: 0.5s;}.container ul li:hover{top: -3px;box-shadow: 0 3px 10px 3px darkgrey;}</style>
</head>
<body><div class="container"><ul><li><div class="box"><div class="picture"><img src="../picture/others/mi.png" alt="" title="小米10"></div><div class="text-top">小米10</div><div class="text-middle">骁龙865一亿像素相机</div><div class=text-bottom>3999元起</div></div></li><li><div class="box"><div class="picture"><img src="../picture/others/mi.png" alt="" title="小米10"></div><div class="text-top">小米10</div><div class="text-middle">骁龙865一亿像素相机</div><div class=text-bottom>3999元起</div></div></li></ul></div>
</body>
</html>

效果如下所示：

4. CSS中的模糊与计算：

针对某一个容器进行模糊操作：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>img{filter: blur(10px);}</style>
</head>
<body><img src="../picture/others/mi.png">
</body>
</html>

calc计算：在有一个父容器的情况下，需要子容器的大小和父容器之间有一定关系，使得子容器能够跟随父容器大小进行自适应的变化，使用CSS中的计算能够实现子容器大小的精确控制。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.parent{width: 400px;   /*变化*/height: 300px;border: 1px solid black;}.box{width: calc(100% - 100px);    /*始终保留100px的大小区域。不管父容器大小怎么变化*/height: 100px;background: red;}</style>
</head>
<body><div class="parent"><div class="box"></div></div>
</body>
</html>

效果：

5. column分栏布局：

column-count: 分栏的个数

column-width: 分栏的宽度

column-gap: 分栏的间距

column-rule: 分栏的边线

column-span: 合并分栏

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box{width: 600px;    /*始终保留100px的大小区域。不管父容器大小怎么变化*/height: 400px;border: 1px solid black;margin: 30px auto;column-count: 2;/*column-width: 100px;*/  /*不要和column-count一起设置*/column-gap: 40px;column-rule: 1px #b5ef84 dashed;}/*合并h2的分栏*/.box h2{column-span: all;text-align: center;}</style>
</head>
<body><div class="box"><h2>金融政策持续推出支持中小微企业复工复产</h2><p>人民银行累计投入8000亿专项再贷款，效果正逐步显现；银监会将疫情防控和企业发展作为最重要工作，成为金融支持的主力军；银行业协会积极行动，政策性银行大中型银行发挥各自优势，积极帮助困难企业摆脱困境；债券市场不断扩大，成为除贷款外企业融资第二大来源。</p><p>央行今年1月31日设立3000亿元抗疫专项再贷款，为支持疫情防控发挥积极作用。中国人民银行货币政策司司长孙国峰说，截至3月13日，人民银行已经发放专项再贷款1840亿元。</p><p>从效果看，1月25日至3月10日名单内的重点企业生产口罩16亿个、防护服8779万件、护目镜421万个、病毒检测试剂1029万人份、负压救护车4143辆。专项再贷款还为一些重点项目提供资金支持。目前医用物品紧张局面已经明显缓解，生活物资供应充足，专项再贷款的政策效果显著。</p></div>
</body>
</html>

6. 伪元素概念及意义

在CSS3之前的版本中，对伪类和伪元素的区别比较模糊，CSS3中对这两个元素做了相对较清晰的解释，并且在语法上也做了很明显的区分。CSS3中规定伪类由一个冒号开始，然后为伪类的名称；伪元素由两个冒号开始，然后是伪元素的名称。

1. 伪类的概念

伪类本质上是为了弥补常规CSS选择器的不足，以便获取更多的信息，通常表示获取不存在于DOM树中的信息，或获取不能被常规CSS选择器获取的信息。

:hover 鼠标移入所添加的样式

:focus

:empty

2. 伪元素的概念

伪元素本质上是创建了一个有内容的虚拟容器，这个容器不包含任何DOM元素，但可以包含内容，同时，还可以为伪元素制定样式。

::selection

::first-line / ::first-letter

:: before/ after

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box{width: 300px;    /*始终保留100px的大小区域。不管父容器大小怎么变化*/height: 300px;border: 1px solid black;margin: 30px auto;}.box:hover{background: red;}.box::selection{     /*被鼠标选中的样式*/background: red;color: yellow;}</style>
</head>
<body><div class="box">人民银行累计投入8000亿专项再贷款，效果正逐步显现；银监会将疫情防控和企业发展作为最重要工作，成为金融支持的主力军；银行业协会积极行动，政策性银行大中型银行发挥各自优势，积极帮助困难企业摆脱困境；债券市场不断扩大，成为除贷款外企业融资第二大来源。央行今年1月31日设立3000亿元抗疫专项再贷款，为支持疫情防控发挥积极作用。中国人民银行货币政策司司长孙国峰说，截至3月13日，人民银行已经发放专项再贷款1840亿元。</div>
</body>
</html>

7. CSS hack

CSS hack用来解决浏览器的兼容性问题，为不同版本的浏览器定制编写不同的CSS效果，使用每个浏览器单独识别的样式代码，控制浏览器的显示样式。

hack分类：

1. CSS属性前缀法

2. 选择器前缀法

3. IE条件中注释法

工具： IE-test,可以代替低版本的IE浏览器来测试前端版本

8. 渐进增强与优雅降级：（兼容性处理方案）

渐进曾强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果，交互等改进和追加功能达到更好的用户体验。

优雅降级：一开始九九构建完整的功能，然后再针对低版本浏览器进行兼容。

9.网页布局扩展

1. 版心 + 通栏的布局方式

2. 等高布局

左边的列能够根据右边的列的高度自适应变化，右边的列能够根据左边的列的高度自适应变化。

原理：

margin 负值，会使得父容器的高度减小， padding: 抵消margin的负值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{padding: 0;margin: 0;}#parent{border: 10px black solid;overflow: hidden;}#box1{float: left;width: 100px;/*height: 100px;*/background: red;margin-bottom: -2500px;padding-bottom: 2500px;}#box2{float: right;width: 100px;height: 100px;background: blue;margin-bottom: -2500px;padding-bottom: 2500px;}</style>
</head>
<body><div id="parent"><div id="box1"><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p></div><div id="box2"><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p></div></div>
</body>
</html>

3. 双飞翼布局：

是一种左侧固定，右侧固定，中间自适应的布局

布局特点：

a. 先写中间部分，让主体内容先输出

b.让左中右三个部分都浮动

c. 利用margin负值将left，right移动到指定位置

d. 对中间的内容进行调整

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{padding: 0;margin: 0;}.header{height: 100px;background: red;}.container{overflow: hidden;}.container .center{width: 100%;height: 200px;float: left;}.container .center p{background: #6f72ff;height: 100%;margin: 0 150px 0 100px;}.container .left{width: 100px;height: 200px;background: #32ff47;float: left;margin-left: -100%;}.container .right{width: 150px;height: 200px;background: yellow;float: left;margin-left: -150px;}</style>
</head>
<body><div class="header"></div><div class="container"><div class="center"><p>This is content</p></div><div class="left"></div><div class="right"></div></div>
</body>
</html>

Web前端笔记（7）相关推荐

Web前端笔记（21-45）
Web前端笔记 (21-45) 21.嵌套列表 1.概念 2.有(无)序列表嵌套 3.定义列表嵌套 22.表格标签 1.种类 2.举例未加语义化标签添加语义化标签 23.表格属性 1.常见表格属 ...
Web前端笔记（三）
Web前端笔记记录(三) position定位 relative相对定位 absolute绝对定位脱离文档流使内联支持宽高使块元素默认宽根据内容决定(让块具备内联的特性) 如果有定位祖先元素相对 ...
Web前端笔记（1）
1. web前端三大核心技术: HTML: 结构 CSS: 样式 JavaScript: 行为 HTML基本结构与属性: html超文本标记语言,标准通用标记下的一个应用,是网页制作的必备的编程语言. ...
Web前端笔记(标签)
目录 Web前端知识点 HTML 标签的语法 html标签主体框架常用标签标题标签段落标签字体倾斜.加粗.下划线强调内容预设标签字体标签分割线实体字符图片标签视频标签音频标签 ...
WEB前端笔记第一天
什么是WEB前端? 简单来说就是网页,只是这个网页它是由多种技术参与制作的,用来向用户展示的页面. HTML(hyperText mark-up language):它决定了网页的结构. CSS:网页 ...
Web前端笔记-HTML加载SVG图片及简单修改
加载的用img标签,就可以了,就把他当成普通图片即可,如: <img src="icon/cash-coin.svg" /> 图片是这样的: 在前端的效果就这样了. 简 ...
Web前端笔记（6）
BFC规范: 格式化上下文(Formatting Context)是W3C规范中的一个概念,它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的相关和 ...
Web前端笔记（4）
前端完整页面设计: 1. PC端布局: 通栏:自适应浏览器的宽度版心 :固定一个宽度,并让容器居中页面中需要用到的图片:(由于本人未能找到原版的图片资源,所以只是利用截屏到的图片,进行简单截图后使 ...
web前端笔记1-hml，css部分
这里写目录标题一.基础内容 1.网页 1.1什么是网页 1.2什么是HTML 1.3网页的形成 2.常用浏览器 2.1常用的浏览器 2.2浏览器内核 3.web标准 3.1为什么需要web标准 3. ...
（web前端笔记）2020-12-23（http）
总览 web and http web是由对象构成的,包含了html5文档和图片,Java applet. http 无状态的它是以明文的形式保存,有很大的安全问题 https https可以进行加 ...

Web前端笔记（7）

阴影效果：

Web前端笔记（7）相关推荐

最新文章

热门文章