1.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) #00ccff
font-family: Arial, Helvetica, sans-serif;
font-size:50px;
位置
display:block; //ul, li, p, h1
:inline; //a, img
position:fixed; //top:10px; left:30px;
:relative; //相对父容器top: left:
float:left; //浮动
clear:both; //关闭浮动
====
margin:22px;
border: 3px solid #cc0000;
padding: 23px;
-top right bottom left
margin:auto //居中
margin-right:auto //居左
margin-left: auto; //靠右
背景
background-color:#0099cc
background-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提供了很多的组件，可以自由搭配定制
时间： 2024-10-12 11:28:13