Web-css-bootstrap_html/css_WEB-ITnose-HTML Tutorial-php.cn

Web-css-bootstrap_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:55:17

Original

977 people have browsed it

1.rule

#html

<!DOCTYPE html><html><head>　　　　<link rel="stylesheet" href="main.css"></head><body>　　<div class="header">　　　　<p>　　</div></body></html>

Copy after login

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');}

Copy after login

2bootstrap framework

　2.1.grid System (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>

Copy after login

　2.2.tab tag (similar to 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>

Copy after login

　 2.3Pills (show different parts of the website, similar to Google search results page)

<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>

Copy after login

　2.4.jumbotron (show large case showcase, similar to 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>

Copy after login

3.Sum summary mary

After mastering the basic use of css, you can quickly build the basic style framework of the website by using a framework like bootstrap. , to design more beautiful pages, bootstrap provides a lot of components, which can be freely matched and customized