search

博客列表 >仿站

仿站

1
1原创
2018年03月30日 14:02:462034浏览

*****************以下是效果图********************

Document.png

************效果图END*******************

以下是html代码

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>

	<div class="header">
		<div class="frame">
			<div class="top">
				<div class="top_img">
					<a href="index.html">
						<img src="img/logo6a.png">
					</a>
				</div>
				<div class="logo">
					<h1>純美蘋果園</h1>
					<b><a href="">www.goddessfantasy.net</a></b>
				</div>
			</div>
			<!-- topEND -->
			<div class="middle">
				<div class="user">
					<pre>请 <a href="">登录 </a>或 <a href="">注册</a></pre>
					<form action="" method="post">
						<input  class="in_user" type="text" name="name" size="10">
						<input class="in_user" type="password" name="password" size="10">
						<select name="cookie">
							<option>一小时</option>
							<option>一天</option>
							<option>一周</option>
							<option>一个月</option>
						</select>
						<input class="sub" type="submit" name="" value="登录">
					</form>
					<pre>请输入帐号, 密码以及预计登录时间</pre>
				</div>
				<div class="notice">
					<form id="search">
						<input type="text" name="search">
						<input class="sub" type="submit" value="搜索">
					</form>
					<p><b>果园地址：</b> 45.79.87.129　<b>ＩＲＣ：</b> <a href="https://kiwiirc.com/client/irc.ellesime.tk/?&encoding=gbk#Free">irc.ellesime.tk<br>GBK－6667/6668/6669</a><br><font color="red"><b>本站点内容仅供爱好者研究参考，不得作为商业用途</b></font><br><b>查看你的订阅：</b><a href="?action=profile;area=notification">点击这里</a>　 　<b>查看最新帖子：</b><a href="?action=recent">点击这里</a><br><b>新人知识导读：</b><a href="?topic=31666">欢迎光临</a>　 　<b>最新跑团工具：</b><a href="?topic=31715">使用指南</a><br><b>最新开团寻团：</b><a href="?board=551">招聘广场</a>　 　<b>灌水聊天专区：</b><a href="?board=10">闲聊水区</a><br><font color="red"><b>警告！超标版区广告将直接删除以及版主扣除1枚苹果币</b></font></p>
				</div>
			</div>
			<div class="menu">
				<ul class="menu_nav">
					<li><a href="">首页</a></li>
					<li><a href="">说明</a></li>
					<li><a href="">登录</a></li>
					<li><a href="">注册</a></li>
				</ul>
				<b><pre class="notice">注意：果園已搬入新域名 www.GoddessFantasy.net，請儘速更新書籤和連接。</pre></b>
			</div>
		</div>
	</div>
	<!-- headerEND -->
	<div class="conter">
		<div class="frame">
			<div class="table_list">
				<p class="table_tit"><a href="">克苏鲁的呼唤（Call of Cthulhu)</a></p>
				<div class="info">
					<strong>那永恒长眠的并非亡者，<br>
在诡秘的万古中即便死亡本身亦会消逝</strong>
				</div>
				<pre>
本版内容仅供爱好者研究参考学习所用，请在下载之后24小时之内删除，不得作为商业用途
购买正版书籍请前往：
<a href="">混沌元素官网</a>
<a href="">drivethrrpg</a>
<a href="">亚马逊中国</a>
官网会不时提供免费模组。
非规则提问请去<a href=""> COC 討論區 </a>，规则提问请在<a href=""> 问答贴 </a>下提问，模组和资料等请发对应的专区：
<a href="">混沌元素出版的核心规则及其扩展以及尚无分区的其他扩展在这里</a>，<a href="">野火社出版的酷炫机甲和科技规则在这里</a>,<a href="">Arc Dream社出版的特工规则在这里</a>，<a href="">エンターブレイン社出版的现代日本设定和扩展规则在这里</a>。
本版下请发以上之外的内容。请自觉维护秩序。
				</pre>
			</div>
			<!-- END -->
			<table class="table_list">
				<p class="table_tit"><a href="#">TRPG討論區</a></p>
				<tr class="view">
					<td class="icon">
						<a href=""><img src="img/off.png"></a>
					</td>
					<td class="table_con">
						<a href="">招募区</a>
						<p>【2018春】果园周年庆活动预热（还有3天）</p>
						<hr>
						<ul>
							<li>如果您没跑團经验或初到本站，請在這裡踏出新人第一步。</li>
							<li>
							如果是想了解這遊戲的新手君，請先耐心閲讀新手導航帖。
							</li>
							<li>
							比起旁觀果然直接跑團更為愉悅！開團求團的請關注本區。
							</li>
						</ul>
						<hr>
						<p>
