二级菜单
<!--
* @Author: your name
* @Date: 2022-01-16 11:40:42
* @LastEditTime: 2022-01-16 15:26:25
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: 配置 · OBKoro1/koro1FileHeader Wiki · GitHub
* @FilePath: \code\003.html
-->
<!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>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
margin: 0 auto;
/* background: yellow; */
}
ul{
list-style: none;
}
.box>li{
float: left;
width: 148px;
text-align: center;
border: 1px solid blue;
background-color: blue;
color: aliceblue;
font-weight: bold;
}
.box>li:hover{
background-color:cadetblue;
color: aliceblue;
font-weight: bold;
}
.box>li ul{
display: none;
background-color: white;
color: black;
}
.box>li:hover ul{
display: block;
}
.box>li li:hover{
color: blue;
}
</style>
</head>
<body>
<ul class="box">
<li>视屏教程
<ul>
<li >1111111</li>
<li >1111111</li>
<li >1111111</li>
<li >1111111</li>
</ul>
</li>
<li>认证考试
<ul>
<li >1111111</li>
<li >1111111</li>
</ul>
</li>
</ul>
</body>
</html>
宽高自适应
min-width: ;
min-height:;
max-width: ;
max-height: ;
万能清除浮动效果
<!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>
.boxleft{
background: red;
width: 200px;
height: 100px;
float: left;
}
.boxright{
background: yellow;
width: 200px;
height: 100px;
float: left;
}
.boxdowncenter{
background: blue;
width: 400px;
height: 200px;
/* clear: left; */
/* overflow: hidden; */
}
.clearfloat::after{
content: "";
clear: left;
display: block;
width: 0;
height: 0;
visibility: hidden;
}
</style>
</head>
<body>
<div class="p">
<div class="boxleft"></div>
<div class="boxright"></div>
</div>
<div class="clearfloat"></div>
<div class="boxdowncenter">
</div>
</body>
</html>
display和visibility的区别
display：none：非占位隐藏，将其隐藏后，其他的元素会占用他的位置。
visibility：hidden：占位隐藏
两栏布局：
左边窗口固定，右边窗口自适应
<!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>
*{
margin: 0;
padding: 0;
}
.boxleft{
background: red;
width: 200px;
height: 200px;
float: left;
}
.boxright{
background: yellow;
height: 100%;
margin-left: 200px; 或者 width: calc(100% - 200px);运算符前后有空格
float: left;
}
html,body{
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="boxleft"></div>
<div class="boxright"></div>
</div>
</body>
</html>
三栏布局（中间自适应左右固定宽度）
<!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>
*{
margin: 0;
padding: 0;
}
.boxleft{
background: red;
float: left;
}
.boxright{
background: yellow;
float: right;
}
.boxcenter{
background: blue;
height: 100%;
margin-left: 200px; 或者 width: calc(100% - 400px);
margin-right: 200px; float: left;
}
.boxright, .boxleft{
width: 200px;
height: 200px;
}
html,body{
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="boxleft"></div> 先让左右浮动起来，中间的再见缝插针
<div class="boxright"></div>
<div class="boxcenter"></div>
</div>
</body>
</html>
上下固定左右固定中间自适应的布局
<!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>
*{
margin: 0;
padding: 0;
}
.bannner, .centerbody ,.footer{
margin: 0 auto;
}
.bannner{
width: 900px;
height: 50px;
background-color:blueviolet;
}
.footer{
width: 900px;
height: 50px;
background-color:greenyellow;
}
.centerbody{
width:100%;
height: calc(100% - 100px);
background-color: red;
}
.centerboxleft{
background: green;
float: left;
}
.centerboxright{
background: gray;
float: right;
}
.centerboxcenter{
background: blue;
height: 100%;
width: calc(100% - 400px);
float: left;
}
.centerboxright, .centerboxleft{
width: 200px;
height: 200px;
}
html,body{
height: 100%;
width: 100%;
}
</style>
</head>
<body> <div class="bannner"></div>
<div class="centerbody">
<div class="centerboxleft"></div>
<div class="centerboxright"></div>
<div class="centerboxcenter"></div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
表单
1.radio(单选)
单选
选择文字自动选择
<div><input type="radio" name="1" id="one">
<label for="one">1111</label>
</div>
默认选中
<div><input type="radio" name="1" checked="checked">2222</div>
或者
<div><input type="radio" name="1" checked>2222</div>
2.checkbox(复选)
<div><input type="checkbox" name="1" id="one">
<label for="one">1111</label>
</div>
<div><input type="checkbox" name="1" checked="checked">2222</div>
<div><input type="checkbox" name="1">3333</div>
<div><input type="checkbox" name="1">4444</div>
效果同上
3.上传文件
<body>
<div>请截图说明</div>
<div>
<!-- 上传文件 -->
<input type="file" name="" id="">
</div>
</body>
<body>
<div>图片按钮代替submit </div>
<div>
<input type="image" name="" id="">
</div>
</body>
隐藏按钮
<input type="hidden" name="" id="" value="带给后端的个人信息">
禁用 disabled、只读 readonly
<button disabled>
注册
</button>
下拉菜单
select的属性：
1.size="3"-----显示出几个
2.multiple-----多选（可选中多个）
3.value，提供给后端的value值
4.selected，默认选中
文本域
textarea
对于文本域的大小，想使用像素一般采用css方式设置
placeholder="请输入你的意见"
注意：在textarea换行要注意，会存在空格，其默认value写在双标签内部，所以注意空格问题
resize
字段集
legend
120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
