css笔记（五）

最新推荐文章于 2024-04-29 22:26:37 发布

扣1送地狱火

最新推荐文章于 2024-04-29 22:26:37 发布

阅读量414

点赞数

文章标签： css safari 前端

本文链接：https://blog.csdn.net/qq_60587956/article/details/122675227

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

笔记基于尚硅谷

1.渐变

1.1线性渐变

通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果

渐变是图片，需要通过background-image来设置

线性渐变，颜色沿着一条直线发生变化 linear-gradient()

# 红色在开头，粉色在结尾，中间是过渡区域
background-image: linear-gradient(red, pink);

线性渐变的开头，我们可以指定一个渐变的方向

to left
to right
to bottom
to top
deg deg表示度数
turn 表示圈

渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况

repeating-linear-gradient() 可以平铺的线性渐变

并且不会因为 background-repeat: no-repeat; 改变

1.2 径向渐变

radial-gradient() 径向渐变（放射性的效果）

盒子为正方形 -->渐变圆形
盒子为长方形 -->渐变椭圆形

默认情况下，circle和ellipse是自动适配盒子的，我们也可以手动指定径向渐变的形状

形状

circle 圆形
ellipse椭圆

background-image: radial-gradient(circle, red, yellow);

也可以指定渐变的位置

位置

top
right
left
center
bottom

background-image: radial-gradient(at left, red, yellow);

除了上述值，还可以指定像素


background-image: radial-gradient(at 100px 60px, red, yellow);

大小

closest-side 近边
farthest-side 远边
closest-corner 近角
farthest-corner 远角

radial-gradient(形状/大小 at 位置 , 颜色位置, 颜色位置)

类似于线性渐变，径向渐变也有对应的repeat属性

background-image: repeating-radial-gradient(circle at 50px 100px, red 50px, yellow 100px);

径向渐变的渐变方向以圆心为起点，往四周扩散的；同一半径上的颜色是渐变的，同一圆周上的颜色是一致的

2.雪碧图

解决图片闪烁的问题：

可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示响应的图片

这样图片会同时加载到网页中就可以有效的避免出现闪烁的问题

这个技术在网页中应用十分广泛，被称为CSS-Sprite，这种图我们称为雪碧图

雪碧图的使用步骤：

先确定要使用的图标
测量图标的大小
根据测量结果创建一个元素
将雪碧图设置为元素的背景图片
设置一个偏移量以显示正确的图片
雪碧图的特点：

一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验

3.表格

3.1表格

我们通过table标签来创建一个表格

在table中使用tr表示表格中的一行，有几个tr就有几行
在tr中使用td表示一个单元格，有几个td就有几个单元格

rowspan 纵向的合并单元格
colspan 横向的合并单元格

使用合并前先删除需要合并的单元格

<table border="1" width="50%" align=" center">
    <!--在table中使用tr表示表格中的一行，有几个tr就有几行-->
    <tr>
        <!--在tr中使用td表示一个单元格，有几个td就有几个单元格-->
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
    </tr>
    <tr>
        <td>A2</td>
        <td>B2</td>
        <td>C2</td>
        <!--rouspan 纵向的合并单元格-->
        <td rowspan="2">D2</td>
    </tr>
    <tr>
        <td>AB</td>
        <td>B3</td>
        <td>C3</td>
    </tr>
    <tr>
        <td>A4</td>
        <td>B4</td>
        <!-- colspan横向的合并单元格 -->
        <td colspan="2">C4</td>
    </tr>
</table>

3.2长表格

可以将一个表格分成三个部分：

头部 thead
主体 tbody
底部 tfoot

th 表示头部的单元格

3.3设置表单样式

<!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>
      table {
    width: 50%;
    margin: 0 auto;
    border: 1px black solid;

    /* border-spacing：指定边框之间的距离；边框之间虽然没有距离了，但是实际上是两条边框的和，看起来是变粗了 */
    /* border-spacing: 0; */

    /*border-collapse:collapse；设置边框的合并；真正的将两条边框合并成一条边框 */
    border-collapse: collapse;
    
    /* 默认情况下元素在td中是垂直居中的，可以通过vectical-align来修改 */
    vertical-align: middle;
    text-align: center;
}

/* 如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中
   所以说，tr不是table的子元素 */
tbody tr:nth-child(odd) {
    background-color: rgb(211, 216, 188);
}

td {
    border: 1px black solid;
}

    </style>

</head>

<body>
    <table>
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>地址</td>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>18</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪八戒</td>
            <td>男</td>
            <td>28</td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沙和尚</td>
            <td>男</td>
            <td>38</td>
            <td>流沙河</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐僧</td>
            <td>男</td>
            <td>16</td>
            <td>女儿国</td>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>18</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪八戒</td>
            <td>男</td>
            <td>28</td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沙和尚</td>
            <td>男</td>
            <td>38</td>
            <td>流沙河</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐僧</td>
            <td>男</td>
            <td>16</td>
            <td>女儿国</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐僧</td>
            <td>男</td>
            <td>16</td>
            <td>女儿国</td>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>18</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪八戒</td>
            <td>男</td>
            <td>28</td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沙和尚</td>
            <td>男</td>
            <td>38</td>
            <td>流沙河</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐僧</td>
            <td>男</td>
            <td>16</td>
            <td>女儿国</td>
        </tr>
    </table>
    
    
    
</body>

</html>

border-spacing：指定边框之间的距离
border-collapse：collapse 设置边框的合并真正的合并

4.表单

4.1表单

在现实生活中表单用于提交数据
在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器
form的属性

action：表单要提交的服务器的地址

4.2文本框

注意：数据要提交到服务器中，必须要为元素指定一个name属性值

文本框<input type="text" name="username">

4.3密码框

密码框<input type="password" name="password">

4.4提交按钮

<input type="submit" value="注册">

4.5单选框

像这种选择框，必须要措定一个value属性，value属性最终会作为用户填写的值传递给服务器

单选框
<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>

4.6多选框

checked表示默认选中

多选框
<input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" checked>

4.7下拉表单

下拉列表
<select name="haha">
    <option value="i">选项一</option>
    <option value="ii" selected>选项二</option> 
    <option value="iii">选项三</option>
</select>

4.8按钮

<!-- 提交按钮 -->
<input type="submit">
<!-- 重置按钮 -->
<input type="reset">
<!-- 普通按钮 -->
<input type="button" value="按钮">
<br><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>

上面两种写法实际上效果是一致的，区别在于：

input是自闭合标签，不需要</input>就能结束；button不是自闭合标签，跟一般标签一样是成对出现的
button因为不是自闭合标签，所以使用起来更灵活，可以嵌套其他的标签

4.9表单补充

autocomplete="off" 关闭自动补全

readonly 将表单设置为只读，数据会提交

disabled 将表单设置为禁用，数据不会提交

autofocus 设置表单项目自动获取焦点

 <input type="text" name="jxust" value="hello" readonly>
    <input type="text" name="jxust" value="hello" autofocus>
    <input type="text" name="jxust" value="hello" disabled>
    <input type="text" name="jxust" value="hello" autocomplete="off">

color 将选择的颜色提交

email 提交邮件

<input type="email">
<input type="color">

扣1送地狱火

关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录