您现在的位置:IT技术 > WEB前端 > CSS-HTML >

WEB前端 / CSS-HTML频道头条

如何成为优秀的web前端工程师?
如何成为优秀的web前端工程师?在解答这个问题之前,首先需要弄明白的是什么是前端工程师...
教您如何做一个优秀的前端工程师
用这个标题,是因为前一段时间组里有一个开放式讨论:怎样才算一个好重构? 其实,好与坏...
关于网站CSS书写,让网页加载速度加快,更有利于SEO
DIV/CSS,,DivCss,关于网站CSS书写,让网页加载速度加快,更有利于SEO...

WEB前端 / CSS-HTML相关栏目

WEB前端 / CSS-HTML频道内容加载中...

八个网页通用的web字体集

八个网页通用的web字体集,写在css文件里面,具体看您的需求了: /*TheTimesNewRoman-basedserifstack:*/font-family:Cambria,HoeflerText,Utopia,LiberationSerif,NimbusRomanNo9LRegular,Times,TimesNewRoman,serif;/*AmodernGe...

日期:2013-09-04 21:42:21

点击:207 好评:0

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

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

日期:2013-09-04 21:39:11

点击:193 好评: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-block;}*html...

日期:2013-09-04 21:31:27

点击:136 好评: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代码: divid=outerdivstyle=position:...

日期:2013-09-02 22:57:02

点击:765 好评:0

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

做web前端的工程师们很多时间都花在可恶的IE6了上,如果开发环境是在windows7或者windows8的前端工程师们更悲催了,没有真实的IE6的测试环境,最后还得通过装个虚拟机之类的解决,之前...

日期:2013-08-28 00:01:02

点击:141 好评:0

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

我们做web前端的工程师,起码在我们退休之前是摆脱不了IE6噩梦的,苦逼的的前端工程师们都知道,目前windows7下没有一款比较合适的IE6测试工具,大部分工程师选择的是IEtester这一类的...

日期:2013-08-28 00:00:46

点击:109 好评:0

HTML+CSS实现的漂亮搜索框

HTML+CSS实现的漂亮搜索框,谷歌和百度首页的搜索框都是input+button模式的,bing的搜索框感觉要好点儿。简言之,就是将提交按钮放到input中,其实这是做不到的,只能伪装。 htmlheadtitleI...

日期:2013-08-27 23:33:17

点击:215 好评:0

css+html写的仿windows XP计算器

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

日期:2013-08-27 23:31:12

点击:88 好评:0

网页要尽量少用Iframe

iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但我们需要慎重的使用iframe。iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了 1-2 个数量级。 使用 iframe 的页...

日期:2013-08-27 13:10:00

点击:158 好评:0

CSS样式重置,初始化

CSS样式重置,初始化,自己综合修改的一些CSS公共样式初始化代码,方便大家使用: @charset utf-8; /* Document : CSS样式初始化 Created on : 2013. 8. 6,15:41:00 Author : Description: CSS样式表的初始化,全局样式...

日期:2013-08-26 22:43:24

点击:187 好评:0

IT技术网收集:兼容IE6,IE7,Firfox的CSS-hack

IT技术网收集:兼容IE6,IE7,Firfox的CSS-hack: 第一种,是CSS HACK的方法 height:20px; /*For Firefox*/ *height:25px; /*For IE7 IE6*/ _height:20px; /*For IE6*/ 注意顺序。 这样也属于 CSS HACK ,不过没有上面这样简洁。 #example { color: #333; } /*...

日期:2013-07-24 21:59:22

点击:173 好评:0

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

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

日期:2013-07-24 21:50:53

点击:209 好评:0

谷歌Chrome浏览器小于12px显示不正常的解决方法

在谷歌的chrome浏览器上面,发现其中字体大小变形,设置是10px大小的居然显示成和12px大小一样,于是才发现,所有小于12px字体大小的都设置成12px。解决办法: webkit的私有属性: html{-webkit-text-size-adjust:none;} 赶快去试试吧!...

日期:2013-07-24 21:48:16

点击:953 好评:0

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

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

日期:2013-07-24 21:43:09

点击:127 好评:0

CSS3线性渐变举例详解

CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特...

日期:2013-07-24 21:39:43

点击:131 好评:0

如何理解CSS3的弹性盒模型?

css3的到来为现代浏览器加了不少新的特效,其中一个就是新的盒模型弹性盒模型,这个模型决定了一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这种效果图与XUL(火狐使用的用户交互语言)相似,除此以外,其它语言也使用同样的盒模型,如XAML 、Glad...

日期:2013-07-24 21:37:37

点击:72 好评:0

CSS编码规范之BEM思想书写习惯

什么是BEM,BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格,而且包含更多的信息,它们用于一个团队开...

日期:2013-07-24 21:30:53

点击:79 好评:0

IE6下CSS限制图片最大宽度和高度的方法

