3小时快速入门html5+css(2022)

抗争的小青年

已于 2022-05-10 21:56:35 修改

阅读量483

点赞数 2

分类专栏： css3 html5 文章标签： html5 css3 bootstrap

于 2022-03-21 11:54:47 首次发布

本文链接：https://blog.csdn.net/liyuchenii/article/details/123631198

版权

css3 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

html5

6 篇文章 1 订阅

订阅专栏

字体图标-iconfont

1.引入样式表
2.引入内容

	<link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        /* .iconfont {
            font-size: 60px;
        } */
    </style>
    <body>
    <i class="iconfont icon-favorites-fill"></i>

</body>

购物车案例

	<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">
                    <span class="iconfont icon-cart-Empty-fill orange"></span>
                    <span>购物车</span>
                    <span class="iconfont icon-arrow-down"></span>
                </a>
            </li>
        </ul>
    </div>
</body>

上传矢量图-svg-上传

1.与设计沟通，得到svg格式矢量图
2.在iconfont网站上传图标，下载使用

平面转换

作用：丰富标签的显示方式，改变盒子在平面内的形态（位移，旋转，缩放）2D转换
平面转换属性：transform

位移

语法：transform:translate(水平移动距离，垂直移动距离)
取值（正负均可）：像素，百分比（参照物为盒子自身尺寸）
注意：x轴正向为右，Y轴正向为下
技巧：如果translate只给出一个值，表示水平方向的移动（单独设置某个方向的移动距离：translateX()，translateY()）

	<style>
        .father {
            width: 500px;
            height: 300px;
            /* background-color: pink; */
            border: 1px solid #000;
            margin: 100px auto;
        }
        
        .son {
            width: 200px;
            height: 100px;
            background-color: pink;
            transition: all 0.5s;
        }
        /* 鼠标移入父盒子，son改变位置 */
        
        .father:hover .son {
            /* transform: translate(100px, 50px); */
            /* 盒子自身尺寸的效果 */
            /* transform: translate(-100%, -50%); */
            /* transform: translate(100%, 50%); */
            /* 只给出一个值，表示水平方向的移动 */
            /* transform: translate(100px); */
            transform: translateX(100px);
        }
    </style>

位移，绝对定位居中

目标：使用translate快速实现绝对定位的元素居中效果

绝对定位的盒子居中（基础写法）:使用left,top后，再用margin-left，margin-top居中，值为宽高的一半。

	.son {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -50px;
            width: 200px;
            height: 100px;
            background-color: pink;
        }

绝对定位的盒子居中（灵活写法）：transform:translate(-50%,-50%)

	.son {
            position: absolute;
            left: 50%;
            top: 50%;
            /* margin-left: -100px;
            margin-top: -50px; */
            transform: translate(-50%, -50%);
            width: 200px;
            height: 100px;
            background-color: pink;
        }

双开门案例

	<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 1366px;
            height: 600px;
            margin: 0 auto;
            background: url('./images/bg.jpg');
            overflow: hidden;(超出父级的部分隐藏)
        }
        /* 伪元素是行内，设置宽高不生效 */
        
        .box::before,
        .box::after {
            float: left;
            content: '';
            width: 50%;
            height: 600px;
            background-image: url(./images/fm.jpg);
            transition: all 2s;（设置渐变效果）
        }
        
        .box::after {
            background-position: right 0;
        }
        /* 鼠标移入的时候的位置改变的效果 */
        （注意css选择器的写法，一开始做就因为没有写对导致没有效果）
        .box:hover::before {
            transform: translateX(-100%);
        }
        
        .box:hover::after {
            transform: translateX(100%);
        }
     </style>
<body>
    <div class="box">

    </div>
</body>

旋转

语法：transform:rotate(角度)
技巧：取值正负均可（单位是deg）(正：顺时针；负：逆时针)

	<style>
        img {
            width: 250px;
            transition: all 2s;
        }
        
        img:hover {
            transform: rotate(360deg);
        }
    </style>

转换原点（属性名空格隔开）

语法：默认是盒子中间；transform-origin：原点水平位置原点垂直位置
取值：方位名词（left,top,right,bottom,center）；像素单位值；百分比（盒子自身计算）
注意：中心点改的是转换的中心点！

	<style>
        img {
            width: 250px;
            transition: all 2s;
            (中心点改的是转换的中心点！)
            /* transform-origin: right bottom; */
            transform-origin: left bottom;
        }
        
        img:hover {
            transform: rotate(360deg);
        }
    </style>

