HTML & CSS
文章平均质量分 92
PeakXin
Always keep a learning heart.
展开
-
CSS背景线性渐变
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用 CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核,主要有 Mozilla(Firefox,Flock等)、WebKit(Safari、Chrome等)、Opera(Opera浏览器)、转载 2015-05-12 10:16:28 · 1708 阅读 · 0 评论 -
解决子级用CSS float浮动 而父级div没高度不能自适应高度
当一个div的子级用了float浮动时,这个div的高度就不受子级div高度的影响了。 如:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父div不自适应高度实例</title></head><style> .father { width:500px; border:1px soli原创 2017-01-23 14:41:01 · 1771 阅读 · 0 评论 -
html打印A4长宽设置
测试使用chrome浏览器 1、边距为无 <style>/* 布局纵向 */.a4-endwise{ width: 1150px; height: 1627px; border: 1px #000 solid; }/* 布局横向 */.a4-broadwise{ width: 1627px; height: 1149px; border: 1px #0原创 2017-05-15 13:57:57 · 31720 阅读 · 8 评论 -
打印Html页面自动分页
在想要分页的地方添加一行代码即可<div style="page-break-after: always;"></div>添加后用chrome浏览器用js代码调用打印function preview() { bdhtml=window.document.body.innerHTML;//获取当前页的html代码 sprnstr="<!--startprint-原创 2017-05-22 15:03:09 · 21263 阅读 · 0 评论 -
HTML meta 设置跳转页面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="refresh" content="3; url=http://www.baidu.com"> <title>3秒后跳转到百度页面</title></head><body></body></html>原创 2015-12-16 10:26:11 · 719 阅读 · 0 评论 -
HTML5 语法
HTML5 语法HTML5语法规则DOCTYPE及字符编码大小写都可以布尔值省略号可以进行省略的标签可以进行省略的标签1、不允许写的结束符的标签:area、basebr、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr 2、可以省略结束符的标签:li、dt、dd、p、rt、optgroup、o原创 2015-06-30 22:26:35 · 603 阅读 · 0 评论 -
HTML 常用标签
1、段落标签2、(h1、h2、h3、h4、h5、h6)标题标签3、加强语气标签——斜体4、加强语气标签——粗体5、为文字单独设置样式6、引用标签,给标签内容自动添加双引号(" ")7、引用标签,引用长文本8、换行(xhtml1.0写法:,html4.01写法:)9、 空格10、添加水平线(xhtml1.0写法:,html4.01写法:)11、地址信原创 2015-05-31 00:31:33 · 450 阅读 · 0 评论 -
HTML5 Placeholder实现input背景文字提示效果
这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示:这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的。但HTML5给我们提供了新的纯HTML的实现方式,不需要任何的JavaScript,只需要在你的input文本框的标记上添加HTML5规范里新增的placeholder属性,然后在属性值里输入你需要的提示信息。语法基本是这个样子:转载 2015-05-12 12:41:37 · 1226 阅读 · 0 评论 -
CSS实现父级元素属性display为block的元素垂直和水平居中的三种方法
先上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title> <style> .box { width: 100%; height: 500px; background: gr原创 2017-11-13 16:41:32 · 15127 阅读 · 0 评论 -
HTML 实体与标签
HTML 实体在 HTML 中,某些字符是预留的。在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。字符实体类似这样:&entity_name;或者&#entity_number;如需显示小于...原创 2018-03-09 09:56:46 · 997 阅读 · 0 评论 -
对于默认字体最小为12px解决方法
谷歌浏览器默认字体大小小于12px就不好用了,字体还是12px。 为了兼容所有的浏览器,使用缩放方式使字体变小。 比如以字体大小12px为基数,缩放90%就是10.8px 代码为:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>demo</title></head><style>.normal-f原创 2016-10-20 17:16:06 · 11239 阅读 · 0 评论 -
CSS 中样式覆盖优先顺序
我们在日常开发,总会遇到样式覆盖问题。有时候修改后的样式,并没有根据自己的意愿显示出来。这里就可能跟样式覆盖优先顺序有关。1、首先,层叠优先级是 内联样式 > 内部样式表 > 外部样式表 下面以具体实例说明 代码: test.html文件<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="原创 2016-06-12 17:20:11 · 8701 阅读 · 0 评论 -
CSS3 学习总结
一、边框:1、圆角效果:border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */ 2、阴影效果:box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];参数介绍: X轴偏移量:必需原创 2015-07-20 16:47:10 · 499 阅读 · 0 评论 -
CSS 选择器
这里就不详细记录1、标签选择器2、类选择器3、ID选择器4、子选择器:即大于符号(>),用于选择指定标签元素的第一代子元素。5、包含(后代)选择器:即加入空格,用于选择指定标签元素下的后辈元素。总结:>作用于元素的第一代后代,空格作用于元素的所有后代。6、通用选择器:使用一个(*)号指定,它的作用是匹配html中所有标签元素7、伪类选择器:它允许给html不存在的标签(标签原创 2015-06-01 22:22:57 · 502 阅读 · 0 评论 -
CSS 的继承性、层叠性、特殊性、重要性
1、继承性:继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签。2、特殊性:标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继原创 2015-06-04 21:49:22 · 580 阅读 · 0 评论 -
响应式布局 简单案例
用CSS3-Media Query 实现1、外联样式 (当屏幕宽度小于480像素时,背景颜色变为红色)2、内置样式 (当屏幕宽度大于480像素时,背景颜色变为蓝色)@media screen and (min-width:480px){body{background:blue;}}转载 2015-06-25 15:08:14 · 760 阅读 · 0 评论 -
CSS布局模型
CSS包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。在网页中,元素有三种布局模型:1、流动模型(Flow)2、浮动模型 (Float)3、层模型(Layer)一、流动模型先来说一说流动模型,流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。流动布局模型具有2个比较典型的特征转载 2015-06-10 16:54:25 · 432 阅读 · 0 评论 -
CSS 文字、段落排版
1、字体:现在一般网页喜欢设置“微软雅黑”,如下代码:body{font-family:"Microsoft Yahei";}或body{font-family:"微软雅黑";}注意:第一种方法比第二种方法兼容性更好一些。2、字号、颜色:body{font-size:12px;color:#666}3、粗体:p span{font-weight:bold原创 2015-06-10 15:50:06 · 775 阅读 · 0 评论 -
CSS盒模型
一、元素分类:html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。常用的块状元素有:、、...、、、、、、 、常用的内联元素有:、、、、、、、、、、常用的内联块状元素有:、二、块级元素:块级元素特点:1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)2、元素的高度、原创 2015-06-10 15:52:38 · 302 阅读 · 0 评论 -
CSS代码缩写
盒模型代码简写还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左。具体应用在margin和padding的例子如下:margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/通常有下面三种缩写方法:转载 2015-06-10 17:21:46 · 695 阅读 · 0 评论 -
CSS 样式设置小技巧
水平居中设置-行内元素我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的。如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。水平居中设置-定宽块状元素当被设置元素为块状元素时用 text-align:center 就不起作用了,这时也分两种情况:定宽转载 2015-06-15 13:07:56 · 514 阅读 · 0 评论 -
CSS 单位和值
颜色值在网页中的颜色设置是非常重要,有字体颜色(color)、背景颜色(background-color)、边框颜色(border)等,设置颜色的方法也有很多种:1、英文命令颜色前面几个小节中经常用到的就是这种设置方法:p{color:red;}2、RGB颜色这个与 photoshop 中的 RGB 颜色是一致的,由 R(red)、G(green转载 2015-06-15 11:27:37 · 561 阅读 · 0 评论 -
CSS3 box-sizing 属性 ——使用box-sizing对盒子模型布局
我们在写html页面的时候,通常会给盒子模型设置高度和宽度,例如我们写一个宽度为200px高度为100px的盒子。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title&原创 2018-07-18 17:25:54 · 907 阅读 · 0 评论