HTML 10.22

阿新 • • 發佈：2021-10-22

Html第五天

一 css進階

1.1選擇器

CSS選擇器 是CSS中的一種語法 用來更好更快的選取頁面元素

第一種 統配符選擇器
語法規則：  * {}
選取內容：  全部標籤
程式碼示例： 
  <head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
            * {color: red;}
        </style>
        
    </head>
    <body>
        
        <div>123</div>
        <p>345</p>
        <span>789</span>
    </body>

應用場景： 經常用來清除標籤的 預設的外邊距 和 內填充
     * {margin: 0;padding: 0;} 
     這是以前的寫法 現在換成了這種寫法     blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}

第二種 標籤選擇器

語法規則：  標籤名 {}
選取內容：  該標籤名對應的所有標籤
程式碼示例： 
  <head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
            div {color: red;}
        </style>
        
    </head>
    <body>
        
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <p>345</p>
        <span>789</span>
        
        <ul>
            <li>123123</li>
            <li>123123</li>
            <li>123123</li>
        </ul>
    </body>

應用場景：用來對某一種標籤進行樣式設定 例如  a標籤集體去掉下劃線
    a {text-decoration: none;}
      ul,ol { list-style: none;}


第三種  類選擇器
語法規則：  .類名 {}
選取內容：  該類名對應的所有標籤
程式碼示例： 
 <head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
           *{margin: 0;padding: 0;}
            a {text-decoration: none;}
            ul,ol { list-style: none;}
            
            div {color: red;}
            
            .haha {background-color: yellow;}
        </style>
        
    </head>
    <body>
        
        <div>123</div>
        <div>123</div>
        <div class="haha">123</div>
        <p>345</p>
        <span class="haha">789</span>
        <a href="">123123123</a>
        
        <ul>
            <li>123123</li>
            <li>123123</li>
            <li>123123</li>
        </ul>
    </body>
注意一個標籤可以有多個類  多個標籤可以屬於同一個類


應用場景： 用來對同一類標籤進行樣式的設定


第四種    id選擇器
語法規則：  #id名 {}
選取內容：  該id名對應的標籤  因為id是唯一識別符號 相當於身份證號 所以標籤的id不能重複 （CSS中如果id重複能行 但是js就會出問題）
程式碼示例： 
 <head>
        <meta charset= 
"utf-8" />
<title></title>

<style type="text/css">
       *{margin: 0;padding: 0;}
a {text-decoration: none;}
ul,ol { list-style: none;}

div {color: red;}

.haha {background-color: yellow;}
.hehe {font-size: 66px;}

#foo {color: blue;}
</style>

</head>
<body>

<div id="foo">123 
</div>
<div>123</div>
<div class="haha   hehe">123</div>
<p>345</p>
<span class="haha">789</span>
<a href="">123123123</a>

<ul>
<li>123123</li>
<li id="foo">123123</li>
<li>123123</li>
</ul>
</body>


應用場景： css中有的時候使用 主要在js中使用 


高階選擇器：  高階選擇器就是基本選擇器再按照不同的規則組合

後代選擇器

語法規則：  選擇器1   選擇器2 {   }
選取內容：  選取再選擇器1下面符合選擇器2標準的內容
程式碼示例： 
<head>
<meta charset="utf-8" />
<title></title>

<style type="text/css">
      /* 需求  只對  123 456 操作 */
#foo .bar  span {color: red;}
#foo span  {background-color: blue;}
</style>

</head>
<body>

<div id="foo">
<div class="bar">
<span>123</span>
<span>456</span>
</div>
<span>789</span>
</div>

<span>159</span>

</body>
應用場景： css中有的時候使用 主要在js中使用

1.2選擇器的優先順序


CSS稱之為 層疊樣式表 
  
  
在css設定樣式的時候 如果遇到 
  
1  多個選擇器對同種標籤新增不同樣式 ： 疊加性原則
   <head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
          #foo{color: red;}
          .bar{background-color: blue;}
        </style>
    </head>
    <body>
        <div id="foo" class="bar">123</div>
    </body>

