css笔记(五)

笔记基于 尚硅谷

目录

1.渐变

1.1线性渐变

1.2 径向渐变

2.雪碧图

3.表格

3.1表格

3.2长表格

3.3设置表单样式

4.表单

4.1表单

4.2文本框

4.3密码框

4.4提交按钮

 4.5单选框

4.6多选框

4.7下拉表单

4.8按钮

4.9表单补充


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() 径向渐变(放射性的效果)

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

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

形状

  • 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,这种图我们称为雪碧图

雪碧图的使用步骤

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

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

3.表格

3.1表格

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

  1. 在table中使用tr表示表格中的一行,有几个tr就有几行
  2. 在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">

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

扣1送地狱火

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值