HTML第九章上機題

阿新 • • 發佈：2019-01-17

<!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=utf-8" />
<title>開心網——網頁遊戲</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
  <div id="gameLogo"><img src="images/gameLogo.jpg"/></div>
  <div class="gameIndex"><a href="#">首頁</a></div>
  <div id="menu"><a href="#">註冊</a> | <a href="#">登入</a> | <a href="#">幫助</a> | <a href="#">更多</a></div>
</div>
<div class="clear"></div>
<!--主體內容開始-->
<div id="container">
  <!--左側內容開始-->
  <div class="gameLeft">
    <div class="gameNav">
      <ul>
        <li><a href="#"><img src="images/sub-1.gif" />俠客世界</a></li>
        <li><a href="#"><img src="images/sub-2.gif" />征戰四方</a></li>
        <li><a href="#"><img src="images/sub-3.gif" />龍將</a></li>
        <li><a href="#"><img src="images/sub-4.gif" />彈彈堂</a></li>
        <li><a href="#"><img src="images/sub-5.gif" />凡人修真2</a></li>
        <li><a href="#"><img src="images/sub-6.gif" />一騎當先</a></li>
        <li><a href="#"><img src="images/sub-7.gif" />宮廷計</a></li>
        <li><a href="#"><img src="images/sub-8.gif" />神仙道</a></li>
      </ul>
    </div>
    <div class="gameAdver"><a href="#"><img src="images/img-3.jpg" /></a></div>
    <div class="clear"></div>
    <div class="gameBorder">
      <div class="gameTitle">
        <dl>
          <dt>全部遊戲</dt>
          <dd><a href="#">戰爭策略</a></dd>
          <dd>|</dd>
          <dd><a href="#">體育經營</a></dd>
          <dd>|</dd>
          <dd><a href="#">社交遊戲</a></dd>
        </dl>
      </div>
      <div class="allGame">
        <dl>
          <dt><a href="#" class="titleImg"><img src="images/img-4.jpg"/></a>
            <h1><a href="#">龍將</a></h1>
            三國題材橫版RPG網遊，豐富的武將系統<br/>
            型別：角色扮演<br/>
            遊戲人氣：<span>470921</span><br/>
            <a href="#"><img src="images/btn-02.jpg"/></a> <a href="#"><img src="images/btn-03.jpg"/></a> </dt>
          <dd><a href="#" class="titleImg"><img src="images/img-5.jpg"/></a>
            <h1><a href="#">征戰四方</a></h1>
            一款不建主城不等CD，不佔資源，全程戰鬥<br/>
            型別：戰徵策略<br/>
            遊戲人氣：8745221<br/>
            <a href="#"><img src="images/btn-02.jpg"/></a> <a href="#"><img src="images/btn-03.jpg"/></a> </dd>
        </dl>
      </div>
      <div class="gameTitle">
        <dl>
          <dt>角色扮演</dt>
        </dl>
      </div>
      <div class="role">
        <ul>
          <li><a href="#"><img src="images/img-6.jpg" /></a>
            <h1><a href="#">神仙道</a></h1>
            <p>遊戲人氣：1765314<br/>
              遊戲狀態：<span>22區開啟</span></p>
            <a href="#"><img src="images/btn-02.jpg"/></a> <a href="#"><img src="images/btn-03.jpg"/></a></li>
          <li><a href="#"><img src="images/img-7.jpg" /></a>
            <h1><a href="#">征戰四方</a></h1>
            <p>遊戲人氣：1245814<br/>
              遊戲狀態：<span>23區開啟</span></p>
            <a href="#"><img src="images/btn-02.jpg"/></a> <a href="#"><img src="images/btn-03.jpg"/></a></li>
          <li><a href="#"><img src="images/img-8.jpg" /></a>
            <h1><a href="#">一騎當先</a></h1>
            <p>遊戲人氣：1232158<br/>
              遊戲狀態：<span>25區開啟</span></p>
            <a href="#"><img src="images/btn-02.jpg"/></a> <a href="#"><img src="images/btn-03.jpg"/></a></li>
          <li><a href="#"><img src="images/img-9.jpg" /></a>
            <h1><a href="#">洪荒神話</a></h1>
            <p>遊戲人氣：123745<br/>
              遊戲狀態：<span>18區開啟</span></p>
            <a href="#"><img src="images/btn-02.jpg"/></a> <a href="#"><img src="images/btn-03.jpg"/></a></li>
          <li><a href="#"><img src="images/img-10.jpg" /></a>
            <h1><a href="#">龍將</a></h1>
            <p>遊戲人氣：178501<br/>
              遊戲狀態：<span>火爆開啟</span></p>
            <a href="#"><img src="images/btn-02.jpg"/></a> <a href="#"><img src="images/btn-03.jpg"/></a></li>
          <li><a href="#"><img src="images/img-11.jpg" /></a>
            <h1><a href="#">一球成名</a></h1>
            <p>遊戲人氣：983014<br/>
              遊戲狀態：<span>2服開啟</span></p>
            <a href="#"><img src="images/btn-02.jpg"/></a> <a href="#"><img src="images/btn-03.jpg"/></a></li>
          <li><a href="#"><img src="images/img-12.jpg" /></a>
            <h1><a href="#">凡人修真2</a></h1>
            <p>遊戲人氣：745214<br/>
              遊戲狀態：<span>4服開啟</span></p>
            <a href="#"><img src="images/btn-02.jpg"/></a> <a href="#"><img src="images/btn-03.jpg"/></a></li>
          <li><a href="#"><img src="images/img-13.jpg" /></a>
            <h1><a href="#">傲視開地</a></h1>
            <p>遊戲人氣：654814<br/>
              遊戲狀態：<span>火爆開啟</span></p>
            <a href="#"><img src="images/btn-02.jpg"/></a> <a href="#"><img src="images/btn-03.jpg"/></a></li>
        </ul>
      </div>
    </div>
  </div>
  <!--右側內容開始-->
  <div class="gameRight">
    <div class="gameLogin">
      <h1>開心網使用者登入</h1>
      <ul>
        <li>賬號：
          <input name="username" type="text"/>
        </li>
        <li>密碼：
          <input name="pwd" type="password"/>
        </li>
      </ul>
      <dl>
        <dt>
          <input name="login" type="submit" value=" "  class="login"/>
        </dt>
        <dd><a href="#">立即註冊</a><br/>
          <a href="#">忘記密碼</a></dd>
      </dl>
    </div>
    <div class="clear"></div>
    <div class="gameBorder">
      <div class="gameTitle">
        <dl>
          <dt>新聞公告</dt>
        </dl>
      </div>
      <div class="clear"></div>
      <ul class="news">
        <li><a href="#">[征戰四方] 開心首服·黃巾之亂</a></li>
        <li><a href="#">[龍將] 火爆8服·八門金</a></li>
        <li><a href="#">[彈彈堂] 41服開啟·萬人競技</a></li>
        <li><a href="#">[凡人修真2] 03月08日·四海帝王</a></li>
        <li><a href="#">[一騎當先] 開心2服上線送黃金</a></li>
        <li><a href="#">[宮廷計] 03月06日·西施祕史</a></li>
        <li><a href="#">[神仙道] 03月05日·玄淨魔影</a></li>
        <li><a href="#">[千軍破] 48服·登入送史實名將</a></li>
        <li><a href="#">[大唐行鏢] 全球唯一走鏢頁遊</a></li>
        <li><a href="#">[范特西籃球] 瘋狂紐約來啦！</a></li>
        <li><a href="#">[一球成名] 27服開服·王者之戰</a></li>
        <li class="noBorder"><a href="#">[凡人修真2] 03月08日·四海帝王</a></li>
      </ul>
      <div class="clear"></div>
    </div>
    <div class="clear"></div>
    <div class="gameBorder">
      <div class="gameTitle">
        <dl>
          <dt>遊戲視訊</dt>
        </dl>
      </div>
      <div class="clear"></div>
      <dl class="gameVideo">
        <dt><a href="#"><img src="images/img-1.jpg" /></a><a href="#">《航海之王》麻辣炫酷反穿越，英雄時尚大變身！</a></dt>
        <dd><a href="#"><img src="images/img-2.jpg" /></a><a href="#">《彈彈堂》吳克群同名激情主題MV，體驗修真樂趣</a></dd>
      </dl>
      <div class="clear"></div>
    </div>
  </div>
  <!--右側內容結束-->