2  多個選擇器對同種標籤新增相同樣式： 權值大的優先 權值一樣 就近原則 
  *   0  
  標籤  1
  類   10
  id   100
  行內  
  !important 
  <head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
          .haha{color: red;}
          .bar{color: orange;}
          
          #a1 {color: green !important ; }
        </style>
    </head>
    <body>
        <span id="foo" class="bar  haha" >123</span>
        <div id="a1" style="color: blue;">123</div>
    </body>

1.3 背景屬性


background  以前我們設定背景顏色

背景顏色：
<head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
           div {
                 width: 200px;
                 height: 200px;
                 background-color: red;
             }
        </style>
    </head>
    <body>
        <div>
            你好世界
        </div>
    </body>

顏色的賦值 可以有三種形式： 
1  英文單詞 
2  rgb  red  green  blue  三原色
     其他的顏色都可以通過這三種顏色按照不同的比例調和出來
    0-255 
  rgba  a代表透明度  0-1 1代表不透明 0 全透明
  

3 十六進位制
  
  #124578 代表 12 紅色  45 綠色 78 藍色
  特殊情況 如果是aabbcc的情況 可以簡寫成 abc



背景圖片

我們在html中 要顯示圖片可以有兩種方式： 1 img標籤  2 任意標籤設定背景圖
<head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
          
           div {
                 width: 500px;
                 height: 500px;
                 border: 2px solid red;
                 
                 background-image: url(img/bdbri.png);
                 background-repeat: no-repeat;
                 /* 300px 100px   center center 30% 30%*/
                 background-position: 50% 50%;
                 /* 100px  100px*/
               background-size: 100% 100%;
             }
             
            
        </style>
    </head>
    <body>
        <div>你好 世界</div>
    </body>

複合屬性： 一個屬性可以設定多個值  background

 background: red  url(img/bdbri.png)  no-repeat  center center /  100% 100% ;

多背景設定： 注意此時就不能設定顏色

background:  url(img/bdbri.png)  no-repeat  center center /  10% 10% ,
                        url(img/01.jpg)  no-repeat  top left /  10% 10% ;

1.4 精靈圖


精靈圖： 特殊的圖片 將一些小圖示集中到一張圖片中

為什麼要將一群小圖示 集中一張圖片中？
這是為了網路請求更加快 所做的操作。例如 如果每個圖示都是一個圖片 此時一個網頁需要大量圖示 此時就需要傳送多次請求 ，如果集中到一張圖片中 則只請求一次即可。

精靈圖片的使用：
1 測量圖片的大小和位置
2 在程式碼中建立一個div標籤  寬高是圖示大小  調整背景圖在標籤的位置
<head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
          
          div{
              width: 15px;
              height: 15px;
              background: url(img/1.png) no-repeat  -137px -126px;
          }
          
            
        </style>
    </head>
    <body>
        <div></div>
    </body>

二盒子模型

1.1 什麼是盒子模型


box model 翻譯成中文叫做 盒子模型

盒子模型就是將標籤 視為一個二維的盒子 包含的設定有 外邊距 邊框 內填充 內容

1.2 外邊距


盒子模型的外邊距指的是邊框以外佔據的空白區域
例如：黃色部分就是


使用 margin屬性進行調整  可以設定四個位置
<head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
          
          div{
              width: 150px;
              height: 150px;
              background-color: blue;
              
              margin-top: 100px;
              margin-bottom: 200px;
              margin-left: 60px;
              margin-right: 80px;
            }
          
            
        </style>
    </head>
    <body>
        <div></div>
        <span>123123</span>
    </body>
複合屬性
margin：  上  右  下 左;
margin：  上  左右  下;
margin：  上下   左右;
margin：  上右下左;


實際應用場景：
1 調整標籤之間的位置關係 
2 位置居中  注意 能居中的才有居中一說
  塊級標籤居中  margin: 0 auto;
  行內標籤   設定父標籤的text-algin：center

