Web-css-bootstrap_html/css_WEB-ITnose-html教程-PHP中文网

Web-css-bootstrap_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:55:17

原创

1120人浏览过

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