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

搜索
博主信息
博文 13
粉絲 1
評(píng)論 0
訪問量 19001
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
CSS基礎(chǔ)知識(shí)和案例
樊天龍的博客
原創(chuàng)
1164人瀏覽過

CSS基礎(chǔ)知識(shí)和案例

線上演示地址:

http://www.fantianlong.com/php11/0405/homework1.html
http://www.fantianlong.com/php11/0405/homework2.html

1.CSS是什么

CSS中文全稱層疊樣式表,如果把HTML的功能比作搭建一個(gè)毛坯房,CSS的功能就是進(jìn)行裝修.

2.元素和元素框

頁面中顯示的內(nèi)容稱之為元素,而元素框outline則是元素外部的一個(gè)邊框,相比于border是不同的,因?yàn)樗辉诤凶幽Ｐ椭?

根據(jù)元素框中的內(nèi)容提供者,可以把元素分為兩大類:

序號(hào) 類型 描述
1. 置換元素 元素框內(nèi)容由外部資源提供,元素框就是占位符,如<img>,<input>…
2. 非置換元素 元素框內(nèi)容由用戶提供,瀏覽器生成,如<p>,<span>…

3.元素的顯示方式

3.1元素類型

序號(hào) 類型 描述
1. 內(nèi)聯(lián)元素 不獨(dú)占一行,寬高由內(nèi)容決定,只有padding-left和padding-right可以設(shè)置
2. 塊級(jí)元素 獨(dú)占一行,可以設(shè)置寬高,padding四個(gè)方向都可以設(shè)置
3. 行內(nèi)塊元素 結(jié)合了內(nèi)聯(lián)元素和塊級(jí)元素的特點(diǎn),可以簡單的理解為行內(nèi)塊元素 = 內(nèi)聯(lián)元素 + 塊級(jí)元素.多個(gè)行內(nèi)塊元素可以水平排列,不獨(dú)占一行,可以設(shè)置寬高,padding四個(gè)方向都可以設(shè)置

3.2display屬性

可以通過display屬性在內(nèi)聯(lián)元素,塊級(jí)元素,行內(nèi)塊元素之間進(jìn)行轉(zhuǎn)換.

4.CSS的引用方式

  • 外部樣式表:通過<link rel="stylesheet" href="url">方式引入,這是開發(fā)中用的最多的一種,可以進(jìn)行代碼復(fù)用.
  • 導(dǎo)入:通過@import url方式導(dǎo)入,可以放到<style>標(biāo)簽中,也可以放到外部樣式表中,也可以進(jìn)行代碼的復(fù)用.但需要注意的是通過這種方式引入CSS的方式必須放到第一行,要不可能會(huì)出錯(cuò).
  • 內(nèi)聯(lián)樣式:通過在起始標(biāo)簽中添加style屬性,僅在當(dāng)前頁面生效.

5.CSS文檔的內(nèi)容

5.1樣式規(guī)則

選擇器 {屬性:值...}

  • 選擇器代表選擇了那個(gè)元素,只有選擇了這個(gè)元素,才可以對(duì)其進(jìn)行樣式設(shè)置
  • 屬性代表了對(duì)選擇的元素添加了哪種樣式
  • 值代表了度量

5.2廠商前綴

廠商前綴一般是瀏覽器廠商發(fā)布新屬性,此時(shí)屬于實(shí)驗(yàn)階段,不同的瀏覽器前綴不同,需要加上前綴才可以使用.隨著時(shí)間的推移,各個(gè)瀏覽器廠商都已經(jīng)使用適配,這時(shí)就不需要前綴了.

各個(gè)瀏覽器廠商前綴,見下圖:

序號(hào) 前綴 描述
1. -weblit- 谷歌瀏覽器
2. -moz- 火狐瀏覽器
3. -ms- IE
4. -o- 歐朋瀏覽器

5.3處理空白

處理方式和HTML類似,這里不多贅述.

5.4CSS注釋

  • 單行或多行注釋:/*注釋內(nèi)容*/
  • 注釋不允許嵌套

6.媒體查詢

  • 媒體查詢: 設(shè)置瀏覽器使用指定的樣式表的媒體
  • 常用的媒體類型:all(所有媒體類型),screen(屏幕),print(打印機(jī))
  • 多種媒體類型之間用逗號(hào)分隔:@media screen,print

6.1媒體描述符

  • 媒體類型通常會(huì)添加”媒體描述符”進(jìn)行精準(zhǔn)限制,例如設(shè)置媒體尺寸,分辨率等
  • 媒體描述符的語法與 css 樣式聲明非常類似,如min-width: 500px
  • 與 css 聲明的不同之處在于,媒體描述符允許沒有值,如print and (color)
  • 多個(gè) “媒體描述符” 之間使用 “邏輯關(guān)鍵字” 連接, 如 and 和 not
  • and表示多個(gè)”媒體描述符”必須同時(shí)滿足, not則是整個(gè)查詢?nèi)》?且必須寫在and前面

常用 “媒體描述符”(顯示區(qū)域相關(guān))

序號(hào) 媒體描述符 描述
1 width 顯示區(qū)域?qū)挾?/td>
2 min-width 顯示區(qū)域最小寬度
3 max-width 顯示區(qū)域最大寬度
4 device-width 設(shè)備顯示區(qū)域?qū)挾?/td>
5 min-device-width 設(shè)備顯示區(qū)域最小寬度
6 max-device-width 設(shè)備顯示區(qū)域最大寬度
7 height 顯示區(qū)域高度
8 min-height 顯示區(qū)域最小高度
9 max-height 顯示區(qū)域最大高度
10 device-height 設(shè)備顯示區(qū)域高度
11 min-device-height 設(shè)備顯示區(qū)域最小高度
12 max-device-height 設(shè)備顯示區(qū)域最大高度