◆	面團活動聯繫匯總帖子	◆	◆	團不會找你但你能找團	◆	◆	理念衝突時請保持優雅	◆</p>
					</td>
					<td class="stats">
						<p>13373 帖子<br>1793 主题 </p>
					</td>
					<td class="lastpost">
						<p>最新帖子 由 光辉观察者<br>在 语音PF团招募少量pc<br>于 今天18:37:18 </p>
					</td>
				</tr>
				<!-- view2 -->
				<tr class="view">
					<td class="icon">
						<a href=""><img src="img/off.png"></a>
					</td>
					<td class="table_con">
						<a href="">研讨区</a>
						<p>【2018春】果园周年庆活动预热（还有3天）</p>
						<hr>
						<ul>
							<li>★	新手區	：	<a href="">新手報到</a>	<a href="">人卡練習</a></li>
							<li>
							　	★	團力區	：	<a>跑團討論</a>	<a href="">主持專區</a>	玩家專區	<a href="">劇本專區</a>	<a href="">團報專區</a>
							</li>
							<li>
							　	★	戰力區	：	<a>PF 规则</a>	<a>COC规则</a>	<a href="">DND三版</a>	<a href="">DND四版</a>	<a href="">DND五版</a>
							</li>
							<li>★	原創區	：	<a href="">原創分享</a>	<a href="">規則魔改</a></li>
						</ul>
						<hr>
						<p>
◆	面團活動聯繫匯總帖子	◆	◆	團不會找你但你能找團	◆	◆	理念衝突時請保持優雅	◆</p>
					</td>
					<td class="stats">
						<p>13373 帖子<br>1793 主题 </p>
					</td>
					<td class="lastpost">
						<p>最新帖子 由 光辉观察者<br>在 语音PF团招募少量pc<br>于 今天18:37:18 </p>
					</td>
				</tr>
				<!-- view3 -->
			</table>
			<!-- table2 -->
			<table class="table_list">
				<p class="table_tit"><a href="#">譯文資料區</a></p>
				<tr class="view">
					<td class="icon">
						<a href=""><img src="img/off.png"></a>
					</td>
					<td class="table_con">
						<a href="">Pathfinder RPG</a>
						<hr>
						<ul>
							<li>	★	核心规则	★	玩家伴侣	★	怪物图鉴	★	背景设定	★</li>
							<li>★	模组索引	★	规则FAQ	★	规则CHM	★	资源合集	★</li>
						</ul>
						<hr>
						<p>版主群: 星, Dr. Levis, 弑君者伊恩, 傻豆, 月夜白雨</p>
					</td>
					<td class="stats">
						<p>13373 帖子<br>1793 主题 </p>
					</td>
					<td class="lastpost">
						<p>最新帖子 由 光辉观察者<br>在 语音PF团招募少量pc<br>于 今天18:37:18 </p>
					</td>
				</tr>
				<!-- view1 -->
				<tr class="view">
					<td class="icon">
						<a href=""><img src="img/off.png"></a>
					</td>
					<td class="table_con">
						<a href="">研讨区</a>
						<p>【2018春】果园周年庆活动预热（还有3天）</p>
						<hr>
						<ul>
							<li>★	新手區	：	<a href="">新手報到</a>	<a href="">人卡練習</a></li>
							<li>
							　	★	團力區	：	<a>跑團討論</a>	<a href="">主持專區</a>	玩家專區	<a href="">劇本專區</a>	<a href="">團報專區</a>
							</li>
							<li>
							　	★	戰力區	：	<a>PF 规则</a>	<a>COC规则</a>	<a href="">DND三版</a>	<a href="">DND四版</a>	<a href="">DND五版</a>
							</li>
							<li>★	原創區	：	<a href="">原創分享</a>	<a href="">規則魔改</a></li>
						</ul>
						<hr>
						<p>
◆	面團活動聯繫匯總帖子	◆	◆	團不會找你但你能找團	◆	◆	理念衝突時請保持優雅	◆</p>
					</td>
					<td class="stats">
						<p>13373 帖子<br>1793 主题 </p>
					</td>
					<td class="lastpost">
						<p>最新帖子 由 光辉观察者<br>在 语音PF团招募少量pc<br>于 今天18:37:18 </p>
					</td>
				</tr>
				<!-- view2 -->
			</table>
		</div>
	</div>
