寒假周报二

最新推荐文章于 2024-08-13 21:58:24 发布

11BZou

最新推荐文章于 2024-08-13 21:58:24 发布

阅读量182

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_52159101/article/details/113483481

版权

寒假周报二

@规则

at-rule: @规则 \ @语句 \ CSS语句 \ CSS指令

import

@import “路径”;

导入另一个css文件

charset

@charset “utf-8”;

告诉浏览器该CSS文件,使用的字符编码集是utf-8,必须写到第一行

media

@media

媒体查询

font-face

@font-face

自定义字体

css线性渐变

渐变分为线性渐变和径向渐变。

线性渐变：变化根据一条线进行变化。
径向渐变：由一个点向外进行渐变。

写法

background: linear-gradient(color1,color2);

渐变方向默认从上到下

div{
	width: 200px;
    height: 200px;
	background-image: linear-gradient(red,blue);
}

在这里插入图片描述

改变渐变方向

通过设置渐变终点

background: linear-gradient(direction,colro1,color2);

其中，direction即为设置渐变终点。（to …)

【从左到右，就将direction写成to right】

【左下角到右上角，将direction写成to right top】

通过设置渐变线起始角度

background: linear-gradient(angle,color1,color2);

其中，angle即为角度。是以六点为起始，进行顺时针计算确定渐变的起始位置。

【左上角十点半，135度】

div{
	width: 200px;
	height: 200px;
	background-image: linear-gradient(135deg,red,blue);
}

在这里插入图片描述

可以看出，通过角度设置渐变的，一个是设置了起始点的位置，再一个是设置了渐变线的角度。

可设置多个颜色

background: linear-gradient(color1,color2,color3,color4…);

div{
    width: 200px;
    height: 200px;
    background-image: linear-gradient(pink,red,blue,green,yellow);
}

在这里插入图片描述

设置颜色起始位置

通过设置颜色的起始位置，可以设置颜色占比，也可以设置渐变重复，还可以设置渐变起始点。

background: linear-gradient(color1 length/percentage,color2 length/percentage,color3 length/percentage);

length/percentage 都是颜色起止位置，length表示长度，percentage表示百分比

需要说明一下的是，渐变，每个颜色的起止位置为一个固定的点，而不是一段距离。因为，只有在那个固定的点的位置才是最纯正的该颜色，而无论向两侧任何方向变化，都不再是最纯的颜色了。当未设置颜色起止点时，即为均匀渐变，即第一个颜色起始位置为0%,第二个颜色的起止位置为50%，第三个为100%。

【均匀渐变，第二个颜色起始位置在中间】

div{
    width: 200px;
    height: 200px;
    background-image: linear-gradient(pink,red,blue);
}

在这里插入图片描述

【将第二个颜色起始位置进行改变】

div{
    width: 200px;
    height: 200px;
    background-image: linear-gradient(pink,red 80%,blue);
}

在这里插入图片描述

设置颜色渐变重复

background-image: repeating-linear-gradient(color1 length/percentage,color2 length/percentage,color3 length/percentage);

当第三个颜色结束时，剩下的地方会重新渐变。

div{
    width: 200px;
    height: 200px;
    background-image: repeating-linear-gradient(pink,red 60px,blue 120px);
}

在这里插入图片描述

表格元素

table属性

在css技术出现之前,网页通常使用表格布局.

后台管理系统中可能会使用表格.

前台: 面向用户

后台: 面向管理员.对界面要求不高,对功能性要求高.

表格不再适用于网页布局? 表格的渲染速度过慢.

标题: caption
表头: thead
表身: tbody
表尾: tfoot
行: tr
列: td
跨越$行: rowspan="$"
跨越$列: colspan="$"

table-layout: fixed;
定义列宽的算法,fixed的计算方式为根据列表宽度自动计算列宽,每列的宽度为均分整个表格的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width: 100%;
            border-collapse: collapse;
        }
        table caption{
            font-size: 2em;
            font-weight: bold;
        }

        th,td{
            border: 1px solid #999;
            text-align: center;
            padding: 20px 0;
        }
        thead tr{
            background-color: #008c8c;
            color: #fff;
        }
        tbody tr:nth-child(odd){
            background-color: #eee;
        }
        tbody tr:nth-child(odd):hover{
            background-color: #cccccc;
        }
        tbody td:first-child{
            color: chocolate;
        }
        tfoot td{
            text-align: right;
            padding-right: 20px;
        }
    </style>
</head>
<body>
    <table>
        <caption>这是表格标题</caption>
        <!-- 表头 -->
        <thead>
            <!-- table row -->
            <tr>
                <th>列1</th>
                <th>列2</th>
                <th>列3</th>
                <th>列4</th>
                <th>列5</th>
            </tr>
        </thead>
        <!-- 表身 -->
        <tbody>
            <!-- 行 -->
            <tr>
                <!-- 跨越2行 -->
                <!-- <td rowspan="2">数据1</td> -->
                <!-- 列 -->
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
        </tbody>
        <!-- 表尾 -->
        <tfoot>
            <tr>
                <!-- 跨越至第5列 -->
                <td colspan="5">合计:XXXX</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

在这里插入图片描述

11BZou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
寒假周报二

寒假第二次周报@规则at-rule: @规则 \ @语句 \ CSS语句 \ CSS指令import@import “路径”;导入另一个css文件charset@charset “utf-8”;告诉浏览器该CSS文件,使用的字符编码集是utf-8,必须写到第一行media@media媒体查询font-face@font-face自定义字体css线性渐变渐变分为线性渐变和径向渐变。线性渐变：变化根据一条线进行变化。径向渐变：由一个点向外进行渐变。写法
复制链接

扫一扫