max-width與max-device-width區(qū)別:

  • max-width: 瀏覽器顯示區(qū)域?qū)挾?與設(shè)備無關(guān),通常用于 PC 端
  • max-device-width: 設(shè)備分辨率的最大寬度,通常用于移動(dòng)端

7.案例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <!-- <link rel="stylesheet" href="style.css"> -->
  8.     <style>
  9.         ul {
  10.             width: 200px;
  11.             border: 1px solid #cccccc;
  12.         }
  14.         a {
  15.             color: #000000;
  16.         }
  18.         a:hover {
  19.             color: #ff0000;
  20.         }
  21.     </style>
  22.     <title>CSS引用和列表綜合案例</title>
  23. </head>
  25. <body>
  26.     <ul>
  27.         <li><a href="">花園式酒店正式成立</a></li>
  28.         <li><a href="">歐亞賣場店慶即將開始</a></li>
  29.         <li><a href="">萬達(dá)影城優(yōu)惠季歡樂來</a></li>
  30.         <li><a href="">新城吾悅廣場盛大開業(yè)</a></li>
  31.         <li><a href="">美食廣場歡迎您的到來</a></li>
  32.     </ul>
  33. </body>
  35. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  13.         .clearfix:after {
  14.             content: "";
  15.             display: block;
  16.             clear: both;
  17.         }
  19.         body {
  20.             font-size: 12px;
  21.         }
  23.         .wrap {
  24.             width: 1000px;
  25.             margin: 0 auto;
  26.         }
  28.         a {
  29.             text-decoration: none;
  30.         }
  32.         header {
  33.             height: 40px;
  34.             line-height: 40px;
  35.             background-color: rgb(68, 68, 68);
  36.         }
  38.         header p {
  39.             float: right;
  40.             color: rgb(168, 168, 170);
  41.         }
  43.         nav {
  44.             position: relative;
  45.             height: 44px;
  46.             line-height: 44px;
  47.             background-color: rgb(5, 5, 5);
  48.         }
  50.         nav>.wrap {
  51.             height: 44px;
  52.         }
  54.         nav ul>li {
  55.             width: 64px;
  56.             height: 44px;
  57.             line-height: 44px;
  58.             padding: 0 20px;
  59.             list-style: none;
  60.             float: left;
  61.         }
  63.         nav a {
  64.             color: #f5f5f7;
  65.         }
  67.         nav a:hover {
  68.             color: #ffffff;
  69.         }
  71.         nav li img {
  72.             margin: 12px 0;
  73.         }
  75.         /* menu */
  76.         .menu {
  77.             display: none;
  78.         }
  81.         @media screen and (max-width: 760px) {
  82.             nav ul {
  83.                 background-color: #000000;
  84.                 position: absolute;
  85.                 top: 0;
  86.                 left: 0;
  87.                 text-align: center;
  88.             }
  90.             nav ul>li {
  91.                 clear: both;
  92.                 border-bottom: 1px solid #cccccc;
  93.             }
  95.             nav a {
  96.                 color: #f5f5f7;
  97.             }
  99.             .menu {
  100.                 display: inline-block;
  101.             }
  103.             .menu~li {
  104.                 display: none;
  105.             }
  106.         }
  107.     </style>
  108.     <title>媒體查詢仿蘋果官網(wǎng)導(dǎo)航欄</title>
  109. </head>
  111. <body>
  112.     <div class="container">
  113.         <header>
  114.             <div class="wrap clearfix">
  115.                 <p>&lt;廣告&gt;</p>
  116.             </div>
  117.         </header>
  118.         <nav>
  119.             <div class="wrap">
  120.                 <ul class="clearfix">
  121.                     <li class="menu"><a href="#"><img src="images/menu.png" alt="menu"></a></li>
  122.                     <li><a href="#"><img src="images/apple.png" width="20" height="20" alt="logo"></a></li>
  123.                     <li><a href="#">Mac</a></li>
  124.                     <li><a href="#">iPad</a></li>
  125.                     <li><a href="#">iPhone</a></li>
  126.                     <li><a href="#">Watch</a></li>
  127.                     <li><a href="#">Music</a></li>
  128.                     <li><a href="#">技術(shù)支持</a></li>
  129.                     <li><a href="#"><img src="images/search.png" alt="search"></a></li>
  130.                     <li><a href="#"><img src="images/bag.png" alt="bag"></a></li>
  131.                 </ul>
  132.             </div>
  133.         </nav>
  134.     </div>
  135. </body>
  137. </html>

8.效果圖

9.總結(jié)

  • 媒體查詢是響應(yīng)式布局的一種技術(shù)，隨著移動(dòng)端的流行，所以要學(xué)好這塊知識(shí)
  • 仿蘋果首頁導(dǎo)航欄手機(jī)端有點(diǎn)問題，背景色不能完全顯示
  • 目前的效果為視口寬度變?yōu)?60px以下，導(dǎo)航欄能隱藏，但是顯示不出來
  • 多做些案例加強(qiáng)這塊的學(xué)習(xí)
批改老師：天蓬老師天蓬老師

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

老師批語：響應(yīng)式布局,了解原理即可, 后面可以用框架來簡化編程
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

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

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