您现在的位置:首页 > WEB前端 > CSS-HTML > 

WEB前端  /  CSS-HTML频道头条

css边距重叠解决方案
今天整理了一下用css防止边距重叠的几种方法 先假设一组dom结构...
IE6forWin7解决windows7无法测试IE6的问题
我们做web前端的工程师,起码在我们退休之前是摆脱不了IE6噩梦...

WEB前端  /  CSS-HTML相关栏目

Html/CSS前端实现文字边框阴影效果

一.边框阴影 box-shadow 边框阴影 参数: 参数1 x-shadow:设置对象的阴影水平偏移值,单位可以是px、em或百分比等,允许负值。参数2 y-shadow:设置对象的阴影垂直偏移值,单位可以是px、...

日期:2018-01-17 20:57:45

点击:188 好评:0

CSS div背景颜色半透明、内容不透明方法

前面有发表一篇关于CSS半透明的教程,不过那个是层中的所有内容都跟着半透明了。 今天这次分享层背景颜色半透明,层内的所有内容不透明。兼容IE6/IE7/IE8和火狐浏览器,css用到的...

日期:2018-01-14 16:48:50

点击:126 好评:0

CSSHack技术速查对照

屏蔽IE浏览器(IE下不显示) 1 2 *:lang(zh) select { font : 12px !important ;} /*FF,OP可见*/ select:empty { font : 12px !important ;} /*safari可见*/ 这里select是选择符,根据情况更换。第二句是MAC上safari浏览器...

日期:2018-01-14 16:47:40

点击:205 好评:0

CSS设置width100%与padding后宽度溢出超出父节点解决方法

在CSS中如果设置 width:100%,同时设置了padding后,宽度会超出父节点。等于实际宽度=100%+padding的宽度,这对我们的布局需求造成一定的困扰。 但使用CSS3中的box-sizing属性即可解决这个问题...

日期:2018-01-14 16:46:35

点击:188 好评:0

HTML写一个网页动态时钟

