1css背景样式
背景颜色：选择器{background-color：color}
背景图像：选择器{background-image：url（img/adv.jpg）
背景图片是否重复：选择器{background-repeat；repeat/repeat-X/repeat-y/no-repeat}
背景图像的起始位置：选择器{background-position：left，center，right top，center，bottom}
背景附着：选择器{background-attachment:fixed/scorll;}
按照以上顺序：选择器{background：}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>beijing</title>
<style type="text/css">
body{
background-color: aliceblue;
background-image: url(img/1111.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left;
}
</style>
</head>
<body>
</body>
</html>
2css列表样式
ul li{list-style-type:none/disc实圆/circle/square方的}
ul li{display：line水平排列}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表样式</title>
<style>
ul li{
list-style-type:square;
float: left;
margin-right: 200px;
}
</style>
</head>
<body>
蔡徐坤
<ul>
<li>唱</li>
<li>挑</li>
<li>rap</li>
<li>篮球</li>
</ul>
</body>
</html>
3css表格样式（table的边框和单元格边框的合并）
table{border-collapse:callapse}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<style>table{
border-collapse:collapse
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
4css浮动属性（*）
浮动{float：right/left}
清除浮动{clear：both}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style>
#neiceng1{float: left;}
#neiceng2{float: right;}
#zhongceng1{clear:both;}
</style>
</head>
<body>
<div>
<div>
<div id="neiceng1">
<a href="#">免费淘宝</a>
<a href="#">最新销售</a>
<a href="#">最新销售</a>
</div>
<div id="neiceng2">
<a href="#">我的淘宝</a>
<a href="#">我的订单</a>
</div>
<div id="zhongceng1">
<a href="#">123</a>
<a href="#">456</a>
</div>
</div>
</div>
</body>
</html>
5css盒子模型（*）
从内到外：4.1容量4.2padding盒子的内边距：边框和内容之间的距离4.3：border边框：盒子的厚度4.4margin外边距：控制盒子间的距离。默认：上 右 下 左。margin-top/right/
例如；选择器{margin：px px px px}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子</title>
<style>
#a{border:1px solid black; width:400px; height:200px;
margin: 300px 0 0 600px;}
#b{margin: 20px 0 0 40px; }
#c{margin: 20px 0 0 40px; }
#d{margin: 20px 0 0 40px; }
#e{margin: 20px 0 0 40px; }
</style>
</head>
<body>
<div id="a">
<form>
<div id="b">账号<input type="test" placeholder="请输入你的账号"></div>
<div id="c">密码<input type="password" placeholder="请输入你的密码"></div>
<div id="d">邮箱<input type="email" placeholder="请登录你的邮箱"></div>
<div id="e">登录<input type="button" value="denglu"></div>
</form>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
