CSS第十章 CSS架构与文件组织/CSS新特性/CSS与JS结合

于 2021-06-08 19:33:06 发布
阅读量288 收藏 2
点赞数 1
分类专栏： Web开发 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xiaolei233/article/details/117711813
版权

CSS


在一个大型项目中，由于页面过多，导致CSS代码难以维护和开发。所以CSS架构可以帮助我们解决文件管理与文件划分等问题。

首先要对CSS进行模块化处理，一个模块负责一类操作。可利用Sass或Less来实现。

一、CSS架构与文件组织

不根据框架划分的CSS架构

在这里插入图片描述
例子：
一个项目可划分为以下文件夹(其中的文件前有下划线_,代表私有，不可单独使用)，main.scss引入这些独立的模块
在这里插入图片描述

abstracts下：
在这里插入图片描述

base下：
在这里插入图片描述

components下：
在这里插入图片描述

layout下：
在这里插入图片描述

pages下：
在这里插入图片描述

themes下：
在这里插入图片描述

venders下：
在这里插入图片描述

main.scss中引用，引用时下划线和后缀名都不用写
在这里插入图片描述
最后利用工具将所有文件合并成一个.css文件。

根据框架划分的CSS架构

暂时没学到

二、CSS新特性

1. 自定义属性(CSS变量)

在目前所有的现代浏览器中都得到了支持。(老式浏览器不支持)

定义与使用
计算
默认值
作用域

<style>
    /* 定义 */
    div{
        --color: yellow;
    }
    /* :root 选择器匹配文档根元素。在 HTML 中，根元素始终是 html 元素。 */
    :root{
        --color : red;
        --number : 100px;
        --number2 : 100;
        /* --size : 50px; */
    }

    #box{
        /* 作用域：遵循就近原则和优先级 */
        --color: blue;
        /* 使用 */
        background: var(--color);
        width: var(--number);
        /* 计算 */
        /* css没有sass和less那么强大，不可以识别无单位的数值，得借助calc函数 */
        height: calc(var(--number2) * 1px);
        /* 默认值 */
        font-size: var(--size , 20px);   /* 查不到前面的变量size，就以第二个参数作为默认值*/
    }
</style>
<body>
    <div id="box">aaaaaaaaa</div>
</body>

在这里插入图片描述

2. Shapes

CSS Shapes是用来定义内容环绕的路径，这些路径都是通过形状函数来定义，比如：circle()、 ellipse()、 inset()或 polygon()。

shape-outside： 实现不规则的文字环绕效果，需要和浮动配合使用。
				默认为none
				margin-box
				border-box
				padding-box
				content-box
				polygon() 对于自定义特殊图形的文字环绕，要配合clip-path使用
				

clip-path：使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。
		   circle()
		   ...
		   polygon：自定义特殊图形在()内写各个顶点的坐标，用逗号隔开，初始坐标默认为0 0.
		   
shape-margin：用于设定由shape-outside创建的CSS形状的外边距。

shape-outside

<style>
    #parent{width:300px; height:300px; border:1px solid black; margin:20px;}
    #shape{ 
        width:100px; height:100px;
        padding:10px;
        border:10px black solid;
        border-radius: 50%;
        margin:10px;
        float: left;
        shape-outside: margin-box;
    } 
</style>
<div id="parent">
    <div id="shape">aaaaa</div>
    实现不规则的文字环绕效果，需要和浮动配合使用。实现不规则的文字环绕效果，需要和浮动配合使用。实现不规则的文字环绕效果，需要和浮动配合使用。实现不规则的文字环绕效果，需要和浮动配合使用。
</div>

默认none
在这里插入图片描述
margin-box
在这里插入图片描述
border-box
在这里插入图片描述
padding-box
在这里插入图片描述
content-box
在这里插入图片描述

clip-path

<style>
    #parent{width:300px; height:300px; border:1px solid black; margin:20px;}
    #shape{ 
        width:100px; height:100px;
        padding:10px;
        border:10px black solid;
        margin:10px;
        float: left;
        background: red;
        clip-path: polygon(0 0,0 100px,100px 100px);
        shape-outside: polygon(0 0,0 100px,100px 100px);
    }
</style>

初始：
在这里插入图片描述

circle()
在这里插入图片描述
polygon(0 0,0 100px,100px 100px);
三个点的坐标就裁切出三角形
在这里插入图片描述

shape-margin

shape-margin: 10px;
在这里插入图片描述

3. scrollbar

用于实现自定义滚动条的样式

::webkit-scrollbar
::webkit-scrollbar-thumb
::webkit-scrollbar-track

注：标签可以代表整个页面，也可以是给某个块添加滚动条；宽度针对纵向滚动条，高度针对横向滚动条。

<style>
    body{ height:2000px;}
    /* 滚动条整体样式，例如宽高，宽针对纵向滚动条；高针对横向滚动条 */
    html::-webkit-scrollbar{
        width:10px;
        /* height:1px; */
    }
    /* 具体的滚动条样式 */
    html::-webkit-scrollbar-thumb{
        background: #f90;
        border-radius:15px;
    }
    /* 具体的滚动条容器样式 */
    html::-webkit-scrollbar-track{
        background: #dedede;
        box-shadow: inset 0 0 5px gray;
    }
