css reset 原则：

但凡是浏览默认的样式，都不要使用。

body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;font-size:12px;}

ol,ul{margin:0;padding:0;list-style:none;}

a{text-decoration:none;}

img{border:none;}

块的特征

    1、默认独占一行

    2、没有宽度时，默认撑满一排

    3、支持所有css命令

内嵌(内联、行内)的特征

    1、同排可以继续跟同类的标签

    2、内容撑开宽度

    3、不支持宽高

    4、不支持上下的margin和padding

    5、代码换行被解析

display：block        显示为块

使内联元素具备块属性标签的特性

display：inline        显示为内嵌

使行块属性标签具备内联元素的特性

Inline-block的特点和问题

特性：

1、块在一行显示；

2、行内属性标签支持宽高；

3、没有宽度的时候内容撑开宽度

问题：

1、代码换行被解析；

2、ie6 ie7 不支持块属性标签的inline-block;

a、分析结构（div 包一排a）

b、a标签支持宽高，并且在一排显示

c、有hover效果

d、当前状态不能点！

cursor 指针样式 （规定要显示的光标的类型）

cursor：pointer | text | move ……

cursor:url(hand.cur),pointer;

前端规范

1、所有书写均在英文半角状态下的小写；

2、id，class必须以字母开头；

3、所有标签必须闭合；

4、html标签用tab键缩进；

5、属性值必须带引号；

6、<!-- html注释 -->

7、/* css注释 */

8、ul,li/ol,li/dl,dt,dd拥有父子级关系的标签；

9、p,dt,h标签  里面不能嵌套块属性标签；

10、a标签不能嵌套a；

11、内联元素不能嵌套块；

day01-常见标签

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}

ol,ul{list-style:none;padding:0;margin:0;}

a{text-decoration:none;}

img{border:none;}

/* 默认样式重置 (css reset)  */

</style>

</head>

<body>

<a href="#">a标签（链接，下载，锚点）</a>

<img src="1.png" alt=""/>

<a href="#"><img src="1.png" alt=""/></a>

<span>区分样式</span>

<strong>强调（粗体）</strong>

<em>强调（斜体）</em>

<!--

内联，内嵌，行内属性标签：

1、默认同行可以继续跟同类型标签；

块属性标签：

1、默认独占一行显示；

 -->

<p>段落</p>

<div>块</div>

<h1>标题1</h1>

<h6>标题6</h6>

<ol>

    <li>列表项</li>

  <li>列表项</li>

  <li>列表项</li>

</ol>

<ul>

    <li>列表项</li>

  <li>列表项</li>

  <li>列表项</li>

</ul>

<dl>

    <dt>定义列表标题</dt>

  <dd>定义列表项</dd>

  <dd>定义列表项</dd>

  <dd>定义列表项</dd>

</dl>

</body>

</html>

day02-常见标签-默认样式重置

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}

ol,ul{list-style:none;padding:0;margin:0;}

a{text-decoration:none;}

img{border:none;}

/* 默认样式重置 (css reset)  */

</style>

</head>

<body>

<a href="#">a标签（链接，下载，锚点）</a>

<img src="1.png" alt=""/>

<a href="#"><img src="1.png" alt=""/></a>

<span>区分样式</span>

<strong>强调（粗体）</strong>

<em>强调（斜体）</em>

<p>段落</p>

<div>块</div>

<h1>标题1</h1>

<h6>标题6</h6>

<ol>

    <li>列表项</li>

  <li>列表项</li>

  <li>列表项</li>

</ol>

<ul>

    <li>列表项</li>

  <li>列表项</li>

  <li>列表项</li>

</ul>

<dl>

    <dt>定义列表标题</dt>

  <dd>定义列表项</dd>

  <dd>定义列表项</dd>

  <dd>定义列表项</dd>

</dl>

</body>

</html>

day03-块和内嵌

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}

ol,ul{list-style:none;padding:0;margin:0;}

a{text-decoration:none;}

img{border:none;}

/* 默认样式重置 (css reset)  */

