亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 55
粉絲 3
評論 0
訪問量 69462
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
css背景設(shè)置和阿里圖標(biāo)的引用
王佳祥
原創(chuàng)
1886人瀏覽過

css背景設(shè)置和阿里圖標(biāo)的引用

一、css背景顏色

  • 實例1：
  1. <style>
  2.   div{
  3.   width:400px;
  4.   height:400px;
  5.   border:1px solid #000;
  6.   padding:20px;
  7.   }
  8. </style>
  9. </head>
  10. <body>
  11. <div></div>
  12. </body>
  • 預(yù)覽：

  • 實例2：
  1.  div{
  2.   width:400px;
  3.   height:400px;
  4.   border:1px solid #000;
  5.   padding:20px;
  6.   background-color:burlywood;/* 設(shè)置背景顏色 */
  7.   }
  • 預(yù)覽：

  • 實例3：
  1. background: linear-gradient(red, 30%, blue);  /* 基礎(chǔ)線性漸變 */
  2. /*默認(rèn)情況下，漸變會平滑地從一種顏色過渡到另一種顏色。你可以通過設(shè)置一個值來將漸變的中心點移動到指定位置*/
  • 預(yù)覽：

  • 實例4：改變漸變方向
  1. background: linear-gradient(to right, blue, pink);  /* 向右漸變 */
  2. /*默認(rèn)情況下，默認(rèn)情況下，線性漸變的方向是從上到下， 你可以指定一個值來改變漸變的方向*/
  • 預(yù)覽：

  • 實例5：對角線漸變
  1. background: linear-gradient(to bottom right, blue, red);  /* 向右下角漸變 */
  2. /*設(shè)置漸變方向為從一個對角到另一個對角。*/
  • 預(yù)覽：

  • 實例6：設(shè)置漸變角度
  1. background: linear-gradient(70deg, red, blue);  /* 70°方向漸變 */
  2. /*如果想要更精確地控制漸變的方向，你可以給漸變設(shè)置一個具體的角度*/
  3. /*在使用角度的時候, 0deg 代表漸變方向為從下到上, 90deg 代表漸變方向為從左到右，正角度都屬于順時針方向，負(fù)角度意味著逆時針方向。*/
  • 預(yù)覽：

  • 實例7：多顏色漸變
  1. background: linear-gradient(red, yellow, blue, orange); /* 多顏色漸變 */
  2. /*默認(rèn)情況下，所設(shè)置顏色會均勻分布在漸變路徑中。*/
  • 預(yù)覽：

二、css背景圖片

  • 實例1：
  1. <style>
  2.       div {
  3.         width: 500px;
  4.         height: 500px;
  5.         padding: 20px;
  6.         border: 1px solid #000; /* 設(shè)置邊框 */
  7.         background-image: url(laohu.jpg);/*設(shè)置背景圖片*/
  8.       }
  9.     </style>
  10.   </head>
  11.   <body>
  12.     <div></div>
  13.   </body>
  • 預(yù)覽：

  • 實例2：
  1. background-repeat: no-repeat;/*圖片不重復(fù)顯示*/
  • 預(yù)覽：

  • 實例3：圖片的顯示位置
  1. background-position: left center;/*向左居中顯示*/
  • 預(yù)覽：

  • 實例4：圖片正中顯示
  1. background-position: 50% 50%;/*居中顯示*/
  • 預(yù)覽：

  • 實例5：背景圖片大小
  1. background-size: 100%;/*百分百大小顯示*/
  • 預(yù)覽：

三、背景陰影

  • 實例1：
  1. <style>
  2.       div {
  3.         width: 500px;
  4.         height: 500px;
  5.         padding: 20px;
  6.         border: 1px solid #000; /* 設(shè)置邊框 */
  7.         box-shadow: 5px 10px 5px #888888;
  8.         /*右陰影，下陰影 模糊 陰影顏色*/
  9.       }
  10.     </style>
  11.   </head>
  12.   <body>
  13.     <div></div>
  14.   </body>
  • 預(yù)覽：

  • 實例2：外發(fā)光效果
  1. box-shadow: 0px 0px 5px #888888;
  • 預(yù)覽：

  • 實例3：背景圓角
  1. border-radius: 50%;
  • 預(yù)覽：

三、精靈圖

1.原理:

  • 把網(wǎng)頁中的一些背景圖片整合到一張圖片文件中, 利用backgroun-position等屬性進(jìn)行背景定位

