精通CSS+DIV网页样式与布局--页面和浏览器元素

在页面和浏览器中，除了文字、图片、表格、表单等，还有很多各种各样的元素，在上篇博文中，小编主要简单的介绍了一下在CSS中如何设置表格和表单，今天小编主要简单介绍一下丰富的超链接特效、鼠标特效、页面滚动条。首先我们来看一张思维导图：

接着，小编会跟随上述思维导图的足迹，慢慢探寻，丰富的超链接特效中，我们首先来介绍动态超链接，我们来看一下例子的代码和运行的效果：

动态超链接

<span style="font-size:18px;"><span style="font-size:18px;"><html>
<head>
<title>动态超链接</title>
<style>
<!--
body{
	background:url(bg9.gif);	/* 页面背景图片 */
	margin:0px; padding:0px;
	cursor:pointer;
}
.chara1{
	font-size:12px;
	background-color:#90bcff;	/* 导航条的背景颜色 */
}
.chara1 td{
	text-align:center;
}
a:link{							/* 超链接正常状态下的样式 */
	color:#005799;				/* 深蓝 */
	text-decoration:none;		/* 无下划线 */
}
a:visited{						/* 访问过的超链接 */
	color:#000000;				/* 黑色 */
	text-decoration:none;		/* 无下划线 */
}
a:hover{						/* 鼠标经过时的超链接 */
	color:#FFFF00;				/* 黄色 */
	text-decoration:underline;	/* 下划线 */
}
-->
</style>
   </head>
<body>
<table align="center" cellpadding="1" cellspacing="0">
	<tr><td><img src="banner3.jpg" border="0"></td></tr>
</table>
<table width="600px" cellpadding="2" cellspacing="2" class="chara1" align="center">
	<tr>
		<td><a href="#">首页</a></td>
		<td><a href="#">心情日记</a></td>
		<td><a href="#">Free</a></td>
		<td><a href="#">一起走到</a></td>
		<td><a href="#">从明天起</a></td>
		<td><a href="#">纸飞机</a></td>
		<td><a href="#">下一站</a></td>
	</tr>
</table>
</body>
</html></span></span>

运行效果如下所示：

分析一下上面的代码，我们很容易可以看出，首先将一个table标记将页面中的banner分离开来，其次将一个table标记将一个横排的一个菜单，实现一个很漂亮的浏览效果。在这里我们值得一下的是：a:link、a:visited、a:hover来分别设置动态了超链接的效果。我们接下来看看按钮式超链接，我们看看例子代码和运行效果

按钮式超链接

<span style="font-size:18px;"><html>
<head>
<title>按钮超链接</title>
<style>
<!--
a{										/* 统一设置所有样式 */
	font-family: Arial;
	font-size: .8em;
	text-align:center;
	margin:3px;
}
a:link, a:visited{						/* 超链接正常状态、被访问过的样式 */
	color: #A62020;
	padding:4px 10px 4px 10px;
	background-color: #ecd8db;
	text-decoration: none;
	border-top: 1px solid #EEEEEE;		/* 边框实现阴影效果 */
	border-left: 1px solid #EEEEEE;
	border-bottom: 1px solid #717171;
	border-right: 1px solid #717171;
}
a:hover{								/* 鼠标经过时的超链接 */
	color:#821818;						/* 改变文字颜色 */
	padding:5px 8px 3px 12px;			/* 改变文字位置 */
	background-color:#e2c4c9;			/* 改变背景色 */
	border-top: 1px solid #717171;		/* 边框变换，实现“按下去”的效果 */
	border-left: 1px solid #717171;
	border-bottom: 1px solid #EEEEEE;
	border-right: 1px solid #EEEEEE;
}
-->
</style>
   </head>
<body>
	<a href="#">首页</a>
	<a href="#">心情日记</a>
	<a href="#">学习心得</a>
	<a href="#">工作笔记</a>
	<a href="#">生活琐碎</a>
	<a href="#">其他</a>
</body>
</html></span>

运行效果如下：

