|
|
希望下次大家做出的网页能漂亮一些，搜索框能做到下面这样最好
下面附了网上找到的代码，没实践，呼唤哪位同学实践一下，并写一个傻瓜式的文档
![]()
![]()
![]()
![]()
![]()
以下是hsc同学的实现方法，呼唤谁来验证测试修改
以下是我从网上搜到的代码
- 用CSS样式，比js好
- 有的浏览器会禁止执行脚本，那样就无效了
- CSS就不会
- <html>
- <head>
- <title>css圆角效果</title>
- <meta http-equiv="content-type" content="text/html; charset=gb2312">
- <style type="text/css">
- div.RoundedCorner{background: #9BD1FA}
- b.rtop, b.rbottom{display:block;background: #FFFFFF}
- b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
- b.r1{margin: 0 5px}
- b.r2{margin: 0 3px}
- b.r3{margin: 0 2px}
- b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
- </style>
- </head>
- <body>
- <div class="RoundedCorner">
- <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
- 无图片实现圆角框
- <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
- </div>
- <br>
- <div class="RoundedCorner">
- <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
- <br>无图片实现圆角框<br><br>
- <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
- </div>
- </body>
- </html>
- =================================================================
- 另外一种实现方式
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <!-- saved from url=(0046)http://longbill.cn/down/sample/roundcorner.htm -->
- <HTML><HEAD>
- <META http-equiv=Content-Type content="text/html; charset=gb2312">
- <STYLE>BODY {
- FONT-SIZE: 12px; COLOR: #333333; TEXT-ALIGN: center
- }
- .round {
- DISPLAY: inline; MARGIN: 5px; WIDTH: 200px; BACKGROUND-COLOR: lightblue
- }
- </STYLE>
- <META content="MSHTML 6.00.2900.2802" name=GENERATOR></HEAD>
- <BODY>
- <DIV id=title style="MARGIN: 5px; WIDTH: 500px; BACKGROUND-COLOR: #e9afdf">
- <DIV
- style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">自动圆角函数<BR>作者</DIV></DIV>
- <DIV class=round id=round1>
- <DIV
- style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式1</DIV></DIV>
- <DIV class=round id=round2>
- <DIV
- style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式2</DIV></DIV><BR>
- <DIV class=round id=round3>
- <DIV
- style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式3</DIV></DIV>
- <DIV class=round id=round4>
- <DIV
- style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式4</DIV></DIV>
- <DIV id=a style="MARGIN: 5px; WIDTH: 500px; BACKGROUND-COLOR: #e9afdf">
- <DIV
- style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">说明:<BR>RoundCorner("欲圆角的元素ID"
- [, 圆角样式 ]);<BR>圆角样式:可选参数,暂时有4种 </DIV></DIV>
- <SCRIPT>
- RoundCorner("round1",1);
- RoundCorner("round2",2);
- RoundCorner("round3",3);
- RoundCorner("round4",4);
- RoundCorner("a",1);
- RoundCorner("title",1);
- function RoundCorner(obj,style)
- { var r = [];
- var styles = [
- {top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0 1px","0 1px","0 2px","0 3px","0 5px"]},
- {top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0px","0px","0px","0px","0px"] },
- {top:["0 0 0 5px","0 0 0 3px","0 0 0 2px","0 0 0 1px","0 0 0 1px"],bottom:["0 1 0 0px","0 1 0 0px","0 2 0 0px","0 3 0 0px","0 5 0 0px"]},
- {top:["0 5 0 0px","0 3 0 0px","0 2 0 0px","0 1 0 0px","0 1 0 0px"],bottom:["0 0 0 1px","0 0 0 1px","0 0 0 2px","0 0 0 3px","0 0 0 5px"]}
- ]; //author: longbill.cn
- if (!style || style>styles.length) style = 1;
- style--;
- var btop = styles[style].top,bbottom = styles[style].bottom;
- obj = document.getElementById(obj);
- if (!obj) return;
- var HTML = obj.innerHTML;
- obj.innerHTML = "";
- for(var istop=1;istop>=0;istop--)
- {
- var topborder = document.createElement("b");
- topborder.style.display = "block";
- topborder.style.height = "2px";
- topborder.style.backgroundColor = (obj.parentNode.style.backgroundColor)?obj.parentNode.style.backgroundColor:"#FFFFFF";
- for(var i=0;i<btop.length;i++)
- {
- var b = document.createElement("b");
- if (obj.style.backgroundColor)
- b.style.backgroundColor = obj.style.backgroundColor;
- else if (obj.className)
- b.className = obj.className;
- b.style.display = "block";
- b.style.margin = (istop)?btop[i]:bbottom[i];
- b.style.height = "1px";
- b.style.overflow = "hidden";
- b.style.width = "auto";
- topborder.appendChild(b);
- }
- obj.appendChild(topborder);
- if (istop) obj.innerHTML+=HTML;
- }
- }
- </SCRIPT>
- </BODY></HTML>
- =================================================================
- <!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>
- <meta http-equiv="content-type" content="text/html; charset=gb2312" />
- <meta http-equiv="Content-Language" content="zh-CN" />
- <meta name="robots" content="all" />
- <meta name="author" content="lybykw | www.vistathink.com" />
- <meta name="Copyright" content="Copyright (c) 2000-2005 www.vistathink.com" />
- <link rel="icon" href="/favicon.ico" type="image/x-icon" media="screen" />
- <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" media="screen" />
- <meta name="description" content="网页制作" />
- <meta name="keywords" content="展望理想,中国网站资源,刘月波,制作,波波工作室,天翼数码,网站制作,Falsh,下载,成都,多媒体制 作,asp,jsp,php,sql,mssql,mysql,酷网站,图标,音乐,mp3" />
- <link rel="stylesheet" href="/css/main.css" type="text/css" media="all" />
- <script type="text/javascript" src="/public/js/main.js"></script>
- <style type="text/css">
- <!--
- body {font-size:12px;}
- .round1 { border:1px solid #AFE8E1; background-color:#fff; position:relative;}
- .round1 .tl,.round1 .tr,.round1 .bl,.round1 .br { width:5px; height:5px; overflow:hidden; position:absolute; background:url(http://cn.yimg.com/i/ks/060928/bgcorn.gif) no-repeat;}
- .round1 .tl { left:-1px; top:-1px; _top:0;}
- .round1 .tr { right:-1px; top:-1px; _top:0; background-position:-4px 0;}
- .round1 .bl { left:-1px; bottom:-1px; background-position:0 -4px;}
- .round1 .br { right:-1px; bottom:-1px; background-position:-4px -4px;}
- .ovt ul { margin:0; padding:0; }
- .ovt li {background:url(http://cn.yimg.com/i/ks/060928/br.gif) right no-repeat; height:22px; line-height:22px; list-style:none; float:left; color:#088;}
- .ovt span { background:url(http://cn.yimg.com/i/ks/060928/bl.gif) left no-repeat; display:block; padding:0 1em 0 .5em;}
- -->
- </style>
- <script language="javascript">
- <!--
- //-->
- </script>
- </head>
- <body>
- <br><br><br><br><br>
- <div class="p100">
- <div class="round1">
- <div class="tl"></div>
- <div class="tr"></div>
- <div class="bl"></div>
- <div class="br"></div>
- <div style=" position:absolute; top:-35px; _top:-22px; left:-25px;">
- <ul class="ovt">
- <li><span><img name="" src="" width="1" height="22" align="absmiddle" />
- <img src="http://cn.yimg.com/i/ks/060928/tab_knowledge.gif" hspace="3" />知识 </span></li>
- </ul>
- </div>
- <div style="padding:10px;">通过下列链接访问参考资料，可帮助你创建引人注目的 Web 页面。<br>动态 HTML (DHTML) 对象模型参考<br></div>
- </div>
- </div>
- </body>
- </html>
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有帐号？注册
x
|
发表于 2011-11-27 20:54:33
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
转播
分享
发表于 2011-12-3 20:20:23
楼主