Web前端笔记（7）

最新推荐文章于 2023-02-02 22:14:09 发布
最新推荐文章于 2023-02-02 22:14:09 发布
阅读量198 收藏
点赞数
分类专栏： 前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zj1131190425/article/details/104982382
版权

阴影效果：

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>

Alpha205
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端笔记
07-28
web前端笔记是在培训机构培训过程中整理的一些笔记，仅供参考
web前端基础学习笔记
01-08
web前端基础知识学习笔记，内含有HTML、CSS、JavaScript的基础知识的总结，可以帮助大家学习
web前端开发笔记整理（一）
01-08
文章目录一.HTML常用标签类二.CSS常用样式 一.HTML常用标签类 1. 告诉搜索引擎爬虫我们的网站关于什么内容 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 在 HTML 中， 标签没有结束标签,永远位于 head 元素内部。 属性名不加双引号，属性值加双引号 标签的属性定义了与文档相关联的名称/值对, 元数据总是以名称/值的形式被成对传递的。 规定 HTML 文档的字符编码： 2. HTML全局属性，lang 属性规定元素内容的语言。 lang 属性在以下标签中无效：, , , , , , 以
CSS样式
weixin_52655964的博客
08-19 1657
CSS样式
Day03-CSS基础（基础选择器+字体文本相关样式）
weixin_45831040的博客
06-29 199
CSS中文名：层叠样式表CSS的作用：给页面中的HTML标签设置样式CSS常见属性： CSS的语法规则：css写在style标签中，style标签一般写在head标签里面，title标签下面 CSS常见的三种引入方式特点区别有哪些？ 结构：标签名 { css属性名：属性值； }注意点： 结构：.类名 { css属性名：属性值； }注意点： 结构：#id属性值 { css属性名：属性值； }注意点：补充：类与id的区别 class类名与id属性值的区别： • class类名相当于姓名，可以重复，一个标签可
浅谈px，em和rem
A_Common_Man的博客
07-17 872
图文详解em，理清em与rem的关系
如何和何时使用 CSS 的权重设置 !important （建议：永不使用！）
愿我如星君如月 ... 夜夜流光相皎洁 ...
01-29 7499
特别声明：此篇文章由David根据Louis Lazaris的英文文章原名《!important CSS Declarations: How and When to Use Them》进行翻译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://coding.smashingmagazine.com/2010/11/02/the...
DIV+CSS中!important;的问题。
12-30 1029
使用!important，最主要是为了ie6这个浏览器，因为ie6是目前标准兼容最有问题的浏览器，我们前端设计师比较烦恼，要另外写一段代码给ie6 ---------------- 如我们想在ie8,firefox,chrome等高端浏览器下设置字体为14个像素，ie6为12个像素，那么css就这样写 #text{font-size:14px!important;font-size:12px;}
CSS 中 !important的用法总结
热门推荐
u013864585的专栏
07-08 1万+
下面简要的给大家讲一下CSS 中一个比较重要的!important属性，从笔者的实践中总结了以下两点： 1、用于解决IE对某些CSS规范有偏差的情况.     比如在IE中的效果总是和其他的浏览器如firefox,opera等相差2px,导致页面布局有错位， 这是因为IE对盒之间距离的解释的bug造成的，针对这种情况我们就可以利用!important来帮助解决。  例如下面这个样式 .
C++ Qt学习笔记（4）绘图
开到荼蘼的博客
01-15 2765
Qt中的二维绘图基本功能是使用Qpainter在绘图设备上进行绘图，绘图设备由QpainterDevice提供，QPaintDevice是一个二维空间的抽象，可以使用QPainter在其上进行绘制，它是所有可以进行绘制的对象的基类。QPainterDevice的子类主要有QWidget, QPixmap,QPicture,QImage,QPinter,QOpenGIPainterD...
超详细的web前端基础学习笔记
06-28
自己web前端的学习笔记，超详细，对于初学者用处很大，对于专业的前端开发来说，不建议下载，适用于后端开发参阅
web前端.pdf 笔记
04-04
web前端.pdf 笔记
Web前端笔记记录
yjnlovepy的博客
10-19 3320
web前端开发笔记
Web前端学习笔记
jusw123456的博客
10-19 2273
html css分别是指：1、超文本标记语言，html是一种标记语言，它包括一系列标签；2、层叠样式表，css是一种用来表现HTML或XML等文件样式的计算机语言，CSS能够对网页中元素位置的排版进行像素级精确控制。即为浏览器把代码解析后的样子就是我们看到的网站。HTML：结构CSS：样式一个网站是由N多个网页组成的。
Web前端开发学习笔记
qq_41622776的博客
02-02 1531
自学笔记，仅供参考
Web前端笔记（10）Grid布局
开到荼蘼的博客
03-23 1277
Grid网格布局： Grid布局是一个二维布局方法，横纵两个方向总是同时存在。与flex布局的语法类似，Grid布局涉及到的语法也分为两类，一类是作用在Grid容器上的，另一类是作用在grid子项上的： a. 作用在Grid容器上的语法： 1. grid-template-column: 2.grid-template-row: 1.2主要是对网格进行划分，形成二维布局，单位可以是像素...
Web前端学习（2）
开到荼蘼的博客
03-03 729
1. CSS基础语法： 格式： 选择器{属性：值} 在html中，通过标签<style>引入CSS样式： 常用属性： width: 宽度 height: 高度 background-color: 背景色 表示长度的单位： 1.px 像素 2. % 百分比 ，由父容器的大小决定 2. 内联样式与内部样式 内联样式：在html标签上直接添加style属性...
Web前端笔记（8） 管后台理页面
开到荼蘼的博客
03-22 573
管理后台整页制： 设计一个管理后台，图标资源使用的是iconfont中的图标：
Web前端JavaScript笔记（5）事件-拖拽
开到荼蘼的博客
03-29 481
阻止默认行为和超链接 在浏览器上运行网页后，右击会弹出菜单，这属于浏览器的默认行为。如何禁止这一默认行为： <script> window.onload = function () { document.oncontextmenu = function () { return false ...
web前端开发笔记vscode
最新发布
10-26
Web前端开发笔记是一款VS Code插件，它提供了一些常用的Web前端开发知识点和技巧的笔记，包括HTML、CSS、JavaScript、React等。这个插件可以帮助开发者快速查找和学习Web前端开发的知识点，提高开发效率。 该插件的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值