<!-- cont_tableEND -->
	<div class="footer">
		<div class="frame">
			<pre>
				

    Celeste by rjckE
    Powered by SMF 2.0 RC3 | SMF © 2006–2010, Simple Machines LLC
    XHTMLRSSWAP2


			</pre>
		</div>
	</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

以下是页面重置css

实例

*{
	margin: 0;
    padding: 0;
}
html {
	overflow-y: auto;
	overflow-x: hidden;
}
body{
	background-color:#EBF5FA;
}
body, h1,h2,h3, ul,li,p {
	margin: 0;
	padding: 0;
	font-family: 'microsoft yehei', Verdana, Arial;
	color: #505050;
}

p, li, a {
	font-size: 12px;
}

ul, li {
	list-style-type: none;
}

a:link, a:visited, a:active {
	color: #505050;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
	color:#CC9999 ;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

以下是公共页面css

实例

.header{
	width: 95%;
	height: 350px;
	margin: auto;
	margin-top: 14px;
	background-image: url(../img/main_block.png);
	background-repeat: no-repeat;
	background-position:0 -240px;
	background-size:auto;
	padding-left: 20px;
}
.header .frame{
	height: 350px;
	background-image: url(../img/main_block.png);
	background-color: red;
	background-repeat: no-repeat;
	background-position:100% -240px;
	background-size:auto;
	margin: auto;
	padding: 5px 20px 0 0;
}
.header .frame .top{
	width: 100%;
	height:120px;
	overflow: hidden;
}
.header .frame .top .top_img{
	position: absolute;
	top: 0px;
	left: 40px;
	float: left;
}
.header .frame .top .logo{
	float: right;
	margin-right: 30px;
	margin-top: 10px;
	text-align: right;
	line-height: 40px;
	text-shadow: 0 0 5px #888;
}
.header .frame .top .logo h1{
	font-size: 24pt;
}
.header .frame .top .logo b a{
	font-size: 12px;
}
.middle{
	height: 140px;
	margin-top: 2em;
	overflow: hidden;
}
.middle .user{
	width: 50%;
	float: left;
}
.sub{
	font-size: 12px;
}
.notice{
	float: right;
	width: 50%;
	text-align: right;
}
.menu{
	margin-top: 10px;
	height: 22px;
	border-bottom: 1px solid #003366;
}
.menu_nav li{
	float: left;
	margin-right: 8px;
	background-color: #003366 ;
	border-radius:5px;
	width:35px;
	height: 20px;
	text-align: center;
}
.menu_nav a{
	color: #fff;
	font-weight: bold;
}
.footer{
	width: 95%;
	height: 130px;
	margin: auto;
	text-align: center;
	background-image: url(../img/main_block.png);
	background-repeat: no-repeat;
	background-position: 0 -820px;
	padding-left: 20px;
}
.footer .frame{
	text-align: center;
	background-image: url(../img/main_block.png);
	background-repeat: no-repeat;
	background-position: 100% -820px;
	padding: 60px 0 0 0;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

以下是主页面的css

实例

.conter{
	width: 95%;
	margin: auto;
	background-image: url(../img/frame_repeat.png);
	background-repeat: repeat-y;
	background-position:left top;
	padding-left: 20px;
}
.conter .frame{
	height:100%;
	background-image: url(../img/frame_repeat.png);
	background-repeat: repeat-y;
	background-position:right top;
	padding-left: 20px;
	padding: 0 20px 0 0;
}
.table_list{
	height: 100%
}
.table_tit{
	height: 30px;
	background-color: skyblue;
	border-radius:5px;
	padding-left:10px;
}
.table_tit a{
	font-size: 18px;
}
.info{
	text-align: center;
	margin-bottom: 20px;
}
.view{
	height: 182px;
overflow: hidden;
}
.icon{
	background-color: #99CCCC ;
	width: 80px;
	text-align: center;
}
.table_con{
	background-color: #99CCCC ;
	width: 710px;

}
.table_con hr{
	width: 677px;
	margin: auto;
	height: 1px;
	border: 0;
	color: #2F6D82;
	background-color: #2F6D82;
}
.table_con a{
	font-size: 18px;
}
.table_con p{
	font-size: 15px;
	text-align: center;
}
.table_con ul{
	margin-left:50px;
	line-height: 30px;
}
.table_con ul li{
	font-size: 15px;
	text-align: left;
}
.stats{
	width: 110px;
	background-color: #99CCCC;
	text-align: center;
}
.lastpost{
	width: 310px;
	background-color: #99CCCC;
	text-align: center;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例


上一条：javascript教学第一节课--2018年3月30日上传！下一条：js实现相册与迷你计算器—2018年3月30日13时54分
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多