</style>

</head>

<body>

<a href="#">a标签（链接，下载，锚点）</a>

<img src="1.png" alt=""/>

<a href="#"><img src="1.png" alt=""/></a>

<span>区分样式</span>

<strong>强调（粗体）</strong>

<em>强调（斜体）</em>

<!--

内联，内嵌，行内属性标签：

1、默认同行可以继续跟同类型标签；

块属性标签：

1、默认独占一行显示；

 -->

<p>段落</p>

<div>块</div>

<h1>标题1</h1>

<h6>标题6</h6>

<ol>

    <li>列表项</li>

  <li>列表项</li>

  <li>列表项</li>

</ol>

<ul>

    <li>列表项</li>

  <li>列表项</li>

  <li>列表项</li>

</ul>

<dl>

    <dt>定义列表标题</dt>

  <dd>定义列表项</dd>

  <dd>定义列表项</dd>

  <dd>定义列表项</dd>

</dl>

</body>

</html>

-块和内嵌特性

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}

ol,ul{list-style:none;padding:0;margin:0;}

a{text-decoration:none;}

img{border:none;}

/* 默认样式重置 (css reset)  */

/*

内联，内嵌，行内属性标签：

    1、默认同行可以继续跟同类型标签；

    2、内容撑开宽度

    3、不支持宽高

    4、不支持上下的margin和padding

    5、代码换行被解析

块属性标签：

    1、默认独占一行显示；

    2、没有宽度时，默认撑满一排

     3、支持所有css命令

 */

 span,div{background:blue; width:100px; height:100px;}

</style>

</head>

<body>

<span>区分样式</span>

<span>区分样式</span>

<span>区分样式</span>

<div>块</div>

<div>块</div>

<div>块</div>

</body>

</html>

块和内嵌转换

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}

ol,ul{list-style:none;padding:0;margin:0;}

a{text-decoration:none;}

img{border:none;}

/* 默认样式重置 (css reset)  */

span,div{background:blue; width:100px; height:100px;}

span{display:block;}

div{display:inline;}

/*

display:block;  显示为块

display:inline;  显示为内嵌

 */

</style>

</head>

<body>

<span>区分样式</span>

<span>区分样式</span>

<span>区分样式</span>

<div>块</div>

<div>块</div>

<div>块</div>

</body>

</html>

翻页

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}

ol,ul{list-style:none;padding:0;margin:0;}

a{text-decoration:none;}

img{border:none;}

/* 默认样式重置 (css reset)  */

