html+css第三篇
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第三篇的更多相关文章
- 前端总结·基础篇·CSS（三）补充
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...
- WEBBASE篇： 第三篇， CSS知识1
第三篇, CSS知识1 一,CSS 介绍 CSS: Cascading Style Sheets ---样式表 HTML: 搭建网页结构: CSS: 在网页结构基础上进行网页的美化: 二,CSS的使用 ...
- jq最新前三篇文章高亮显示
/*---------最新前三篇文章高亮显示-------------*/ function latest(){ var color_arr=new Array( "blue", ...
- 2天驾驭DIV+CSS （技巧篇）（转）
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是技巧篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...
- 2天驾驭DIV+CSS （实战篇）（转）
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是实战篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...
- 2天驾驭DIV+CSS （基础篇）（转）
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...
- PHP 性能分析第三篇: 性能调优实战
注意:本文是我们的 PHP 性能分析系列的第三篇,点此阅读 PHP 性能分析第一篇: XHProf & XHGui 介绍 ,或 PHP 性能分析第二篇: 深入研究 XHGui. 在本系列的 ...
- ASP.NET自定义控件组件开发 第一章 第三篇
原文:ASP.NET自定义控件组件开发 第一章 第三篇 第三篇:第一章的完结篇 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开发 第一章 第二篇 接着待 ...
- css,js工具篇
4. web前端开发分享-css,js工具篇 web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emm ...
随机推荐
- 洛谷2120 [ZJOI2007]仓库建设（斜率优化dp）
感觉和锯木厂那个题很类似的. 其实这个题还那个题唯一的区别就是\(dp\)转移式子中的\(f\)变成了\(g\) qwq不想多说了 直接看我的前一篇题解吧qwq #include<iostrea ...
- c++中的数学函数
math.h 数学函数库,一些数学计算的公式的具体实现是放在math.h里,具体有:1 三角函数double sin (double);double cos (double);double tan ( ...
- Mybatis、maven项目中整合log4j （17）
Mybatis.maven项目总整合log4j java 中Mybatis.maven项目总整合log4j 1.pom增加log4j包引用 2.添加 log4j.properties文件 # java ...
- 痞子衡嵌入式：超级下载算法RT-UFL v1.0在IAR EW for Arm下的使用
痞子衡主导的"学术"项目 <RT-UFL - 一个适用全平台i.MXRT的超级下载算法设计> v1.0 版发布近 4 个月了,部分客户已经在实际项目开发调试中用上了这个 ...
- 整理一下在 npmjs.com 上面发布资源包踩过的坑
正常流程就不说了,网上有很多,比如写代码.打包.注册.登录.发布等. 邮箱要激活 在 npmjs.com 上面注册账号的时候需要填写邮箱,然后登录网址的时候并没有强制要求你去邮箱激活. 但是到了发布资 ...
- 用例圖學習實例 / Learning Use Case Diagram by Examples
什麼是用例圖? 用例描述了一個演員和感興趣的系統之間的一系列交互,以達到某種特定目標,並由某種觸發事件引發.用例滿足需求或為演員解決問題.用例圖包含一組用例,可以通過從每個角色的不同角度講述系統將如何 ...
- Java：HashTable类小记
Java:HashTable类小记 对 Java 中的 HashTable类,做一个微不足道的小小小小记 概述 public class Hashtable<K,V> extends Di ...
- OO_JAVA_JML系列作业_单元总结
OO_JAVA_JML系列作业_单元总结 (1)梳理JML语言的理论基础.应用工具链情况 简单梳理 以下三者是jml规格里的核心,对一个方法功能和属性的限制: requires子句:规定方法的前置条件 ...
- 不可错过的stm32单片机直流电机驱动与测速详解
stm32直流电机驱动与测速 说实话就现在的市场应用中stm32已经占到了绝对住到的地位,51已经成为过去式,32的功能更加强大,虽然相应的难度有所增加,但是依然阻止不了大家学习32的脚步,不说大话了 ...
- ES6-变量的解构赋值复习+学习
ES6------变量的解构赋值 由于之前学过ES6的解构赋值,但是只是略看了一点网上的视频,所以今天就看了看ES6对这一部分的详细介绍,然后做一个总结的笔记. 首先,先大概说一下什么是变量的解构赋值 ...