<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--外链式，将样式独立成css文件，通过link标签导入css文件，可以用于多个网页。重用度最好-->
<link rel="stylesheet" href="mm.css">
<!--嵌入式，通过style标签设置整个网页元素的样式，作用范围在于整个网页-->
<!--下面选择器依次是：div{}元素选择器，.mm{}类选择器，#p1{}id选择器,#f1 input{}包含选择器,#f1 *{}通配选择器
#t1 tbody tr:hover{}伪装选择器-->
<style>
span{
color: red;
}
div{/*div{}元素选择器*/
border:2px solid blue;
}
.mm{/*.mm{}类选择器*/
background-color: yellow;
color: red;
}
#p1{/*#p1{}id选择器*/
font-size: 20px;
font-weight: bold;
}
#f1 input{/*#f1 input{}包含选择器*/
width: 120px;
border: 2px solid greenyellow;
}
#f1 *{/*#f1 *{}通配选择器*/
color: blue;
}
#t1 tbody tr:hover{/*#t1 tbody tr:hover{}伪装选择器*/
background-color: yellow;
}
table td{
text-align: center; /*文本居中显示*/
}
#imgDiv{
width: 400px;
height: 300px;
background-image: url("img/4.jpg"); /*背景图片*/
background-size: 400px 300px; /*背景图片大小*/
}
#mytxt{
background-image: url(img/2.jpg);
background-size: 20px 20px;
background-repeat: no-repeat;/*背景图片是否平铺*/
background-position:150px 0px; /*从指定位置开始，显示背景图片*/
}
#msDiv{
width: 300px;
height: 250px;
background-image: url(img/ms.jpg);
}
#msDiv:hover{
background-position:0px -250px;
}
#productDiv img{
width: 100px;
height: 100px;
opacity: 0.2; /*设置图片透明度，最小为0：完全透明，最大是1：完全不透明*/
}
#productDiv img:hover{
opacity: 1;
border: 2px solid red;
width: 150px;
height: 150px;
}
#borderDiv{
border-style:solid ;
border-width: 3px 2px 15px 8px;/*上：顺时针设置*/
border-color:red;
border-radius: 50px;/*圆角边框*/
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<!--内联式,通过style属性设置样式，只能给一个元素设置样式-->
<div style="width: 100px;height: 100px;border: 1px solid red">dasdfdsf</div>
<span>dfsdfdsffds</span><br>
<span>afsfsdffdsf</span>
<div class="mm">dfsfdsfsd</div>
<p class="mm">顶替dsfsdfsd</p>
<p>fdsf dsfsdfsd</p>
<p id="p1">dsfdsfdgs</p>
<input type="text"><br>
<form id="f1">
用户名:<input type="text"><br>
密码：<input type="password">
<p>ddd</p>
</form>
<table id="t1" width="60%" border="1" cellspacing="0">
<thead>
<tr><th>姓名</th><th>职位</th><th>电话</th></tr>
</thead>
<tbody>
<tr><td>张一</td><td>经理</td><td>13000000000</td></tr><br>
<tr><td>张二</td><td>经理</td><td>13000000000</td></tr><br>
<tr><td>张三</td><td>经理</td><td>13000000000</td></tr><br>
<tr><td>张四</td><td>经理</td><td>13000000000</td></tr><br>
</tbody>
</table>
<!--style="letter-spacing文字间距-->
<span style="letter-spacing: 10px">六一儿童节</span>
<div id="imgDiv">
六月里很清爽
<input type="text" id="mytxt">
</div>
<div id="msDiv"></div>
<div id="productDiv">
<img src="img/2.jpg">
<img src="img/4.jpg">
<img src="img/ms.jpg">
<img src="img/SnowPea.gif">
</div>
<div id="borderDiv"></div>
<div style="background-color: yellow;width: 500px;height: 400px">
<div style="background-color: blue;margin-bottom: 30px">ddd</div>
<div style="background-color: red;width: 200px;height:200px; float:left ; margin-right:10px; margin-top:20px;margin-left:10px;padding-top: 20px;padding-left: 10px ">
sdfdsfdsfdsfdsfdsf
</div>
<div style="background-color: green ;width: 150px;height: 150px;float: left;margin-left: 20px"></div>
<div style="width: 50px;height:50px;background-color:green;clear: both"></div>
</div>
<div style="width: 300px;height: 300px">
<!--相对定位，相对于正常位置漂移多少个像素-->
<span style="position: relative ;left:60px;top:60px">相对定位</span>
<span>bbbb</span>
</div>
<!--绝对定位，如果父容器没有定位，相对于浏览器定位，会脱离文档流-->
<div style="position: absolute;width:200px;height: 300px;background-color:red;left: 100px;top: 50px;">绝度定位</div>
<!--固定定位，和绝对定位类似，当滚动条移动时，会改变位置-->
<div style="position: fixed;width:200px;height: 300px;background-color:red;left: 1000px;top: 200px;">固定定位</div>
<span style="text-shadow: red">六月的天</span>
<!--style="text-decoration: none"去除下划线-->
<a href="dfsdfs" style="text-decoration: none">跳转页面</a>
<input type="text" placeholder="请输入你的姓名"/>文本框中虚拟文字
</body>
</html>
display：none 隐藏的元素不占位置
visibility:hidden 隐藏的元素要占位置
overflow:hidden隐藏超出div的内容
overflow:scroll超出div的内容以滚动条方式读取
<ul style="list-style-image:url("")"> <li >将标记设为图片标记
<ul style="list-style:none"> <li >将·标记去掉
