<html><head><title>利用背景颜色分块</title><style><!--body{ padding:0px; margin:0px; background-color:#ffebe5; /* 页面背景色 */}.topbanner{ background-color:#fbc9ba; /* 顶端banner的背景色 */}.leftbanner{ width:22%; height:330px; vertical-align:top; background-color:#6d1700; /* 左侧导航条的背景色 */ color:#FFFFFF; text-align:left; padding-left:40px; font-size:14px;}.mainpart{ text-align:center;}--></style> </head><body><table cellpadding="0" cellspacing="1" width="100%" border="0"> <tr> <td colspan="2" class="topbanner">@@##@@</td> </tr> <tr> <td class="leftbanner"> <br><br>首页<br><br>分类讨论 <br><br>谈天说地<br><br>精华区 <br><br>我的信箱<br><br>休闲娱乐 <br><br>立即注册<br><br>离开本站 </td> <td class="mainpart">正文内容...</td> </tr></table></body></html><html><head><title>背景水平重复</title><style><!--body{ padding:0px; margin:0px;}.topbanner{ background-image:url(bg2.jpg); /* 背景图片 */ background-repeat:repeat-x; /* 水平方向重复 */}--></style> </head><body><table cellpadding="0" cellspacing="1" width="100%" border="0"> <tr> <td class="topbanner">@@##@@</td> <!-- 配上banner图片 --> </tr></table></body><html><html><head><title>年度收入</title><style><!--.datalist{ border:1px solid #429fff; /* 表格边框 */ font-family:Arial; border-collapse:collapse; /* 边框重叠 */}.datalist caption{ padding-top:3px; padding-bottom:2px; font:bold 1.1em; background-color:#f0f7ff; border:1px solid #429fff; /* 表格标题边框 */}.datalist th{ border:1px solid #429fff; /* 行、列名称边框 */ background-color:#d2e8ff; font-weight:bold; padding-top:4px; padding-bottom:4px; padding-left:10px; padding-right:10px; text-align:center;}.datalist td{ border:1px solid #429fff; /* 单元格边框 */ text-align:right; padding:4px;}--></style> </head><body> <table class="datalist"> <caption>年度收入 2004 - 2007</caption><!--添加表头--> <tr> <th></th> <th scope="col">2004</th> <th scope="col">2005</th> <th scope="col">2006</th> <th scope="col">2007</th> </tr> <tr> <th scope="row">拨款</th> <td>11,980</td> <td>12,650</td> <td>9,700</td> <td>10,600</td> </tr> <tr> <th scope="row">捐款</th> <td>4,780</td> <td>4,989</td> <td>6,700</td> <td>6,590</td> </tr> <tr> <th scope="row">投资</th> <td>8,000</td> <td>8,100</td> <td>8,760</td> <td>8,490</td> </tr> <tr> <th scope="row">募捐</th> <td>3,200</td> <td>3,120</td> <td>3,700</td> <td>4,210</td> </tr> <tr> <th scope="row">销售</th> <td>28,400</td> <td>27,100</td> <td>27,950</td> <td>29,050</td> </tr> <tr> <th scope="row">杂费</th> <td>2,100</td> <td>1,900</td> <td>1,300</td> <td>1,760</td> </tr> <tr> <th scope="row">总计</th> <td>58,460</td> <td>57,859</td> <td>58,110</td> <td>60,700</td> </tr></table></body></html><html><head><title>表单</title><style><!--form{ border: 1px dotted #AAAAAA; padding: 1px 6px 1px 6px; margin:0px; font:14px Arial;}input{ /* 所有input标记 */ color: #00008B; }input.txt{ /* 文本框单独设置 */ border: 1px inset #00008B; background-color: #ADD8E6;}input.btn{ /* 按钮单独设置 */ color: #00008B; background-color: #ADD8E6; border: 1px outset #00008B; padding: 1px 2px 1px 2px;}select{ width: 80px; color: #00008B; background-color: #ADD8E6; border: 1px solid #00008B;}textarea{ width: 200px; height: 40px; color: #00008B; background-color: #ADD8E6; border: 1px inset #00008B;}--></style> </head><body><form method="post"><p>请输入您的姓名:<br><input type="text" name="name" id="name" class="txt"></p><p>请选择你最喜欢的颜色:<br><select name="color" id="color"> <option value="red">红</option> <option value="green">绿</option> <option value="blue">蓝</option> <option value="yellow">黄</option> <option value="cyan">青</option> <option value="purple">紫</option></select></p><p>请问你的性别:<br> <input type="radio" name="sex" id="male" value="male" class="rad">男<br> <input type="radio" name="sex" id="female" value="female" class="rad">女</p><p>你喜欢做些什么:<br> <input type="checkbox" name="hobby" id="book" value="book" class="check">看书 <input type="checkbox" name="hobby" id="net" value="net" class="check">上网 <input type="checkbox" name="hobby" id="sleep" value="sleep" class="check">睡觉</p><p>我要留言:<br><textarea name="comments" id="comments" cols="30" rows="4" class="txtarea"></textarea></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="max-width:90%" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn"></p></form></body></html><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>@@##@@</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><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>@@##@@</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><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;}.largetext1 { 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;}.largetext11 {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 name="textarea" cols="50" rows="6" class="largetext11">.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><html><head><title>百度??全球最大中文搜索引擎</title><style type="text/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;}</style> </head><body><center><br>@@##@@<br><br><br><br><div id="navigation"><ul> <li id="h"></li> <li><a href="#">资 讯</a></li> <li class="current">网 页</li> <li><a href="#">贴 吧</a></li> <li><a href="#">知 道</a></li> <li><a href="#">MP3</a></li> <li><a href="#">图 片</a></li> <li id="more"><a href="#">更 多 >></a></li></ul></div><p style="height:44px;"> </p><table width="600" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="92"></td> <td><form><input type="text" name="wd" class="ff" size="35"> <input type="submit" value="百度搜索"></form></td> <td width="92" valign="top"><a href="#">搜索帮助</a><br><a href="#">高级搜索</a></td> </tr></table></center></body></html>
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
318
