css
文章平均质量分 72
hdchangchang
这个作者很懒,什么都没留下…
展开
-
防止微信、wap浏览器缓存
静态页面防止缓存:1、引入的css 、js文件名 添加时间戳 --防止js、css缓存2、<header>添加代码: --防止页面缓存<meta http-equiv="Expires" CONTENT="0" /> <meta http-equiv="Cache-Control" CONTENT="no-cache" /> <meta http-equiv="Pragma" CONTENT="no-cache" />3...原创 2020-11-09 15:53:23 · 456 阅读 · 0 评论 -
display:inline-block
display:inline-blockdisplay:inline-block感觉与display:table-cell有些相似,例如对内部元素的包裹性。但是,由于display:inline-block最大的不同就是其没有父元素的匿名包裹特性,这使得display:inline-block属性的使用非常自由,可与文字,图片混排,可内嵌block属性元素,可以可以置身于inline水平的元素转载 2013-12-16 15:50:16 · 5050 阅读 · 2 评论 -
display:inline-block/text-align:justify下列表的两端对齐布局
转自:http://www.zhangxinxu.com/wordpress/?p=1514一、何为列表元素的两端对齐布局首先说说何为两端对齐。下面这个截图是word中一段英文左对齐的右边缘截图:可以看到右侧是参差不起的,现在,选中文字,点击word上方的两端对齐按钮,如下图:结果文字的右边缘就成了这样:右侧完全对齐了,也就是整篇文字全部沿着左边缘和右边缘对转载 2013-12-16 16:37:28 · 3621 阅读 · 0 评论 -
min-width() ie6
如果一个站是宽屏的,你左右拖动浏览器的窗口网站宽度会随着窗口的大小而改变,而浏览器窗口宽度减小到一定程度后就会出现下边的滚动条,网站宽度就不会再减小了,我们知道这一简单的功能用css的min-width就很容易能实现,但不幸的是,我们用户很多的IE6不支持这个非常方便的属性,怎么办呢,我们只要在网页设计时加上下面的css语句就能解决:方法一:height:auto!important;转载 2013-07-12 15:35:31 · 967 阅读 · 0 评论 -
CSS3 - Transition属性详解
今天看到芒果小站http://www.mangguo.org 用到 Transition ,效果很棒,自己在网上查了一下:Transition属性主要是用来对某个CSS属性的变化过程进行控制,官方的介绍是”CSS Transitions allow property changes in CSS values to occur smoothly over a specified duratio转载 2013-07-12 15:14:53 · 1134 阅读 · 0 评论 -
好吧,CSS3 3D transform变换,不过如此!
一、写在前面的秋裤早在去年的去年,我就大肆介绍了2D transform相关内容。看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了~~看看下图女帝的动作以及神情,就可以知道名字带D的家伙的厉害!最近折腾iPad的一些东西,有一些3D效果的交互。有些事情,总以为是遥远的未来,谁知真正发生的时候说来就来,比如说一颗想结婚的...转载 2014-01-10 17:23:00 · 2478 阅读 · 0 评论 -
记录一些创建图标的方法
1. 利用css创建箭头: * {padding:0px;margin:0px;font: 12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;} .jt {position:relative } .jt em,原创 2014-03-07 10:54:19 · 1182 阅读 · 0 评论 -
网页字体设置你了解吗?
转自:http://ued.ctrip.com/blog/?p=3589以前做项目的时候就依葫芦画瓢的设置 { font-family:arial,”microsoft yahei”,simsun,sans-self; } 等类似的字体,然而当更多的设备和系统出现后,以前这样的设置已不能满足网页在各设备上的显示需求。就拿最简单的宋体(simsun)来说吧,在Windows系统下转载 2014-12-03 16:46:59 · 959 阅读 · 0 评论 -
css布局-多行文字垂直居中
场景一:父元素 高度固定,如何使其中的文字垂直居中?代码: *{padding: 0;margin:0;font-size: 12px;} div{float: left;width: 200px;height:200px;margin: 10px;border:1px solid blue; line-height: 200px;}原创 2015-07-28 16:59:25 · 29718 阅读 · 3 评论 -
table-layout:fixed 应用
参考:http://www.zhangxinxu.com/wordpress/2014/04/%E8%87%AA%E9%80%82%E5%BA%94%E8%A1%A8%E6%A0%BC-%E5%AD%97%E7%AC%A6%E6%8D%A2%E8%A1%8C-%E6%BA%A2%E5%87%BA%E7%82%B9%E7%82%B9%E7%82%B9-table-text-overflow-elli原创 2015-07-24 17:02:32 · 13510 阅读 · 1 评论 -
css3 渐变
转自:http://www.qianduan.net/understand-the-css3-gradient.html为了显示一个渐变而专门制作一个图片的做法是不灵活的,而且很快会成为一种不好的做法。但是遗憾的是,截至写这篇文章,可能还必须这样做,但是希望不会持续太久。多亏Firefox 和Safari/Chrome,我们现在可以使用最少的努力实现强大的渐变。在本文中,我们将展示CS转载 2013-01-21 14:21:18 · 1563 阅读 · 0 评论 -
用js控制样式
可以这样:var obj = document.getElementById("ddd");obj.style.border = "1px solid red";原创 2014-10-17 17:17:30 · 1448 阅读 · 2 评论 -
【干货】前端rem单位的正确使用姿势
写这篇文章是因为自己被rem这个坑绊过脚,因此特意去研究了下rem这个单位。简单阐述下px、em、rem之前的关系(其实网上很多,我这里稍微提一下)。先抛出一个问题:为什么要选择rem?px:像素是相对于显示器屏幕分辨率而言的相对长度单位。pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和rem。em:继承转载 2017-03-16 15:55:24 · 2876 阅读 · 0 评论 -
前端开发-移动端(3)- 响应式布局
media 媒体类型现在支持的媒体类型有all、print、screen、speedmedia 媒体特性注意:媒体特性中的横竖屏检测是根据可视区域宽度和高度的大小比例来确定,所以当页面中存在文本输入框时,键盘会弹出,屏幕可视区域会改变,所以orientation会出错。原创 2017-04-25 16:41:02 · 341 阅读 · 0 评论 -
前端开发-移动端(2)- 自适应屏幕
移动端自适应屏幕方法:1、百分比2、viewport利用js设定(function(){ var w = window.screen.width; var targetW = 320; var scale = w/targetW; //当前尺寸/目标尺寸 var meta = document.createElement("meta"); meta.name = "viewp原创 2017-03-20 10:33:03 · 493 阅读 · 0 评论 -
display:table-cell
背景: 固定高度的div ,里面的文本p内容可变,如何实现其垂直居中?CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用。但是在CSS中还有一个display属性能够模拟<table>,所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意,display:table和display:tab转载 2013-07-12 15:30:37 · 13149 阅读 · 4 评论 -
上中下三栏自适应100%高度
1.这个用相对布局很容易实现,但是在ie6、ie7 下面右侧有两个滚动条,还不能固定头部和底部的高度无标题文档html {height:100%}body {height:100%}* {padding:0px; margin:0}#header {height:10%;原创 2013-07-12 15:11:16 · 497 阅读 · 0 评论 -
CSS 中文字体 Unicode 编码方案
转:在 CSS 中使用中文字体通常直接设置字体名称,比如设置字体为宋体:font-family:’宋体’;但因此产生的一个问题是,如果CSS 编码有误,会导致页面加载后 CSS 中的中文字体乱码,请看下图所示:通常会采用对中文字体进行 Unicode 编码的方式来解决这个危险的问题。比如字符“宋体”经过 Unicode 编码后为 “\5b8b\4f53″。以淘宝为例:fon转载 2013-07-12 15:16:57 · 791 阅读 · 0 评论 -
css border制作三角箭头
css代码:.cor1{border-width:20px;border-color:#f3961c transparent transparent transparent;_border-color:#f3961c red red red;_filter:chroma(color=red);left:60px; bottom:-40px;}Chroma属性可以设置一个对原创 2013-01-09 16:03:18 · 1785 阅读 · 0 评论 -
css3 box-shadow
box-shadow 特效1:单边阴影参考:http://www.w3cplus.com/node/210box-shadow 特效2:各种立体效果http://www.w3cplus.com/solution/css3box/css3box.htmlhttp://www.w3cplus.com/css3/box-drop-down-shadow-with-css3原创 2013-07-12 15:39:14 · 756 阅读 · 0 评论 -
纯 CSS 单行文本溢出追加省略号
转自:http://www.mangguo.org/text-overflow-ellipsis/样式代码,四个属性都是必须的,并且宽度必须设在当前容器上,父容器定宽无效:.box { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}示例1:转载 2012-11-02 14:50:13 · 7949 阅读 · 0 评论 -
10个非常有用的CSS hack和技术
转自:http://www.qianduan.net/10-useful-css-hacks-and-technique.html好吧,既然你看了这篇文章,那么我猜你了解CSS并且知道它能为你做什么。但是一些很有用的技术对很多开发人员来说仍然比较隐秘,所以本文中,让我们看看10个肯定能提高你的设计的CSS技术吧1 – 跨浏览器的inline-block转载 2012-12-07 16:47:13 · 1087 阅读 · 0 评论 -
html的 nofollow external
网上查找的信息,自己做个笔记主要是告诉蜘蛛 不要抓取该页的链接内容这个是不要抓取该链接 nofollow标签是一两年前由Google领头新创的一个标签,目的是尽量减少垃圾链接对搜索引擎的影响。这个标签的意义是告诉搜索引擎这个链接不是经过作者自己编辑的,所以这个链接不是一个信任票。这个标签通常是用在博客的评论或论坛帖子中,因为这些地方是最多垃圾链接出现的地方。现在转载 2013-01-04 15:02:30 · 566 阅读 · 0 评论 -
IE 浏览器条件注释详解(html中的注释)
1. 只允许 IE 解释执行IE 5 之后版本加入了对条件注释的支持,所以 IE 5 以上方可使用注释。以上代码当浏览器为 IE 时,加载样式表 style.css,当然代码可以为 CSS、HTML、JavaScript 等多种。2. 只允许特定版本 IE 解释执行可以通过注释,只允许 IE 5、IE 6、IE 7、IE 8 中某个版本能解释,方便与对某一版本进行独立控制。转载 2012-11-19 13:18:43 · 839 阅读 · 0 评论 -
切换样式表
转:http://www.mangguo.org/css-implementation-of-the-style-switch/样式与数据分离所带来的不只是符合标准这样的简单,样式既然与数据分离那么样式的切换则变得理所当然的了!但是网上这样的中文教程实在是太少了!所以我收集了一部分中外网站已经实现的技术资料整理出来供网友参考。首先要具备不同内容的 CSS 文件(最好每个文件代表转载 2012-11-19 16:46:20 · 432 阅读 · 0 评论 -
解决 ie6 下弹出框随着滚动条不断抖动
之前写的弹出框会在ie6下不断抖动,找了很久,终于找到了解决办法:1.下面用纯css也实现了:(但这种办法有个缺陷,那就是:这会使页面上原有的absolute、relation都变成fixed的效果) 滚动条实际不是视口的 而是body 模拟的IE6 position:fixed bug*{padding:0;margin:0}#outbox {heigh原创 2012-12-14 09:45:29 · 2520 阅读 · 0 评论 -
link和@import的区别
转自:http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import。两者都是外部引用CSS的方式,但是存在一定的区别: 区别1:link是XHTML标签,除了加载CSS转载 2012-12-31 08:16:11 · 504 阅读 · 0 评论 -
html 学习 引用
1. 表示它所包含的文本是一个更长的单词或短语的缩写形式, 在某些浏览器中,当您把鼠标移至缩略词语上时,title 可用于展示表达的完整版本。2. HTML 5 不支持 标签。请使用 标签代替它。在 HTML 4.01 中, 标签定义首字母缩略词。3. cite="http://"> 标签定义短的引用。浏览器经常在引用的内容周围原创 2013-01-04 14:33:03 · 487 阅读 · 0 评论 -
CSS 元素透明法
转自:http://www.mangguo.org/magic-css-element-opacity/1、HTML 元素透明其实本身,CSS 实现元素透明是件容易事儿。直接上代码:opacity:.5opacity 指的是不透明度,取值为 0~1 之间,1 表示完全不透明,0 表示完全透明。A 级浏览器基本都支持 opacity 属性,但碰上 IE,总没好转载 2012-11-02 15:38:50 · 893 阅读 · 0 评论 -
css hack
参考:http://www.cnblogs.com/WuQiang/archive/2011/08/23/2150240.html1.行内hack: height:25px\9 /*allIE*/ie9特有的为: :root 选择符 {属性\9;} eg::root #test { background-color:purple\9转载 2012-12-07 16:22:37 · 432 阅读 · 0 评论 -
<base> 标签
转载自 HTML 中的 base 标记简介 | 芒果小站在 HTML 中, 标记提供两种基本属性:1. href 属性规定页面链接的基准 URL。示例:若有以下链接代码:当页面应用 标记之后,链接地址变为 “www.baidu.com/about”。无论 标记,还是 、、 等标记,基准 URL 均由 标记指定。2. target 属转载 2013-01-05 14:06:30 · 435 阅读 · 0 评论 -
reset.css
一个reset.css 样式表@charset "utf-8";/* CSS Document *//*reset.css*/body, div, dl, dt, dd, ul, ol, li,h1, h2, h3, h4, h5, h6, pre, code,form, fieldset, legend, input, button,textarea, p, blo转载 2013-01-04 14:35:26 · 471 阅读 · 0 评论