多重转换

技巧：transform: translate(600px) rotate(720deg);
注意：rotate不要放前面，旋转可以改变坐标轴向（轮胎案例）

	.box:hover img {
            /* 边走边转 */
            transform: translate(600px) rotate(720deg);
            /* 旋转可以改变坐标轴向 */
            /* transform: rotate(720deg) translate(600px); */
            /* taransform具有层叠性 */
            /* transform: translate(600px);
            transform: rotate(720px); */
        }

缩放

语法：transform:scle(x轴缩放倍数，y轴缩放倍数)；
技巧：一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放；transform:scale(缩放倍数)

播放按钮英雄联盟案例

布局：::after
样式：居中
效果：缩放

绝对定位居中（基础做法）

	.box .pic::after {
            /* 播放按钮居中显示 */
            position: absolute;
            top: 50%;
            left: 50%;
            /* transform: translate(-50%, -50%); */
            margin-left: -29px;
            margin-top: -29px;
            content: '';
            width: 58px;
            height: 58px;
            background-image: url(./images/play.png);
            /* 缩放原来的五倍 */
            transform: scale(5);
            transition: all 0.5s;
            opacity: 0;
        }

绝对定位居中（transform属性；注意层叠性）

	.box .pic::after {
            /* 播放按钮居中显示 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(5);注意这里
            /* margin-left: -29px;
            margin-top: -29px; */
            content: '';
            width: 58px;
            height: 58px;
            background-image: url(./images/play.png);
            /* 缩放原来的五倍 */
            /* transform: scale(5); */
            transition: all 0.5s;
            opacity: 0;
        }
        
        .box li:hover .pic::after {
            transform: translate(-50%, -50%) scale(1);注意这里
            opacity: 1;
        }

opacity属性

控制组件透明度！取值0~1

	.box li:hover .pic::after {
            transform: scale(1);
            opacity: 1;
        }

渐变背景

渐变式多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景

	 background-image: linear-gradient( transparent, rgba(0, 0, 0, .6));
	 (transparent用来指定透明色)

空间转换

目标：使用transform属性实现元素在空间内的位移，缩放，旋转等效果
空间：是从坐标轴定义的。Z轴位置和视线方向相同（+值指向用户，-值指向屏幕里面）
空间转换也叫3D转换
属性：transform
语法：transform:translate3d(x,y,z);

	.box:hover {
            /* transform: translate3d(50px, 100px, 200px); */
            transform: translateX(100px);
            transform: translateY(100px);
            transform: translateZ(100px);
        }

透视

使用perspective属性实现透视效果（产生近大远小）
属性（添加给父级）
1.perspective：值；（也叫视距：人眼睛到屏幕距离）
2.取值：像素单位数值，数值一般在800-1200;

<head>
    <meta charset="UTF-8">
    <title>透视效果</title>
    <style>
        body {
            perspective: 1000px;(要注意这个属性是添加给效果盒子的父级的！)
        }
        
        .box {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition: all 0.5s;
        }
        
        .box:hover {
            transform: translateZ(200px);
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

	.box {
            /* 透视效果：近大远小，近实远虚 */
            perspective: 1000px;
        }

空间旋转

目标：使用rortate实现元素空间旋转效果
语法：transform:rotateZ(值)；transform:rotateX(值)；transform:rotateY(值)

	.box img:hover {
            transform: rotateZ(360deg);
        }

	.box img:hover {
            transform: rotateX(60deg);
            transform: rotateX(-120deg);
        }

	.box img:hover {
            transform: rotateY(60deg);
        }

拓展：rotate3d(x,y,z，角度度数):用来设置自定义旋转轴的位置及旋转的角度（x,y,z,取值为0-1之间的数字）

左手法则

判断旋转方向：左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向

立体呈现（立方体盒子）（添加给父级）

实现方法：
1. 添加transform-style:preserve-3d;
2. 使(子元素)处于真正的3d空间
3. 默认值flat，表示子元素处于2D平面内呈现

.cube {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            /* background-color: pink; */
            transition: all 2s;
            transform-style: preserve-3d;(呈现3D效果)（要注意这个属性是添加给效果盒子的父级的！)
        }
