slicy 基礎CSS

2018-06-14 14:49 更新

通過重置一些不兼容的css代碼，能夠避免一些不必要的跨瀏覽器兼容問題，

定義了一些常用的css 類，能夠用于快速開發(fā)，也能統(tǒng)一網(wǎng)頁的風格。

排版

默認設置,段落,標題,文本，對字體顏色，錨文本的下劃線，顏色，字體做了重寫，均采用了最符合中國網(wǎng)站體驗的12號字體和 Verdana, Arial, Helvetica, sans-serif 字體。行距22px。這些重寫參考了，盛大，騰訊，百度，新浪等眾多網(wǎng)站對css重寫的選擇。

演示

采用了符合中國人閱讀習慣的font-size:12px像素字體，行距l(xiāng)ine-height:22px像素。字體font-family:Verdana,Arial,Helvetica,sans-serif, body背景background:white;

級聯(lián)樣式表（Cascading Style Sheet）簡稱“CSS”，通常又稱為“風格樣式表（Style Sheet）”，它是用來進行網(wǎng)頁風格設計的。比如，如果想讓鏈接字未點擊時是藍色的，當鼠標移上去后字變成紅色的且有下劃線，這就是一種風格。通過設立樣式表，可以統(tǒng)一地控制HTML中各標志的顯示屬性。

<p>采用了符合中國人閱讀習慣的font-size:12px像素字體，行距l(xiāng)ine-height:22px像素。字體font-family:Verdana,Arial,Helvetica,sans-serif, body背景background:white;</p>

段落排版

h1~h6標簽同strong標簽一樣在seo中具有提高文字權重的效果

演示

我是h1標簽，在seo中我擁有最高的權重

我是h2標簽，在seo中我擁有僅次于h1標簽的權重

我是h3標簽，在seo中我擁有僅次于h1,h2標簽的權重

我是h4標簽，在seo中我擁有僅次于h1,h2,h3標簽的權重

我是h5標簽，在seo中我擁有僅次于h1,h2,h3,h4標簽的權重
<h1>我是h1標簽，在seo中我擁有最高的權重</h1>
<h2>我是h2標簽，在seo中我擁有僅次于h1標簽的權重</h2>
<h3>我是h3標簽，在seo中我擁有僅次于h1,h2標簽的權重</h3>
<h4>我是h4標簽，在seo中我擁有僅次于h1,h2,h3標簽的權重</h4>
<h5>我是h5標簽，在seo中我擁有僅次于h1,h2,h3,h4標簽的權重</h5>

引用

引用常常被用于評論中，在網(wǎng)頁中非常常見，用<blockquote>就可以輕松實現(xiàn)一段美觀的引用。

級聯(lián)樣式表（Cascading Style Sheet）簡稱“CSS”，通常又稱為“風格樣式表（Style Sheet）”，它是用來進行網(wǎng)頁風格設計的。比如，如果想讓鏈接字未點擊時是藍色的，當鼠標移上去后字變成紅色的且有下劃線，這就是一種風格。
通過設立樣式表，可以統(tǒng)一地控制HTML中各標志的顯示屬性。級聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁外觀。使用級聯(lián)樣式表，可以擴充精確指定網(wǎng)頁元素位置，外觀以及創(chuàng)建特殊效果的能力。
<blockquote>級聯(lián)樣式表（Cascading Style Sheet）簡稱“CSS”，通常又稱為“風格樣式表（Style Sheet）”，它是用來進行網(wǎng)頁風格設計的。比如，如果想讓鏈接字未點擊時是藍色的，當鼠標移上去后字變成紅色的且有下劃線，這就是一種風格。
        <blockquote>通過設立樣式表，可以統(tǒng)一地控制HTML中各標志的顯示屬性。級聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁外觀。使用級聯(lián)樣式表，可以擴充精確指定網(wǎng)頁元素位置，外觀以及創(chuàng)建特殊效果的能力。</blockquote>
      </blockquote>

abbr

標簽常常用于關鍵字tag等地方，用<abbr>就可以輕松實現(xiàn)。

css3 html5 
<abbr>css3</abbr> <abbr>html5</abbr>

