关注
分享
心在忍耐
阴雨时节心在忍耐，至少我们看过不一样的风景。当雨过天晴，明亮的天际终于教会我们，等待的时光是多么的珍贵。
展开
-
CSS3实现的闪烁跳跃进度条~附源码
这个示例的原理是通过大量的css3属性来实现的，如：animation、transform、keyframes等等属性。值得注意的是这个示例采用了结构性伪类选择符E:nth-child(n)，来进行对HTML元素的选择以及控制输出。相信这个伪类选择符在将来会是一个很强大的一个工具。推荐大家多多了解以及实践使用。这个伪类选择符E:nth-child(n)的含义是匹配父元素的第n个子元素E。 例如：u原创 2013-08-19 17:22:38 · 3664 阅读 · 2 评论 -
CSS实例(二)：灵活使用Input元素
在WEB开发过程中，信息录入界面中，经常会有一个特殊的输入元素，如：必填字段、日期选择字段、在弹出窗口中选值的字段，使用CSS来设置这些元素的外观，可以省去一些不必要的按钮、提示，使页面更加简洁。 效果如下： 实现这样的效果，只须一张图片：CSS代码很简单：Html代码 > html xmlns="http://w转载 2013-08-19 21:55:29 · 1858 阅读 · 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 · 1882 阅读 · 0 评论 -
CSS实例(四)：实现TabView(页签)效果
今天花了点时间，设计了一个网页上用的tabview(页签、tabcontrol)效果，网页元素用得比较少，js代码也比较精练。测试了一下支持IE、FireFox以及chrome。支持同一页面上多处使用。 没有什么过多说的。先看一下效果。页面中用到一个图片：页面代码如下：Html代码 > html xmlns="http:转载 2013-08-19 22:00:48 · 2608 阅读 · 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 · 1804 阅读 · 0 评论 -
CSS实例(八)：不用图片实现宽度、高度自定的圆角矩形
根据google的analytics界面分析整理，个人觉得不错。虽然元素多了点儿、看起来复杂了点儿、样子不那么非常美观，但是可以随意设置圆角矩形的宽度及高度，很灵活。 不知为什么google用了b元素，有点奇怪。 页面源码：Html代码 > html xmlns="http://www.w3.org/1999/xhtml"> head>转载 2013-08-19 22:14:36 · 1926 阅读 · 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 · 6520 阅读 · 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 · 1893 阅读 · 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 · 2270 阅读 · 0 评论 -
CSS样式问题集锦
这里记录一些我在网页制作过程中曾经遇到的问题，把它帐在这里，希望对大家有所帮助。iframe不同时出现滚动条iframe的属性中设置：scrolling:no，在iframe引用的页面中加上以下样式：html,body{ overflow-x:none;} 滚动条样式SCROLLBAR-FACE-COLOR: #2A024D; SCROLLBAR-HIGHL原创 2013-08-19 21:46:31 · 2072 阅读 · 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 · 3775 阅读 · 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 · 6328 阅读 · 5 评论 -
前端代码标准最佳实践：javascript篇
最近一直重构项目的前端代码，也参考了各种前端代码的最佳实践，目的是让前端的HTML,CSS,JavaScript代码更符合标准，有更好的性能，更好的可维护性，尝到了重构后的甜头，也萌生了写这个系列博客的念头。前端代码有其固有的灵活性，这就导致了目前前端代码非常混乱的局面，本系列文章希望能起到抛砖引玉的作用，让更多的人重视前端代码的质量，编写更标准的前端代码。本系列文章共有三篇，分别讨论HTML原创 2013-08-20 22:51:30 · 2143 阅读 · 3 评论 -
前端代码标准最佳实践：CSS篇
接着上一篇，我们再来谈谈CSS代码的一些标准实践。1，命名和其他语言规范一样，css的命名也讲究命名要有意义，命名要尽可能短但是要足够表达含义；命名的词用连字符连接。不规范的命名：?123456#navigation{}.demoimage{}.error_status{}原创 2013-08-20 22:53:57 · 2422 阅读 · 3 评论 -
前端代码标准最佳实践：HTML篇
我们今天来探讨Web前端HTML的一些最佳实践。（1）HTML代码的基本规范1. HTML的命名和格式任何代码的混乱都是从命名和格式的混乱开始的，所以一定要有统一和规范的命名和格式，以下是一些基本的规范。HTML代码所有的标签名和属性应该都为小写，虽然HTML代码是大小写不敏感的，但是W3c的规范建议为小写；属性值应该用双引号包括。给所有的关键元素定义元素的id和class，便原创 2013-08-20 22:54:40 · 2429 阅读 · 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 · 1332 阅读 · 0 评论 -
CSS实例(五)：简洁的栏目实现方式
今天花了点儿时间，琢磨了一下如何简洁的实现网页上常用的栏目。就是下面的这种东西，我称之为栏目，不知道别人叫它什么： 以下是我的HTML文件及CSS文件，可以便捷地进行样式切换。如果谁有更简洁的方式，请留言指教。 HTML文件：Html代码 xml version="1.0" encoding="UTF-8" ?> > html xmln转载 2013-08-19 22:07:18 · 1728 阅读 · 0 评论