8.13总结
1.有序列表:ol,子级只能是li ,li标签的display:list-item
适用场景:相关的一类内容展示或者分类
2.有序列表:ul
适用场景:导航:header>nav>ul
本身的list-style显示在padding区域,称次盒子,但可让其进主盒子,消除list-style可none也可消除padding
list-style 在一个声明中设置所有的列表属性。
list-style-type 设置列表项标记的类型。
ol
lower-roman小写罗马数字 upper-roman大写罗马数字 up-alpha大写英文 decimal-leading-zero数字前面加0
list-style-position 设置在何处放置列表项标记。
list-style-image 使用图像来替换列表项的标记。
list-style-position 设置列表项标记的放置位置。
inside 进主盒子 outside 默认值
ul
circle 空心圆 disc实心圆 square 实心正方形
3.表格正确书写格式
colspan是在一行中的多列合并,rowspan是多行合并,在td的起始标签中书写
3.表单适用场景:注册,登录,搜索
父元素form,子元素input
action属性为提交地址
method属性为提交方式(get/post)
input中type的值:
radio(单选框,并且要求name一致去实现单选功能)
checkbox(多选框)
submit(提交按钮)
reset(重置/恢复默认)
number(只能输入数字,但不建议用,因为会出现上下调的箭头,可用作数字选择的场景)button(普通按钮)
color(选择颜色)
file(选择文件)
name属性必须写,value属性,如果是用户输入,则不用写,用户选择就必须写,value值可写中文
下拉列表中,将name与id值相同,解决兼容性问题(数据库)使用lable可分类
成都
绵阳
达州
成都2
绵阳2
达州2
多行文本框:textarea
自带提交功能
maxlength 最大长度(手机号等)写在input起始标签
lable中的for属性值与input的id属性值相同,使文本内容与input相关联
添加value属性可设置按钮文本内容
激活焦点框时添加样式
input:focus {
box-shadow: 5px 3px 5px gray;
}
用户选择的文本框对input添加checked布尔属性,使其成为默认值,即用户不输入也有值
男
设置键值对(数据库中)
用户输入:添加name
用户选择添加name value
设置默认值
用户输入:value
用户选择(多选框/复选框 单选框)checked
下拉列表:selected
Input中placeholder属性:提示信息
为了使输入内容时与左边有边距,对input加padding-left
对提示信息修改样式
::webkit-input-placeholder { }
8.14总结
设置响应式,书写格式:
@media screen and (设置的高度){css代码块}即:检测视口的宽度
min-width:801px;表示大于801应用样式
max-width:800px;表示小于800应用样式
@media screen and (min-width:800px) {
div {
display: flex;
}
}
@media screen and (max-width:500px) {
div {
display: flex;
flex-direction: column;
}
}
@media screen and (min-width:500px) and (max-width:800px) {
div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
后为方便维护,直接将各个区域css代码区域,代码放在不同css中,在html中引用,再在前面添加条件
在各个css中
div {
display: flex;
}
div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
div {
display: flex;
flex-direction: column;
}
8.13总结
1.有序列表:ol,子级只能是li ,li标签的display:list-item
适用场景:相关的一类内容展示或者分类
2.有序列表:ul
适用场景:导航:header>nav>ul
本身的list-style显示在padding区域,称次盒子,但可让其进主盒子,消除list-style可none也可消除padding
list-style 在一个声明中设置所有的列表属性。
list-style-type 设置列表项标记的类型。
ol
lower-roman小写罗马数字 upper-roman大写罗马数字 up-alpha大写英文 decimal-leading-zero数字前面加0
list-style-position 设置在何处放置列表项标记。
list-style-image 使用图像来替换列表项的标记。
list-style-position 设置列表项标记的放置位置。
inside 进主盒子 outside 默认值
ul
circle 空心圆 disc实心圆 square 实心正方形
3.表格正确书写格式
colspan是在一行中的多列合并,rowspan是多行合并,在td的起始标签中书写
3.表单适用场景:注册,登录,搜索
父元素form,子元素input
action属性为提交地址
method属性为提交方式(get/post)
input中type的值:
radio(单选框,并且要求name一致去实现单选功能)
checkbox(多选框)
submit(提交按钮)
reset(重置/恢复默认)
number(只能输入数字,但不建议用,因为会出现上下调的箭头,可用作数字选择的场景)button(普通按钮)
color(选择颜色)
file(选择文件)
name属性必须写,value属性,如果是用户输入,则不用写,用户选择就必须写,value值可写中文
下拉列表中,将name与id值相同,解决兼容性问题(数据库)使用lable可分类
<select name="city" id="city">
<optgroup label="市场部">
<option value="cd">成都</option>
<option value="my">绵阳</option>
<option value="dz">达州</option>
</optgroup>
<optgroup label="市场部2">
<option value="cd">成都2</option>
<option value="my">绵阳2</option>
<option value="dz">达州2</option>
</optgroup>
</select>
多行文本框:textarea
<textarea name="" id="" cols="30" rows="10"></textarea>
<button></button>自带提交功能
maxlength 最大长度(手机号等)写在input起始标签
lable中的for属性值与input的id属性值相同,使文本内容与input相关联
<label for="account">用户名</label>
<input type="text" name="usename" id="account">
添加value属性可设置按钮文本内容
激活焦点框时添加样式
input:focus {
box-shadow: 5px 3px 5px gray;
}
用户选择的文本框对input添加checked布尔属性,使其成为默认值,即用户不输入也有值
<input type="radio" name="gender" checked>男
设置键值对(数据库中)
用户输入:添加name
用户选择添加name value
设置默认值
用户输入:value
用户选择(多选框/复选框 单选框)checked
下拉列表:selected
Input中placeholder属性:提示信息
为了使输入内容时与左边有边距,对input加padding-left
对提示信息修改样式
::webkit-input-placeholder { }
8.14总结
设置响应式,书写格式:
@media screen and (设置的高度){css代码块}即:检测视口的宽度
min-width:801px;表示大于801应用样式
max-width:800px;表示小于800应用样式
@media screen and (min-width:800px) {
div {
display: flex;
}
}
@media screen and (max-width:500px) {
div {
display: flex;
flex-direction: column;
}
}
@media screen and (min-width:500px) and (max-width:800px) {
div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
后为方便维护,直接将各个区域css代码区域,代码放在不同css中,在html中引用,再在前面添加条件
<link rel="stylesheet" media="screen and (max-width:600px)" href="./css/xy_500.css">
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:1000px)" href="./css/xy501_800.css">
<link rel="stylesheet" media="screen and (min-width:1000px)" href="./css/yx800_.css">
在各个css中
div {
display: flex;
}
div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
div {
display: flex;
flex-direction: column;
}