
HTML&CSS
周清城
修电脑的和写代码的
展开
-
谈谈神奇的iframe
iframe用于在网页中显示网页添加 iframe 的语法其中URL表示要在iframe中显示的内容,可以为网页链接,可以为.html文件,也可以是图片,原创 2016-07-16 17:42:43 · 917 阅读 · 0 评论 -
CSS 巧用 :before和:after
前几天的晚上较全面的去看了下css的一些文档和资料,大部分的样式运用都没什么大问题了,只是有些许较陌生,但是也知道他们的存在和实现的是什么样式。今天主要想在这篇学习笔记中写的也不多,主要是针对:before和:after写一些内容,还有几个小样式略微带过的介绍下。什么是:before和:after? 该如何使用他们?:before是css中的一种伪元素,可用于在某个元素之前插入某些内容。原创 2017-08-15 10:46:30 · 705 阅读 · 0 评论 -
CSS3 线性渐变(linear-gradient)
转载链接:http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用 CSS3 Gradient,我们需要先了解转载 2017-07-27 11:15:44 · 447 阅读 · 0 评论 -
css3中-moz、-ms、-webkit各什么意思
是为了兼容老版本的写法,比较新版本的浏览器一些属性都支持直接写,比如:border-radius。-moz代表firefox浏览器私有属性,-ms代表ie浏览器私有属性,-webkit代表safari、chrome私有属性。现在比较流行的一个概念就是:不太关键的样式,可以不考虑兼容,比如你说的圆角,并不影响内容的显示,如果客户浏览器太旧,就让他看到旧的方形效果就是,一定要看到新效果,只能建原创 2017-07-18 10:10:43 · 1719 阅读 · 0 评论 -
网页在Safari快速滚动和回弹的原理: -webkit-overflow-scrolling : touch;的实现
现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼。要实现这个效果很简单,只需要加一行css代码即可:[css] view plain copy-webkit-overflow-scrolling : touch; 可用以下网页测试:[h转载 2017-07-20 17:12:25 · 637 阅读 · 0 评论 -
一张图理解网页布局
有三个影响HTML元素布局的重要属性:padding(内边距)、margin(外边距)、border(边框)。元素的 padding 控制元素内容 content和元素边框 border 之间的距离。在这儿,我们可以看到绿方块和红方块都位于黄方块之中,但是红方块比绿方块具有更大的 padding。当你加大绿方块的 padding, 它将扩大元素内容和元素原创 2016-10-27 21:09:31 · 643 阅读 · 0 评论 -
编写css规则
一条css规则由应用到文档中的一个或多个元素的指令组成。它包含两个部分:选择器和声明块。h1 {font-size: 1.5em;}其中h1是选择器,花括号里面的是声明块这条规则设置了文档中的任何h1标签的内容大小都为1.5em,这条规则的选择器部分定义了规则应用的对象,它可以是任何XHTML标签,也可以是其他css元素,例如类和ID。声明块定义了规则所做的事情,它包括了花括号之间的原创 2016-09-29 17:13:46 · 1132 阅读 · 0 评论 -
html的em标签引发的一系列思考
在新的 HTML5 工作草案 中: 和 仍旧是表达要素(phrase elements)。但这时的 表示html页面上的强调(emphasized text), 表示句子中的强调(即强调语义)对于 b 和 i 标签是这样定义的: b 元素现在描述为在普通文章中仅从文体上突出的不包含任何额外的重要性的一段文本。例如:文档概要中的关键字,评论中的产品名。或者代表强调的排原创 2016-08-01 15:20:25 · 1891 阅读 · 0 评论 -
关于css样式表里面什么时候用.和#
设置class的时候用的是.,当设置id的时候是#Class可以反复使用,而id在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个id不会出现问题,但在标准上这绝对是错误的使用,而且很可能导致某些浏览器的现实问题。在实际应用的时候,Class可能对文字的排版等比较有用,而ID则对宏观布局和设计放置各种元素较有用。直接上代码:当设置.exam{color:yell原创 2016-07-21 13:45:24 · 3158 阅读 · 2 评论 -
怎么实现图片的圆角展示还有阴影展示
在css样式表里添加.normal {border: solid 2px grey;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;} 然后直接在html文件里令img class="normal"即可以看到图片呈现圆角展示了如果想要添加阴影,则可以在样式表里添加原创 2016-07-27 17:23:17 · 562 阅读 · 0 评论 -
vuejs点击class变化
> html lang="en"> head> meta charset="UTF-8"> title>Vue.js小demotitle> style> .static{ width: 100px; height: 60px; margin:30px auto; display: inline-block;原创 2017-08-15 15:09:39 · 450 阅读 · 0 评论