Web-css-bootstrap

浏览数：125 / 时间：2015年06月09日

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提供了很多的组件，可以自由搭配定制

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style html 使用 com log Go http si class style html 使用 com log Go http si

相关文章

随机文章

您可能还喜欢

您可能还喜欢