代碼區(qū)間 pre

演示

body{ background:white;}
<pre>body{ background:white;}</pre>

表格

帶邊框的表格加上class="table table-bordered"即可實現(xiàn)帶邊框的表格

演示

當我還是個小女孩 我問我媽媽 將來我會變成什么樣子呢
會漂亮嗎 會富有嗎 她對我說：世事不可強求，順其自然吧
當我長大并戀愛了 我問我的心上人 我們將來會怎么樣呢
生活每天都美好嗎 我的愛人對我說： 世事不可強求，順其自然吧 
<table class="table table-bordered">
 <tbody>
  <tr>
   <td>當我還是個小女孩</td>
   <td>我問我媽媽</td>
   <td>將來我會變成什么樣子呢</td>
  </tr>
 </tbody>
 <tbody>
  <tr>
   <td>會漂亮嗎</td>
   <td>會富有嗎</td>
   <td>她對我說：世事不可強求，順其自然吧</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
    <td>當我長大并戀愛了</td>
    <td>我問我的心上人</td>
    <td>我們將來會怎么樣呢</td>
  </tr>
  <tr>
   <td>生活每天都美好嗎</td>
   <td>我的愛人對我說：</td>
   <td>世事不可強求，順其自然吧</td>
  </tr>
 </tfoot>
</table>

斑馬表格

加上class="table table-zebra"即可實現(xiàn)斑馬表格

演示

When I was just a little girl I asked my mother what will I be
will I be pretty will I be rich here\'s what he said to me
que sera sera whatever will be will be 
<table width="100%" border="0" class="table table-zebra"></table>

表單

對文本框等進行了重寫，通過美化一些表單元素默認樣式，例如文本框，按鈕，下拉菜單等，讓表單更美觀。通過placeholder屬性來完成，文本框的默認值，鼠標點擊消失，失去光標，默認值恢復的效果。（改效果在firefox瀏覽器下可見）

演示

注冊表單
fadf
姓名 字符在3~9位 踢球 上網(wǎng) 沖浪

性別： 男 女

學歷：

文件域： 

<form action="" method="get" enctype="multipart/form-data">
        <fieldset>
        <legend>注冊表單</legend>
        <p>
          <label>姓名 <small>字符在3~9位</small></label>
          <input name="" type="text" placeholder="請?zhí)顚懻鎸嵉男彰?>
          <input name="" type="text" placeholder="請?zhí)顚懻鎸嵉男彰? class="text radius">
        </p>
        <p>
          <label>自我介紹：</label>
          <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
        </p>
        <p>
          <label>愛好：</label>
          <input type="checkbox" name="checkbox" id="checkbox">
          踢球
          <input type="checkbox" name="checkbox" id="checkbox">
          上網(wǎng)
          <input type="checkbox" name="checkbox" id="checkbox">
          沖浪 </p>
        <p>
          <label>性別：</label>
          <input type="radio" name="radio" id="radio" value="radio">
          男
          <input type="radio" name="radio" id="radio" value="radio">
          女 </p>
        <p>
          <label>學歷：</label>
          <select name="select" id="select">
            <option value="1">大學/大專</option>
            <option value="2">高中/中專</option>
            <option>小學</option>
          </select>
        </p>
        <p>
          <label>文件域：</label>
          <input type="file" name="fileField" id="fileField">
        </p>
        <p>
          <label></label>
          <input name="" type="submit" class="btn blue" value="提交">
          <input name="重置" type="reset" class="btn" value="重置">
        </p>
        </fieldset>
      </form>

按鈕

對按鈕或者a標簽按鈕的樣式重寫,css3按鈕是指通過css3來實現(xiàn)的按鈕的效果，css3純css可以實現(xiàn)立體，漸變，陰影，圓角等很多種特效，如果把這些屬性通過各種不同的方式組合在一起就能實現(xiàn)很多不同的炫酷的按鈕效果。 <a class="btn"> 或者 <input type="btn" class="btn">

