入門筆記 Day three

時間 2019-12-07

標籤入門筆記 day 简体版

原文原文鏈接

經常使用標籤

h1~h6 標題css

p 段落html

strong 強調（粗體）瀏覽器

em 強調（斜體）字體

ul 無序列表ui

ol 有序列表spa

li 列表項rest

span 區分樣式code

dl 定義列表htm

dt 定義列表標題圖片

dd 定義列表項

Mark 標記

img 顯示圖片

標籤樣式初始化

css rest 原則：但凡事瀏覽器默認的樣式，都不要使用由於每一個瀏覽器下標籤的默認樣式可能會出現不一致的狀況。

人爲將全部樣式所有統一，再根據實際狀況進行設置

那些樣式是須要重置的？？

與盒模型相關的樣式：padding、border、margin

標籤特有的樣式：ul>li ; ol>li

<style> body, h1, h2, h3, h4, h5, h6, p, dl, dd{ margin: 0; } ul, ol{ margin: 0; padding: 0; list-style: none; } img{ border: none; vertical-align: top; } a{ text-decoration:none; } </style>
複製代碼

經常使用選擇器

id選擇器（#）---當前頁面惟一

類選擇器（.）---能夠使多個class加在同一個元素上

標籤選擇器

羣組選擇器 ---用逗號分隔

包含選擇器

通配符（*） ---找到頁面上覆合規則的全部元素

選擇器優先級

代碼執行生效的順序：行間樣式>id選擇器>類選擇器>標籤選擇器

塊元素和內聯元素

塊的特徵：

1.默認獨佔一行；

2.沒有寬度是，默認撐滿一行；

3.支持全部css命令。

內聯元素：

1.同排能夠繼續跟同類的標籤；

2.內容撐開寬度；

3.不支持寬高；

4.不支持上下的margin；

5.代碼換行被解析。

塊元素與內聯元素的轉換

display: block 轉化爲塊

display：inline 轉化爲內斂

display是將標籤轉換爲頁面中顯示的類型，不會改變標籤本質

inline-block:

1.塊元素能在一行上顯示

2.內斂元素支持寬高

3.沒有寬度是內容撐開寬高

翻頁按鈕

<style> a{ width: 17px; height: 20px; font: 12px（字體大小）/20px(行高) "宋體" ； border: 1px solid red; display: inline-block; text-align: center; text-decoration: none; color: yellow; } .pageBtn{ width: 64; } a:hover, .active{ background-color: green; color: blue; } </style>
</head>
<body>
    <div class="pageBox">
        <a href="" class="pageBtn">上一頁</a>
        <a href="">1</a>
        <a href="">2</a>
        <a href="" class="active">3</a>
        <a href="">4</a>
        <a href="">5</a>
        <a href="">6</a>
        <a href="">7</a>
        <a href="">8</a>
        <a href="">9</a>
        <a href="" class="pageBtn">下一頁</a>
    </div>
</body>
複製代碼

1. 14天入門JavaScript-day three
2. Linux 學習筆記（ day three ）
3. day three
4. 入門筆記 Day five
5. 入門筆記 Day six
6. 入門筆記Day one
7. 入門筆記 Day four
8. Three入門學習筆記整理
9. Java study day three -- simple demo GUI
10. pandas入門筆記
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• Tomcat學習筆記（史上最全tomcat學習筆記）
• YAML 入門教程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。