*****************以下是效果图********************
************效果图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;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
