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>

posted @   Alpha205  阅读(112)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae