div+css布局：div是用于存放内容（文字，图片，元素）的容器 css是用于指定放在div中的内容的位置和外观。 使html文件内容减少，html变得简单；内容和样式分离 css可以统一网站风格<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">DOCTYPE：文档类型，用于指定DTD（说明当前这个html文件的版本）< 元素名 backgr...
过渡函数ease-in等实际上是贝塞尔曲线的实现过渡函数还有一个step()函数，用于把整个操作领域划分成同样大小的间隔图解简写，多属性逗号隔开.test{transition: all .2s ease-in .2s; }触发方式伪元素触发:hover :active :checked :focus媒体查询触发@media使用js脚本触发小技巧.test{background-color: blue;transition: background-color .2s ease-in; }.test:hover{background-color: red;transition: background-color .2s ease...
div+css网页标准布局1>div i>DIV全称是division，意为“区块、分割”，DIV标签是一个无意义的容器标签，用于将页面划分出不同的区域 ii>通过DIV将复杂的页面进行细分块，可以将问题细分一个一个解决，所以通过DIV将页面分块是一个关键的工作，也是决定最终效果与质量的前提。2>css i>CSS (Cascading Style Sheet)，中文翻译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。3>div承载的...
<pre>标签的主要作用是预格式化文本。被包围在 pre 标签中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。<pre>标签的一个常见应用就是用来表示计算机的源代码。当然你也可以在你需要在网页中预显示格式时使用它。会使你的文本换行的标签（例如<h>、<p>）绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。原文：http://www.cnblogs.com/m...
1、边框图像<style> div{border:10px solid transparent;width:40px;padding:5px 10px;-moz-border-image:url(pic/border_image_button.png) 0 14 0 14 stretch;-webkit-border-image: url(pic/border_image_button.png) 0 14 0 14 stretch; /* Safari */-o-border-image: url(pic/border_image_button.png) 0 14 0 14 stretch; /* Opera */border-image: url(pic/border_image_button.png) 0 14 0 14 stretch;}s </style> </head>...
一、CSS 概述(了解) *.CSS ： Cascading Style Sheet 层叠样式表 *.CSS 作用就是给HTML页面标签添加各种样式 *.为什么用CSS HTML的缺陷： 1. 不能够适应多种设备 2. 要求浏览器必须智能化足够庞大 3. 数据和显示没有分开 4. 功能不够强大 CSS 优点： 1.使数据和显示分开 2.降低网络流量 3.使整个网站视觉效果一...
首先说first-child与last-child，这两个选择器很容易明白，就是父元素下的第一个子元素和最后一个子元素。而nth-child和nth-last-child则是父元素下指定序号的子元素，甚至第偶数个、奇数个子元素精选样式的制定。/*选择器写法示例*/nth-child(n) //正数第n个子元素nth-last-child(n) //倒数第n个子元素nth-child(odd) //正数下来所有的第偶数个子元素nth-last-child(even) //倒数上去的第奇数个子元素那么nth-of-type与nth-last-...
---恢复内容开始--- 总结并巩固学习css过程中知识点，如不对，欢迎指正，谢谢。 1.css概念 （Cascading Style Sheets）层叠样式表，是用来定义html内容在浏览器中显示的样式。 好处：可以是结构化标准语言（html）与表现标准语言（css）实现分离，方便管理。 2. css语法 选择符+ 声明（{属性+值}） 例如 p{color：blue} 3.css注释 html注释是 <!--注释语句--> ...
<body><div id="a" style="background:#0F0; height:100px; width:100px;"><div id="c" style="background:#FF0; height:50px; width:50px;"></div></div><div id="b" style="background:#900; height:200px; width:200px;"></div></body>#c{ display:none;} #b{display:none;} #a:hover+#b{ display:block;} #a:hover #c{display:block;}c是a的子元素，使用a控制c的样式时，为 #a:hover #c{}b是a兄弟元素，使用a控制b的样式时，要...
在css3中添加属性时，不同浏览器需要加上相应的前缀，如：-moz-是Firefox的前缀，-webkit-是chrome&&Safari的前缀，-o-是opera浏览器的前缀。才能正常的在相应的浏览器中显示出来。css3被划分为模块最重要的模块就是选择器，框模型，背景和边框，文本效果，2D/3D转换，动画，多列布局，用户界面。css边框：(Firefox、Chrome 以及 Safari 支持所有新的边框属性。) 能创建圆角边框，向矩形添加阴影，使用图片来绘制边框； border...
图像与文本的对齐方式：vertical-align:text-top;表示的意思是图像的顶部和同一行的文本对齐，但文本不会超出图片的上边线。vertical-align:middle;表示的意思是图像的中部和同一行的文本对齐。vertical-align:text-bottom;表示的意思是图像的地步和同一行的文本对齐，但是文本不会超出图片的下边线。vertical-align:baseline;其实意思和text-bottom差不多。控制图像与文本的距离：<img src="dd.jpg" hspace=30 />用于设置文字距离...
简单讲，px是绝对单位，em和rem是相对单位。px大家都熟悉，这里主要讨论em和rem。现在有以下一个段落：<p>当斧头来到树林的时候，好多树都说，至少<span>它的手柄</span>是自己人</p>当不给它设置字体大小时，使用默认大小，也就是16px大小，效果如下：emem是指相对于父元素的大小，也就是说对于p和span而言，它的大小都是1em，这里的1em = 16px。我们将span的大小改为2em，效果如下：span{font-size:2em; }可以看到span的大小相对...
CSS部分1. border-bottom属性控制元素下边框的外观 eg: border-bottom:1px solid maroon; P265 下划线 text-decoration:underline; P2672. 若想为合并规则中的某一元素指定单独的样式，不需要拆分合并规则，为其单独建一条规则即可 P2663. 字体颜色 color 字体 font-family 字体大小 font-size 字体粗线 font-weight 是否斜体 font-style原文：http://www.cnblogs.com/giselle527/p/5747507.html
HTML提供了<mark>标签可以让你的文本高亮，这样看起来更加醒目。<mark>标签内的文本会呈现特殊的样式，它和<em>，<strong>一样也是一个带有语义的标签。 代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>高亮文本</title></head><body> <h1>使用mark标签高亮文本</h1> <p>web前端开发需要学习<mark>HTML</mark>、<mark>CSS</mark>和<mark>JS</mark>。</p></body></ht...
无序列表有时我们的工作繁忙，杂事很多，怕忘记，就会把事情一件件列出来，防止忘记。它们的排列顺序对于我们来说并不重要，可以随意调换，我们将它称为无序列表，HTML里用<ul>标签来表示无序列表，列表里的项目则用<li>标签来表示：<ul><li></li><li></li>... </ul> 看一段实例代码：对于的浏览器显示结果是这样的：更多内容学习，请前往http://www.mayacoder.com/lesson/index 原文：http://www.cnblogs.com/malimalihong/p/5672...