演示 代碼
默認 
<a href="#" class="btn">默認</a>
反向 
<a href="#" class="btn btn-inverse">反向</a>
紅色 
<a href="#" class="btn bg-red bg-inverse">紅色</a>
藍色 
<a href="#" class="btn bg-blue bg-inverse">藍色</a>
綠色 
<a href="#" class="btn bg-green bg-inverse">綠色</a>
黃色 
<a href="#" class="btn bg-yellow bg-inverse">黃色</a>
超小號 
<a href="#" class="btn btn-little">小號</a>
小號 
<a href="#" class="btn btn-small">小號</a>
中號 
<a href="#" class="btn btn-medium">中號</a>
大號 
<a href="#" class="btn btn-large">大號</a>
加大號 
<a href="#" class="btn btn-xlarge">加大號</a>

文字

演示

當我還是個小女孩，

我問媽媽

將來我會變成什么樣子呢？

會漂亮嗎？

會富有嗎？

她對我說：

世事不可強求

順其自然吧

<p class="txt-red">當我還是個小女孩，</p>
<p class="txt-yellow">我問媽媽</p>
<p class="txt-blue">將來我會變成什么樣子呢？</p>
<p class="txt-green">會漂亮嗎？</p>
<p>會富有嗎？</p>
<p>她對我說：</p>
<p>世事不可強求</p>
<p>順其自然吧</p>

文字位置

演示

當我還是個小女孩，我問媽媽，將來我會變成什么樣子呢？

會漂亮嗎？會富有嗎？

她對我說：世事不可強求,順其自然吧

當我長大了，戀愛了，我問我的心上人，“我們將來會怎么樣呢？我們的生活每天都會美好嗎？”我的愛人對我說：“世事不可強求順其自然吧。我們不能預見未來。世事不可強求順其自然吧?！爆F(xiàn)在我有了自己的孩子，他們問我，“將來我會變成什么樣子呢？會英俊嗎？會富有嗎？”我輕聲地回答：“世事不可強求順其自然吧。我們不能預見未來。世事不可強求順其自然吧?！?/p> 

<p class="bdr txt-left pd-small">當我還是個小女孩，我問媽媽，將來我會變成什么樣子呢？</p>
<p class="bdr txt-center pd-small">會漂亮嗎？會富有嗎？</p>
<p class="bdr txt-right pd-small">她對我說：世事不可強求,順其自然吧</p>
<p class="bdr txt-justify pd-small">當我長大了，戀愛了，...世事不可強求順其自然吧?！?lt;/p>

背景色

歌詞來自《Whatever Will Be, Will Be》

演示

When I was just a little girl,

I asked my mother,

"What will I be?

Will I be pretty?

Will I be rich?"

When I was just a little girl,

I asked my mother,

"What will I be?

Will I be pretty?

Will I be rich?"

<p class="bg-red bg-inverse pd-small">When I was just a little girl,</p>
<p class="bg-yellow bg-inverse pd-small">I asked my mother, </p>
<p class="bg-blue bg-inverse pd-small">"What will I be?</p>
<p class="bg-green bg-inverse pd-small">Will I be pretty?</p>
<p class="bg-red-light txt-red pd-small">When I was just a little girl,</p>
<p class="bg-yellow-light txt-yellow pd-small">I asked my mother, </p>
<p class="bg-blue-light txt-blue pd-small">"What will I be?</p>
<p class="bg-green-light txt-green pd-small">Will I be pretty?</p>

去掉背景

.bg-none

邊框

歌詞來自《Whatever Will Be, Will Be》

演示

When I was just a little girl,

I asked my mother,

"What will I be?

Will I be pretty?

Will I be rich?"

<p class="bdr bdr-red txt-red pd-small">When I was just a little girl,</p>
<p class="bdr bdr-yellow txt-yellow pd-small">I asked my mother, </p>
<p class="bdr bdr-blue txt-blue pd-small">"What will I be?</p>
<p class="bdr bdr-green txt-green pd-small">Will I be pretty?</p>
<p class="bdr pd-small">Will I be rich?"</p>

圖片

鼠標移上去圖片放大類img-scale

演示

<a href="#"><img src="imgs/docs-img.jpg" class="img-scale" width="200"/></a>


以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號