Web-css-bootstrap_html/css_WEB-ITnose-htmlチュートリアル-php.cn

Web-css-bootstrap_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:55:17

オリジナル

977 人が閲覧しました

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 (大きなケースのショーケース、Google モバイルに似ています)

<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. 合計概要 mary

マスタリング後cs の基本使用後は、ブートストラップのようなフレームワークを使用して、Web サイトの基本的なスタイルのフレームワークをすばやく構築し、美しいページをデザインすることができます