【样式概要和选择器】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面一</title>
<!--引用css的第1种方式（引用文件）-->
<link rel="stylesheet" href="new_file.css"/>
<!--引用css的第2种方式，定义，.这种用得最多-->
<style>
.logo{
background-color: red;
}
</style>
<!--或：第2种方式也可写成这样-->
<style>
#wsyht{
background-color: red;
}
</style>
<!--或：第2种方式也可写成这样-->
a,div{ <!--组合标签:找所有的div和a标签，只要是div和a标签，字体都是红色的->
color: red;
}
<!--或：第2种方式也可写成这样-->
a div{ <!--层级标签:想写几层就几层,a标签下的div标签变成红色，如下代码-->
color: red;
}
<a>
<input />
<div></div>
<a/>
.logo a{ <!--任何标签只要class=logo，他里面的a标签都是红色，如下代码-->
color: red;
}
<div class="logo">
<a></a>
</div>
input[type='text']{ <!--让所有Input标签，type='text的属性都用这个样式，也叫属性选择器-->
color: red;
}
</head>
<!--第二种方式用得最多的是. 、 层级和组合标签-->
<body>
<!--引用css的第3种方式，直接加参数-->
<div >123</div>
<div class="logo">123</div> <!--引用第1种方式或第2种方式的css，引用.号开头的-->
<div id="wsyht">123</div> <!--引用第1种方式或第2种方式的css,引用#号前面开头的，id要唯一，第二个标签不能再引用wsyht这个样式，只能用一次-->
</body>
</html>
【最常用两种选择器演示】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面一</title>
<style>
.logo{
background-color: #FF1493;
font-size: 18px;
border: 1px solid #fff;
}
.logo a,.logo p{
font-size: 56px;
}
</style>
<!--rgb颜色对照表网址http://www.114la.com/other/rgb.htm-->
</head>
<body>
<div class="logo">
<div>div标签</div>
<a>a标签</a>
<p>p标签</p>
</div>
</body>
</html>
【样式之背景图片】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面</title>
</head>
<body>
<!--no-repeat不重复53px纵轴-->
<div Apple-tab-span" >height: 20px;
background-repeat: no-repeat;
background-position: -0px -53px;">
</div>
</body>
</html>
<!--其它属性
top:9px
left:18px
width:18px
height:16px
-->
【边框和内外边距】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面</title>
</head>
<body><!--border边框，红色solid实线，border-top-style顶部样式为虚线(dotted)-->
<div Apple-tab-span" >border-top-style: dotted;">
abc
</div>
<!--margin-top头部外边距,padding-top顶部内边距60px-->
<div >
<div Apple-tab-span" >margin-top: 10px;margin-left: 20px;margin-right: 20px;
padding-top: 60px;">wsyht</div>
</div>
</body>
</html>
【浮动布局】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>页面一</title>
<style>
.clearfix:after{
content:".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
</head>
<body>
<!--display属性
display:none #隐藏值，需要结合js一起使用，js触发了某个动作合，display none将值隐藏
original
display:block
display:inline
-->
<!--display: block把内联标签变成块级标签-->
<span >content</span>
<!--dispalay: inline把块级标签变成内联标签-->
<div >connect</div>
<!--css提代的cursor值-->
<span >pointer</span> <!--pointer变成小手-->
<span >heLp</span> <!--help变成指针-->
<span >wait</span> <!--wait变成圆圈-->
<span >move</span> <!--move变成虚拟十字架-->
<span >crosshair</span> <!--crosshair变成实线十字架-->
<span >自定义图片</span><!--自定义指针图片-->
<!--以下为布局-->
<!--浮动-->
<br/>
<div >div1</div> <!--往左移百分之20%-->
<div >div2</div> <!--往右移百分之80%-->
<!--浮动之后子div不会继承父的样式，也就是父div的属性，所以需要继承clearfix样式，这是法1-->
<div class="clearfix">
<div >div3</div>
<div >div4</div>
</div>
<!--浮动之后子div不会继承父的样式，也就是父div的属性，所以再加多一行clear:both，这是法2-->
<div >
<div >div5</div>
<div >div6</div>
<div ></div>
</div>
<!--
fixed
relative
absolute
-->
<!--fixed头部固定设置，设置了position等于fixed后，要设置width他才能在页面上显示出来,top=0把他放在最上面-->
<div Apple-tab-span" >background-color: #333;width: 100%;
top: 0px;">
</div>
<div ></div> <!--加大高度出现滑轮看效果-->
<!--fixed左边设置-->
<div >
<div Apple-tab-span" >position: fixed;top: 60px;bottom: 0;">
<div top: 80px;bottom:">hello</div>
<div top: 90px;bottom:">wsyht</div>
</div>
</div>
<div ><p>12345678</p></div>
<!--absolute的div大小只能限制在设了relative的div大小范围内设置大小-->
<div >
<div ></div>
</div>
</body>
</html>
【透明庶照】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>页面测试</title>
<!--opacity透明度可设置值为0到1，z-index像素px大的他的层就在最上面-->
<style>
.shade{
position: fixed;
top:0;
right: 0;
bottom: 0;
left: 0;
background-color: #333;
opacity: 0.6;
z-index: 12;
}
.delete{
position: fixed;
top: 50%;
left: 50%;
width: 400px;
height: 200px;
background-color: white;
margin-left: -200px;
margin-top: -150px;
z-index: 15;
}
</style>
</head>
<body>
<table>
<tr>
<th>IP</th>
<th>编辑</th>
</tr>
<tr>
<td>1.1.1.11</td>
<td>删除</td>
</tr>
<tr>
<td>1.1.1.12</td>
<td>删除</td>
</tr>
<tr>
<td>1.1.1.13</td>
<td>删除</td>
</tr>
<tr>
<td>1.1.1.14</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>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