.cube:hover {
            transform: rotateY(180deg);
        }

案例-3D导航栏

搭建立方体

li标签：添加立体呈现属性transform-style:preserve-3d;添加旋转属性（方便观察）
a标签

	<style>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .navs {
            width: 300px;
            height: 40px;
            margin: 50px auto;
        }
        
        .navs li {
            position: relative;
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            transition: all .5s;
            transform-style: preserve-3d;
            /* 旋转: 让大家在写代码的过程中看到立体盒子 */
            /* transform: rotateX(-20deg) rotateY(30deg); */
            /* 测试缩放效果 */
            /* transform: scale3d(0.5, 1.1, 2); */
        }
        
        .navs li a {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: #fff;
        }
        
        .navs li a:first-child {
            background-color: green;
            transform: translateZ(20px);
        }
        
        .navs li a:last-child {
            background-color: orange;
            /* 躺平x轴旋转  立方体的顶部,位移z(确保看到这个盒子) */
            transform: rotateX(90deg) translateZ(20px);
        }
        /* li:hover 立方体旋转 */
        
        .navs li:hover {
            transform: rotateX(-90deg);
        }
    </style>
    
    
<body>
    <div class="navs">
        <ul>
            <li>
                <a href="#">首页</a>
                <a href="#">Index</a>
            </li>
            <li>
                <a href="#">登录</a>
                <a href="#">Login</a>
            </li>
            <li>
                <a href="#">注册</a>
                <a href="#">Register</a>
            </li>
        </ul>
    </div>
</body>

空间缩放

目标：使用scale实现空间缩放效果
语法：
1. transform:scaleX(倍数)
2. transform:scaleY(倍数)
3. transform:scaleZ(倍数)
4. transform:scale3d(x,y,z)

	transform: scale3d(0.5, 1.1, 2);

动画

两个状态的改变可以使用过渡效果
多个状态的改变就需要使用animation添加动画效果了，动画过程可控（重复播放，最终画面，是否暂停）
构成动画的最小单元：帧或者动画帧

动画的实现步骤

1.定义动画:

		（第一种）
		@keyframes 动画名称{
			form{}
			to{}
		}
		(第二种)
		@keyframes 动画名称{
			0%{}
			10%{}
			15%{}
			100%{}
		}

	@keyframes change {
            form {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }
        @keyframes change {
            0% {
                width: 200px;
            }
            50% {
                width: 500px;
                height: 300px;
            }
            100% {
                width: 800px;
                height: 500px;
            }
        }
        /* 百分比指的是动画总时长的占比 */

2.使用动画

		anomation: 动画名称 动画花费时长;

	.box {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 使用动画 */
            animation: change 1s;
        }

animation:动画名称，动画时长，延迟时间，速度曲线，延迟效果，重复次数，动画方向，执行完毕时的状态；
注意：动画名称和动画时长必须赋值；取值不分先后顺序，如果有两个时间值，第一个时间表示动画时长，第二个表示延迟时间

	 /* animation: change 1s linear; */
	animation: change 1s steps(3) 1s(延迟时间) 3（重复次数）;
	 /* 无限循环 */
     animation: change 1s infinite;
     /* 反复执行状态 */
     /* animation: change 1s infinite alternate(反复执行属性); */
     /* 默认值, 动画停留在最初的状态 */
     /* animation: change 1s backwards（默认值）; */
     /* 动画停留在结束状态 */
     /* animation: change 1s forwards; */

动画属性

目标：使用animation相关属性控制动画的执行过程
background复合属性：color image repeat attachment position;
background-color
background-image
background-repeat
background-attachment
background-position

属性	作用	取值
animation-name	动画名称
animation-duration	动画时长
animation-delay	延迟时间
animation-fill-mode	动画执行完毕时状态	forwords:最后一帧状态 backwards:第一阵状态
animation-timing-function	速度曲线	steps(数字):逐帧动画
animation-iteration-count	重复次数	infinite为无限循环
animation-direction	动画执行方向	alternate为反向
animation-play-state	暂停动画	paused为暂停，通常配合:hover使用

<style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
            animation-name: change;（名称）
            animation-duration: 1s;（执行时间）
            animation-iteration-count: infinite;（重复播放）
        }
        
        .box:hover {
            /* 鼠标移入的时候暂停动画 */
            animation-play-state: paused;
        }
        
        @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }
    </style>