</div>
<!--主體內容結束-->
<div id="footer"><a href="#">關於我們</a> <a href="#">手機版</a> <a href="#"> <a href="#">開放平臺</a> <a href="#"> 自助廣告</a> <a href="#"> 招聘</a> <a href="#">客服</a> <a href="#">幫助</a> @2013開心網   文網文[2009]157號   京ICP證080482號    京公網安備110000000003號 未成年人家長監護</div>
</body>
</html>



@charset "utf-8";
/* CSS Document */
* {
	margin:0px;
	padding:0px;
}
body {
	font-family:Verdana, Arial, Helvetica, sans-serif, "宋體";
	line-height:20px;
	font-size:12px;
}
li {
	list-style:none;
}
a img {
	border:0px;
}
a {
	text-decoration:none;
	color:#2b62a5;
}
a:hover {
	text-decoration:underline;
}
#container, #footer, #header {
	width:1000px;
	margin:0px auto;
	overflow:hidden;
	clear:both;
}
/*頁面頂部樣式*/
#header {
	height:50px;
	background:url(../images/menuBg.jpg) repeat-x;
}
#menu {
	float:right;
	color:#dbb9b9;
	padding:15px 30px 0px 0px;
}
#menu a, #menu a:hover {
	color:#ffffff;
	padding:0px 5px;
}
/*網頁遊戲頁面樣式*/	
#gameLogo {
	float:left;
	padding-top:5px;
}
.gameIndex {
	background:url(../images/btn-01.gif) 0px 0px no-repeat;
	width:100px;
	height:40px;
	text-align:center;
	float:left;
	position:relative;
	left:20px;
	top:10px;
}
.gameIndex a, .gameIndex a:hover {
	font-size:14px;
	color:#cb3333;
	text-decoration:none;
	font-weight:bold;
	line-height:40px;
}
.gameLeft {
	float:left;
	width:724px;
	overflow:hidden;
}
.gameNav {
	float:left;
	border:1px #cccccc solid;
	height:230px;
	overflow:hidden;
	width:190px;
}
.gameNav li {
	background:url(../images/gameBg1.jpg) 0px 0px no-repeat;
	height:29px;
	line-height:30px;
}
.gameNav li img {
	padding:0px 10px 0px 8px;
	vertical-align:middle;
}
.gameNav li a {
	color:#000000;
	display:block;
	width:190px;
	height:27px;
	padding-top:2px;
}
.gameNav li a:hover {
	color:#fff;
	text-decoration:none;
	background:url(../images/gameBg2.jpg);
}
.gameAdver {
	float:right;
	border:1px #cccccc solid;
	height:230px;
	overflow:hidden;
	width:520px;
	text-align:center;
	vertical-align:middle;
}
.allGame {
	padding:25px;
	border-bottom:1px #cccccc solid;
	clear:both;
	width:672px;
	overflow:hidden;
}
.allGame dt, .allGame dd {
	width:320px;
	height:155px;
	overflow:hidden;
	border:1px #cccccc solid;
}
.allGame dt {
	float:left;
}
.allGame dd {
	float:right;
}
.allGame h1 a {
	font-size:14px;
	color:#a70a0a;
	line-height:30px;
}
.allGame .titleImg {
	float:left;
	padding:5px;
}
.allGame span {
	color:#a70a0a;
}
.role {
	width:680px;
	overflow:hidden;
	clear:both;
	margin:15px auto 0px auto;
}
.role li {
	float:left;
	width:170px;
	text-align:center;
	height:190px;
	overflow:hidden;
}
.role h1 {
	font-size:14px;
	line-height:30px;
	text-align:center;
}
.role h1 a, .role h1 a:hover {
	color:#a70a0a;
}
.role p span {
	color:#a70a0a;
}
.gameRight {
	float:right;
	width:262px;
	overflow:hidden;
}
.gameLogin {
	border:1px #cccccc solid;
	height:230px;
	overflow:hidden;
	background-color:#f3f3f3;
}
.gameLogin h1 {
	color:#767373;
	font-size:14px;
	padding:20px 0px 25px 20px;
}
.gameLogin li {
	padding-left:20px;
	height:35px;
	font-size:14px;
}
.gameLogin li input {
	border:1px #cccccc solid;
	width:150px;
	height:20px;
}
.gameLogin dt {
	float:left;
	padding-left:65px;
	padding-top:10px;
}
.gameLogin dd {
	float:left;
	padding-left:30px;
}
.gameLogin .login {
	background:url(../images/btnLogin.jpg) 0px 0px no-repeat;
	width:63px;
	height:24px;
	cursor:pointer;
	border:0px;
}
.gameBorder {
	border:1px #cccccc solid;
}
.gameTitle {
	background:url(../images/titleBg.jpg) 0px 0px repeat-x;
	height:28px;
	overflow:hidden;
	clear:both;
}
.gameTitle dt {
	font-size:14px;
	font-weight:bold;
	color:#7d0808;
	padding-left:10px;
	padding-right:30px;
	line-height:28px;
	float:left;
}
.gameTitle dd {
	float:left;
	color:#cccccc;
	padding:0px 5px;
	line-height:28px;
}
.gameTitle dd a {
	text-decoration:underline;
	color:#666666;
	font-size:14px;
}
.news {
	width:95%;
	margin:0px auto;
}
.news li {
	border-bottom:1px #cccccc dashed;
	height:27px;
	background:url(../images/btn-04.gif) 2px 5px no-repeat;
	padding-left:45px;
	line-height:27px;
}
.news .noBorder {
	border-bottom:0px;
}
.news li a {
	color:#4d4646;
}
.gameVideo {
	width:95%;
	margin:0px auto;
	line-height:26px;
}
.gameVideo dt {
	border-bottom:1px #cccccc dashed;
	clear:both;
	width:100%;
	overflow:hidden;
	padding:10px 0px;
}
.gameVideo dd {
	clear:both;
	width:100%;
	overflow:hidden;
	padding:10px 0px;
}
.gameVideo img {
	padding:0px 10px 0px 0px;
	float:left;
}
.clear {
	height:10px;
	clear:both;
	overflow:hidden;
}
/*頁面底部樣式*/
#footer {
	padding:15px 0px;
	clear:both;
	text-align:right;
	color:#666666;
}
#footer a {
	padding-right:15px;
	float:left;
}
.footerBorder-top {
	border-top:1px #cccccc solid;
}

