hello,小伙伴们,我又来了。接着上次整理的html的简单使用,咱们这次说一些关于CSS和html中复杂的用法。好了话不多说,一起开始复习吧。
一、什么是CSS
CSS 指层叠样式表 (Cascading Style Sheets),样式定义如何显示 HTML 元素。
二、CSS的写入方法
内联式、外部式、嵌入式
三、CSS的语法
选择器{属性:属性值;}
四、CSS的选择器
标签选择器、class选择器、id选择器、后代选择器、子选择器、分组选择器、通用选择器、伪类选择器
后代选择器 => 空格表示
子代选择器 => 用大于号表示(>)
区别:子代选择器作用于元素的第一代内容,后代选择器作用于元素的所有后代内容
分组选择器 => 用逗号表示(,)
通用选择器 => 用星号表示(*)
伪类选择器 => 动态伪类选择器(锚点伪类、用户行为伪类)
锚点伪类
:link,超链接并且未被访问过
:visited,超链接并且已被访问过
用户行为伪类
:hover用户鼠标悬停在链接文本内容上 超链接并且被激活
:active 按下与松开之间的状态
:focus '焦点’当标签获得焦点时,一般是输入框被点击
Css3的:nth选择器(选择第几个子代元素)
我们把css3的:nth选择器也成css3结构类
选择方法
:frist-child、:last-child :nth-child、
:first-of-type :nth-of-type :last-of-type
:not
::before ::after
五、CSS
1.CSS背景
1、CSS属性定义背景效果:
background-color 背景颜色
background-image: 背景图片
background-repeat: 图片是否平铺
background-position: 图片位置
background-size: 图片大小
background-attachment:背景图片的定位(scroll【当滚动滑动条的时候,背景图片会随之发生位置的改变】、local【当滚动滚动条的时候,背景图片会随之进行发生位置上的移动】、fixed【当滚动滚动条的时候,背 景图片不会随之进行发生位置上的移动,如果盒子大小不支持展现全部,那么就会被其他盒子所遮挡】)
background-blend-mode:定义了背景层的混合模式(图片与颜色)
–normal 正常的样子
–multiply 正片叠加模式(当图片和颜色放在一起的时候,颜色会形成一个颜色层,叠加到图片上)
–overlay 叠加模式(当图片和颜色放在一起的时候,图片不会被颜色所罩着)
2、背景渐变
①线性渐变
background-image: linear-gradient(red,yellow,green)
–默认情况就是渐变是从上到下的,然后依次按照自己写的颜色顺序开始发生渐变
–要是想进行发生方向上的改变,可以使用to 方向,这样就是可以发生方向上的改变了。
例如:background-image: linear-gradient(to right,red,yellow,green)
–也可以写某个颜色的范围,
例如:background-image: linear-gradient(red 0% 10%,yellow 10% 20%,green 20%)
红色从0开始一直到盒子高度的10%,黄色从10%开始,一直到盒子高度的20%,绿色从盒子高度的20%,一直到最底部。
②径向渐变
background-image: radial-gradient(red,yellow,green)
–默认情况就是渐变是从内到外的,朝着最远的一个角进行发生渐变,然后依次按照自己写的颜色顺序开始发生渐变
–也可以写某个颜色的范围,
例如:background-image:radial-gradient(red 0% 10%,yellow 10% 20%,green 20%)
红色从0开始一直到盒子中心的10%,黄色从10%开始,一直到盒子中心的20%,绿色从盒子中心的20%,一直到最底部。
2.CSS字体
1.文本
color 文本颜色
2.文本对齐
text-align
–属性值可以是 right(右对齐) left(左对齐) center(居中对齐) justify(两端对齐)
–文本默认对齐为左对齐
3.文本装饰
text-decoration
–经常用来给a标签进行去掉下划线
–属性值:none(无样式) overline(为文字添加上划线) line-throuh(为文字添加删除线) dunderline(为文字添加下划线)
4.文本缩进
text-indent 文本缩进
–属性值:直接填写大小就可以
5.文本转化
text-transform 文本转化
–属性值:none(无转化效果) uppercase(全部转化成大写字母) lowercase(全部转换成小写字母) capitalize (单词开头字母变为小写)
6.文本字体
font-size 字体大小
font-family 字体系列
font-style 字体样式 normal(正常) italic(斜体)
font-weight 字体粗细 100-900 逐渐变粗,也可以是normal(正常)bold(加粗)bolder(更粗)
7.垂直居中
line-height 行高
–当高度和行高是一样高的时候,这个时候,这个文字就是垂直居中对齐。
8.文字阴影
text-shadow 文字阴影
text-shadow : h-shadow v-shadow blur color;
水平阴影、垂直阴影、模糊距离,以及阴影的颜色
例如:text-shadow: 0 0 20px red; 水平阴影为0(不会 发生水平方向的移动) 垂直阴影为0(不会发生垂直方向的移动) 模糊距离20px(使阴影变得更加模糊一些,如果写0,那就意味着和原来的字体一样) 阴影颜色为red红色(那就意味着阴影就是红色的)
3.盒模型
它包括:content(内容区),padding(内边距),border(边框),margin(外边距)
标准盒模型:
–设置的宽和高就是内容区的宽和高
–计算方式:
宽: 左右的外边距+左右的边框+左右的内边距+内容区的宽度=盒子的宽度
高: 上下的外边距+上下的边框+上下的内边距+内容区的高度=盒子的高度
怪异盒模型:
–设置的宽和高就是整个盒子的大小
内边距:
padding --它的设置会是向内部填充,背景也是和内容区一样,当盒子是标准盒模型的时候,不会影响到盒子的内容区,当盒子是怪异盒模型的时候,就会影响到盒子的内容区
–可以设置上下左右四个方向,也可以在一起写,顺序是上、右、下、左
外边距:
margin --它的设置就是让真个盒子发生位置上的改变,但不会影响到内部
–可以设置上下左右四个方向,也可以在一起写,顺序是上、右、下、左
–还可以设置居中对齐,margin:0 auto;盒子会在原水平线的方向进行居中对齐
边框:
border
border : 2px solid red
可以设置它的粗细、样式、颜色
–粗细直接写大小就可以(border-width)
–样式(border-style)
–dashed 虚线
–dotted 点线
–solid 实线
–颜色(border-color)
–直接写颜色就可以
–可以写十六进制的,也可以写rgb 的形式
边框圆角化:
boder-radius
–Border-top-left-radius 定义了左上角的弧度
–Border-top-right-radius 定义了右上角的弧度
–Border-bottom-right-radius 定义了右下角的弧度
–Border-bottom-left-radius 定义了左下角的弧度
盒子阴影:
box-shadow
box-shadow: h-shadow v-shadow blur sparead color position;
box-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式 ;
–X轴偏移量和Y轴偏移量就是我们设置的位置发生了改变
–阴影模糊半径,就是设置的阴影的模糊度,数值越大越模糊,数值越小越清晰,最小为0
–阴影扩展半径,就是设置阴影的大小,数值越大,它的范围越大
–阴影颜色,就是设置阴影颜色的
–投影方式,默认情况下是外阴影,也可以是设置为内阴影inset,无论是外阴影还是内阴影都不会影响到盒子本身的大小
四、元素分类:
块级元素:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<form>
–display:block;
–每个块级元素都从新的一行开始,并且其后的元素也另起一行
–元素的高度、宽度、行高以及顶和底边距都可设置
–元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度
行内元素
<a>、<span>、<br>、<em>、<strong>、<label>
–display:inline
–和其他元素都在一行上
–元素的高度、宽度及顶部和底部边距不可设置
–元素的宽度就是它包含的文字或图片的宽度,不可改变
块级行内元素
–display:inline-block;
–同时具备内联元素、块状元素的特点
–和其他元素都在一行上
–元素的高度、宽度、行高以及顶和底边距都可设置
五、浮动
float
–属性值: 左浮动(left) 右浮动(right)
–当下要清楚浮动的时候,clear:both;
–给内容加浮动了以后,外面包裹着内容的盒子会没有高度,这是不可避免出现的现象
–使用浮动后,注意及时清除浮动,以免影响浮动元素的相邻元素的布局
清除浮动:
1.给父级元素设置一个overflow:hidden;
2.:after或者是:before
例如:div:after{ display:block; content:""; clear:both; } div:before{ display:block; content:""; clear:both; }
六、定位
position
–属性值 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) 粘性定位(sticky) 默认值(static)【不用写】
–父相子绝 父亲相对定位,儿子绝对定位
–设置完定位之后,可以使用left,right,top,bottom进行移动
相对定位 relative:
–position:relative(表示相对定位)
–它通过left、right、top、bottom属性确定元素在正常的文件流中的偏移位置
绝对定位 absolute:
–position:absolute(表示绝对定位)
–将元素从文档流中拖出来,脱离文本流
–absolute 定位使元素的位置与文档流无关,因此不占据空间
–absolute 定位的元素和其他元素重叠
固定定位 fixed:
–不会受文档流动影响
粘性定位sticky
–position: sticky;
–基于用户的滚动位置来定位
–粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed定位之间切换
七、过度
transition:property duration timing-function delay;
属性名 属性过渡时间/s 过渡时间曲线 延时过渡何时开始/s;
八、权重
!important>内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)
注:如果权重一样的话,后写的会把之前写的所覆盖掉
九、2/3D装换
Transform
元素应用2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
–transform:rotate(XXdeg),顺时针旋转,绕着Z轴进行旋转。
rotateX(XXdeg),绕着X轴进行旋转
rotateY(XXdeg),绕着Y轴进行旋转
–transform:translate();
–translateX(x)仅水平方向移动(X轴移动);
translateY(Y)仅垂直方向移动(Y轴移动);
translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)。
–transform: scale();
–scaleX(x)元素仅水平方向缩放(X轴缩放);
scaleY(y)元素仅垂直方向缩放(Y轴缩放);
scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)
–transform: skew();
–skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);
skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形);
skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形)。
十、动画
animation:
–animation:动画名称 时间;
@keyframes 动画名称{
0%{
}
100%{
}
}
在这个中间可以放置其他的百分比,然后0%里面不要放置任何的代码块
/* 当产生多个动画的时候,最先开始的动画放到最后面,一次排列即可,*/
/*但不要分开写,如果分开写,那么后面的就会把前面的动画所替换掉,导致只能执行最后一个写的动画效果 */
十一、flex布局
给最外面的大盒子设置的
display:flex;
当给最外面的大盒子设置这个的时候,里面的所有盒子都被称为flex项目,默认情况下,里面的东西就会自动排列在一整行里面,如果宽度超过了100%,那么就会按照比例进行缩放。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。
–如果是一行的话,就是会有一条主轴和一条交叉轴;
–如果是多行的话,那么就会变成每一行都有一个主轴和一条交叉轴。
属性:
–flex-direction:决定主轴的方向;
flex-direction: row | row-reverse | column | column-reverse;
–row 默认值,主轴方向为水平方向,起点在左侧,就是正常的从左往右进行排序
–row-reverse 主轴方向为水平方向,起点在右端,变成了水平方向的从右往左进行排序
–column 主轴方向为垂直方向,起点在上沿,变成了从上往下在左侧进行排序
–column-reverse 主轴方向为垂直方向,起点在下沿,就会变成从下往上在左侧进行排序
–flex-wrap:决定是否换行;
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
–nowrap:默认是不换行
–wrap:执行换行,并且第一行在上面
–wrap-reverse:执行换行,但是第一行在下面
–flex-flow:这个是flex-direction和flex-wrap综合写法
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
–其默认值是 row nowrap;
–justify-content 定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
–flex-start(默认值):左对齐
–flex-end:右对齐
–center: 居中
–space-between:两端对齐,项目之间的间隔都相等
–space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍
–align-items 定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
–flex-start:交叉轴的起点对齐
–flex-end:交叉轴的终点对齐
–center:交叉轴的中点对齐。
–baseline: 项目的第一行文字的基线对齐
–stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
–align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
–flex-start:与交叉轴的起点对齐。
–flex-end:与交叉轴的终点对齐。
–center:与交叉轴的中点对齐。
–space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
–space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
–stretch(默认值):轴线占满整个交叉轴。
给里面的小盒子设置的
–order 定义项目的排列顺序。数值越小,排列越靠前,默认为0。
.item {
order: <integer>;
}
–如果是从左往右进行排列的话,数值小的就是在最左边;
如果是从右往左进行排列的话,数值小的就是排在最右边;
–如果是从上往下进行排列的话,数值小的就是在最上边;
如果是从下往上进行排列的话,数值小的就是排在最下边;
–flex-grow 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
–如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。
–如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
–flex-shrink 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
.item {
flex-shrink: <number>; /* default 1 */
}
–如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。
–如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
–负值对该属性无效。
–flex-basis 定义了在分配多余空间之前,项目占据的主轴空间(main size)。
–浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
.item {
flex-basis: <length> | auto; /* default auto */
}
–它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
–如果设置的值和自己原来的大小不一样的时候,它的宽或高就是会无效
– flex flex-grow, flex-shrink 和 flex-basis的简写(优先选择书写 )
–默认值为0 1 auto。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值:
–auto (1 1 auto)
–none (0 0 auto)。
–建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
–align-self 允许单个项目有与其他项目不一样的对齐方式
–可覆盖align-items属性。
–默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
–该属性可能取6个值,除了auto,其他都与align-items属性完全一致。
利用flex写的网页:
总结:
① 设置display:flex,是给其父元素进行设置的,比如我想让一个盒子进行水平垂直居中,我就要给它的父元素设置flex,然后子再在父元素里面继续设置,水平方向和垂直方向的对齐模式
② 使用完display之后,里面的内容默认是水平摆放的,如果想要让它进行垂直摆放可以使用flex-direction:column 这个时候就是垂直摆放的
③ 设置完之后,里面的所有内容是不会自动换行的,要自己手动添加设置,才可以换行 flex-wrap: wrap ;
水平方向:
④ 如果想要让它进行水平居中,就要给其父元素设置 justify-conten: center;
⑤ 如果想要让它进行垂直方向的居中,就要给其父元素进行设置 align-items: center;
垂直方向:
⑥ 如果想要让它进行垂直居中,就要给其父元素设置 justify-conten: center;
⑦ 如果想要让它进行水平方向的居中,就要给其父元素进行设置 align-items: center;
十二、表单
HTML 表单用于搜集不同类型的用户输入。
form元素
属性:
<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
</form>
–accept-charset
-规定在被提交表单中使用的字符集(默认:页面字符集)。
–action(常用)
-规定向何处提交表单的地址(URL)(提交页面)。
-向服务器提交表单的通常做法是使用提交按钮。
<form action="action_page.php">
–autocomplete
-规定浏览器应该自动完成表单(默认:开启)。
–enctype
-规定被提交数据的编码(默认:url-encoded)。
–method
-规定在提交表单时所用的 HTTP 方法(默认:GET)。
-method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST)
<form action="action_page.php" method="GET">
<form action="action_page.php" method="POST">
–get:
-当使用 GET 时,表单数据在页面地址栏中是可见的。
-GET 最适合少量数据的提交。浏览器会设定容量限制。
–post
-POST 的安全性更好,因为在页面地址栏中被提交的数据是不可见的。
–name
-规定识别表单的名称(对于 DOM 使用:document.forms.name)。
–novalidate
-规定浏览器不验证表单。
–target
-规定 action 属性中地址的目标(默认:_self)。
label元素
<label for=""></label>
-label 用于为用户输入
当label里面的for属性值和input的name属性值一样的时候,那么就可以点击label标签里面的文本就可以将鼠标定位到与其name属性一样的输入框了
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
1.input元素
–文本输入 type=text 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。
<form>
<input type="text" name="" id="" value="">
<form>
–密码输入框
<input type="password">
<form action="">
Password:<input type="password" name="pwd"/>
</form>
–单选按钮
<input type="radio">
<form>
<input type="radio" name="sex" value="male" checked>
<br>
<input type="radio" name="sex" value="female">
</form>
–单选按钮允许用户在有限数量的选项中选择其中之一
–在设置单选按钮的时候,一定要注意它们的name名称,想要实现单选功能,必须是相同的name名称放在一起才可以实现,否则将不能被实现
–当选中某个单选按钮的时候,是不能被取消选择的
–提交按钮
<input type="submit">
用于向表单处理程序提交表单的按钮。
<form action="action_page.php">
<input type="text" name="firstname" value="Mickey">
<br>
<input type="text" name="lastname" value="Mouse">
<br>
<input type="submit" value="Submit">
</form>
-表单处理程序通常是包含用来处理输入数据的脚本的服务器页面,提交给action提供的地址
–复选框 checkbox
-<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<input type="checkbox" name="like" value="banner">香蕉
<input type="checkbox" name="like" id="" value="apple">苹果
–这个是可以选择之后,然后再取消选择的。
–在使用复选框的时候,input标签里的name属性也是一样要保持一致的
–日期 date
-<input type="date"> 类型允许你从一个日期选择器选择一个日期。
<label for="birthday">生日</label>
<input type="date" name="birthday">
-设置完之后,就可以进行在里面的日期表里面去选择自己的想要的日期了
–电子邮件 email
<input type="email" name="usremail">
–在提交表单时,会自动验证 email 域的值是否合法有效:
–数字 number
<input type="number" name="quantity" min="1" max="5">
–这样,和这个输入框里面只能去写数字了,不能去输入其他的东西
–属性
–min:允许最小的数字是多少
–max:允许最大数字是多少
–maxlength:规定输入字段的最大字符长度
–value:规定输入字段的默认值
–button 标签
–标记是表示可单击按钮的元素,可以用在表单或文档其它需要使用简单标准按钮的地方
<button type="button" onclick="alert('你好,世界!')">Click me</button>
–在 button>元素内部,可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
–button标记不能是放在a标记的后面。
属性:
–autofocus
-属性值 autofocus 规定在页面加载时下拉列表自动获得焦点。
–disabled
-属性值 disabled 当该属性为 true 时,会禁用下拉列表。
–form
-属性值 form_id 定义 select 字段所属的一个或多个表单。
填写的属性值就是我们form定义的id名称
–formaction
-属性值 填写URL 规定当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与 type=“submit” 配合使用。
–formmethod
-get、post
-规定用于发送表单数据的 HTTP 方法。覆盖 form 元素的 method 属性。
-该属性与 type=“submit” 配合使用。
–formnovalidate
-属性值 formnovalidate
-如果使用该属性,则提交表单时不进行验证。覆盖 form 元素的 novalidate 属性。
-该属性与 type=“submit” 配合使用。
–formtarget
-属性值:_blank 、 _self 、 _parent 、 _top
-_self-表示响应加载到当前框架或上下文中
_blank-表示响应加载到新窗口或上下文中
_parent-表示响应加载到父框架或上下文
_top-表示响应加载到完整的原始窗口中
-规定在何处打开 action URL。覆盖 form 元素的 target 属性。该属性与 type=“submit” 配合使用。
–name
-属性值 name(自定义一个名字)
-规定按钮的名称。
–type
-submit 、 reset 、 button
-submit 提交-表示按钮将表单数据提交到服务器(如果未指定类型,则为默认值)
reset 重置-表示按钮重置所有控件
button 按钮-表示该按钮没有默认行为
–value
-属性值 text
-规定按钮的初始值。可由脚本进行修改。
–fieldset 标签
-标记位于 form标记内,用于对HTML表单中的相关元素进行分组。使用 legend标记为 fieldset创建标题。该标记通常也称为 fieldset元素。
<form>
<fieldset>
<legend>客户资料(cainiaojc.com)</legend>
名称: <input type="text"><br>
地址: <input type="text"><br>
电话号码: <input type="text">
</fieldset>
</form>
–这样,我们的这个表单就会有一个大边框了
–默认情况下,我们的大边框是黑色的,但是我们可以通过css样式进行改变
–legend 标签
–HTML 标签用于为 标签生成标题。此标签通常也称为 元素。
–他产生的效果就是会导致我们设置的标题,不完全在我们的fieldset标签里面。
–下拉列表
– 元素表示一个控件,创建一个下拉列表,供用户选择。这些下拉值由 标签内的一系列 标签定义。
<select name="pets" id="pet-select">
<option value="">--请选择一个列表--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>
select标签的属性
–autofocus
-属性值 autofocus 规定在页面加载时下拉列表自动获得焦点。
–disabled
-属性值 disabled 当该属性为 true 时,会禁用下拉列表。
–form
-属性值 form_id 定义 select 字段所属的一个或多个表单。 填写的属性值就是我们form定义的id名称
–multiple
-属性值 multiple 当该属性为 true 时,可选择多个选项。 默认情况下,最多可以出现四个选项
–name
-属性值 text 定义下拉列表的名称。
–required
–属性值 required 规定用户在提交表单前必须选择一个下拉列表中的选项
–size
–属性值 number 规定下拉列表中可见选项的数目。
–默认情况下,是1,当设置为零的时候,出现的效果和设置为1的效果是一样的
–当设置的数值小于选项的时候,就会出现上下箭头,进行选择
–当设置的数值大于选项的数量的时候,就会出现多出来几个空格
–optgroup 标签
– 标签在 控件的值的下拉列表中创建一组选项
–在下拉列表中是无法被选中的,是一个灰色的
–将一些类似属性的选项放在一起,用这个标签进行定义
–option 标签
– 可以在弹出窗口和 html 文档中的其他项目列表中表示菜单项。
–属性:
–disabled
属性值 disabled 规定此选项应在首次加载时被禁用。
–label
属性值 text 定义当使用 时所使用的标注。
–selected
属性值 selected 规定选项(在首次显示在列表中时)表现为选中状态。
–value
属性值 text 定义送往服务器的选项值。
–datalist 标签
– 元素包含了一组 元素,这些元素表示其它表单控件可选值
<datalist id="tutorial_types">
<option value="HTML">
<option value="CSS">
<option value="SQL">
</datalist>
–这个和select标签你不一样的地方在于,datalist标签所提示的是一个类似与对话框的
十三、表格
table 标签
–表格头,th标签,基本上会放在tr里面
–表格由 table 标签来定义。每个表格均有若干行(由 tr 标签定义),
–每行被分割为若干单元格(由 td 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。
<table>
<tr>
<td>行 1, 列 1</td>
<td>行 1, 列 2</td>
</tr>
<tr>
<td>行 2, 列 1</td>
<td>行 2, 列 2</td>
</tr>
</table>
属性
–表格标题 基本上会放在table标签里面的第一行
–但是如果这个时候给table标签设置边框的话,caption则不会被设置上
–单元格跨行合并
–colspan colspan=“2” 这样代表的意思是将这个单元格和后面的一个单元格进行合并,且合并后文本水平居中
如果第二个单元格由内容的话,内容会被挤到下一个单元格内,以此类推
–单元格跨列合并
–rowspan owspan=“2” 这样代表的意思是将这个单元格和下面的一个单元格进行合并,且合并后文本垂直居中
如果第二个单元格由内容的话,内容会被挤到这一行下一个单元格内,以此类推
十四、less
–less是css的一种拓展性语言,它的写法和css差不多
–可以直接在cmd里面进行下载使用
npm install -g less
–或者是可以直接在html文件里面直接引用:
<link rel="stylesheet/less" type="text/css" href="style.less" />
或者是
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>
–注意:href里面是本地的路径,link必须要在script标签的前面
–在vscode中使用是必须要加插件(Live Server),不然会报跨域的错误
–less的使用:
–嵌套
#header{
width:100%;
height:500px;
#header_left{
width:300px;
float:left;
}
}
–变量
@width:100%;
@height:500px;
@color:#f00;
#header{
width: @width;
height: @height;
color:@color;
}
不仅如此,我们还可以进行更改我们的变量数据
@width:100px;
@height:@width+400px;
还可以用它来代替我们的标签名称
@myapp:header;
#@{myapp}{
}
还可以只修改一部分
@images: "../img";
#header{
background: url("@{images}/white-sand.png");
}
十五、icon
就是我们经常看的一些小图标
我们可以直接在html文件进行引用
–首先,去找到你需要的那个图标,然后将其加入购物车
–去购物车中将你刚刚加入的图标添加至项目
–然后点击下载至本地,并将文件添加到你要写的文件夹中,建议所有文件包在一个文件夹中
–打开文件夹里面会有一个HTML文件
–选择Unicode模式需按照使用步骤进行注意:
第一步src中url的地址必须是你本地的路径
第三步里面的代码必须是你要出现的图标编码
–选择font-class 引用注意
第一步不要引入错误,第二步类名不要书写错误
–选择Symbol 引用
注意第一步不要引入错误 第三步id名不要书写错误
–Unicode模式和font-class 引用两个可以合在一起
–使用font-class 引入项目下面生成的 fontclass 代码:
<link rel="stylesheet" href="./iconfont.css">
–使用第二步:挑选相应图标并获取类名,应用于页面:
<span class="iconfont icon-xxx"></span>
–但是并不使用相应的类名而是使用Unicode模式的图标编码
–结合起来的真正写法就是
<link rel="stylesheet" href="./iconfont.css">
<span class="iconfont">&xxx</span>
好了,今天的分享就到这里了。如果有雷同纯属巧合,如果有写错的地方还请小伙伴们可以在评论区留言,谢谢。