Document

HTML+CSS收官

2023-07-24
dfer
418
html css 前端

补充重要知识点

防脱发神器

意思就是加上这个，可以了。

上面一个简单的例子。
只要改成border-box。我们就设置的就是包括边距，总共的了。这样是比较符合我们的自觉地的。

颜色的alpha通道

那么他和这个

opacity有什么区别呢，
其实显而易见，就是opacity是这个item这个盒子里面所的东西，都是透明的，但是rgba只是让这个背景颜色进行了透明。

尺寸的百分比

最大最小宽高

表单进阶-HTML

首先要说的第一点就是，在input输入框上，最好加一个div

<form class="container">  
    <h1>用户注册</h1>  
  
    <div class="form-item">  
        <input type="text" />  
    </div>  
</form>

像这样一样的。
第二个是提示性文字

叫做placeholder这个属性
以及maxlength=“11”，代表最大的长度是11。
之后是验证码区域

<div class="form-item">  
    <input type="text" placeholder="请填写验证码">  
    <button>请输入验证码</button>  
</div>

这个按钮用button是比较好的。而不是用input的submit属性。因为button里面可以写的东西比较多，并且比较宽泛。但是我们会发现，按钮点击后，就直接会清空输入框的所有信息。我们这里不应该是一个提交按钮。
其实很简单

我们把type给他button就可以了，这样她就变成了一个普通的按钮。
之后看下一个区域密码区域。这个是非常的简单的

<div class="form-item">  
    <input type="password" placeholder="请输入密码">  
</div>  
<div class="form-item">  
    <input type="password" placeholder="请确认要输入的密码">  
</div>

之后我们来看一个多选的下拉列表框

<div class="form-item">  
    <select multiple="multiple">  
        <option>爱好1</option>  
        <option>爱好2</option>  
        <option>爱好3</option>  
        <option>爱好4</option>  
        <option>爱好5</option>  
        <option>爱好6</option>  
        <option>爱好7</option>  
        <option>爱好8</option>  
        <option>爱好9</option>  
        <option>爱好10</option>  
    </select>  
</div>

这个就是一个多选框的一个属性multiple，当然这个不写后面的那个= 也可以直接写一个multiple。就代表布尔属性里面的true
之后是可以选性别的选项

<div class="form-item">  
    <div class="title">性别</div>  
    <div>  
        <input type="radio" name="sex" checked>  
        </input>  
        <span>男</span>  
  
        <input type="radio" name="sex">  
        </input>  
        <span>女</span>  
    </div>  
</div>

这里需要说明的就是，只有他们的name属性是同一个的时候，他们才是互斥的，只能选择一个。
之后我们如何设置，点击文字也能选中呢。
这个时候就要用到lable这个标签

首先是可以通过给lable的for 指向id的。
当然还有一个自动关联的做法，就是把他们都放到lable的标签内。

这样
之后看下一个区域。一个多行文本

<div class="form-item">  
    <textarea placeholder="请输入个人简介"></textarea>  
</div>

之后下一个区域复选框

<div class="form-item">  
    <lable>  
        <input type="checkbox">  
        <span>同意</span>  
    </lable>  
</div>

很简单这里就不说了，最后是俩个按钮

<div class="form-item">  
    <button>立即注册</button>  
    <button type="reset">重置按钮</button>
</div>

这里的button都是一个简单的button。
这个重置按钮就是type=reset

表单进阶-css

写css第一步

* {  
    margin: 0;  
    padding: 0;  
    box-sizing: border-box;  
}

就是写这些东西。
之后写container区域

.container{  
    background: white;  
    width: 400px;  
    margin: 30px auto;  
    border-radius: 10px;  
    padding: 30px;  
}

这里没什么好说的。margin 0 auto就代表着页面居中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cBcy5AqA-1690166489473)(D:/onenodes/前端/渡一前端大师课提升/HTML+CSS收官/images/Pasted image 20230718190159.png)]
接下来是h1元素

.container h1{  
    text-align: center;  
}

一个简单的文字居中。

之后我们看每一个表单之间，是有一个距离的。

.form-item{  
    margin-bottom: 10px;  
}

这个也是很简单的，用一个margin-bottom
之后我们来看文本框等的样式。
我们首先用搜索来对文本框进行统一样式的添加

之后就方便操作了，直接操作txt就可以了。

/*文本框*/  
.txt{  
    /*外边框 点击后的颜色*/  
    outline: none;  
    border: 1px solid #ccc;  
    width: 100%;  
    height: 40px;  
    border-radius: 5px;  
    font-size: 14px;  
    /*调整文字也可以写成*/  
    /*text-indent: 10px; 这个是首行缩进，不经常用*/  
    padding: 0 10px;  
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NCqzKktU-1690166489474)(D:/onenodes/前端/渡一前端大师课提升/HTML+CSS收官/images/Pasted image 20230718191105.png)]
之后我们来看点击后，也就是聚焦的情况下。

