表单：
form：
属性：
action:提交路径，请求路径
method：
get：明信片
提参数url，
容量有限，
不安全，
有缓存，
http://www.baidu.com?uname=zs&rnd=1002
post：信封
提参数url，请求实体
相对安全
理论没有限制
put:
delete:
enctype:
enctype="multipart/form-data"
在存在文件的时候设置
input:输入，输入库，密码框，单选按钮，复选框，隐藏域，提交，重置，按钮
type:
默认：text
password：密码
radio：
name:分组，一组，互斥
注意：value要设置
checked：默认选中
checked="checked"或者checked
js中：checked=true
选中多个，最后一个生效
checkbox：复选
name：分组，不互斥
注意：value要设置
checked：
hidden:
隐藏域，可提交，
name,value必须设置
submit：
提交
reset：
重置
button：
按钮，配合js使用
file：
method：post
enctype：multipart/form-data
select:
下拉框，下拉菜单
属性name：设置
子标签：
option：
<option> </option>
value：设置了就是提交的值
没设置value：value值就是innerHTML（标签包裹的内容）
此种下拉菜单只能选中一项。
复选下拉菜单：
属性：multiple="multiple"
button：
type属性:
button
reset：
submit：默认
属性：
name:提交的字段
disabled：禁用，不能提交
readonly:可以提交
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
method:默认值get
input:属性：
placeholder="请输入用户名"
autocomplete="on" ：on，off
必填：required="required"
pattern="^\d{1,3}$":正则
-->
<form action="">
用户名：<input type="text" name="username" value="zs" autocomplete="on" required="required" />
年龄：<input type="text" name="age" value="18" pattern="^[0-9]{1,3}$" />
<!--了解-->
颜色：<input type="color" name="color" />
数字： <input type="number" name="number" />
日期： <input type="date" name="" id="" value="" />
日期： <input type="datetime" name="" id="" value="" />
日期： <input type="datetime-local" name="" id="" value="" />
<input type="month" name="" id="" value="" />
<input type="week" name="" id="" value="" />
<input type="submit" name="" id="" value="提交" />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入方式：
1.内联
html中style属性，优先级最高
解耦：
html+css
2.内部
style标签中写CSS代码，
3.外部
xxx.css文件
link href="xxx.css的路径"
优先级：
内联优先级最高，内部和外部优先级相同，后来者居上
内联 > 内部==外部
1000 100
-->
<link rel="stylesheet" type="text/css" href="css/style01.css"/>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid green;
}
</style>
</head>
<body>
<!--<div id="" style="width: 200px;height: 200px;border: 1px solid red;">-->
<div></div>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*
初始化
字体：
margin：
padding：
* */
*{
font-size: 50px;
font-family: "宋体";
/*斜体italic
倾斜oblique*/
font-style: oblique;
font-weight: bold;
}
/*id*/
#div{
color: green;
}
/*元素*/
span{
background: deeppink;
}
div{
}
/*class属性*/
.div{
border: 1px dashed gray;
}
/*
选择器：
#：id
.:类class
本元素：标签选择器，元素选择器，节点
*：统配选择器
* */
</style>
</head>
<body>
<div id="div" class="div">div</div>
<span class="div">span</span>
<span>span2</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div{
width: 1000px;
height: 200px;
/*
* color:
* image:
* repeat:
*/
background:red url(img/cxk.jpg) no-repeat;
/*放大背景图片：
刚好和元素尺寸一致
background-size: 100% 100%;
cover:全覆盖，但是可能图片补全
contain:图片显示完整，但是可能有未覆盖
* */
background-size: contain;
}
#camera{
height: 20px;
background: url(img/camera.png) no-repeat;
background-position: 10px -20px;
}
.pp{
height: 25px;
width: 25px;
background: url(img/pass_login_icons.png) no-repeat;
background-position: -134px 0;
}
</style>
</head>
<body>
<div id="div">
</div>
<div id="camera">
</div>
<div class="pp"></div>
</body>
</html>
边框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#border{
width: 200px;
min-height: 150px;
/*border: 1px solid red ,5px dashed yellow ,10px dotted green ,20px double blue;*/
border-width: 1px 5px 10px ;
border-style: dashed double solid dotted;
border-color: gold #000 #100860 rgb(250,0,0);
/*border: 1px 5px 10px dashed double solid dotte gold #000 #100860 rgb(250,0,0);*/
}
</style>
</head>
<body>
<!--
border
-->
<div id="border">
</div>
</body>
</html>
边框三角
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background-color: #008000;
}
#tri{
width: 0;
height: 0;
border: 100px solid ;
/*border-color: red blue green gold;*/
/*border-color: red transparent transparent transparent;*/
border-color: red rgba(0,0,0,0.2) rgba(0,0,0,0.1) rgba(0,0,0,0.3);
}
</style>
</head>
<body >
<div id="tri">
</div>
</body>
</html>
边框圆角
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#circle{
width: 200px;
height: 200px;
border: 1px solid red;
/*圆形*/
border-radius: 50%;
background: url(img/timg.jpg) ;
background-size: contain;
}
#tuoyuan{
width: 200px;
height: 100px;
border: 1px solid red;
border-radius: 50%;
background: url(img/timg.jpg) no-repeat ;
background-size: 100% 100%;
/*阴影*/
box-shadow: 5px 5px 5px yellow;
}
</style>
</head>
<body>
<div id="circle">
</div>
<div id="tuoyuan">
</div>
</body>
</html>
定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.dv1{
width: 50px;
height: 50px;
background: red;
/*定位*/
/*相对定位:
参照物：自身初始位置
* */
position: relative;
top: 50px;
left: 50px;
}
.dv2{
width: 100px;
height: 100px;
background: green;
/*绝对：
参照物：第一个设置了position属性的祖先元素，最高追溯到body
* */
position: absolute;
top: 100px;
left: 100px;
}
.dv3{
width: 200px;
height: 200px;
background: blue;
/*
* 固定：
* 参照物：body
*/
position: fixed;
top: 10px;
left: 10px;
}
</style>
</head>
<body>
<div class="dv1"></div>
<div class="dv2"></div>
<div class="dv3"></div>
</body>
</html>
布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container{
width: 960px;
min-height: 1000px;
background: pink;
float: left;
}
.head{
width: 100%;
height: 200px;
background: skyblue;
float: left;
}
.body{
width: 100%;
/*height: 700px;*/
float: left;
background: greenyellow;
}
/*
设置
* */
.body .main{
width: 70%;
height: 700px;
background: red;
float: left;
}
.body .sub{
width: 29%;
height: 700px;
background: cornsilk;
float: right;
}
.foot{
float: left;
width: 100%;
height: 100px;
background: darkgray;
}
</style>
</head>
<body>
<div id="" class="container">
<!--头开始了-->
<div class="head">
</div>
<!--头结束了-->
<!--体开始了-->
<div class="body">
<div class="main"></div>
<div class="sub"></div>
</div>
<!--体结束了-->
<!--尾开始了-->
<div class="foot"></div>
<!--尾结束了-->
</div>
</body>
</html>
overflow溢出
/*overflow: hidden;*/
overflow: scroll;
扫一扫
212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