逐帧动画（小人跑步案例）

制作步骤

准备显示区域：设置盒子尺寸是一张小图的尺寸，背景图为精灵图
定义动画：改变背景图的位置（移动的距离是精灵图的宽度）
使用动画：添加速度曲线steps(N),N与精灵图上小图个数相同；添加无限重复效果

<style>
        .box {
            /* 1680/12 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */
            width: 140px;
            height: 140px;
            /* border: 1px solid #000; */
            background-image: url(./images/bg.png);
            /* 12: 精灵小图的个数 */
            animation: move 1s steps(12) infinite;
        }
        
        @keyframes move {
            form {
                background-position: 0 0;
            }
            to {
                /* 1680整个精灵图的宽度 */
                background-position: -1680px;
            }
        }
    </style>

多组动画

	 animation: move 1s steps(12) infinite, run 1s forwards;(多个动画效果可以用逗号隔开)

小人案例代码

<head>
    <meta charset="UTF-8">
    <title>精灵动画</title>
    <style>
        .box {
            /* 1680/12 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */
            width: 140px;
            height: 140px;
            /* border: 1px solid #000; */
            background-image: url(./images/bg.png);
            /* 12: 精灵小图的个数 */
            animation: move 1s steps(12) infinite, run 1s forwards;
        }
        
        @keyframes move {
            form {
                background-position: 0 0;
            }
            to {
                /* 1680整个精灵图的宽度 */
                background-position: -1680px;
            }
        }
        /* 定义一个盒子移动的动画 */
        
        @keyframes run {
            /* 如果动画的初始状态和盒子的默认状态相同可以省略开始状态的代码 */
            form {
                transform: translateX(0);
            }
            to {
                transform: translate(800px);
            }
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

走马灯案例代码

<style>
        * {
            padding: 0;
            margin: 0;
        }
        
        li {
            list-style: none;
        }
        
        img {
            width: 200px;
        }
        
        .box {
            width: 600px;
            height: 112px;
            border: 5px solid #000;
            margin: 100px auto;
            overflow: hidden;
        }
        
        .box ul {
            width: 2000px;
            animation: move 9s infinite linear;
        }
        
        .box li {
            float: left;
        }
        
        @keyframes move {
            form {}
            to {
                transform: translateX(-1400px);
            }
        }
        
        .box:hover ul {
            animation-play-state: paused;(添加鼠标移入后暂停的效果)
        }
        <body>
    <div class="box">
        <ul>
            <li><img src="./images/1.jpg" alt="" /></li>
            <li><img src="./images/2.jpg" alt="" /></li>
            <li><img src="./images/3.jpg" alt="" /></li>
            <li><img src="./images/4.jpg" alt="" /></li>
            <li><img src="./images/5.jpg" alt="" /></li>
            <li><img src="./images/6.jpg" alt="" /></li>
            <li><img src="./images/7.jpg" alt="" /></li>
            <!-- 转到第七张图的时候，不能留白 -->
            <li><img src="./images/1.jpg" alt="" /></li>
            <li><img src="./images/2.jpg" alt="" /></li>
            <li><img src="./images/3.jpg" alt="" /></li>

        </ul>
    </div>
</body>

全面出游案例

案例典型代码

	body {
    height: 100%;
    background: url(./../images/f1_1.jpg) no-repeat center 0;
    /* 缩放背景图 */
    /* 图片等比例缩放，宽度或高度与盒子宽高相同时，就不再缩放 */
    /* background-size: contain; */
    /* 图片等比例缩放，图片会覆盖整个盒子，但图片有可能显示不全 */
    background-size: cover;
}


/* img引入图片 */

.cloud img {
    position: absolute;
    top: 0;
    left: 50%;
    /* 一开始用的右对齐，导致后面设置样式后没效果 */
}

.cloud img:nth-child(1) {
    margin-left: -300px;
    top: 20px;
    animation: cloud 1s infinite alternate;
}

.cloud img:nth-child(2) {
    margin-left: 400px;
    top: 100px;
    animation: cloud 1s infinite alternate 0.2s;
}

.cloud img:nth-child(3) {
    margin-left: -550px;
    top: 200px;
    animation: cloud 1s infinite alternate 0.4s;
}


/* 云彩动画 */

@keyframes cloud {
    to {
        transform: translateX(20px);
    }
}


<!-- 云彩图片 -->
    <div class="cloud">
        <img src="./images/yun1.png" alt="">
        <img src="./images/yun2.png" alt="">
        <img src="./images/yun3.png" alt="">
    </div>

移动端学习

移动网页和PC不同点

网址不同（京东）
移动端和pc端是两个网站
PC屏幕大，网页固定版心，手机屏幕小，网页宽度多数为100%

移动设备分辨率

屏幕尺寸：指的是屏幕对角线的长度，一般用英寸来度量
缩放150%：（1920/150%）X(1080/150%)

分辨率分类

物理分辨率：是生产屏幕就固定的，它是不可改变的
逻辑分辨率：是由软件驱动决定的

视图

目标：使用mate标签设置视图宽度，制作适配不同设备宽度的网页
解决办法：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

二倍图

目标：使用像素大厨软件测量二倍图中元素的尺寸

百分比布局（移动端）

流式布局，也叫百分比布局
效果：宽度自适应，高度自适应

	.toolbar {
            /* 固定定位 */
            position: fixed;
            left: 0;
            bottom: 0;
            /* 百分比布局，流式布局 */
            width: 100%;
            height: 50px;
            background-color: pink;
            border-top: 1px solid #ccc;
        }

FIx布局

目标：使用flex布局模型灵活，快速的开发网页
注意：flex布局不会脱标
flex是一种浏览器提倡的布局模型
布局网页更简单，灵活
避免浮动脱标的问题
IE浏览器不兼容flex布局
可以控制子级和父级（添加给父级）

flex布局模型

作用：基于flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生；flex布局非常适合结构化布局
设置方法：给父元素（必须是亲爹，爷爷不行）添加display:flex，子元素可以自动的挤压或者拉伸
组成部分：外面一个大元素（弹性容器），里面放了左右两个元素（弹性盒子），一个横向箭头（main aaxis 主轴），一个竖向箭头（cross axis 交叉轴，侧轴），箭头方向可以改动，默认横向右，竖向下。

	.box {
            /* 视觉效果: 子级一行排列/水平排列 */
            /* 水平排列: 默认主轴在水平, 弹性盒子都是沿着主轴排列 */
            display: flex;
            height: 200px;
            border: 1px solid #000;
        }

主轴对齐方式

目标：使用justify-content调节元素在主轴的对齐方式。
在flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的距离

属性值	作用
flex-start	默认值，起点开始依次排序
flex-end	终点开始依次排序
center	沿着主轴居中排列
space-around	弹性盒子沿主轴均匀排列，空白间距均分布在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列，空白间距均分布在相邻盒子之间
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

	.box {
            display: flex;
            /* 居中效果 */
            justify-content: center;
            /* 间距在弹性盒子（子集）之间 */
            justify-content: space-between;
            /* 所有地方的间距都相等 */
            justify-content: space-evenly;
            /* 把间距添加到盒子的两侧（均匀） */
            justify-content: space-around;
            height: 200px;
            margin: auto;
            border: 1px solid #000;
        }

侧轴对齐方式

目标：使用align-items调节元素在侧轴的对齐方式
修改侧轴对齐方式的属性：ailgn-items(添加到弹性容器)；align-self控制某个弹性盒子(控制子集，控制谁就添加给谁)在侧轴的对齐方式（添加到弹性盒子）

属性值	作用
flex-start	默认值，起点开始依次排序
flex-end	终点开始依次排序
center	沿着侧轴居中排列
stretch	默认值，弹性盒子沿着主轴轴线被拉伸至铺满容器

	.box {
            display: flex;
            /* 居中 */
            /* align-items: center; */
            /* 拉伸，默认值（现有状态必须要测试的时候去掉子集的高度） */
            align-items: stretch;
            height: 300px;
            margin: auto;
            border: 1px solid #000;
        }

单独控制一个盒子

	/* 单独设置某个弹性盒子的侧轴对齐方式 */
        
        .box div:nth-child(2) {
            align-self: center;
        }

弹性盒子的特点

如果不给宽高，就按内容大小给，给宽高就按宽高走
从侧轴来看，如果给streach属性，而且没有给高度，拉伸的高度就按照父级给（弹性容器一样）

	.box {
            display: flex;
            /* 居中 */
            /* align-items: center; */
            /* 拉伸，默认值（现有状态必须要测试的时候去掉子集的高度） */
            /* align-items: stretch; */
            height: 300px;
            margin: auto;
            border: 1px solid #000;
        }

伸缩比

目标：使用flex属性修改弹性盒子的伸缩比
属性：flex值
取值分类：数值（整数）
注意：只占用父盒子剩余尺寸

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            display: flex;
            height: 300px;
            border: 1px solid #000;
        }
        
        .box div {
            height: 200px;
            margin: 0 20px;
            background-color: pink;
        }
        
        .box div:nth-child(1) {
            width: 50px;
        }
        /* 把父级剩余的分成两份 */
        
        .box div:nth-child(2) {
            /* 占用父级剩余尺寸的份数 */
            flex: 3;
        }
        
        .box div:nth-child(3) {
            flex: 1;
        }
    </style>
    
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>

