入门笔记 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 入门教程