一,我们看如何设置网页的背景,顾名思义背景可以通过颜色和图片来设置,下边我们看一下如何设置:
颜色的设置非常简单,就是background-color这个属性,看下边的这个例子:
利用背景颜色分块
首页
分类讨论
谈天说地
精华区
我的信箱
休闲娱乐
立即注册
离开本站 正文内容...
对于图片的设置,我们可以通过属性background-image来设置,当然我们还可以设置他的位置,重复次数等等,看这个例子:
背景水平重复
二,下边我们看表格与表单的制作,首先看一下表格的制作,主要是利用 , , , , 几个标签来,制作来说相对简单,当然加上CSS和javascript,XML,Ajax来说就非常复杂了。这里看下边简单制作的例子:
年度收入 年度收入 2004 - 2007 2004 2005 2006 2007 拨款 11,980 12,650 9,700 10,600 捐款 4,780 4,989 6,700 6,590 投资 8,000 8,100 8,760 8,490 募捐 3,200 3,120 3,700 4,210 销售 28,400 27,100 27,950 29,050 杂费 2,100 1,900 1,300 1,760 总计 58,460 57,859 58,110 60,700
2,表单是我们提交个人信息的,也是网页经常出现的一条,我们通过一个常用表单的例子来学习:
表单
效果如图:
三,下边我们看一下一些浏览器中的特殊元素:
1,超链接特效:对于一些超链接,鼠标放上去会变色,并且会改变鼠标的形状,CSS如何设置,看这个例子:
动态超链接 首页 心情日记 Free 一起走到 从明天起 纸飞机 下一站
效果图:
2,当有出现帮助按钮时,我们希望将鼠标形状变为与众不同的,就是有特效的,看这个例子:
鼠标变幻超链接 首页导读推荐版面推荐文章收藏夹我的信箱休闲娱乐帮助
3,文本过多,需要设置滚动条,看这个例子的设置:
页面滚动条 .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;}CSS(Cascading Style Sheet),中文译为层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过,并且推荐使用的。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。它以HTML为基础,提供了丰富的格式化功能,如字体、颜色、背景、整体排版等等,并且网页设计者可以针对各种可视化浏览器设置不同的样式风格,包括显示器、打印机、打字机、投影仪、PDA等等。CSS的引入随即引发了网页设计的一个又一个新高潮,使用CSS设计的优秀页面层出不穷。
效果图:
四,在制作使用菜单,我以百度的首页为例子,通过这个例子学习一下:
百度??全球最大中文搜索引擎 td,p{font-size:12px;}p{width:600px; margin:0px; padding:0px;}.ff{font-family:Verdana; font-size:16px;}#navigation{ margin:0px auto; font-size:12px; padding:0px; border-bottom:1px solid #00c; background:#eee; width:600px;height:18px;}#navigation li{ float:left; /* 水平菜单 */ list-style-type:none; /* 不显示项目符号 */ margin:0px;padding:0px; width:67px;}#navigation li a{ display:block; /* 块显示 */ text-decoration:none; padding:4px 0px 0px 0px; margin:0px;}#navigation li a:link, #navigation li a:visited{ color:#0000CC;}#navigation li a:hover{ /* 鼠标经过时 */ text-decoration:underline; background:#FFF; padding:4px 0px 0px 0px; margin:0px;}#navigation li#h{width:56px;height:18px;} /* 左侧空间 */#navigation li#more{width:85px;height:18px;} /* “更多”按钮 */#navigation .current{ /* 当前页面所在 */ background:#00C; color:#FFF; padding:4px 0px 0px 0px; margin:0px; font-weight:bold;}
查看更多关于精通CSS+DIV基础总结(二)_html/css_WEB-ITnose的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://www.haodehen.cn/did102830