今天看了看sohu的CSS,有点启发。它全部使用背景来制作网页中的栏目。很巧妙,很亲切,很象以前做桌面程序的感觉。使用三张图片,基本上就生成了整个网页的所有栏目。
titletag.png
cutbg.gif(这个图片很长,我剪掉了一部分)
bgx.gif
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>娱乐频道-搜狐</title>
<style type="text/css">
a {color: #333;text-decoration:none;font-size:12px}
a:hover {color:#dc0000;text-decoration:underline;}
.column,.column_btm{width:265px;}
.column h2{background:url(titletag.png) 0 -60px;color:#fff;height:24px;line-height:24px;font-size:12px;font-weight:weigth;margin:0px;padding:0 0 0 12px;}
.column a{
background:url(bgx.gif) repeat-x 0 -85px;height:25px;line-height:25px;vertical-align:middle;display:block;margin:0 1em;
}
.bgno{background:none;}
.column_btm{background:url(titletag.png) 0 -259px;height:5px;font-size:1px;clear:both;}
.column{background:url(cutbg.gif) -2585px 0;}
</style>
</head>
<body>
<div class="column">
<h2><span>搜狐视频</span></h2>
<a href="http://blog.csdn.net/wallimn" title="欢迎访问我的博客" target="_blank">浙江发现潭底恢宏地宫 呈北斗七星排列</a>
<a href="http://blog.csdn.net/wallimn" title="欢迎访问我的博客" target="_blank">干扰演讲学生获保释 自称无罪</a>
<a class="bgno" href="http://blog.csdn.net/wallimn" target="_blank">刘谦诡异魔术 影子找扑克牌如鬼魂显灵</a>
<div class="column_btm"></div>
</body>
</html>
/***********本人原创,欢迎转载,转载请保留本人信息*************/
作者:wallimn 电邮:wallimn@sohu.com 时间:2009-02-13
博客:
http://blog.csdn.net/wallimn http://wallimn.iteye.com
网络硬盘:http://wallimn.ys168.com
/***********文章发表请与本人联系,作者保留所有权利*************/
- 大小: 7.3 KB
- 大小: 1.3 KB
- 大小: 275 Bytes
分享到:
相关推荐
css元素样式:字体、背景、布局等
XHTML代码很简单,就是一个无序列表,不过我们对标题和时间设置了不同的CLASS以方便控制。 Example Source Code
非常不错的页面制作方法,Div CSS,推荐给喜欢网页制作的朋友.
DivCSS布局中表单的美化一直是CSSer头疼的问题,特别是Select样式的美化,更是头痛。今天向大家展示实例,希望对大家的学习工作有所帮助。 演示:http://www.websjy.com/club/websjy_index/select/
上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合
div css实例div css实例div css实例
1.2 使用CSS控制页面 1.3 体验CSS 第2章 CSS的基本语法 2.1 CSS选择器 2.2 选择器声明 2.3 CSS的继承 第3章 用CSS设置丰富的文字效果 3.1 CSS文字样式 3.2 文字实例一:模拟...
DIVCSS网页布局实例:十步学会用CSS建站 本资源主要讲解了如何使用CSS从头开始创建一个完整的网页布局,通过十个步骤,指导读者一步步地构建一个完整的网站。下面是该资源的知识点总结: 1. 规划网站:网站的规划...
简单的利用css设置背景和文字案例,有需要的可以下载学习
1.2 使用CSS控制页面 1.3 体验CSS 第2章 CSS的基本语法 2.1 CSS选择器 2.2 选择器声明 2.3 CSS的继承 第3章 用CSS设置丰富的文字效果 3.1 CSS文字样式 3.2 文字实例一...
1.2 使用CSS控制页面 1.3 体验CSS 第2章 CSS的基本语法 2.1 CSS选择器 2.2 选择器声明 2.3 CSS的继承 第3章 用CSS设置丰富的文字效果 3.1 CSS文字样式 3.2 文字实例一:模拟...
《CSS3实战:开发与设计》书中所包含的示例的全部源码。 本书英文版书名《Practical CSS3:Developand Design》,作者Chris Mills是一名杰出的Web技术专家、Web开放标准的布道者和Web教育变革者。他创立了Opera网络...
css背景合并工具,自动生成CSS样式,非常的快速方便
1.2 使用CSS控制页面 1.3 体验CSS 第2章 CSS的基本语法 2.1 CSS选择器 2.2 选择器声明 2.3 CSS的继承 第3章 用CSS设置丰富的文字效果 3.1 CSS文字样式 3.2 文字实例一:模拟...
1.2 使用CSS控制页面 1.3 体验CSS 第2章 CSS的基本语法 2.1 CSS选择器 2.2 选择器声明 2.3 CSS的继承 第3章 用CSS设置丰富的文字效果 3.1 CSS文字样式 3.2 文字实例一:模拟...
非常好看的特效,只能用炫酷来形容,感兴趣就下载看看吧,用在自己的网站觉得吸引眼球!
一个经典的CSS实例
html+css实例
css实例教程.pdf