![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
div/css
文章平均质量分 80
心在忍耐
阴雨时节心在忍耐,至少我们看过不一样的风景。当雨过天晴,明亮的天际终于教会我们,等待的时光是多么的珍贵。
展开
-
CSS3实现的闪烁跳跃进度条~附源码
这个示例的原理是通过大量的css3属性来实现的,如:animation、transform、keyframes等等属性。值得注意的是这个示例采用了结构性伪类选择符E:nth-child(n),来进行对HTML元素的选择以及控制输出。相信这个伪类选择符在将来会是一个很强大的一个工具。推荐大家多多了解以及实践使用。这个伪类选择符E:nth-child(n)的含义是匹配父元素的第n个子元素E。 例如:u原创 2013-08-19 17:22:38 · 3677 阅读 · 2 评论 -
CSS实例(二):灵活使用Input元素
在WEB开发过程中,信息录入界面中,经常会有一个特殊的输入元素,如:必填字段、日期选择字段、在弹出窗口中选值的字段,使用CSS来设置这些元素的外观,可以省去一些不必要的按钮、提示,使页面更加简洁。 效果如下: 实现这样的效果,只须一张图片:CSS代码很简单:Html代码 > html xmlns="http://w转载 2013-08-19 21:55:29 · 1865 阅读 · 0 评论 -
CSS实例(九):多种菜单效果
横向下拉菜单Html代码 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> head> meta http-equiv="Content-Type" content="text/ht转载 2013-08-19 22:30:28 · 1915 阅读 · 0 评论 -
CSS实例(四):实现TabView(页签)效果
今天花了点时间,设计了一个网页上用的tabview(页签、tabcontrol)效果,网页元素用得比较少,js代码也比较精练。测试了一下支持IE、FireFox以及chrome。支持同一页面上多处使用。 没有什么过多说的。先看一下效果。页面中用到一个图片:页面代码如下:Html代码 > html xmlns="http:转载 2013-08-19 22:00:48 · 2665 阅读 · 0 评论 -
CSS实例(三):全部使用背景生成栏目
全部使用背景来制作网页中的栏目很巧妙,很亲切,很象以前做桌面程序的感觉。使用三张图片,基本上就生成了整个网页的所有栏目。titletag.pngHtml代码 > html xmlns="http://www.w3.org/1999/xhtml">head> title>娱乐频道-搜狐title> style type="text/css"转载 2013-08-19 21:58:25 · 1818 阅读 · 0 评论 -
CSS实例(八):不用图片实现宽度、高度自定的圆角矩形
根据google的analytics界面分析整理,个人觉得不错。虽然元素多了点儿、看起来复杂了点儿、样子不那么非常美观,但是可以随意设置圆角矩形的宽度及高度,很灵活。 不知为什么google用了b元素,有点奇怪。 页面源码:Html代码 > html xmlns="http://www.w3.org/1999/xhtml"> head>转载 2013-08-19 22:14:36 · 1946 阅读 · 0 评论 -
CSS实例(一):漂亮的表格样式
WEB2.0提倡使用div布局,但不是要完全放弃使用表格,表格在数据展现方面还是不错的选择。现在使用介绍使用CSS样式表来控制、美化表格的方法。Html代码 > html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" content="text转载 2013-08-19 21:53:52 · 6598 阅读 · 0 评论 -
CSS实例(七):工具条效果
图片素材: 网页代码:Html代码 > html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" content="text/html; charset=GB2312"/> title>title> style type转载 2013-08-19 22:11:41 · 1918 阅读 · 0 评论 -
CSS实例(六):实现网页固定大小三态图形按钮简单方法
今天想出一种三态图形按钮实现方式,制作超简单,文字可以随意修改,各种浏览器表现一致,不含任何JS脚本。 需要一个图片文件: 网页代码:Html代码 xml version="1.0" encoding="GB2312" ?> > html xmlns="http://www.w3.org/1999/xhtml"> head> m转载 2013-08-19 22:09:40 · 2310 阅读 · 0 评论 -
CSS样式问题集锦
这里记录一些我在网页制作过程中曾经遇到的问题,把它帐在这里,希望对大家有所帮助。iframe不同时出现滚动条iframe的属性中设置:scrolling:no,在iframe引用的页面中加上以下样式:html,body{ overflow-x:none;} 滚动条样式SCROLLBAR-FACE-COLOR: #2A024D; SCROLLBAR-HIGHL原创 2013-08-19 21:46:31 · 2099 阅读 · 0 评论 -
CSS3中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义:static:无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。 relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 absolute:对象脱离正常文档流,使用top,right,b原创 2013-08-14 22:18:06 · 3806 阅读 · 0 评论 -
纯CSS3制作的 登录模板 简洁蓝白(非IE效果更好)
纯CSS3制作的 登录模板 简洁蓝白(非IE效果更好) [图]效果图:源码如下001"-//W3C//DTD HTML 4.0 Transitional//EN">002纯CSS3制作的 登录模板 简洁蓝白(非IE效果更好)003"text/html; charset=u原创 2013-08-10 17:25:03 · 6346 阅读 · 5 评论 -
前端代码标准最佳实践:javascript篇
最近一直重构项目的前端代码,也参考了各种前端代码的最佳实践,目的是让前端的HTML,CSS,JavaScript代码更符合标准,有更好的性能,更好的可维护性,尝到了重构后的甜头,也萌生了写这个系列博客的念头。前端代码有其固有的灵活性,这就导致了目前前端代码非常混乱的局面,本系列文章希望能起到抛砖引玉的作用,让更多的人重视前端代码的质量,编写更标准的前端代码。本系列文章共有三篇,分别讨论HTML原创 2013-08-20 22:51:30 · 2157 阅读 · 3 评论 -
前端代码标准最佳实践:CSS篇
接着上一篇,我们再来谈谈CSS代码的一些标准实践。1,命名和其他语言规范一样,css的命名也讲究命名要有意义,命名要尽可能短但是要足够表达含义;命名的词用连字符连接。不规范的命名:?123456#navigation{}.demoimage{}.error_status{}原创 2013-08-20 22:53:57 · 2438 阅读 · 3 评论 -
前端代码标准最佳实践:HTML篇
我们今天来探讨Web前端HTML的一些最佳实践。(1)HTML代码的基本规范1. HTML的命名和格式任何代码的混乱都是从命名和格式的混乱开始的,所以一定要有统一和规范的命名和格式,以下是一些基本的规范。HTML代码所有的标签名和属性应该都为小写,虽然HTML代码是大小写不敏感的,但是W3c的规范建议为小写;属性值应该用双引号包括。给所有的关键元素定义元素的id和class,便原创 2013-08-20 22:54:40 · 2461 阅读 · 3 评论 -
LI列表自动排成两列显示
LI列表自动排成两列显示body {font:12px/1.5em "Lucida Grande", Verdana, sans-serif; } #list {width: 600px;}/*float:left; list-style:disc outside; color:#000; */ #list li {float:left;} #list li a{floa原创 2014-03-30 16:35:04 · 1387 阅读 · 0 评论 -
CSS实例(五):简洁的栏目实现方式
今天花了点儿时间,琢磨了一下如何简洁的实现网页上常用的栏目。就是下面的这种东西,我称之为栏目,不知道别人叫它什么: 以下是我的HTML文件及CSS文件,可以便捷地进行样式切换。如果谁有更简洁的方式,请留言指教。 HTML文件:Html代码 xml version="1.0" encoding="UTF-8" ?> > html xmln转载 2013-08-19 22:07:18 · 1742 阅读 · 0 评论