文章目录
1布局float
2垂直居中和水平居中
3 表格
4列表
5 form
5.1 文本框
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
5.2 密码框
<form>
Password: <input type="password" name="pwd">
</form>
5.3单选按钮
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
5.4 复选框(Checkboxes)
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
5.5 提交按钮
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
5.6 下拉列表
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
5.7 文本域
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>
6 css
6.1 文本
p.small {line-height:90%} 设置行高
水平对齐
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
vertical-align:text-top; 垂直对齐
a {text-decoration:none;} 去掉下划线
p {text-indent:50px;} 文本缩进属性是用来指定文本的第一行的缩进。
color:red; 字体颜色
h1 {font-size:250%} 字体大小
border:5px solid red;
6.2 display
p {display:inline;}行内元素
span {display:block;}块状元素
display:none或visibility:hidden
6.2display:flex
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width:300px;border:1px solid red;display: flex;flex-wrap: wrap;">
<div style="width: 100px;height: 100px;background-color: black;"></div>
<div style="width: 100px;height: 100px;background-color: green;"></div>
<div style="width: 100px;height: 100px;background-color: yellow;"></div>
<div style="width: 100px;height: 100px;background-color: blue;"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<style>
.father {
width: 500px;
height: 100px;
background-color: red;
display: flex;
flex-flow:row;
}
.box1 {
flex: 3;
background: blue;
}
.box2{
flex: 2;
background: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
6.3Position(定位)
- static HTML 元素的默认值,即没有定位,遵循正常的文档流对象。 relative 相对定位元素的定位是相对其正常位置。
- fixed 元素的位置相对于浏览器窗口是固定位置。
- absolute 绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于:
- sticky
6.4overflow
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
6.5居中
元素,图片居中
文字居中