一个漂亮的公告页

作者:刚子日期:2009-01-05

字体大小: 小中大

对于我这种对CSS完全陌生的人来讲每次看到漂亮的页面都会偷偷收藏起来备用，目前电脑已经收了不少漂亮的页面。今天看到腾讯的一个公告页做的蛮不错，至少很简洁，收藏之。
（PS：如果把边框颜色换成随机变化会更漂亮）

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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="robots" content="all" />
<title>公告栏</title>
<style type="text/css" media="screen">
body,ul,h1,h2,p { margin: 0; padding: 0;}
body { font: normal 12px Tahoma; background: #F5F6F7;}
ul { list-style: none;}
a { text-decoration: none;}
a:hover { text-decoration: underline;}
.wp,.try li { background: url(http://ossweb-img.qq.com/images/web/failure/bg.png) no-repeat;}
.wp { width: 500px; height: 250px; padding: 5px; position: absolute; left: 50%; top: 50%; margin: -150px 0 0 -255px;}
h1,h2 { height: 0; overflow: hidden;}
#cnt { height: 157px; padding: 87px 40px 0 40px ; border-width: 3px; border-style: solid;}
.c1 { border-color: #B500FF;}
.try { border-top: 1px solid #CCCCCC;}
.try p { height: 29px; line-height: 29px; padding: 18px 0 0 1px; color: #828282;}
.try li { height: 27px; line-height: 27px; padding-left: 6px; background-position: -510px 0;}
.try li a { font-size: 14px; color: #333333;}
</style>
</head>
<body>
<div class="wp">
	<h1>腾讯游戏温馨提示</h1>
	<div id="cnt" class="c1">
		<h2>亲爱的用户，此页面暂时无法访问，请您稍后再试！</h2>
		<div class="try">
			<p>您可以选择访问：</p>
			<ul>
				<li><a href="http://www.baidu.com">百度</a></li>
				<li><a href="http://www.g.cn">谷歌</a></li>
				<li><a href="http://www.gangzi.org">刚子的博客</a></li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[本日志由刚子于 2010-08-28 05:58 AM 编辑]

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

Tags:

相关日志:

评论: 0 | 引用: 0 | 查看次数: -

发表评论

昵　称:
密　码:	游客发言不需要密码.
内　容:	正在加载编辑器...
验证码:
选　项:	禁止表情转换禁止自动转换链接禁止自动转换关键字

虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.

一个漂亮的公告页

作者:刚子 日期:2009-01-05

作者:刚子日期:2009-01-05