仿站 - 作业 - php.cnBlog

Home > List of blog posts > 仿站

Blogger Information

Blog 38

fans 0

comment 1

visits 30401

Special Recommendation

More>

Related recommendations

实例

<!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;
}

运行实例 »

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

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

1

2018-03-16 00:39:40

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例

实例

实例

实例