/*聚焦的样式*/  
.txt:focus{  
    border-color:#5f8be8;  
}

这个就是用一个伪元素进行聚焦的。
之后我们单独设置这个复选框

/*单独设置特殊情况这里就代表既是txt样式，又是select*/  
select.txt {  
    height: 100px;  
    padding: 10px;  
}

之后我们同样的方法设置个人简介

textarea.txt{  
    height: 100px;  
    padding: 10px;  
    /*设置多行文本框是否可以被用户改变尺寸*/  
    resize: none;  
}

之后来设置按钮

/*按钮的统一样式*/  
button{  
    height: 40px;  
    width: 150px;  
    border: none;  
    outline: none;  
    background: #5f8be8;  
    color: #fff;  
    font-size: 14px;  
    border-radius: 5px;  
    /*鼠标移动上去变成小手*/  
    cursor: pointer;  
}  
button:hover{  
    background: #759ae9;  
}

接着我们要考虑一个情况，就是比如发送验证码，是我们再填了手机号后才能进行提交。怎么样能做到不能点击呢
这个使用disabled。这个是需要js来进行实现的。
但是我们写css的时候，我们需要考虑再禁用状态下的样式的。

/*选中禁用状态的按钮*/  
button:disabled{  
    background: #9bd7f0;  
    cursor: not-allowed;  
}

这个not-allowed就是一个禁止的圆圈。
之后我们来看处理浮动

/*统一处理浮动*/  
.left{  
    float: left;  
}  
.right{  
    float: right;  
}

当我们哪一个地方需要浮动的时候，我们进行一个应用就可以了。
之后还有一个处理浮动造成的高度坍塌的。
这个的解决方法有一个overflow:hidden。但是这个不是最完美的解决方案。最完美的解决方案就是在他的后面再添加一个元素，之后给他设置上clear:both

.clearfix:after{  
    content: "";  
    display: block;  
    clear: both;  
}

之后我们来看另外一个问题

就是这两个是没有对齐的。
这是两个行级元素。
这个时候随便找一个。用一个vertical-align调像素

.policy span{  
    vertical-align: 2px;  
}

之后还有一个就是单选和多选的选中情况。
就是没有选中就淡一些这个效果。
这里介绍一个兄弟元素的选择方法。

lable input~span{  
    }

就是这样，如果后面是+那么就是只选择后面满足条件的一个。~就是多个

/*单选多选*/  
  
lable input~span{  
    color: #aaa;  
}  
  
/*单选或者多选被选中的情况*/  
label input:checked~span{  
    color: #333;  
}

就是这样的。
至此表单的就算是可以了。下面的全部的源码

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>用户注册</title>  
    <link rel="stylesheet" href="index.css">  
</head>  
<body>  
<form class="container">  
    <h1>用户注册</h1>  
  
    <div class="form-item">  
        <input class="txt" type="text" maxlength="11" placeholder="请输入11位手机号"/>  
    </div>  
    <div class="form-item clearfix captcha">  
        <input class="txt left" type="text" placeholder="请填写验证码">  
        <button type="button" class="right">请输入验证码</button>  
    </div>  
  
    <div class="form-item">  
        <input class="txt" type="password" placeholder="请输入密码">  
    </div>  
    <div class="form-item">  
        <input class="txt" type="password" placeholder="请确认要输入的密码">  
    </div>  
  
    <div class="form-item">  
        <select multiple="multiple" class="txt">  
            <option>爱好1</option>  
            <option>爱好2</option>  
            <option>爱好3</option>  
            <option>爱好4</option>  
            <option>爱好5</option>  
            <option>爱好6</option>  
            <option>爱好7</option>  
            <option>爱好8</option>  
            <option>爱好9</option>  
            <option>爱好10</option>  
        </select>  
    </div>  
  
  
    <div class="form-item clearfix">  
        <div class="title left">性别</div>  
        <div class="left">  
            <input type="radio" name="sex" checked id="male">  
  
            <label for="male">男</label>  
  
            <label>  
                <input type="radio" name="sex" id="">  
                <span>女</span>  
            </label>  
        </div>  
    </div>  
  
    <div class="form-item">  
        <textarea class="txt" placeholder="请输入个人简介"></textarea>  
    </div>  
  
    <div class="form-item policy">  
        <lable>  
            <input  type="checkbox">  
            <span>同意</span>  
        </lable>  
    </div>  
  
    <div class="form-item">  
        <button disabled>立即注册</button>  
        <button type="reset">重置按钮</button>  
    </div>  
  
  
