css較深層學習，進階常用用法

標籤：nowrap   符號   響應   屬性   wrap   vertica   布局   bsp   link   

div設定隱藏：

　　　　　　visibility:hidden/visible（始終佔位）;

　　　　　　display:none/block（不佔位）;

 

設定字型垂直置中：

　　　　　　常用line-height，不是所有的垂直置中都可以用line-height，常用垂直置中vertical-align;

　　　　　　line-height通過行高來設定垂直置中，vertical-align則有多種垂直方式，常用垂直置中vertical-align: middle;

 

內建響應式布局，bootstrap的柵格參數：

　　　　　<script type="text/javascript" src="bootstrap.min.js"></script>

　　　　　　<link rel="stylesheet" href="bootstrap.min.css" type="text/css">　　　　　

<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>

html網頁製作常用：div ul dl a span img form(包括一些form標籤：input button) h5 i(字型表徵圖)

常用logo可點<a>標籤設定背景圖，<a>首頁</a>裡面有字型不顯示只顯示圖片並可點，設定屬性text-indent:-999px;

text-overflow: clip|ellipsis|string;
clip　　　  修剪文本。
ellipsis　　顯示省略符號來代表被修剪的文本。
string　　使用給定的字串來代表被修剪的文本。

例如：style=‘width:200px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;‘超過長度200px的部分顯示省略符號

 

css較深層學習，進階常用用法