HTML第九章上機題

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

HTML第六章上機題3-------聚美優品美容熱點列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

HTML第九章

一.CSS3變形transform 1.平移：translate(x,y) translateX(x) translateY(y) 注意：如果想只向X軸平移那麼可以translateX，如果想只向X軸平移那麼可以translateY，X和Y不能共存。如果想向兩個方向平移，那麼使用translate

HTML 第九章作業

課後作業 1.CSS3 2D變形中有哪些變形方式？各自使用方法是什麼？ (1)移動 translate(x, y):在2D平面內以X軸和Y軸為標準進行移動 (2)縮放 scale(x, y) :可以對元素進行水平/垂直方向的縮放 (3)旋轉 rotate(x d

C語言程式設計現代方法第九章程式設計題答案

以下程式都是在VS軟體下進行編譯的，如果要用VC編譯器，刪除system(“paues”);即可 9.1 //No.1不用遞迴 #include<stdio.h> #define N 20 void selection_sort(int k, int c[]); int ma

C primer plus 第六版第九章第二題程式設計練習答案

/* 本程式應習題 2 建立。題目要求：設計一個函式chline（ch,i,j）,列印指定的字元j行i列。在一個簡單的驅動程式中測試該函式。*/#include<stdio.h>void chline(char c

HTML第四章上機練習4

<html> <head> <title>上機練習4</title> <link href="uu.css" rel="stylesheet" type="text/css"> </head> <

HTML第六章上機練習5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

HTML第八章上機練習1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

C#第九章上機練習2

--上機練習2 --查詢第一學期的科目名稱 SELECT SubjectName FROM Subject --查詢第二學期所有男生姓名和住址 SELECT StudentName, Address

深入.NET平臺和c#理解------第三章上機題員工打卡

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace GenericDem

HTML第七章上機練習2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

HTML第七章上機練習1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

SQL第九章資料查詢基礎上機題1-4

//查詢學生相關基本資訊 SELECT * FROM Student WHERE GradeId=1 SELECT StudentName,Phone FROM Student WHERE GradeId=2 SELECT StudentName+Phone FRO

資料結構第2章上機實驗題2.1

問題描述：實現順序表的基本運算（1-12具體要求見課本P62），作為對已經學過的順序表的小revision~ 原始碼： list.h： #include <stdio.h> #includ

第九章改變 HTML 樣式

HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。如何改變 HTML 元素的樣式呢？語法: Object.style.property=new style; 注意:Object是獲取的元素物件，如通過document.getElementById(

C primer plus 第六版第九章第十一題程式設計練習答案

/* 本程式應習題-11 建立。題目要求：編寫並測試 Fibonacci（）函式，該函式用迴圈代替遞迴計算斐波那契數。*/#include<stdio.h>#define true 1void Fibonacci(void);int main(vo

第九章網絡文件共享服務之NFS

windows network 共享資源服務器計算機 nfs 9.1 nfs介紹9.1.1 nfs特點 NFS（Network File System）即網絡文件系統，是FreeBSD支持的文件系統中的一種，它允許網絡中的計算機之間通過TCP/IP網絡共享資源。在NFS的應用

進擊的Python【第九章】：paramiko模塊、線程與進程、各種線程鎖、queue隊列、生產者消費者模型

password locking form maxsize 廁所 sorted [0 hostname nbsp 一、paramiko模塊他是什麽東西？　　paramiko模塊是用python語言寫的一個模塊，遵循SSH2協議，支持以加密和認證的方式，進行遠程服務器的連

『Python』Numpy學習指南第九章_使用Matplotlib繪圖

from png 坐標 img 線圖 ylabel linspace 對數 nbsp 坐標軸調節以及刻度調節參見：『Python』PIL&plt圖像處理_矩陣轉化&保存圖清晰度調整數據生成： 1 import numpy as np 2 import

HTML第九章上機題

相關推薦