</form>  
</body>  
</html>

* {  
    margin: 0;  
    padding: 0;  
    box-sizing: border-box;  
}  
  
html {  
    background: rgb(30, 31, 34);  
    color: #333;  
}  
  
.container {  
    background: white;  
    width: 400px;  
    margin: 30px auto;  
    border-radius: 10px;  
    padding: 30px;  
}  
  
.container h1 {  
    text-align: center;  
    margin-bottom: 30px;  
}  
  
.form-item {  
    margin-bottom: 10px;  
}  
  
/*文本框*/  
.txt {  
    /*外边框 点击后的颜色*/  
    outline: none;  
    border: 1px solid #ccc;  
    width: 100%;  
    height: 40px;  
    border-radius: 5px;  
    font-size: 14px;  
    /*调整文字也可以写成*/  
    /*text-indent: 10px; 这个是首行缩进，不经常用*/  
    padding: 0 10px;  
}  
  
/*聚焦的样式*/  
.txt:focus {  
    border-color: #5f8be8;  
}  
  
/*单独设置特殊情况这里就代表既是txt样式，又是select*/  
select.txt {  
    height: 100px;  
    padding: 10px;  
}  
textarea.txt{  
    height: 100px;  
    padding: 10px;  
    /*设置多行文本框是否可以被用户改变尺寸*/  
    resize: none;  
}  
  
/*按钮的统一样式*/  
button{  
    height: 40px;  
    width: 150px;  
    border: none;  
    outline: none;  
    background: #5f8be8;  
    color: #fff;  
    font-size: 14px;  
    border-radius: 5px;  
    /*鼠标移动上去变成小手*/  
    cursor: pointer;  
}  
button:hover{  
    background: #759ae9;  
}  
/*选中禁用状态的按钮*/  
button:disabled{  
    background: #9bd7f0;  
    cursor: not-allowed;  
}  
  
/*统一处理浮动*/  
.left{  
    float: left;  
}  
.right{  
    float: right;  
}  
.clearfix::after{  
    content: "";  
    display: block;  
    clear: both;  
}  
.captcha .txt{  
    width: 170px;  
}  
.title{  
    margin-right: 10px;  
}  
.policy{  
    font-size: 12px;  
}  
.policy span{  
    vertical-align: 2px;  
}  
  
label{  
    cursor: pointer;  
}  
/*单选多选*/  
  
lable input~span{  
    color: #aaa;  
}  
  
/*单选或者多选被选中的情况*/  
label input:checked~span{  
    color: #333;  
}  
  
.txt:focus::placeholder{  
    color: red;  
}

精灵图

这个单词叫做sprite

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
  <style>  
    .item{  
      width: 85px;  
      height: 60px;  
      outline: 1px solid;  
      background: url("sprite.jpg")  
      no-repeat -280px -240px;  
    ;    }  
  </style>  
</head>  
<body>  
  <div class="item"></div>  
</body>  
</html>

看一个案例，大概就是这样的。
我们通过对position来进行设置，让
图像达到一个这样的效果，就可以了。
通过改变div的宽高。来只选择这一张图片。
就是这么的简单的。

绝对定位

什么时候使用绝对定位

下面三个条件满足任何一个时，使用绝对定位：

元素出现在一个天马行空的位置
元素是否存在，不影响其他元素的排列
单个元素在某个区域内水平垂直居中

fixed和absolute的区别

fixed是绝对定位的一种特殊情况，它们的参考系不一样

absolute参考有定位的父元素
fixed参考视口(viewport)

案例1

把一个图片放到这个中间。
这个我们一般用的方法就是用一个div把这个视口给盖住。这个div就叫做蒙层。之后我们的登录窗口在最中间

<img src="./assets/page.jpg" alt="" class="page">  
  
<div class="model">  
<!--    <img src="./assets/login.jpg" alt="" class="login">-->  
</div>  
</body>

.model{  
    position: fixed;  
    background: rgba(0,0,0,.5);  
    left: 0;  
    top: 0;  
    width: 100%;  
    height: 100%;  
}

这样就可以了。
之后我们的登录元素

.login{  
    position: absolute;  
    /*绝对定位居中*/  
    width: 400px;  
    height: 200px;  
    left: 50%;  
    top: 50%;  
    /*跑自身宽度的一半和自身高度的一半*/  
    margin-left: -200px;  
    margin-top: -100px;  
}

进行这样的一个设置，就可以了。