2.優(yōu)缺點

  • 優(yōu)點: 
  1. 減少http請求, 加快網(wǎng)頁的加載速度, 提高用戶體驗
  2.  減少圖片的體積, 減少字節(jié)數(shù)
  3.  解決設(shè)計師圖片命名的煩惱
  4.  更換風(fēng)格方便
  • 缺點: 
  1.  開發(fā)時需要測量, 比較繁瑣
  2. 維護的時候麻煩
  3. 精靈圖不能隨意改變大小和位置
  4. 寬屏高分辨率的屏幕下, 容易出現(xiàn)背景斷裂

3.實例

  • 實例1：
  1.  <style>
  2.       .div1 {
  3.         width: 400px;
  4.         height: 600px;
  5.         border: 1px solid #000;
  6.         background: url(tb.png) no-repeat;
  7.         background-position: -128 -44;
  8.       }
  9.       .div2 {
  10.         width: 113px;
  11.         height: 113px;
  12.         background: url(tb.png) no-repeat;
  13.         background-position: -44px -16px;
  14.       }
  15.       .div3 {
  16.         width: 113px;
  17.         height: 113px;
  18.         background: url(tb.png) no-repeat;
  19.         background-position: -239px -274px;
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <div class="div1"></div>
  25.     <div class="div2"></div>
  26.     <div class="div3"></div>
  27.   </body>
  • 預(yù)覽：

四、阿里字體圖標(biāo)

1.訪問鏈接

2.font-class 引用

  • 實例1：
  1. <link rel="stylesheet" href="font/iconfont.css" />
  2.     <style>
  3.       .zt1 {
  4.         font-size: 66px;
  5.         color: red;
  6.       }
  7.     </style>
  8.   </head>
  9.   <body>
  10.     <span class="iconfont notification icon-icon-test4 zt1"></span>
  11.     <span class="iconfont star_filled icon-icon-test19 zt1"></span>
  12.     <span class="iconfont check_filled icon-icon-test9 zt1"></span>
  13.     <span class="iconfont help_filled icon-icon-test14 zt1"></span>
  14.     <span class="iconfont search icon-icon-test2 zt1"></span>
  15.   </body>
  • 預(yù)覽：

3. Unicode 引用

  • 實例1：
  1.  <style>
  2.       @font-face {
  3.         font-family: "iconfont";
  4.         src: url("font/iconfont.eot");
  5.         src: url("font/iconfont.eot?#iefix") format("embedded-opentype"),
  6.           url("font/iconfont.woff2") format("woff2"),
  7.           url("font/iconfont.woff") format("woff"),
  8.           url("font/iconfont.ttf") format("truetype"),
  9.           url("font/iconfont.svg#iconfont") format("svg");
  10.       }
  11.       .iconfont {
  12.         font-family: "iconfont" !important;
  13.         font-size: 66px;
  14.         color: lightgreen;
  15.         font-style: normal;
  16.         -webkit-font-smoothing: antialiased;
  17.         -moz-osx-font-smoothing: grayscale;
  18.       }
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <span class="iconfont">&#xe633;</span>
  23.     <span class="iconfont">&#xe634;</span>
  24.     <span class="iconfont">&#xe63c;</span>
  25.     <span class="iconfont">&#xe640;</span>
  26.   </body>
  • 預(yù)覽：

4. Symbol 引用

  • 實例1：
  1.  <script src="font/iconfont.js"></script>
  2.     <style>
  3.       .icon {
  4.         width: 66px;
  5.         height: 66px;
  6.         vertical-align: -0.15em;
  7.         fill: currentColor;
  8.         overflow: hidden;
  9.       }
  10.     </style>
  11.   </head>
  12.   <body>
  13.     <svg class="icon" aria-hidden="true">
  14.       <use xlink:href="#icon-icon-test24"></use>
  15.     </svg>
  16.     <svg class="icon" aria-hidden="true">
  17.       <use xlink:href="#icon-icon-test25"></use>
  18.     </svg>
  19.     <svg class="icon" aria-hidden="true">
  20.       <use xlink:href="#icon-icon-test26"></use>
  21.     </svg>
  22.     <svg class="icon" aria-hidden="true">
  23.       <use xlink:href="#icon-icon-test27"></use>
  24.     </svg>
  25.   </body>
  • 預(yù)覽：

五、學(xué)習(xí)總結(jié)

1.css背景

  1. background:red; 設(shè)置背景顏色
  3. background:linear-gradient(red,blue); 設(shè)置背景漸變
  5. background:linear-gradient(to left,red,blue); 向左漸變
  7. background:linear-gradient(to right,red,blue); 向右漸變
  9. background:linear-gradient(bottom to right,red,blue); 對角漸變
  11. background:linear-gradient(70deg,red,blue); 設(shè)置漸變角度
  13. background:linear-gradient(red,blue，yellow,pink); 多顏色漸變

2.背景圖片

  1. background:url(圖片路徑); 設(shè)置背景圖片
  3. background:url(圖片路徑) no-rapeat; 設(shè)置背景圖片不重復(fù)顯示
  5. background-size:100%; 設(shè)置背景圖片大小為100%顯示
  7. background-position:left center; 向左居中顯示，center可以忽略
  9. background-position:right center; 向右居中顯示，center可以忽略
  11. background-clip:border-box; 背景裁切到邊框
  13. background-clip:content-box; 背景裁切到內(nèi)容
  15. box-shadow: 0px 0px 5px #888888; 設(shè)置陰影
  17. border-radius:50%; 設(shè)置圓角

3. 精靈圖（雪碧圖）

  • 精靈圖技術(shù)產(chǎn)生的目的：

    1.   很多大型網(wǎng)頁在首次加載的時候都需要加載很多的小圖片，而考慮到在同一時間，服務(wù)器擁堵的情況下，為了解決這一問題，采用了精靈圖這一技術(shù)來緩解加載時間過長從而影響用戶體驗的這個問題。

  • 精靈圖技術(shù)的本質(zhì)：

    1.   所謂精靈圖就是把很多的小圖片合并到一張較大的圖片里，所以在首次加載頁面的時候，就不用加載過多的小圖片，只需要加載出來將小圖片合并起來的那一張大圖片也就是精靈圖即可，這樣在一定程度上減少了頁面的加載速度，也一定程度上緩解了服務(wù)器的壓力。

  • 精靈圖用到的插件:page ruler redux / ps

    1.   page ruler redux是一個可以測量任意網(wǎng)頁元素并獲得尺寸等信息的谷歌瀏覽器插件。
    2.   首先要下載安裝igg谷歌訪問助手，并打開開發(fā)者模式
    3.   在任意瀏覽器下載好后解壓，直接拖拽到谷歌的擴展程序管理器
    4.   接著打開谷歌商城，搜索page ruler redux并下載安裝
    5.   安裝好后如下圖

這里需要注意圖片的打開方式要加上本地域名

4.阿里圖標(biāo)

  • font-class 引用

    1.   font-class 是 Unicode 使用方式的一種變種，主要是解決 Unicode 書寫不直觀，語意不明確的問題。
    3.   與 Unicode 使用方式相比，具有如下特點：
    5.   兼容性良好，支持 IE8+，及所有現(xiàn)代瀏覽器。
    6.   相比于 Unicode 語意明確，書寫更直觀?？梢院苋菀追直孢@個 icon 是什么。
    7.   因為使用 class 來定義圖標(biāo)，所以當(dāng)要替換圖標(biāo)時，只需要修改 class 里面的 Unicode 引用。
    8.   不過因為本質(zhì)上還是使用的字體，所以多色圖標(biāo)還是不支持的。

  • Unicode 引用

    1.   Unicode 是字體在網(wǎng)頁端最原始的應(yīng)用方式，特點是：
    3.   兼容性最好，支持 IE6+，及所有現(xiàn)代瀏覽器。
    4.   支持按字體的方式去動態(tài)調(diào)整圖標(biāo)大小，顏色等等。
    5.   但是因為是字體，所以不支持多色。只能使用平臺里單色的圖標(biāo)，就算項目里有多色圖標(biāo)也會自動去色。

  • Symbol 引用

    1.   這是一種全新的使用方式，應(yīng)該說這才是未來的主流，也是平臺目前推薦的用法。相關(guān)介紹可以參考這篇文章 這種用法其實是做了一個 SVG 的集合，與另外兩種相比具有如下特點：
    3.   支持多色圖標(biāo)了，不再受單色限制。
    4.   通過一些技巧，支持像字體那樣，通過 font-size, color 來調(diào)整樣式。
    5.   兼容性較差，支持 IE9+，及現(xiàn)代瀏覽器。
    6.   瀏覽器渲染 SVG 的性能一般，還不如 png。
批改老師：WJWJ

批改狀態(tài)：合格

老師批語：寫的非常不錯，很認(rèn)真仔細(xì)！繼續(xù)加油！
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費學(xué)