用html写一个动态网页时钟,代码如下所示: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 !DOCTYPE html html head meta charset = UTF-8 title 时钟特效/ title / head script type = text/javascript function disptime(){ var today=new Date(...

日期:2017-12-09 20:13:30

点击:70 好评:0

使用HTML+CSS实现鼠标划过的二级菜单栏的示例

本文介绍了使用HTML+CSS实现鼠标划过的二级菜单栏的示例,分享给大家,具体如下: 先上效果图: 1、鼠标没在上面 2、鼠标放在一级菜单上,展开二级菜单 3、鼠标放在二级菜单上 代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 3...

日期:2017-12-09 20:12:32

点击:192 好评:0

HTML页面自动清理js、css文件的缓存(自动添加版本号)

在web项目开发过程中,我们经常会引用css、js文件,更新文件后常出现缓存问题(明明更改了代码,在浏览器上访问的时候却没有发生变化),这种情况我们通常采用以下两种解决方案: 1、手动清除浏览器缓存 2、添加版本号(如 layout.css?v=1) 个人认为方法2更快,因为清除浏览器缓...

日期:2017-12-09 20:10:25

点击:126 好评:0

HTML 表单组件实例代码

HTML 表单用于搜集不同类型的用户输入。下文通过代码给大家分享html 表单组件实例代码,感兴趣的朋友参考下吧 废话不多说了,直接给大家贴代码了,具体代码如下所示: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33...

日期:2017-12-09 20:09:18

点击:178 好评:0

html页面中完成查找功能

最近在搞一个被很多人改了的框架,天天看代码看的头的晕了,不过感觉进步还挺大的,自己做了一个后台可配置前台查看两个库不同数据范围的东西,还挺满意,那天拿出来分享一下,今天先说一个这几天做的功能,就是html页面的查找功能。 这个功能主要是实现在查找框内输入字符,...

日期:2017-12-09 20:07:55

点击:78 好评:0

css边距重叠解决方案

今天整理了一下用css防止边距重叠的几种方法 先假设一组dom结构 1 2 3 4 div class = parent div class = child / div / div 通常情况下,如果给子元素设置margin,就会产生这个属性对父元素也产生了同样的效果,然而 这其实不是我们想要的结果,我们只想对子元素设...

日期:2017-09-07 23:03:44

点击:168 好评:0

CSS百分比padding制作图片自适应布局

一、CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin 和 padding 属性的垂直方向的百分比值都是相对于宽度计算的,这个和 top , bottom 等属性的百分比值不一样。 这么设计的原因在我的新书(应该不出几个月就要出版了)中会有说明,这里不展...

日期:2017-09-06 21:22:32

点击:146 好评:0

shell命令执行顺序

shell 命令执行顺序 一 shell执行命令的步骤顺序如上图,看起来有些复杂。 当命令行被处理时,每一个步骤都是在Shell的内存里发生的;Shell不会真的把每个步骤的发生显示给你看。 所以,你可以假想这事我们偷窥Shell内存里的情况,从而知道每个阶段的命令行是如何被转...

日期:2017-07-10 23:33:25

点击:125 好评:0

shell执行命令顺序2

shell执行命令示例 经过前面的介绍,相信你对shell已经有了大致的了解,下面我们将根据示例来解析shell执行命令的过程 ? 1 2 3 4 5 $ mkidr /tmp/x 建立临时性目录 $ cd /tmp/x 切换到该目录 $ touch f1 f2 建立文件 $ f=f y= a b 赋值两个变量 $ echo ~+/${f}[12...

日期:2017-07-10 23:32:51

点击:162 好评:0

CSS选择器的权重计算规则

CSS选择器的权重计算规则,我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们。那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢? 在CSS中,会根据选择器的特殊性来决定所定义...

日期:2017-07-10 23:32:22

点击:185 好评:0

HTML标签与属性

data-*自定义属性 在HTML5中添加了data- *的方式来自定义属性,所谓data- 实际上上就是data-前缀加上自定义的属性名,使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。 ? 1 2 3 4 5 select name = country id= country option va...

日期:2017-07-10 23:31:49

点击:122 好评:0

CSS的书写规范、顺序

CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-height, letter-spacing, color- text-align等) 4.背景(background, border等) 5.其他(animation, transition等) C...

日期:2017-07-10 23:30:24

点击:97 好评:0

div怎么样显示滚动条 div显示滚动条的CSS代码

div显示上下左右滚动条 div style=width:260px;height:120px; overflow:scroll; border:1px solid; 这里是你要显示的内容 /div div显示上下滚动条的css代码 div style=width:260px;height:120px; overflow-y:scroll; border:1px solid; 这里是你要显示的内容...

日期:2017-05-21 23:38:12

点击:214 好评:0

html+js点击图片在弹出层显示大图

html+js点击图片在弹出层显示大图,具体代码如下: css代码: * { margin : 0 ; padding : 0 ;} #imglist{list-style:none;width:500px;margin:50pxauto;} #imglistli{float:left;margin-top:10px;} html代码: div id = outerdiv style = position : fixed ; top : 0...

日期:2017-02-11 20:39:38

点击:147 好评:2

IE6forWin8解决windows8无法测试IE6的问题

做web前端的工程师们很多时间都花在可恶的IE6了上,如果开发环境是在windows7或者windows8的前端工程师们更悲催了,没有真实的IE6的测试环境, 最后还得通过装个虚拟机之类的解决,之前发过一篇文章,分享了一款 Windows7下的IE6测试工具:IE6forWin7 ,但是该工具在windows...

日期:2017-02-11 20:39:13

点击:112 好评:0

HTML+CSS实现的漂亮搜索框

HTML+CSS实现的漂亮搜索框,谷歌和百度首页的搜索框都是input+button模式的,bing的搜索框感觉要好点儿。简言之,就是将提交按钮放到input中,其实这是做不到的,只能伪装。 html head title IT技术网|搜索框的实现 /title meta charset = UTF-8 style type = text/css...

日期:2017-02-11 20:38:49

点击:158 好评:0

优酷,土豆等视频网站自动播放代码

IT技术网今天总结了一下,针对不同的视频文件总结如下酷六自动播放代码,新浪视频自动播放代码,搜狐视频,优酷视频自动播放详解,56视频自动播放详解,土豆视频,56相册视频,6间房视频.不自动播放与自动播放参数设置。 酷六自动播放代码(下面的代码拷贝后更换视频文...

日期:2017-02-11 20:38:06

点击:118 好评:0

另一个ASP文件插入这个文件

#include 命令 #include 命令用于在多重页面上创建需重复使用的函数、页眉、页脚或者其他元素等。 通过使用 #include 命令,我们可以在服务器执行 ASP 文件之前,把另一个ASP文件插入这个文件中。#include 命令用于在多重页面上创建需重复使用的函数、页眉、页脚...

日期:2017-02-11 20:37:22

点击:57 好评:0

HTML5帮助你开发类似本地移动应用的前端框架Junior

Junior 是一款使用HTML5技术的前端框架,可以帮助你创建类似本地应用开发风格的移动前端应用。 使用CSS3生成平滑的过渡效果,可以让页面看上去更具有灵活性,它支持触摸操作,并且也包括支持各种不同的UI组件。 整个框架使用Zepto( 类似jQuery语法的轻量级移动设备js类...

日期:2017-02-11 20:36:06

点击:97 好评:0

介绍几个Flash开源商业模板

Elite Xml Website v2.5 中文全能版 此版本在v1.0和v2.0的基础上修正了大量的BUG,并加入了大量的FLASH模块、展示样式,使它的功能更强大,操作更人性化。此版本更能随心所欲增加您需要的栏目,它确实是一个经典的全能模板。 首页(样式1) A.网站LOGO B.网站菜单(支持二级...

日期:2017-02-11 20:34:51

点击:74 好评:0

超赞的纯CSS实现的简约下拉菜单代码

代码简介:超赞的纯CSS实现的简约下拉菜单代码 代码内容: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/xhtml head title 超赞的纯CSS实现的简约下...

日期:2017-02-09 01:40:24

点击:72 好评:0

纯css实现页面Tab选项卡切换

纯css实现页面Tab选项卡切换效果。 下面是纯css实现页面Tab选项卡切换代码: titleCSS_Tab/title style type=text/css body{margin:0; font-size:12px; background:#666;} #box{width:400px; height:300px; margin:100px auto 0;} #tab_nav{margin:0; padding:0...

日期:2017-02-09 01:38:39

点击:104 好评:0

让网页变灰色兼容各种浏览器的css代码

让网页变灰色兼容各种浏览器的css代码,把下面代码,放到你的css样式文件种即可实现网页变成灰色效果。 html{filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);fi...

日期:2017-02-09 01:38:01

点击:93 好评:0

CSS+JS实现模拟select样式效果

对于select这个标签在各个浏览器下的显示样式都不相同,这就给设计师和前端开发者带来了极大的不方便。所以做出一个统一的样式的select样式是最直接的需求。 那么如何实现不同的浏览器下,有着相同样式的select呢? 下面看下本人的方法: 该方法主要用到的是js+css,代...

日期:2017-02-09 01:36:49

点击:83 好评:0

CSS样式自适应宽度省略字符

meta charset=UTF-8 / style type=text/css .ellipsis { white-space: nowrap; /*保留文字间的空白*/ width: 200px; overflow: hidden; /*超出部分隐藏,*/ text-overflow: ellipsis; /*超出部分显示成... */ border:1px solid #333; } /style div class=ellips...

日期:2017-02-09 01:36:13

点击:166 好评:0

css-hack之兼容谷歌Chrome浏览器

现在很到网名浏览网页都用用谷歌的chrome或者是chrome内核的浏览器,因为chrome的速度确实快,包括启动速度和加载网页的速度,比ie和ff快得多,不过看评测OPERA的新版本加载网页速度更快,所以在写前端代码的时候兼容chrome浏览器是必须的,那么如何给chrome浏览器浏览器...

日期:2017-02-09 01:34:36

点击:99 好评:0

八种方案解决IE6下PNG透明图片问题

IE6中的bug令很多Web前端开发人员实为头 疼,然而在众多的Bug中最令人抓狂的就是IE对png图片的不支持,IT技术网把当前最流行最实用的IE6支持PNG图片的方案整理到本文,以供大家学习参考! 方案1 - 滤镜解决方案: 介绍:滤镜从IE4.0被微软正式引入,所以我们可以使用滤镜解...

日期:2017-02-09 01:32:57

点击:64 好评:0

CSS样式重置,初始化

CSS样式重置,初始化,自己综合修改的一些CSS公共样式初始化代码,方便大家使用: @charset utf-8 ; /* Document:CSS样式初始化 Createdon:2013.8.6,15:41:00 Author: Description: CSS样式表的初始化,全局样式设置。部分样式属性请根据具体页面重置其属性 导入方式:li...

日期:2017-02-09 01:32:13

点击:78 好评:0

兼容IE6,IE7,Firfox的CSS-hack

简单来讲,css hack就是浏览器解析CSS时的漏洞,因此不同的浏览器就有不同的css hack写法。css hack的由来源于浏览器大战,从1995年开始,微软和网景公司的浏览器竞争,导致各自的浏览器包含大量其私有CSS属性,并逐渐远离标准。1998年网景公司以开放源代码的授权形式,把Co...

日期:2017-02-09 01:31:34

点击:146 好评:0

网页要尽量少用Iframe

iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但我们需要慎重的使用iframe。iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了 1-2 个数量级。 使用 iframe 的页面一般不会包含太多 iframe,所以创建 DOM 节点所花费的时间不会占...

日期:2017-02-09 01:30:55

点击:149 好评:0

css+html写的仿windows XP计算器

无聊随便写了个,没有使用图片,除了个别细节,基本和xp自带的计算器样式非常接近。有空再添加计算功能,具体代码如下: !DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns = http://www.w3.o...

日期:2017-02-09 01:30:01

点击:183 好评:0

css+html写的仿windows XP计算器

无聊随便写了个,没有使用图片,除了个别细节,基本和xp自带的计算器样式非常接近。有空再添加计算功能,具体代码如下: !DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns = http://www.w3.o...

日期:2017-02-09 01:29:19

点击:202 好评:0

CSS兼容各大浏览器的清除浮动Clearfix

CSS兼容各大浏览器的清除浮动Clearfix,具体代码如下: . clearfix : after { /*forFirefox,IE8,Opera,Safari,etc.*/ content : . ; display : block ; height : 0 ; clear : both ; visibility : hidden ; } * + html . clearfix { /*forIE7*/ display : inline...

日期:2017-02-09 01:26:23

点击:185 好评:0

CSS的text-overflow实现截断字符串

CSS的text-overflow实现截断字符串, 如果字符串超过了指定的长度,通过这段css代码可以截断字符串的显示,并自动加上省略号 具体代码如下: . truncate_string { width : 250px ; white - space : nowrap ; overflow : hidden ; text - overflow : ellipsis ; }...

日期:2017-02-09 01:25:24

点击:55 好评:0

IE6forWin7解决windows7无法测试IE6的问题

我们做web前端的工程师,起码在我们退休之前是摆脱不了IE6噩梦的,苦逼的的前端工程师们都知道,目前windows7下没有一款比较合适的IE6测试工具,大部分工程师选择的是IEtester这一类的调试工具作为IE6的测试工具,但是IEtester本身就存在着很多不足,毕竟不是MS自己开发的...

日期:2017-02-09 01:15:38

点击:356 好评:0