这几个超链接长成了按钮，当鼠标移上去的时候，分别进行了变化，那么他在CSS中又是怎么实现的呢？我们来分析一下代码，首先一个a标记，她是对整个的按钮进行了统一的设置；a:link与a:visited采用了一样的设置，这里边的border-top与border-left用了同一种颜色，border-bottom与border-right使用了同一种颜色，这就实现了一种阴影的效果；而在hover中巧妙的把这两种颜色替换，给人一种感觉如同一个按钮，我们继续看浮雕式超链接，我们来看一下例子代码和运行效果：

浮雕式超链接

<span style="font-size:18px;"><html>
<head>
<title>浮雕超链接</title>
<style>
<!--
body{
	padding:0px;
	margin:0px;
	background-color:#f5eee1;
}
table.banner{
	background:url(banner1_bg.jpg) repeat-x;
	width:100%;
}
table.links{
	background:url(button1_bg.jpg) repeat-x;
	font-size:12px;
	width:100%
}
a{
	width:80px; height:32px;
	padding-top:10px;
	text-decoration:none;
	text-align:center;
	background:url(button1.jpg) no-repeat;	/* 超链接背景图片 */
}
a:link{color:#654300;}
a:visited{color:#654300;}
a:hover{
	color:#FFFFFF;
	text-decoration:none;
	background:url(button2.jpg) no-repeat;	/* 变换背景图片 */
}
-->
</style>
   </head>
<body>
<table cellpadding="0" cellspacing="0" class="banner">
	<tr><td><img src="banner1_left.jpg" border="0"></td></tr>
</table>
<table cellpadding="0" cellspacing="0" class="links">
	<tr><td><a href="#">首页导读</a><a href="#">在线用户</a><a href="#">查询网友</a><a href="#">在线好友</a><a href="#">好友名单</a><a href="#">查看讯息</a><a href="#">发送讯息</a></td></tr>
</table>
</body>
</html></span>

运行效果如下所示：

浮雕按钮好像是浮出纸面一样，当鼠标放上去的时候，她的变化比刚才的按钮来的更加绚丽，分析一下我们的代码，正文部分依然很简单，一个table、一个banner，然后是无数个a标记并排，表示的是超链接，重点的是，将这一横的table标记设置成了一幅背景图片，table.banner将一个小图片进行了重复。我们看看CSS控制鼠标箭头，看看我们的例子代码和运行效果：

CSS控制鼠标箭头

<span style="font-size:18px;"><html>
<head>
<title>鼠标变幻超链接</title>
<style>
<!--
body{
	padding:0px;
	margin:0px;
	background-color:#efe5e2;
}
table.banner{
	background:url(banner2_bg.jpg) repeat-x;
	width:100%;
}
table.links{
	background:url(button3_bg.jpg) repeat-x;
	font-size:12px;
	width:100%
}
a{
	width:80px; height:32px;
	padding-top:10px;
	text-decoration:none;
	text-align:center;
	background:url(button3.jpg) no-repeat;	/* 超链接背景图片 */
}
a:link, a visited{color:#2d2d26;}
a:hover{
	color:#FFFFFF;
	text-decoration:none;
	background:url(button4.jpg) no-repeat;	/* 变换背景图片 */
}
a.help:hover{								/* “帮助”按钮的样式 */
	cursor:help;							/* 变幻鼠标形状 */
}
-->
</style>
   </head>
<body>
<table cellpadding="0" cellspacing="0" class="banner">
	<tr><td><img src="banner2_left.jpg" border="0"></td></tr>
</table>
<table cellpadding="0" cellspacing="0" class="links">
	<tr><td><a href="#">首页导读</a><a href="#">推荐版面</a><a href="#">推荐文章</a><a href="#">收藏夹</a><a href="#">我的信箱</a><a href="#">休闲娱乐</a><a href="#" class="help">帮助</a></td></tr>
</table>
</body>
</html></span>

运行效果如下所示：

当我们把鼠标指向帮助的时候，鼠标的右上角就会出现一个小问号，我们对帮助这个按钮单独设置了一个class类，cursor：help，当然她的值还有很多，不但有help。小伙伴可以自己动手试一下。最后我们来看一个页面滚动条的例子代码和运行效果：

页面滚动条

<span style="font-size:18px;"><html>
<head>
<title>页面滚动条</title>
<style>
<!--
body{									/* 页面滚动条 */
	background-color:#efe5e2;
	scrollbar-3dlight-color: #B0C4DE;
	scrollbar-arrow-color: #34547E;
	scrollbar-base-color: #FF0000;		/* 基调颜色 */
	scrollbar-darkshadow-color: #1D4272;
	scrollbar-face-color: #CFDFF4;
	scrollbar-highlight-color: #FFFFFF;
	scrollbar-shadow-color: #5380BA;
}
.largetext {							/* 文本框滚动条 */
	scrollbar-3dlight-color: #B0C4DE;
	scrollbar-arrow-color: #FFFFFF;
	scrollbar-base-color: #8BA9CF;
	scrollbar-darkshadow-color: #436DA3;
	scrollbar-face-color: #34547E;
	scrollbar-highlight-color: #E6ECF4;
	scrollbar-shadow-color: #000000;
}
-->
</style>
   </head>
<body>
<textarea rows="6" cols="50" class="largetext">
.largetext {
	scrollbar-3dlight-color: #B0C4DE;
	scrollbar-arrow-color: #FFFFFF;
	scrollbar-base-color: #8BA9CF;
	scrollbar-darkshadow-color: #436DA3;
	scrollbar-face-color: #34547E;
	scrollbar-highlight-color: #E6ECF4;
	scrollbar-shadow-color: #000000;
}
</textarea>
<p>
CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过，并且推荐使用的。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。它以HTML为基础，提供了丰富的格式化功能，如字体、颜色、背景、整体排版等等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格，包括显示器、打印机、打字机、投影仪、PDA等等。CSS的引入随即引发了网页设计的一个又一个新高潮，使用CSS设计的优秀页面层出不穷。
</p>
</body>
</html></span>

运行效果如下：

如上图运行效果所示，这个滚动条不再是IE所默认的效果，而是一个非常绚丽的蓝色；我们将页面缩小，同样看到右边的滚动条也在变幻，码十分的简单，scrollbar有很多很多属性，小伙伴们可以自己动手来试试。

小编寄语：该博文小编主要简单的介绍了CSS中关于如何设置页面和浏览器的相关知识点，总共分为三个部分进行详细介绍，包括超链接特效，CSS控制鼠标箭头，页面滚动条，其中详细介绍了超链接的特效，超链接特效包括动态超链接，按钮式超链接和浮雕式超链接，在动态超链接中我们首先将一个table标记将页面中的banner分离开来，其次将一个table标记将一个横排的一个菜单，实现一个很漂亮的浏览效果。在这里我们值得一下的是：a:link、a:visited、a:hover来分别设置动态了超链接的效果；按钮式连接首先一个a标记，她是对整个的按钮进行了统一的设置；a:link与a:visited采用了一样的设置，这里边的border-top与border-left用了同一种颜色，border-bottom与border-right使用了同一种颜色，这就实现了一种阴影的效果；而在hover中巧妙的把这两种颜色替换，给人一种感觉如同一个按钮；最后浮雕式连接一个table、一个banner，然后是无数个a标记并排，表示的是超链接，重点的是，将这一横的table标记设置成了一幅背景图片，table.banner将一个小图片进行了重复，CSS的内容并不困难，难就难在你是否自己真正动手去时间，BS学习，未完待续......

精通CSS+DIV网页样式与布局--页面和浏览器元素的更多相关文章

精通CSS+DIV网页样式与布局--页面背景
上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...
系列文章--精通CSS.DIV网页样式与布局学习
精通CSS.DIV网页样式与布局(八)——滤镜的使用精通CSS.DIV网页样式与布局(七)——制作实用菜单精通CSS.DIV网页样式与布局(六)——页面和浏览器元素精通CSS.DIV网页样式与布 ...
精通CSS+DIV网页样式与布局--图片效果
提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的照片拍摄人员,我们都可以通过 ...
精通CSS+DIV网页样式与布局--初探CSS
CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...
精通CSS+DIV网页样式与布局--制作实用菜单
在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括 ...
精通CSS+DIV网页样式与布局--设置表单和表格
表格和表单是网页中非常重要的两个元素,在上篇博客中,我们简单的介绍了CSS的页面背景设置,今天小编继续来介绍CSS的相关知识,在我们的CSS中如何设置表格和表单,首先,来看一张思维导图,通过图简单的预 ...
精通CSS+DIV网页样式与布局--CSS段落效果
在上一篇博文中,小编主要详细的介绍了CSS是如何控制文字的显示效果,随着需求的不断变更,那么我们如何对段落进行相关操作,以达到我们想要的效果呢,接下来,为了需要,小编继续来完善CSS对段落的控制的显示 ...
精通CSS+DIV网页样式与布局--滤镜的使用
在上篇博客中,小编主要简单的介绍了使用CSS,如何制作实用菜单,今天我们继续来总结有关CSS的基础知识,今天小编主要简单的来介绍一下CSS中关于滤镜的使用,首先,小编先来简单的介绍一下滤镜,我们这次来 ...
精通CSS+DIV网页样式与布局--CSS文字效果
上篇文章,小编简单的介绍了一下CSS的一些基本语法,学习内容不是很复杂,都是CSS的一些入门知识,但是万丈高楼平地起,搭好地基,高楼大厦不在话下,学习任何课程,都必须从基础开始,一步一个脚印,踏实坚定 ...

随机推荐

C++符号优先级
C++符号优先级优先级操作符功能用法结合性 1 ()[]->.::++-- Grouping operatorArray accessMember access from a poin ...
Python从入门到实践学习笔记（二）元祖686gffs
列表是可以修改的,而不可变的列表被称为元组 . 定义 * 用圆括号来标识.定义元组后,使用索引来访问其元素,就像访问列表元素一样修改变量 * 不能修改元组的元素,但可以给存储元组的变量赋值修改元素 ...
react 踩的坑
1.如上图所示:没有任何语法错误,可是只要加上</button>闭合标签后就乱套了解决方案:sublimetext view-syntax-babel-javascript(babel) ...
美链BEC合约漏洞技术分析
这两天币圈链圈被美链BEC智能合约的漏洞导致代币价值几乎归零的事件刷遍朋友圈.这篇文章就来分析下BEC智能合约的漏洞漏洞攻击交易我们先来还原下攻击交易,这个交易可以在这个链接查询到. 我截图给大家 ...
Linux下MySQL 数据库的基本操作
1. 创建数据库相关命令: 首先,下载MySQL相关软件包:aptitude install mysql-server/mysql-client MySQL中的root用户类似于Linux下的root ...
Android Multimedia框架总结（二十四）MediaMuxer实现手机屏幕录制成gif图
转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼yuiop:http://blog.csdn.net/hejjunlin/article/details/53866405 前言:上篇中,介绍 ...
SQL Server 扩展事件（Extented Events）从入门到进阶（4）——扩展事件引擎——基本概念
本文属于 SQL Server 扩展事件(Extented Events)从入门到进阶系列在第一二节中,我们创建了一些简单的.类似典型SQL Trace的扩展事件会话.在此过程中,介绍了很多扩展事 ...
ubuntu日志文件管理
众所周知,ubuntu的日志文件会越来越大,需要定期管理 logrotate是个十分有用的工具,它可以自动对日志进行截断(或轮循).压缩以及删除旧的日志文件.例如,你可以设置logrotate,让/v ...
Linux中的高级文本处理命令，cut命令，sed命令，awk命令
1.2.1 cut命令 cut命令可以从一个文本文件或者文本流中提取文本列. cut语法 [root@www ~]# cut -d'分隔字符' -f fields ## 用于有特定分隔字符 [r ...
剑指Offer——Java实现栈和队列的互模拟操作
剑指Offer--Java实现栈和队列的互模拟操作栈模拟队列题目:JAVA实现用两个栈来实现一个队列,完成队列的Push和Pop操作.队列中的元素为int类型. 思路:其实就是把队列正常入 ...

精通CSS+DIV网页样式与布局--页面和浏览器元素

精通CSS+DIV网页样式与布局--页面和浏览器元素的更多相关文章

随机推荐

热门专题