可以发现他就是在正中间了。
之后我们来做另外一个

<div class="cat">  
    <img src="./assets/r_code.jpg" alt="">  
</div>

.cat{  
    position: fixed;  
    width: 165px;  
    height: 250px;  
    background: url(assets/r_dj.png) no-repeat;  
    right: 0;  
    /*垂直居中*/  
    top: 50%;  
    margin-top: -125px;  
    padding-top: 145px;  
    /*图片靠右*/  
    text-align: right;  
}  
.Rcode{  
    width: 100px;  
    height: 100px;  
}

这里用的也是和上一个差不多的思想。之后就是text-aligh这个属性。
最后说一下覆盖的问题
他们俩个谁覆盖谁，就用z-index，就可以了。

就是应对类似这种情况。
这个只对定位元素有用。

案例2

是一个这样的效果。
首先是html的一些基本框架

<div class="item">  
  <a href="">  
    <img src="./assets/cover.png" alt="">  
  </a>  
  <div class="aside">  
    <div class="number">  
      118万  
    </div>  
    <div class="date">  
      2021-11-23  
    </div>  
        <div class="model">  
      <a href="" class="play"></a>  
    </div>  
  </div>  
</div>

之后开始书写css代码。

.item{  
    width: 230px;  
    height: 140px;  
    margin: 30px auto;  
}  
.item img{  
    width: 230px;  
    height: 140px;  
}

首先是图片的一个
之后我们的aside进行绝对定位

.item .aside{  
    position: absolute;  
    background: rgba(0,0,0,.5);  
    width: 100%;  
    height: 20px;  
    font-size: 12px;  
    bottom: 0;  
    left: 0;  
    line-height: 20px;  
    color: white;  
    padding: 0 10px;  
}  
.aside .number{  
    float: left;  
}  
.aside .date{  
    float: right;  
}

这个也是很简单的。

之后让他一个左浮动，一个右浮动，就可以让她左右靠拢了。
之后我们做118万旁边的那个按钮

.number::before{  
    content: '';  
    display: inline-block;  
    width: 14px;  
    height: 14px;  
    background: url(assets/icons.png) no-repeat -255px -63px;  
    vertical-align:-3px;  
    margin-right: 3px;  
}

这里需要主要的是before元素要变成行内块元素，不然她默认是一个行内元素。
之后中间的按钮

.play{  
    position: absolute;  
    width: 42px;  
    height: 42px;  
    background: url("assets/icons.png") no-repeat -191px -63px;  
    left: 50%;  
    top: 50%;  
    margin-left: -21px;  
    margin-top: -21px;  
}

进行简单的调整就可以了。

属性值的计算过程

比如说看这行代码，可以发现他是红色而不是蓝色。

他主要分为四个阶段

比较重要性就是作者写的覆盖浏览器默认
比较特殊性就是看的权重
比较源次序就是代码靠后的覆盖代码靠前的。

![Pasted image 20230721150418.png]
这里需要注意的是可以继承的进行继承，例如这个的背景就是无法进行继承的

这里就进行之前情况的一个解析。

我们来进行一个分析。
p就是一个继承。
之后我们来看a元素。

可以发现他在第一步就已经有颜色了。
所以不需要后面的步骤了。
我们要是不想要这样，让元素和p元素是一个颜色。

那么我们就写一个color:inherit就可以了。
这个就是让他强制继承了。

扩展知识

伪类选择器

css伪类选择器大全：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

伪类	含义
:link	选中未访问过的超链接
:visited	选中已访问过的超链接
:hover	选中鼠标移入的元素
:active	选中鼠标按下的元素
:focus	选中聚焦的表单元素
:disabled	选中被禁用的表单元素
:checked	选中被选中的表单元素
:first-child	选中第一个子元素
:last-child	选中最后一个子元素
:nth-child(an+b)	选中第「an+b」个子元素 a和b是常量，n的值会从0开始依次递增
:first-of-type	选中第一个指定类型的子元素
:last-of-type	选中最后一个指定类型的子元素
:nth-of-type(an+b)	选中第「an+b」个指定类型的子元素 a和b是常量，n的值会从0开始依次递增

之后我们再做的时候，会出现一些问题

我们只要遵循这个，就可以达到一个好的效果。

contenteditable属性

该属性是一个布尔属性，可以设置到任何元素上，它可以让该元素变为可编辑的状态

在实际开发中，通常用于制作富文本框

table 元素

table元素用于表达一个表格，受CSS3的影响，现在已经很少使用了，基本上只有后台的一些前端在用。因为这个渲染的速度回造成很大的影响。

上一篇： css+js实现点击

下一篇： JS——JavaSc