主轴方向

目标：使用flex-direction改变元素方向
主轴默认是水平方向，侧轴默认是垂直方向
修改主轴方向属性：flex-direction

属性值	作用
row	行，水平（默认）
column	列，垂直（重点）
row-reverse	行，从右向左
column-reverse	列，从上向下

	.box li {
            display: flex;
            /* 1. 先确定主轴方向; 2. 再选择对应的属性实现主轴或侧轴的对齐方式 */
            /* 修改主轴方向: 列 */
            flex-direction: column;
            /* 视觉效果: 实现盒子水平居中 */
            align-items: center;
            /* 视觉效果: 垂直居中 */
            justify-content: center;
            width: 80px;
            height: 80px;
            border: 1px solid #ccc;
        }

弹性盒子换行（弹性盒子有“弹性”）

目标：使用flex-wrap实现弹性盒子多行排列效果
属性：flex-wrap:wrap;

	.box {
            display: flex;
            /* 默认值，不换行 */
            /* flex-wrap: nowrap; */
            /* 弹性盒子换行 */
            flex-wrap: wrap;(案例中是加在父级上的)
            height: 500px;
            border: 1px solid #000;
        }

调整行对齐方式：align-content(取值与justify-content基本相同(没有evenly属性))

设置省略号（小兔鲜案例）

	.orders li .goods {
    display: flex;
    flex: 1;
    padding: 17px 0 14px 12px;
    align-items: center;
    margin-right: 120px;
	}
	
	.orders .goods .txt {
    flex: 1;
    /* 溢出的时候显示省略号 */
    /* 弹性盒子的尺寸可以被内容撑开，不换行的文字撑开 */
    width: 0;
}