在IE7以上的IE浏览器、FF以及chrome中限制最大高度和最大宽度很容易,只需要用max-height、max-width,但IE6下却不认min-*和max-*。那么该怎么解决img在IE6下用CSS限制最大高度、最大宽度呢? 方法一: 用JS控制。这个确实可行,网上也有挺多的例子,有兴趣的...

日期:2013-07-24 21:24:14

点击:97 好评:0

HTML5中的新标签article和section的区别

HTML5中的新标签article和section的区别:article,文章是一个独立的,单独的一段离散的内容。例如一篇博客的帖子,或者一个email中的单个email。 一篇博客中的帖子,可以由rss或者其他方法聚合,而不需要更多的上下文就有意义: article ahref=# h1feimos i...

日期:2013-07-24 21:21:39

点击:106 好评:0

IE6下position:fixed固定定位的方法

对于前端的工程师来说,IE6浏览器有太多的bug让人头疼。IE6不支持position:fixed更是令人苦恼。如果我们需要 做某个元素始终位于浏览器的底部,不会因为浏览器窗口的缩放和滚动条的滚动而变化,那个肯定是想到的用position:fixed生成绝对定位,只要设 置这个...

日期:2013-07-24 21:03:09

点击:144 好评:0

CSS3的伪类选择器“:nth-child()”详解

CSS3的强大,让人惊叹,今天我们就来前瞻一下CSS3的一个伪类选择器:nth-child()。 语法: :nth-child(an+b) 为什么选择她,因为我认为,这个选择器是最多学问的一个了。很可惜,据我所测,目前能较好地支持她的只有Opera9+和Safari3+。 描述: 伪类:nth-chil...

日期:2013-07-24 20:56:39

点击:129 好评:0

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

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

日期:2013-07-23 21:54:04

点击:101 好评:0

如何检测浏览器是否支持HTML5?

HTML5是个新生的东西,在浏览器的兼容上还存在一定的局限性,尤其是ie6-8,全军覆没,ie9也只支持一部分,对此我们在使时就遇到了很大问题,那么我们可以通过下面这个简单的方法来检测浏览器是否支持HTML5,从而提示用户更新浏览器或者是使用对html5支持较好...

日期:2013-07-22 21:35:09

点击:223 好评:0

HTML5实现图片上传及预览功能

HTML5实现图片上传及预览功能,具体代码如下: form action=upload.php method=post enctype=multipart/form-data UPLOAD USER-ICON:input name=icon id=icon type=file placeholder=请上传PNG格式的图像(大小在1M之内)/br/ input type=submit value=上传/ /f...

日期:2013-07-09 23:44:10

点击:217 好评:0

如何成为优秀的web前端工程师?

如何成为优秀的web前端工程师?在解答这个问题之前,首先需要弄明白的是什么是前端工程师?前端工程师,也叫Web前端开发工程师。他是随着web发展,细分出来的行业。 Web前端开发技术主要包括三个要素:HTML、CSS和JavaScript! 它要求前端开发工程师不仅要掌...

日期:2013-07-04 23:26:52

点击:345 好评:0

Web前端开发必须了解的五个HTML5新特性

HTML5已经推出很久了,相信作为web相关开发工程师,肯定又了解和尝试过一些HTML5的特性和编程。作为未来前端开发技术的潮流和风向标,HTML5绝对不容忽视。这里IT技术网给大家介绍几个HTML5的重要特性,能够帮助你提高整个web应用的使用体验和开发效率! 特性...

日期:2013-07-03 22:01:24

点击:187 好评:0

纯CSS制作无图片的三角形