</style>

在这里插入图片描述

4. Scroll Snap

CSS滚动捕捉：允许在用户完成滚动后锁定特定的元素或位置。

scroll-snap-type:   加在要控制的容器上
					x
					关键字mandatory
scroll-snap-align:  给子元素加
				    start
					center
					end

<style>
    *{ margin:0; padding:0;}
    ul{ list-style: none;}
    #main{ 
        width:600px; height:100px; border:1px black solid; margin:100px; overflow:auto;
        scroll-snap-type: x mandatory;
    }
    #main ul{ width:4000px;}
    #main li{ width:300px; height:100px; background:red; float:left; margin:0 100px;
    scroll-snap-align: end;
    }
</style>
<body>
    <div id="main">
        <ul>
            <li>1111</li>
            <li>2222</li>
            <li>3333</li>
            <li>4444</li>
            <li>5555</li>
        </ul>
    </div>
</body>

scroll-snap-align: start;
在这里插入图片描述

scroll-snap-align: center;
在这里插入图片描述

scroll-snap-align: end;
在这里插入图片描述

三、CSS与JS结合

两者结合可以实现一些更加复杂的交互效果。

案例1-时钟

<!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>
        *{ margin:0; padding:0;}
        ul{ list-style: none;}
        #time{ width:300px; height:300px; border:5px black solid; margin: 30px auto; border-radius: 50%; position:relative;}
        #time ul{ width:100%; height:100%; position:relative; margin:0 0 0 -1px;}
        #time ul li{ width:2px; height:8px; background:black; position:absolute; left:50%; top:0; transform-origin: center 150px;}
        /* #time ul li:nth-child(2){ transform: rotate(6deg);}
        #time ul li:nth-child(3){ transform: rotate(12deg);} */
        #hour{ width:6px; height:50px; background:black; position:absolute; left:50%; top:50%; margin:-50px 0 0 -3px; transform-origin: center bottom;}
        #min{ width:4px; height:80px; background:black; position:absolute; left:50%; top:50%; margin:-80px 0 0 -2px; transform-origin: center bottom;}
        #sec{ width:2px; height:120px; background:black; position:absolute; left:50%; top:50%; margin:-120px 0 0 -1px; transform-origin: center bottom;}
        #ball{ width:20px; height:20px; background: blue; position:absolute;left:50%; top:50%; margin:-10px;border-radius: 50%;}
    </style>
</head>
<body>
    <div id="time">
        <!-- 实现刻度 -->
        <ul>
            <!-- <li></li>
            <li></li>
            <li></li> -->
        </ul>
        <!-- 实现指针 -->
        <div id="hour"></div>
        <div id="min"></div>
        <div id="sec"></div>
        <div id="ball"></div>
    </div>
    <script>
        var ul = document.querySelector('ul');
        var hour =document.querySelector('#hour');
        var min =document.querySelector('#min');
        var sec =document.querySelector('#sec');

        for(i=0;i<60;i++){
            var li = document.createElement('li');
            li.style.transform = 'rotate('+(i * 6)+'deg)';
            if(i%5 == 0){
                li.style.height = '15px';
            }
            ul.appendChild(li);
        }
        // 先调用一次
        run();

        // 开个定位器,每隔一秒调用一次
        setInterval(run,1000);

        function run(){
            // 获取当前时间
            var date = new Date();
            var iH = date.getHours();
            var iM = date.getMinutes();
            var iS = date.getSeconds();

            hour.style.transform = 'rotate('+ (iH * 30 + iM/2) +'deg)';
            min.style.transform = 'rotate('+ (iM * 6) +'deg)';
            sec.style.transform = 'rotate('+ (iS * 6) +'deg)';
        }
    </script>
</body>
</html>

在这里插入图片描述

案例2-折叠菜单

<!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>
        *{ margin:0; padding:0;}
        #menu{ width:300px; height:300px; border:1px black solid; perspective: 500px;}
        #list{ width:200px; height:50px; background:red; margin:30px auto; transform: rotateY(-40deg); transform-style: preserve-3d;}
        #list div{ width:100%; height:100%; background:red; color:white; text-align: center; line-height: 50px; transform-origin: top; margin-top:10px; transform: rotateX(180deg); transform-style: preserve-3d;}
        #list > div{ position:relative; top:50px;}
    </style>
</head>
<body>
    <button id="btn">展开</button>
    <div id="menu">
        <div id="list">
            <div>
                第一项
                <div>
                    第二项
                    <div>
                        第三项
                        <div>
                            第四项
                            <div>
                                第五项
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var btn = document.getElementById('btn');
        var list = document.getElementById('list');
        var listItems = list.getElementsByTagName('div');

        btn.onclick = function(){
            for(var i=0;i<listItems.length;i++){
                listItems[i].style.transition = '1s '+ (i*150) +'ms';   /*注意这里的写法*/
                listItems[i].style.transform = 'rotateX(0deg)';
            }
        };
    </script>
</body>
</html>

在这里插入图片描述

guanerkoushi
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值