.orders .goods .txt h5 {
    text-overflow: ellipsis;
    white-space: nowrap;（不换行）
    overflow: hidden;(溢出隐藏)
}

移动适配

rem：目前多数企业在用的解决方案
vw/vh:未来的解决方案

rem

目标：能够使用rem单位实现网页元素的尺寸
效果：屏幕宽度不同，网页元素尺寸不同（等比缩放）

	.box {
            /* width: 10px; */
            width: 5rem;
            height: 5rem;
            background-color: pink;
        }

rem相对单位

相对单位
rem单位是相对与html标签的字号计算结果
1rem=1html字号大小

	/* 1rem = 1html标签字号大小 */
        
        html {
            font-size: 12px;
        }
        
        .box {
            width: 5rem;
            height: 3rem;
            background-color: pink;
            font-size: 12rem;
        }

rem移动适配-媒体查询

目标：能够使用媒体查询设置差异化的css样式

媒体查询能够检测视口的宽度，然后编写差异化的css样式
写法：@meda(媒体特性){ 选择器 {css属性} }

	<style>
        /* 使用媒体查询, 根据不同的视口宽度, 设置不同的根字号 */
        @media (width:375px) {
            html {
                font-size: 40px;
            }
        }

        @media (width:320px) {
            html {
                font-size: 30px;
            }
        }
    </style>