纯CSS制作无图片的三角形,具体看下面的代码: .arrow { display:block; width:0; height:0; font-size:0; border-width:5px; border-style:solid; border-color:#f60 #ffffff #ffffff #ffffff } ---------------------------------HTML---------------------...

日期:2013-07-01 22:32:26

点击:144 好评:0

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

在日常的项目中,我们常常会遇到有些标题过长的时候会用...来缩略字符。很多时候也会用PHP来截取并加...,但是我们通过CSS样式也可以来实现这个效果。下面请看代码: meta charset=UTF-8 / style type=text/css .ellipsis { white-space: nowrap; /*保留文字...

日期:2013-07-01 22:30:41

点击:207 好评:0

CSS解决浮动DIV撑开父层高度的问题

CSS解决浮动DIV撑开父层高度的问题: 老方式的写法 div class=content div class=left/div div class=right /div div style=clear:both;/div /div 新方式的写法 div class=clearfix div class=left/div div class=right /div /div --------------------------...

日期:2013-07-01 22:29:47

点击:146 好评:0

分享HTML中少为人知的个性化标记

HTML中少为人知的个性化标记——我们知道HTML是一种再简单不过的标记语言,一些基础性的知识,该说的已经说了,该讲的也已经讲得差不多了,没有人再去关注HTML还有什么新颖之处,其实不然,也许我们熟悉的只是HTML中极为常见的标记\...

日期:2013-06-29 21:18:50

点击:36 好评:0

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

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

日期:2013-06-17 23:37:18

点击:195 好评:0

IE6下overflow:hidden无效的解决方法

对于前端工程师来说,IE6就是无赖,辛苦coding了好久,在Google Chrome,firefox,opera下取得了完美的效果。回到ie6下审视之,呜呼哀哉!这里又多出一条,那里又多出一条,这是个神马东西,ie6的下的页面像贴了几个狗皮膏药。没办法,css hack 去! IE6下 Bu...

日期:2013-06-17 23:31:10

点击:163 好评:0

如何让IE6支持min-height与max-height?

首先是如何让ie6支持min-height? 如果只是让ie6支持min-height倒也比较简单。一些朋友看过代码就能明白,主要是css hack方法,利用ie6支持或者不支持的符号来完成任务。 方法一: style type=text/css .show{background:#ccc;min-height:100px;_height:100p...

日期:2013-06-17 23:16:28

点击:120 好评:0

纯CSS实现的六边形(蜂窝导航效果)

要实现一个六边形的蜂窝效果,主要用到了是两个绝对定位的三角形,一个在上面一个在下面。配合一个长方形拼接成了六边形。该效果兼容各大主流浏览器,支持hover效果,重要的是纯css实现的。不多说了,大家看代码吧。 !DOCTYPE html html head meta http-equiv...

日期:2013-06-17 23:03:15

点击:188 好评:0

基于webkit浏览器的CSS滚动条美化

基于webkit浏览器的CSS滚动条美化 ,具体css代码如下: ::-webkit-scrollbar{ padding-left:1px; border-left:1px solid #d5d5d5; background-color:#fafafa; overflow:visible; width:13px; } ::-webkit-scrollbar-thumb{ background-color:rgba(0, 0, 0, .2...

日期:2013-05-15 22:19:30

点击:221 好评:0

CSS禁止用户的输入法的方法

css禁止掉用户的输入法,关于兼容性问题,本人还没有测试过,貌似在IE8,FF兼容,但是在chrome上面不兼容,建议在chrome中使用html5新增的input类别来实现。 //html form name=myForm method=post action= input type=text name=xxx style=ime-mode:disabled...

日期:2013-05-12 21:54:02

点击:205 好评:0

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

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

日期:2013-04-23 23:40:58

点击:392 好评: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...

日期:2013-04-10 23:14:44

点击:340 好评:0

教您如何做一个优秀的前端工程师

用这个标题,是因为前一段时间组里有一个开放式讨论:怎样才算一个好重构? 其实,好与坏向来都是相对的,因为每个人眼中看待好与坏的标准不一样,不如从自身的角度考虑一下:如何做一个好重构? 先来看一个平时我们遇到的最多的两栏布局: 基本的html代码:...

日期:2013-03-31 22:24:09

点击:325 好评:0

css页面排版图片下边出现空隙解决方法

页面排版的时候经常会遇到li包含img时,图片文件的下边缘出现大概5个或10个像素的间隙,出现间隙大概是以下原因: 图片文字等inline元素默认是和父级元素的baseline对齐的,而baseline又和父级底边有一定距离(这个距离和 font-size,font-family 相关,不一...

日期:2013-03-11 22:16:48

点击:258 好评:0

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

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

日期:2013-01-14 21:14:33

点击:271 好评:2

最新30个优秀的旅行网站设计作品欣赏

DIV/CSS,,DivCss,最新30个优秀的旅行网站设计作品欣赏...

日期:2011-07-20 11:11:29

点击:69 好评:0

团队开发中的CSS规范总结

DIV/CSS,,DivCss,团队开发中的CSS规范总结...

日期:2011-07-20 11:11:29

点击:46 好评:0

介绍几个Flash开源商业模板

DIV/CSS,,DivCss,介绍几个Flash开源商业模板...

日期:2011-07-20 11:11:29

点击:66 好评:0

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

DIV/CSS,,DivCss,ASP...

日期:2011-07-20 11:11:29

点击:30 好评:0

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

DIV/CSS,,DivCss,超赞的纯CSS实现的简约下拉菜单代码...

日期:2011-07-20 11:11:29

点击:49 好评:0

CSS,Vertical,Text,三种方式

DIV/CSS,,DivCss,CSS,Vertical,Text,三种方式...

日期:2011-07-20 11:11:29

点击:25 好评:0

CSS,Hack,区分,IE6,IE7,IE8,Firefox

DIV/CSS,,DivCss,CSS,Hack,区分,IE6,IE7,IE8,Firefox...

日期:2011-07-20 11:11:29

点击:44 好评:2

首页 1 2 3 4 5 6 7 8 下一页 末页 8360