標籤: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較深層學習,進階常用用法