.pages{ height:60px; background:#e8e8e8; width:600px; margin:90px auto; text-align:center;}

.pages a{ background:#fff; border:1px solid #cdcdcd;color:#333333; padding:0 8px 0 9px; height:28px; line-height:28px; display:inline-block;}

.pages a:hover{border-color:red;color:red;}

.pages .active{ font-weight:bold; background:#fcf9ea;cursor:text;}

.pages .active:hover{border-color:#cdcdcd;color:#333333;}

body{height:1500px; cursor:url(hand.cur),pointer;}

</style>

</head>

<body>

<div class="pages">

    <a href="#">上一页</a>

  <a href="#">1</a>

  <a href="#">2</a>

  <a href="#" class="active">3</a>

  <a href="#">4</a>

  <a href="#">15</a>

  <a href="#">211</a>

  <a href="#">255…</a>

  <a href="#">下一页</a>

</div>

</body>

</html>

效果

html+css第三篇的更多相关文章

  1. 前端总结·基础篇·CSS（三）补充

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...

  2. WEBBASE篇： 第三篇， CSS知识1

    第三篇, CSS知识1 一,CSS 介绍 CSS: Cascading Style Sheets ---样式表 HTML: 搭建网页结构: CSS: 在网页结构基础上进行网页的美化: 二,CSS的使用 ...

  3. jq最新前三篇文章高亮显示

    /*---------最新前三篇文章高亮显示-------------*/ function latest(){ var color_arr=new Array( "blue", ...

  4. 2天驾驭DIV+CSS （技巧篇）（转）

     这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是技巧篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...

  5. 2天驾驭DIV+CSS （实战篇）（转）

     这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是实战篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...

  6. 2天驾驭DIV+CSS （基础篇）（转）

    这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...

  7. PHP 性能分析第三篇: 性能调优实战

    注意:本文是我们的 PHP 性能分析系列的第三篇,点此阅读 PHP 性能分析第一篇: XHProf & XHGui 介绍 ,或  PHP 性能分析第二篇: 深入研究 XHGui. 在本系列的 ...

  8. ASP.NET自定义控件组件开发 第一章 第三篇

    原文:ASP.NET自定义控件组件开发 第一章 第三篇 第三篇:第一章的完结篇 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开发 第一章 第二篇 接着待 ...

  9. css,js工具篇

    4. web前端开发分享-css,js工具篇   web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emm ...

随机推荐

  1. 洛谷T31018 经典题丶改（LCT+离线）

    真的是一个大好题啊! QWQ首先我们考虑这种问题,如果直接在线做,估计应该是做不了,那我们是不是可以直接考虑离线. 将所有询问都按照\(r\)来排序. 然后依次加入每条边,计算\(a[i]<=n ...

  2. 【UE4】GAMES101 图形学作业2：光栅化和深度缓存

    总览 在上次作业中,虽然我们在屏幕上画出一个线框三角形,但这看起来并不是那么的有趣.所以这一次我们继续推进一步--在屏幕上画出一个实心三角形,换言之,栅格化一个三角形.上一次作业中,在视口变化之后,我 ...

  3. 微信小程序的发布流程

    一.背景 在中大型的公司里,人员的分工非常仔细,一般会有不同岗位角色的员工同时参与同一个小程序项目.为此,小程序平台设计了不同的权限管理使得项目管理者可以更加高效管理整个团队的协同工作 以往我们在开发 ...

  4. spring cloud feign的基本使用

    在上一节,我们学会了如何使用ribbon进行来进行服务之间的调用,但是那种需要通过RestTemplate来进行调用而且当参数比较多时,使用起来就比较麻烦.那么有没有一种调用远程方法(别的服务)就像调 ...

  5. 2021.10.10考试总结[NOIP模拟73]

    T1 小L的疑惑 对于\(P_i\),如果所有比\(P_i\)小的数加起来也达不到\(P_i-1\),那么值域肯定不连续.否则设原来值域最大值为\(mx\),则\(P_i\)会让值域最大值增致\(mx ...

  6. VS2019、Qt5.12及QGis3.16开发常见问题汇总

    在C++.Qt软件开发过程中,常常遇到一些编译错误或警告:本文将VS2019.Qt5.12.10和QGis3.16.10的二次开发过程常见的问题做了整理,供大家参考,也便于日后查阅.该内容分为四部分: ...

  7. 难搞的C语言指针你搞懂了多少

    C语言指针说难不难但是说容易又是最容易出错的地方,因此不管是你要做什么只要用到C指针你就跳不过,今天咱们就以 十九个例子来给大家简单的分析一下指针的应用,最后会有C语言视频资料提供给大家更加深入的参考 ...

  8. linux shell 基本语法之快速上手shell编程

    从程序员的角度来看, Shell本身是一种用C语言编写的程序,从用户的角度来看,Shell是用户与Linux操作系统沟通的桥梁.用户既可以输入命令执行,又可以利用 Shell脚本编程,完成更加复杂的操 ...

  9. 字符串匹配（kmp+trie+aho-corasic automaton+fail tree）

    目录 kmp 那么怎么快速求最长前缀后缀呢 trie aho-corasic automaton fail tree kmp 对于一个字符串\(s_{0\dots n}\),称\(s_{0\dots ...

  10. picGo+gitee搭建Obsidian图床，实现高效写作

    1 picGo安装 [picgo下载链接](https://molunerfinn.com/PicGo/) 选择安装目录,可以选择安装在D:\Program Files 然后点击安装即可 2. git ...