Home >Web Front-end >HTML Tutorial >Web-css-bootstrap_html/css_WEB-ITnose
Web-css-bootstrap_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:55:17963browse
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 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>
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>
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>
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>
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
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：There is a ul tag and a span tag in a div tag. How to make the ul tag and span tag display on the same line? (The code and screenshots are as follows:)_html/css_WEB-ITnoseNext article：There is a ul tag and a span tag in a div tag. How to make the ul tag and span tag display on the same line? (The code and screenshots are as follows:)_html/css_WEB-ITnose