外邊距衝突
<head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
          
          div{
              width: 300px;
              height: 200px;
              background-color: black;
            }
            #foo{
                margin-bottom: 150px;
            }
            #bar{
                margin-top: 100px;
            }
            
        </style>
    </head>
    <body>
        <div id="foo">123</div>
        <div id="bar">123</div>
        
    </body>
<head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
          
          span{
              width: 300px;
              height: 200px;
              background-color: black;
            }
            #foo{
                margin-right: 150px;
            }
            #bar{
                margin-left: 100px;
            }
            
        </style>
    </head>
    <body>
        <span id="foo">123</span>
        <span id="bar">123</span>
        
    </body>

上下衝突 取最大值  左右衝突 疊加

1. 3 邊框


<head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
          
          div{
              background-color: red;
              width: 300px;
              height: 300px;
              
              border-top: 20px solid blue;
              border-bottom: 30px dashed orange;
              border-left: 40px double gray;
              border-right: 50px groove black;
          }
        </style>
    </head>
    <body>
        
        <div>123</div>
        
    </body>

應用：

  1  單獨邊框 下劃線
  2  輸入框

1.3 內填充



內填充叫做 padding
指的是 內容到邊框之間的空白區域 並且設定被填充會增大標籤面積


<head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
          
          div{
              
              width: 300px;
              height: 300px;
              border: 5px solid green;
              
              padding-top: 66px;
              padding-left: 55px;
              padding-bottom: 22px;
              padding-right: 33px;
          }
          
         
        </style>
    </head>
    <body>
        <div>123</div>
    </body>

內填充也可以寫一個值： 
複合屬性：  padding   寫多個值和margin一樣的位置


實際應用： 
  1 讓內容不貼邊
  2 設定居中
  <head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
          
          a{
              background-color: black;
              padding: 5px 10px;
              border-radius: 5px;
              color: white;
              text-decoration: none;
          }
         
        </style>
    </head>
    <body>
        <a href="">你好世界</a>
    </body>

三總結


1.選擇器
2. 背景的一些屬性
3. 精靈圖
4. 盒子佈局

HTML 10.22

Html第五天一 css進階 1.1選擇器 CSS選擇器是CSS中的一種語法用來更好更快的選取頁面元素第一種統配符選擇器語法規則：* {}選取內容：全部標籤程式碼示例：<head><meta charset=\"utf-8\" /><

阿里雲伺服器中Linux下centos7.6安裝rabbitmq (2020-05-10 22:06)

0. 環境準備 1.版本問題 Erlang和RabbitMQ版本必須對應才行，不然可能會出錯。 2. 依賴下載

20200721T2 【NOIP2015模擬10.22】最大子矩陣

Description 我們將矩陣A中位於第i行第j列的元素記作A[i,j]。一個矩陣A是酷的僅當它滿足下面的條件:A[1,1]+A[r,s]<=A[1,s]+A[r,1](r,s>1)其中r為矩陣A的行數，s為矩陣A的列數。進一步，如果一個矩陣是非常酷的

進度四（10.22）

今天按照八稿需求改了下問卷介面 package dao; import java.sql.Connection; import java.sql.PreparedStatement;

10.22 考試總結

教練說之前的題太簡單了，所以直接把省選的模擬賽搬過來了，？？？ wdnmd，那豈不是要爆零了？

2020.10.22 模擬賽題解

CSDN同步注：所有題目並非作者版權，也並非本人原創。本人只是為了方便大家除錯，將校內的題面與資料利用平臺做成題目，並對題面進行部分美化。特此說明。

2020-10-22

學習JSR303資料校驗是屬於javax包下的基礎校驗 JSR-303 是 JAVA EE 6 中的一項子規範，叫做 Bean Validatio

弱雞養成第五天(2020.10.22)-理解專案的流程

文章目錄環境問題127.0.0.0無法訪問wampphpmyadmin載入緩慢的終極解決方法（轉載）結語好好學習，天天向上！