目前rem布局方案中，将网页等分成10份,html标签的字号为视图窗口宽度的1/10

	/* 1. 不同的视口, HTML标签字号不同, 字号是视口宽度的1/10 */
        @media (width:320px) {
            html {
                font-size: 32px;
            }
        }

        @media (width:375px) {
            html {
                font-size: 37.5px;
            }
        }
        @media (width:414px) {
            html {
                font-size: 41.4px;
            }

rem适配原理
目标：实现在不同宽度的设备中，网页元素尺寸等比例缩放效果
N X 37.5 = 68/37.5
rem单位尺寸

确定设计稿对应的设备的html字号（查看设计稿宽度，确定参考设备宽度（视图窗口），确定基准根字号（1/10视口宽度））

flexible

目标：使用flexible.js配合rem实现在不同宽度的设备中，网页元素等比例缩放效果

flexible.js是手陶开发出来的一个用来适配移动端的Js框架
核心原理是就是根据不同视图窗口宽度给页面中html根标签根节点设置不同的font-size

Less语法

目标：使用Less运算写法完成px单位到rem单位的转换
Less是一个Css预处理器，Less文件后缀是.less
扩充了Css语言，使Css具备一定的逻辑性，计算能力
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件

	.father {
    color: red;
    width: 1.81333333rem;
}

.father .son {
    background-color: pink;
}

编译插件

目标：使用Less语法快速编译生成CSS代码

Easy Less:

vscode插件
作用：less文件保存生成css文件

注释

单行注释：
语法：//注释内容
快捷键：ctrl+/
块注释：/注释内容/
快捷键：shift+alt+A

	// 单行注释

/* 
    块注释
    第二行
    第三行
*/

运算

加，减，乘直接书写计算表达式
除法需要1添加小括号或.

	.box {
    width: 100 + 10px;
    width: 100 - 20px;
    width: 100 * 2px;

    // 除法
    // 68  > rem
    width: (68 / 37.5rem);
    // height: 29 ./ 37.5rem;

    height: 29 / 37.5rem;

}

嵌套

目标：能够使用Less嵌套写法生成后代选择器
作用：快速生成后代选择器
注意：&不生成后代选择器，表示当前选择器，通常配合伪类或者伪元素使用

	.father {
    width: 100px;
    .son {
        color: pink;
        // & 表示当前选择器
        &:hover {
            color: green;
        }
    }

    &:hover {
        color: orange;
    }
}

// .father:hover {}(方便代码迁移)

	.father {
  width: 100px;
}
.father .son {
  color: pink;
}
.father .son:hover {
  color: green;
}

变量

方法二：把颜色提前存储到一个容器，设置属性值为这个容器名称
变量：存储变量，方便使用和修改
语法：
定义变量：@变量名：值；
使用变量：CSS属性：@变量名

// 1. 定义. 2.使用
@colors:blue;
.box{
    color: @color;
}

.father{
    background-color: @colors;
}

.aa{
    color: @colors;
}

.box {
  color: blue;
}
.father {
  background-color: blue;
}
.aa {
  color: blue;
}

Less导入

目标：能够使用Less导入写法引入其他Less文件
导入：@import"文件路径";

@import './01-体验less.less';（import后面加空格，后面加分号）
@import './02-注释';(如果引入的是less文件，则可以不用写.less后缀)

Less导出css

// out: ./qqq/daqiu.css

// out: ./abc/

.box {
    color: red;
}

vm/vh

目标：可以使用vw单位设置网页元素的尺寸
是相对单位，相对视图的尺寸计算结果

vw:view width

1vm=1/100视口宽度

vh:view height

1vh=1/100视口高度

vw适配原理

目标：实现在不同宽度的设备中，网页元素尺寸等比例缩放效果
vw单位尺寸

确定设计稿对应的vw尺寸（1/100视口宽度）
vw单位的尺寸= 单位数值 / (1/100视口宽度)

// out: ./
//68 * 29 --vw
.box {
    width: (68/3.75vw);
    height: (29/3.75vw);
    background-color: pink;
}


.box2{
    //vh
    width: (68/6.67vh);
    height: (27/6.67vh);
    background-color: green;
}

全面屏（iphoneX）影响

// 不允许宽高混用，避免全面屏的影响
.box {
    // 68  vw * 29 vh
    width: (68 / 3.75vw);
    height: (29 / 6.67vh);
    background-color: pink;
}

实战演练

目标：实现在不同宽度的设备中等比例缩放的网页效果
视频布局：
父级左右padding
每个盒子：宽度为50%，左右padding（拉开内容距离)

媒体查询（根据设备宽度的变化，设置差异化样式）

