從零開始學 Web 之 CSS（五）可見性、內容移除、精靈圖、屬性選擇器、滑動門

時間 2019-11-17

標籤開始 web css 可見內容移除精靈屬性選擇器滑動欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公衆號，歡迎你們訂閱關注。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！css

1、CSS可見性

overflow: hidden;   /*溢出隱藏 */   
visibility: hidden;  /* 隱藏元素    隱藏以後還保留原來的位置。*/
display: none;      /*  隱藏元素    隱藏以後不保留原來的位置。*/
display: block;    /* 元素可見 */

display:none 和display:block 常配合js使用（如：鼠標通過時出現，鼠標離開時消失）。html

2、css以內容移除（logo優化）

一、方法一

text-indent: -5000em;

text-indent 屬性規定文本塊中首行文本的縮進。注意：負值是容許的。若是值是負數，將向左縮進。前端

之因此要寫着兩個字是爲了 SEO，由於背景圖片 SEO 看不懂.服務器

二、方法二

將元素高度設置爲0, 使用內邊距將盒子撐開，給盒子使用overflow:hidden; 將文字隱藏。微信

.box{
  width:300px;
  height:0;
  padding-top:100px;
  overflow:hidden;
  background:red;
}

3、CSS精靈圖

上圖所示爲網頁的請求原理圖，當用戶訪問一個網站時，須要向服務器發送請求，網頁上的每張圖像都要通過一次請求才能展示給用戶。網絡

然而，一個網頁中每每會應用不少小的背景圖像做爲修飾，當網頁中的圖像過多時，服務器就會頻繁地接受和發送請求，這將大大下降頁面的加載速度。爲了有效地減小服務器接受和發送請求的次數，提升頁面的加載速度，出現了CSS精靈技術（也稱CSS Sprites）。學習

簡單地說，CSS精靈是一種處理網頁背景圖像的方式。它將一個頁面涉及到的全部零星背景圖像都集中到一張大圖中去，而後將大圖應用於網頁，這樣，當用戶訪問該頁面時，只需向服務發送一次請求，網頁中的背景圖像便可所有展現出來。優化

一般狀況下，這個由不少小的背景圖像合成的大圖被稱爲精靈圖，以下圖所示爲淘寶網站中的一個精靈圖。網站

工做原理：
CSS 精靈實際上是將網頁中的一些背景圖像整合到一張大圖中（精靈圖）。然而，各個網頁元素一般只須要精靈圖中不一樣位置的某個小圖，要想精肯定位到精靈圖中的某個小圖，就須要使用CSS的background-image、background-repeat和background-position屬性進行背景定位，其中最關鍵的是使用background-position屬性精確地定位。url

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body,ul,li{
            margin: 0;
            padding: 0;
        }

        ul, li{
            list-style: none;
        }

        .box{
            height: 48px;
            background: #222;
            margin-top: 50px;
        }

        .con{
            width: 1182px;
            height: 48px;
            margin: 0 auto;
            position: relative;
        }

        .con ul li{
            float: left;
            
        }

        .con ul li a{
            text-decoration: none;
            color: #fff;
            display: inline-block;
            height: 48px;
            font: 16px/48px microsoft yahei;
            padding: 0 18px;
        }

        .con ul li a:hover{
            background: #2774A2;
        }

        .con .hot{
            position: absolute;
            width: 31px;
            height: 21px;
            background: url("spirit.png") -58px 0;
            left:221px;
            bottom:35px;
        }

        .con .new{
            position: absolute;
            width: 31px;
            height: 21px;
            background: url("spirit.png") -135px 0;
            left:90px;
            bottom:35px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="con">
            <ul>
                <li><a href="#">首頁</a></li>
                <li><a href="#">Java</a></li>
                <li><a href="#">IOS</a></li>
                <li><a href="#">PHP</a></li>
                <li><a href="#">C/C++</a></li>
                <li><a href="#">UI設計</a></li>
                <li><a href="#">前端與移動開發</a></li>
                <li><a href="#">問答專區</a></li>
                <li><a href="#">Python</a></li>
                <li><a href="#">網絡營銷</a></li>
                <li><a href="#">活動專區</a></li>
            </ul>
            <div class="hot"></div>
            <div class="new"></div>
        </div>
    </div>
</body>
</html>

PS：之因此選擇con做爲父盒子而不是box做爲父盒子，是由於box的寬度不定，不一樣的顯示器寬度不一樣，那麼new和hot的定位就有問題。

4、屬性選擇器

input[type="text"][class] {
  width: 20px;
  height: 20px;
}

選擇有type屬性爲text，而且有class屬性的標籤。

input[type="text"][class="id"] {
  width: 20px;
  height: 20px;
}

選擇有type屬性爲text，而且有class屬性，而且class屬性爲 id 的標籤。

5、CSS滑動門

特色：邊上是這種圓弧型的或者其餘形狀的，能夠變換長度的樣式。

PS：浮動以後寬度不是父盒子的寬度，而是內容撐開的寬度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body,ul,li{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        ul li{
            float: left;
        }
        ul li a{
            display: inline-block;
            height: 35px;
            background: url("bg_r1_c1.png") no-repeat;
            padding-left: 7px;
        }

        ul li a span{
            display: inline-block;
            height: 35px;
            background: url("bg_r1_c2.png") right;
            padding-right: 25px;
            color: #fff;
            line-height: 35px;
        }

        ul li a:hover{
            background: url("bbg_r1_c1.png");
        }

        ul li a:hover span{
            background: url("bbg_r1_c2.png") right;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#"><span>網易雲音樂</span></a></li>
        <li><a href="#"><span>微信</span></a></li>
        <li><a href="#"><span>螞蟻花唄</span></a></li>
    </ul>
</body>
</html>

微信案例：

現象：鼠標通過時，背景凸起。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body,ul,li,a,span{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        .nav{
            height: 74px;
            background: url("weixin_bg.jpg");
        }

        .nav-con{
            width: 600px;
            margin: 0 auto;
        }

        li{
            float: left;
            height: 74px;
            line-height: 74px;
            margin-right: 60px;
        }

        li a{
            display: inline-block;
            text-decoration: none;
            color: #fff;
            height: 33px;
            line-height: 33px;
            background: url("bg.png") no-repeat 0 -144px;
            padding-left: 13px;
        }

        a span{
            display: inline-block;
            height: 33px;
            background: url("bg.png") no-repeat right -144px;
            padding-right: 13px;
        }

        a:hover{
            background: url("bg.png") no-repeat 0 -192px;
        }

        a:hover span{
            background: url("bg.png") no-repeat right -192px;
        }
    </style>
</head>
<body>
    <div class="nav">
        <div class="nav-con">
            <ul>
                <li><a href="#"><span>首頁</span></a></li>
                <li><a href="#"><span>下載文章</span></a></li>
                <li><a href="#"><span>微信公衆公衆公衆助手</span></a></li>
            </ul>
        </div>
    </div>
</body>
</html>