EDA--2020-10-22

1、 2、移除原來的，然後加入自己做的 3、繼續新建一個pcb 4，如圖建一個框，然後儲存

紫盈說幣：10.22比特幣,以太坊行情分析,以太坊利好,夜間還能繼續領漲？

轉眼十月接近尾聲，因為身處這個市場，所以感覺不到時光的溜走，因為每天都有一群為了夢想而戰鬥的投資者陪著我。我不知道你今年的目標實現了多少？或者說還是如同過往，日復一日的持續虧損著？你總在抱怨自

（內部類，許可權修飾符，多型，抽象類）2020.10.22

目錄內部類成員內部類預設內部類：私有內部類：靜態內部類：區域性內部類：

2020.10.22--AI--立體圖形制作、矛盾空間圖形設計、3D文字

立體圖形制作 1.先用矩形工具畫出一個矩形，填充顏色，然後用直接選擇工具選住左邊的兩個角，給它向上移動 2.把圖進行復制對稱，然後對齊 3.把圖形選住點右鍵編組，進行復制，然後旋轉對稱，編組 4.把圖形進

安裝pytorch的第一步之走過的傻缺路 2020/10/22

當我興致勃勃打算好好啃啃yolov3的程式的時候，突然發現，pycharm裡安裝不上torch。沒關係嘛，肯定是網路問題，用cmd輸入映象檔案肯定沒問題，於是輸入以下語句pip install torch -i https://pypi.tuna.tsi

幽州說幣：10.22比特幣以太坊下午行情分析及操作策略

大家好，我是你們的朋友幽州說幣，幽州專注數字貨幣行情分析，爭取為廣大幣友傳遞最有價值的幣市資訊，歡迎廣大幣友的關注與點贊。 [訊息面]：

彤欣言幣：10.22比特幣以太坊投資實戰技巧，MACD指標定律

彤欣言幣：10.22比特幣以太坊投資實戰技巧，MACD指標定律在市場操作過程中，除了基本面的分析外，技術分析是判斷價格走勢更實際的方式，技術分析中指標的運用是新手必須要學習的，MACD指標在市場交易歷史

10.22補題

E Nothing is eternal in the world, Kostya understood it on the 7-th of January when he saw partially dead four-color garland.

NH.A.0002__zabbix_lamp+zabbix_server原始碼編譯安裝_V2020.10.22

ZABBIX監控平臺部署（LAMP+ZABBIX.Server原始碼安裝部署）1、Zabbix Server端和Zabbix Agent執行如下程式碼：Zabbix監控平臺部署，至少需要安裝四個元件，分別是Zabbix_Server、Zabbix_Web、Databases、Zabbix_Agent

NH.A.0001__zabbix_lamp+zabbxix.server/zabbix.agent.yum源安裝_V2020.10.22

ZABBIX監控平臺部署（LAMP+ZABBIX.Server.YUM源安裝部署）1、Zabbix Server端和Zabbix Agent執行如下程式碼：Zabbix監控平臺部署，至少需要安裝四個元件，分別是Zabbix_Server、Zabbix_Web、Databases、Zabbix_Agent

NO.A.0005——zabbix_lnmp+zabbix.agent.編譯安裝/批量監控和100臺裝置/自動發現_V2020.10.22

ZABBIX監控平臺部署（LAMP+ZABBIX.Agent.make源安裝部署）一、安裝客戶端 1、Zabbix Server端和Zabbix Agent執行如下程式碼：

html 10-HTML基礎回顧

10-HTML基礎回顧 #本文主要內容 html 的常見元素 html 元素的分類 html 元素的巢狀關係

HTML 10.22

Html第五天

一 css進階

1.1選擇器

1.2選擇器的優先順序

1.3 背景屬性

1.4 精靈圖

二 盒子模型

1.1 什麼是盒子模型

1.2 外邊距

1. 3 邊框

1.3 內填充

三 總結

相關推薦

二盒子模型

三總結