冬季小学期 NIIT公司 web前端培训 CSS

外边距合并 http://www.w3school.com.cn/css/css_margin_collapsing.asp

div、p、h1 块元素 span行元素

浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

http://www.w3school.com.cn/css/css_positioning_floating.asp

css模块化思想（一）--------命名是个技术活 http://www.cnblogs.com/WebShare-hilda/p/4686067.html

这样的命名注视、注释应该是正规公司上会用到的。

编码规范 http://codeguide.bootcss.com/ 编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。

<!DOCTYPE html>
<html>
<head><title>title Web tutorials on HTML, CSS</title><meta name="description" content="Web tutorials on HTML, CSS,javascript" /><!--浏览器缺省设置外部样式表内部样式表（位于 <head> 标签内部）内联样式（在 HTML 元素内部） 优先级高 就近原则--><!-- 链接外部css文件 --><link rel="stylesheet" href="xx.css" type="text/css"><style type="text/css">/*css语法 ：选择器{属性名1:属性值1;属性名2：属性2,属性2; }*/body{font-family: 微软雅黑;font-size: 14px;}#container{width: 900px;/*margin: 0 auto;*/}#header{height: 100px;background-color: blue;}#menu{height:30px ;background-color: yellow;margin-top: 5px;}#content{height: 500px;margin-top: 5px;}#left{width: 28%;height: inherit;background-color: pink;float: left;}#position{position: relative;/*相对*/position: static;/*正常*/}#mid{width: 40%;height: inherit;background-color: purple;float: left;margin-left: 2%; }#right{width: 28%;height: inherit;background-color: cyan;float: left;margin-left: 2%; }#footer{height: 100px;margin-top: 5px;background-color: green;}table{border:2px solid green ;/*双线条边框 double    定义双线。*/border-collapse: collapse;/*变单线条边框*//*border-spacing:10px 10px;/*单元格边框的距离。*/*/font-family:Arial;width: 100%;}th,td{font-size:1em;border: 1px solid #98bf21;padding: 3px 7px 2px 7px; }th{font-size: 1.1em;text-align: left;;padding-top: 5px;padding-bottom: 4px;background-color: #A7c942;color: #FFFFFF;}/*派生选择器 （组合选择器）*/tr.alt td{color: #0000000;background-color: #EAF2D3;}/*元素选择器*/p {text-indent: 5em;/*首行缩进5em*/text-align: center;/*居中*/word-spacing: 30px;/*词间距*/letter-spacing: 20px;/*字母间距*/text-transform: capitalize;/*单词首字母大写*/text-decoration: underline;/*文本装饰效果具有下划线*/line-height: 10px;/*行间距*/}/*所有连接空白符合并为一个空格*//*id选择器  id 属性只能在每个 HTML 文档中出现一次*/#outer{width: 300px;height: 300px;border: 1px solid #f00;margin: auto;/*上开始 顺时针  auto居中*/margin: 30px 50px;/*上下，左右 两个值*/background-color:black; }#inner{width: 150px;height: 150ps;border: 5px solid white;padding: 10px;background-color: purple;}div#test {background-color: #99bbbb;/*背景颜色*/background-image: url(test.jpg);/*背景图片 url()*/background-repeat: repeat-y;/*图片垂直重复 no-repeat repeat-x repeat-y repeat*/background-position: center;/*常用位置关系 left center right top bottom 可以复合使用 一般先水平后垂直*/background-position: 30% 70%;/*单位为百分比*/background-position: 50px 100px;/*单位为像素*/background-attachment:fixed;/*相对于可视区是固定的*/background-size: cover;/*CSS3 图片适应边框*/background: url(test.jpg) 0 0 no-repeat;/*空格空开对应的值*/}/*类选择器*/.class1 {font-family: Georgia,serif;/*首选Georgia，没有则选择serif字体*/style="font-family: Times,'New York'; font-style: italic;font-weight: bold;/*字体粗体 italic斜体*/font-weight: 900;"/*100~900级别的加粗度 */font-size: 14px;/*设置字体大小像素*/font-size: 0.87em;/*1em等于当前字体尺寸 浏览器默认的文本大小16px*/}ul{width: 240px;height: 259px;background: url('images/menu-bg.jpg') 0 0 no-repeat;font-size: 13px;font-weight: bold;padding: 40px 0 0 50px;}ul li{background: url('images/homebg.gif') 0 0 no-repeat;padding:  0 0 0 25px;line-height: 28px;}ul li a:hover{color: cyan;}/*属性选择器*/[title=list]{list-style-type:none;/*列表前面没有点*//*list-style-image: url('images/arrow-normal.gif');选择列表前面的图标*/}.class2 {a:link {color:#FF0000;}        /* 未被访问的链接 */a:visited {color:#00FF00;}    /* 已被访问的链接 */a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */a:active {color:#0000FF;/* 正在被点击的链接 */}    /*a:hover 必须位于 a:link 和 a:visited 之后a:active 必须位于 a:hover 之后*/</style>
</head>
<body>
<table><tr><th>学号</th><th>姓名</th></tr><tr><td>27</td><td>bao</td></tr><tr class="alt"><td>09</td><td>duan</td></tr><tr><td>32</td><td>junjie</td></tr><tr class="alt"><td>31</td><td>zhi</td></tr>
</table><div id="outer"><div id="inner">inner</div>
</div>
<!-- 学会div布局 -->
<div id="container"><div id="header">header</div><div id="menu">menu</div><div id="content"><div id="left">leftpanle</div><div id="mid">middlepanle</div><div id="right">rightpanle</div></div><div id="footer">footer</div>
</div><ul title="list"><li  ><a href="#" >home</a></li><li><a href="#">about us</a></li><li><a href="#">network</a></li><li><a href="#">submission</a></li><li><a href="#">archives</a></li>
</ul></body>
</html>