HTML+CSS技术文档
chunchun1230
这个作者很懒,什么都没留下…
展开
-
!important用法
!important,作用是提高指定样式规则的应用优先权(优先级)。语法格式{ cssRule !important },即写在定义的最后面,例如:box{color:red !important;}。 在CSS中,通过对某一样式声明! important ,可以更改默认的CSS样式优先级规则,使该条样式属性声明具有最高优先级。浏览器识别ie7及ie7+,firefox,c...原创 2019-12-19 10:09:55 · 198 阅读 · 0 评论 -
让div撑满整个屏幕的方法(css)
在body只有一个div的时候,可以通过这样的方式让div撑满整个屏幕。1.给div设置定位。 复习一下—— css中position有五种属性: static:默认值,没有定位 absolute:绝对定位,相对于父级元素进行定位 relative:相对定位 fixed:固定定位,相对于浏览器窗口进行定位 inherit:从父元素继承定位信息 除了默认值stat...原创 2018-05-09 09:51:20 · 38353 阅读 · 0 评论 -
HTML页面跳转的方法
1、html中使用meta中跳转,通过meta可以设置跳转时间和页面[html] view plain copy<head> <!--只是刷新不跳转到其他页面 --> <meta http-equiv="refresh" content="5"> <!--定时转到其他页面 --> <meta http-equiv="refre转载 2018-04-20 10:55:16 · 2717 阅读 · 0 评论 -
前端HTML程序必须加的头部HTML代码
以最高IE版本渲染网站[html] view plain copy<meta http-equiv="X-UA-Compatible" content="IE=edge"> 延伸阅读:http://zccst.iteye.com/blog/2162187设置渲染引擎360浏览器[html] view plain copy<!-- Set render engine for 36...转载 2018-04-13 11:11:00 · 2156 阅读 · 0 评论 -
CSS控制文字,超出部分显示省略号
p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。实现方法:overflow: hidde原创 2017-11-20 11:47:12 · 217 阅读 · 0 评论 -
iconfont字体图标的使用
一、准备工作 1、首先,进入阿里的矢量图标库,在这个图标库里面可以找到很多图片资源,当然了需要登录才能下载或者使用,用GitHub账号或者新浪微博账号登录都可以 2、登录以后,可以搜索自己需要的资源,然后直接下载使用,或者建立图标库然后再使用,例如这里以删除的图标为例 a) 搜索删除图标 b) 选择需要的图标,然后可以执行三种操作:添加入库、收藏转载 2017-09-20 16:16:43 · 3734 阅读 · 0 评论 -
利用伪元素和CSS3实现鼠标移入下划线向两边展开效果
一、思路:将伪元素:before和:after定位到元素底部中间,设置宽度从0变成100%达到目的。二、实现:1、首先定义一个块状元素(行内元素没有宽高)并修改样式为一个背景色为浅灰色的矩形,设置相对定位。HTML代码CSS样式#underline{ width: 200px; height: 50px; background: #ddd; marg转载 2017-09-20 08:53:18 · 1265 阅读 · 0 评论 -
CSS中空格的写法
字符以及HTML实体描述以及说明 这是我们使用最多的空格,也就是按下space键产生的空格。在HTML中,如果你用空格键产生此空格,空格是不会累加的(只算1个)。要使用 html实体表示才可累加。为了便于记忆,我总是把这个空格成为“牛逼(nb)空格(sp – space)”,虽然实际上并不牛逼。该空格占据宽度受字体影响明显而强烈。在i转载 2017-09-27 11:15:40 · 16777 阅读 · 0 评论 -
CSS之伪元素和伪类
1. 首先弄清楚伪元素和伪类的区别:w3c上是这么说的:CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于向某些选择器设置特殊效果。 伪类就像是一个类名,它只是把你想要的元素区分出来,那些元素本身就存在,而伪元素则表现得像是“新建了一个元素”一样,以这样的形式去寻找你想要的内容。 伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果原创 2017-09-19 09:26:42 · 572 阅读 · 0 评论 -
CSS用border绘制三角形
使用border绘制三角形的思路,就是border尺寸设置一个较大的值,元素自身的宽高设置为0,全部由边线占据,这样每边就会显示为四分之一块的三角形。这样不借助图片,可以直接绘制出三角形了。 一个栗子:DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm转载 2017-09-19 08:45:23 · 981 阅读 · 0 评论 -
利用@media screen实现网页布局的自适应
利用@media screen实现网页布局的自适应优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值1280分辨率以上(大于1200px)@media screen and (min-width:1200px){ #page{ width: 1100px; }#c转载 2017-09-18 16:25:14 · 386 阅读 · 0 评论 -
CSS实现父元素半透明,子元素不透明
CSS实现父元素半透明,子元素不透明。 很久以来大家都习惯使用opacity:0.5在新式浏览器里实现半透明,而对IE较旧的版本使用filter:Alpha(opacity=0.5)的滤镜来实现半透明。但是这样实现的半透明有个问题,那就是这个属性会被子元素所继承。如下代码,则子元素中也将是半透明效果,无论你将子元素的半透明值重置还是如何都不会改变这一情况。.parent{opaci原创 2017-09-26 09:16:56 · 8294 阅读 · 0 评论 -
writing-mode属性
writing-mode属性 最初只是ie中的属性,只有ie支持,现在在css3中谷歌,火狐也开始支持。所以使用的时候就需要记住两套不同的语法,ie的私有属性和css3的规范属性如果只需要兼容到ie8+就可以只使用css3的规范属性就可以了css3:writing-mode:horizontal-tb;//默认:水平方向,从上到下writing-mode: vert原创 2017-08-28 20:51:21 · 1724 阅读 · 0 评论 -
移动页面中的meta标签
一、 网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放。 name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> width原创 2017-08-18 16:46:57 · 285 阅读 · 0 评论 -
一劳永逸的搞定 flex 布局
寻根溯源话布局一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐,然而很快就失望的发现 CSS 中并不存在 float: center 的写法,那么 text-align: center、verticle-ali转载 2017-07-27 09:23:04 · 347 阅读 · 0 评论 -
rgba()和opacity的区别
RGBA和Opacity都和透明度有关,但是它们又有什么区别呢?也许有的小伙伴一时也想不出来,不要紧,悄悄地往下看。先来简单看看RGBA:语法rgba(r,g,b,a)取值说明R:红色值。正整数 | 百分数G:绿色值。正整数 | 百分数B:蓝色值。正整数 | 百分数A:Alpha透明度。取值0~1之间。正整数为十进制0~255之间的任意值,百分数转载 2017-07-19 09:06:31 · 785 阅读 · 0 评论 -
Normalize.css与CSS reset区别
Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其转载 2017-07-18 19:12:05 · 336 阅读 · 0 评论