CSS引用说明
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>标题</title>
<!--css外部引用-->
<link rel="stylesheet" href="css/common.css" />
<!--css内部引用-->
<style>
<!--标签中class名为logo时使用‘.’-->
.logo{
background-color: blue;
font-size: 18px;
border: 1px solid #fff;
}
<!--标签中所有id名为alex时使用‘#’-->
#alex{
background-color: yellow;
font-size: 18px;
border: 1px solid #fff;
}
<!--对所有div、a标签生效-->
div,a{
color: red;
}
<!--对所有a标签下的div标签生效-->
a div{
color: red;
}
<!--对所有类型为text的input标签生效-->
input[type='text']{
}
</style>
</head>
<body>
<!--css标签内引用-->
<div style="background-color: red">123</div>
<div class="logo">456</div>
<div id="alex">789</div>
</body>
</html>
常用属性示例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>标题</title>
<style>
.logo{
background-color: red;
font-size: 18px;
border: 1px solid #fff;
}
.logo a,.logo p{
background-color: aqua;
font-size: 50px;
}
</style>
</head>
<body>
<div class="logo">
<div>div标签</div>
<a>a标签</a>
<p>p标签</p>
</div>
</body>
</html>
1.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>标题</title>
<style>
.logo{
top: 9px;
left: 18px;
width: 18px;
height: 16px;
background: url("img/1.png") 0 -58px no-repeat ;
}
</style>
</head>
<body>
<div class="logo"></div>
</body>
</html>
2.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>标题</title>
</head>
<body>
<div style="border: 1px solid red;">hello</div><br/>
<div style="border: 1px dotted red;">hello</div><br/>
<div style="border: 1px solid red;height: 70px;background-color: red">
<div style="border: 1px dotted blue;height: 30px;margin-top: 30px;background-color: blue"></div>
</div>
<div style="border: 1px solid red;height: 70px;background-color: red">
<div style="border: 1px dotted blue;height: 30px;padding-top: 30px;background-color: gray">hello</div>
</div>
</body>
</html>
3.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>标题</title>
</head>
<body>
<!--设置float属性后，要让父div能自适应float块的高度，需添加一个子元素并设置clear属性
或者父div添加overflow和zoom属性-->
<div style="overflow: hidden;zoom: 1">
<div style="background-color: red;float: left; 20%">div1</div>
<div style="background-color: gray;float: left; 80%">div2</div>
<div style="clear:both"></div>
</div>
</body>
</html>
4.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>标题</title>
</head>
<body>
<!--
position：relative、absolute、fixed <br/>
fixed:固定标签位置
relative/absolute总是成对出现
-->
<!--
<div style="position: fixed;height: 45px; 100%;background-color: red;top: 0px"></div>
<div style="margin-top: 50px">
<div style=" 200px;background-color: gray;position: fixed;top: 50px;bottom:0">left</div>
<div style="margin-left: 220px;">
<p>123456</p><p>123456</p><p>123456</p><p>123456</p>
<p>123456</p><p>123456</p><p>123456</p><p>123456</p>
<p>123456</p><p>123456</p><p>123456</p><p>123456</p>
<p>123456</p><p>123456</p><p>123456</p><p>123456</p>
<p>123456</p><p>123456</p><p>123456</p><p>123456</p>
<p>123456</p><p>123456</p><p>123456</p><p>123456</p>
<p>123456</p><p>123456</p><p>123456</p><p>123456</p>
<p>123456</p><p>123456</p><p>123456</p><p>123456</p>
<p>123456</p><p>123456</p><p>123456</p><p>123456</p>
<p>123456</p><p>123456</p><p>123456</p><p>123456</p>
<p>123456</p><p>123456</p><p>123456</p><p>123456</p>
<p>123456</p><p>123456</p><p>123456</p><p>123456</p>
<p>123456</p><p>123456</p><p>123456</p><p>123456</p>
<p>123456</p><p>123456</p><p>123456</p><p>123456</p>
</div>
</div>
-->
<div style="position: relative; 500px;height: 200px;background-color:gray ">
<div style=" 20px;height: 20px;
position: absolute;left: 0;top: 0;bottom: 0;background-color: red">
</div>
</div>
</body>
</html>
5.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>标题</title>
</head>
<body>
<img src="img/2.jpg">
<!--透明度属性：opacity，值的范围：0-1-->
<img src="img/2.jpg" style="opacity: 0.5">
</body>
</html>
6.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>标题</title>
<style>
.shade{
position: fixed;
top: 0;
right:0;
bottom: 0;
left: 0;
background-color: #333;
opacity: 0.6;
}
.delete{
position: fixed;
top: 50%;
left: 50%;
width: 400px;
height: 200px;
background-color: white;
margin-left: -200px;
margin-top: -100px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<table>
<tr>
<th>IP</th>
<th>编辑</th>
</tr>
<tr>
<td>1.1.1.1</td>
<td>删除</td>
</tr>
<tr>
<td>2.2.2.2</td>
<td>删除</td>
</tr>
<tr>
<td>3.3.3.3</td>
<td>删除</td>
</tr>
</table>
<!--遮罩层-->
<div class="shade"></div>
<!--删除层-->
<div class="delete">
<div>提示</div>
<div>确定要删除吗？</div>
<div>
<input type="button" value="确定">
<input type="button" value="取消">
</div>
</div>
</body>
</html>
7.html