Web-CSS-bootstrap1.rule
#html
<!DOCTYPE html><html><head><link rel="stylesheet" href="main.css"></head><body><div class="header"><p></div></body></html>
css
h1{字体：color:red;//rgb(123,21,2)#00ccfffont-family: Arial, Helvetica, sans-serif;font-size:50px;位置display:block;//ul, li, p, h1 :inline;//a, imgposition:fixed;//top:10px; left:30px;:relative;//相对父容器top: left:float:left;//浮动clear:both;//关闭浮动====margin:22px;border: 3px solid #cc0000;padding: 23px;-top right bottom leftmargin:auto//居中margin-right:auto//居左margin-left: auto;//靠右 背景background-color:#0099ccbackground-image: url('http://goo.gl/ODpi3y');}
2bootstrap框架
2.1.grid栅格系统（12=6+6=4+4+4=4+8=2+8+2）
<head><!--引用--><link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css" rel="stylesheet"></head><div class="row"> <div class="col-md-2"> <h4>Content 1</h4> </div> <div class="col-md-8"> <h4>Content 2</h4> </div> <div class="col-md-2"> <h4>Content 3</h4> </div></div>
2.2.tab标签(类似Gmail)
<ul class="nav nav-tabs "> <li><a href="#">PRimary</a></li> <li class="active"><a href="#">Social</a></li> <li><a href="#">Promotions</a></li> <li><a href="#">Updates</a></li></ul>
2.3Pills(展示网站不同部分，类似Google搜索结果页）
<ul class="nav nav-pills"> <li><a href="#">Primary</a></li> <li class="active"><a href="#">Social</a></li> <li><a href="#">Promotions</a></li> <li><a href="#">Updates</a></li></ul>
2.4.jumbotron(展示大案例showcase，类似Google Mobile)
<div class="jumbotron"> <h1>Find a place to stay.</h1> <p>Rent from people in over 34,000 cities and 192 countries.</p></div>
3.Sum总结mary在掌握了css的基本使用后，通过使用像bootstrap这种框架就可以很快的搭建好网站的基本样式框架，从而设计多好看的页面，bootstrap提供了很多的组件，可以自由搭配定制