开发常用写法:
1. max-width（大到小）
2. min-width（小到大）
完整写法

@media 关键词 媒体类型 and (媒体属性) { css代码 }

关键词
1.not(非)
2.and
3.only
媒体类型

类型名称	值	描述
屏幕	screen	带屏幕的设备
打印预览	print	打印预览模式
阅读器	speech	屏幕阅读模式
不区分类型	all	默认值，包括以上3种类型

媒体属性

特性名称	属性	值
视口的宽高	width,height	数值
视口最大宽或者高	max-width,max-height	数值
视口最小宽或者高	min-width,min-height	数值
屏幕方向	orientation	portrait:竖屏;landscape横屏

	<style>
        /* 视口宽度小于等于768px， 网页背景色是粉色 */
        @media (max-width: 768px) {
            body {
                background-color: pink;
            }
        }

        /* 视口宽度大于等于1200px， 网页背景色是skyblue */
        @media (min-width: 1200px) {
            body {
                background-color: skyblue;
            }
        }
        
    </style>

媒体查询-书写顺序

注意：css样式具备层叠性！

	<style>
        /*
            视口宽度 >= 768px，网页背景色是 粉色
            视口宽度 >= 992px，网页背景色是 绿色
            视口宽度 >= 1200px，网页背景色是 skyblue
         */
        /* css属性都有层叠性 */
        /* @media (min-width: 1200px) {
            body {
                background-color: skyblue;
            }
        } */
        
        @media (min-width: 768px) {
            body {
                background-color: pink;
            }
        }
        
        @media (min-width: 992px) {
            body {
                background-color: green;
            }
        }
        
        @media (min-width: 1200px) {
            body {
                background-color: skyblue;
            }
        }
        
        @media (min-width:1800px) {
            body {
                background-color: blue;
            }
        }
    </style>

媒体查询-link写法

外链式css引入
注意：写link标签一定要写小括号！

	<link rel="stylesheet" href="xx.css" media="逻辑符 媒体类型 and （媒体特性）

	<!-- 视口宽度 >= 992px，网页背景色为粉色 -->
    <!-- 视口宽度 >= 1200px，网页背景色为绿色 -->
    <link rel="stylesheet" href="./one.css" media="(min-width: 992px)">
    <link rel="stylesheet" href="./two.css" media="(min-width: 1200px)">

BootStrap

目标：使用BootStrap框架快速开发响应式网页

使用

引入：BootStrap提供的CSS代码

<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">

调用类：使用BootStrap提供的样式
1. container:响应式布局版心类

BootStrap栅格系统

目标：使用Bootstrap栅格系统布局响应式网页
栅格化：是指将整个网页的宽度分成若干等份
BootStrap3默认将网页分成12等份

	超小屏幕	小屏幕	中等屏幕	大屏幕
响应断点	<768px	>=768px	>=992px	>=1200px
别名	xs	sm	md	lg
容器宽度	100%	750%	970%	1170%
类前缀	col-xs-	col-sm-	col-md-	col-lg-
列数	12	12	12	12
列间隙	30px	30px	30px	30px

.container是bootstrap中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。
.container-fluid也是bootstrap中专门提供的类名，所有应用该类名的盒子，宽度均为100%
分别使用.row类名和.col类名定义栅格布局的行和列。
注意：

container类自带间距15px
row类自带间距**-15px**

<body>
    <!-- 版心样式:自带左右各15px的padding -->
    <div class="container">1</div>

    <!-- row类作用就是抵消container类的15px的内边距, row有-15px的外边距 -->
    <div class="container">
        <div class="row">2</div>
    </div>

    <!-- 宽度100%:自带左右各15px的padding -->
    <div class="container-fluid">3</div>
</body>

全局CSS样式

目标：掌握bootstrap手册用法，使用css全局样式美化标签
寻找样式可以在官网首页查看,寻找样式。

组件

目标：使用BootStrap组件快速布局网页
组件：bootStrap提供了常见的功能，包含了heml结构和css样式。
使用方法：

引入样式
使用组件

字体图标

注意：和iconfont使用方法一样

插件

将html+css+js结合为一体，可以实现交互效果
使用步骤：

引入bootstrap样式
引入js文件：jQuery.js+BootStrap.min.js

<script src="./js/jquery.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

抗争的小青年

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录