導航:首頁 > 萬維百科 > div游戲網頁設計模板

div游戲網頁設計模板

 發布時間：2021-01-11 15:26:22

1、製作一個網頁成這個格式怎麼寫？DIV+CSS

如果你懂div+css那就好說了，我給你一個思路你就會知道怎麼做，

第一個DIV 包含全部，是一個外圍框架，設置好寬度，並且在網頁中居中顯示。
在設置第二個DIV，設置好這個DIV的寬度和高度，浮動到左邊，這個DIV是被第一個DIV包含著的。
在設置第三個DIV，第三個DIV是浮動到右邊，也是被第一個DIV包含的，注意設置好寬度和高度。
在來設置第四個DIV和第五個DIV，這兩個DIV被第三個DIV包含，只要設置要寬度和高度，這兩個DIV就會在第三個DIV中，一個顯示在上面，一個顯示在下面。
這樣子就完了，很簡單的，你需要注意的是 ，不要忘記給第一個DIV設置清除浮動，設置寬度和高度的時候計算好，第第四個DIV和第五個DIV 中間的距離用外邊距設置一下就行。
很簡單的這個結構。

2、急求一份html、css、JavaScript的「個人主頁」網頁設計模板代碼。

<!--這個模版來自[最好模版-http://BestMoban.Com],需要更多模版請訪問http://BestMoban.Com-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>┆假想敵┆- 頹廢模板</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
<!--
BODY {
SCROLLBAR-FACE-COLOR: #3F2413;
SCROLLBAR-HIGHLIGHT-COLOR: 
#FFFFFF;
SCROLLBAR-SHADOW-COLOR: #ffffff;
SCROLLBAR-3DLIGHT-COLOR: #3F2413;
SCROLLBAR-ARROW-COLOR: 
#FFFFFF;
SCROLLBAR-TRACK-COLOR: #3F2413;
SCROLLBAR-DARKSHADOW-COLOR: #3F2413;
background-color: #FFFFFF;
background-image: url(bg.jpg);
}
-->
</style>
</head>

<body>
<div id="Layer1" style="position:absolute; width:1000px; height:628px; z-index:1; left: 0px; top: 0px;">
  <div align="center">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p><img src="1.jpg" width="650" height="400" border="0" usemap="#Map2">
      <map name="Map2">
        <area shape="rect" coords="321,379,490,399" href="http://www.jxd88.com/" target="_blank" alt="┆假想敵┆">
        <area shape="rect" coords="196,15,242,43" href="home.htm" target="main1" alt="home">
      </map>
      <map name="Map">
        <area shape="rect" coords="18,196,60,220" href="home.htm" target="main1" alt="home">
      </map>
    </p>
  </div>
</div>
 
<div id="Layer2" style="position:absolute; width:412px; height:295px; z-index:2; left: 382px; top: 203px;">
<iframe src="home.htm" name="main1" width="412" height="295"
 frameborder="0" scrolling="yes" style="border:0px;"allowtransparency="true"></iframe></div>
</body>
</html>

<span style="display:none;">這個模版來自http://BestMoban.Com,更多模版請訪問<a href="http://BestMoban.Com">http://BestMoban.Com</a>&nbsp;<a href="http://Moban.17Easy.Com">http://Moban.17Easy.Com</a>&nbsp;<a href="http://www.mb8.cn">http://www.mb8.cn</a></span>

3、網頁設計 DIV

差不多了  你把圖片自己加上就可以了

  <!DOCTYPE HTML>  
    <html>  
    <head>  
    <style type="text/css"> 
      body{background:#000;font-size:12px;}
 .header_box{width:700px;height:50px;background:#fff;filter:alpha(opacity:50);opacity:0.5;-moz-border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px;border-radius:0 0 10px 10px;}
     .header_box a,.header_box a i{display:inline-block;*display:inline;*zoom:1;line-height:50px;color:#555}
 .header_box a i{border:1px solid red;float:left;margin-top:15px;margin-right:5px;}
 .header_box .span1{padding-right:20px;}
 .header_box .span2{padding-right:200px;}
 .header_box .span3{padding-right:20px;}
 .header_box .span1 i{width:20px;height:20px;background:url(../images/email.png) no-repeat;}
 .header_box .span2 i{width:20px;height:20px;background:url(../images/phone.png) no-repeat;}
 .header_box .span3 i{width:20px;height:20px;background:url(../images/login.png) no-repeat;}
 .header_box .span4 i{width:20px;height:20px;background:url(../images/account.png) no-repeat;}
   </style>  
    </head>  
<body>
<div class="header_box">
    <a href="#" class="span1"><i></i>[email protected]</a>
    <a href="#" class="span2"><i></i>0423656655</a>
    <a href="#" class="span3"><i></i>Login</a>
    <a href="#" class="span4"><i></i>Create an account</a>
</div>
</body>
</html>

4、div+css製作一個小網頁

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<style>
.selected{
background: #ffda44;
color: #fff;
}
</style>
</head>
<body>

<ul class="question1">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>

<ul class="question2">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>

<ul class="question3">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>

<ul class="question4">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>

<ul class="question5">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>

<button>交卷</button>

<script>
$(function(){
// 正確答案
var answerArr = ["1","4","3","2","2"];
// 考生答案
var arr = ['','','','',''];
//選擇答案
$("ul li").click(function(event) {
//選中的答案添加樣式
$(this).addClass('selected').siblings().removeClass('selected');
//獲取題目的索引
var ulIndex = $(this).parent().index();
//獲取選中選項的索引並賦值到arr中
var selectedIndex = $("ul").eq(ulIndex).find("li.selected").index()+1;
arr[ulIndex] = selectedIndex;
});
$("button").click(function(event) {
//分數
var grade = 0;
//判斷答案是否正確, 正確加一分
var ulLength = $("ul").length;
for (var i = 0; i < ulLength; i++) {
if (arr[i]==answerArr[i]) {
grade++;
} 
}
alert(grade);
});
})
</script>
</body>
</html>

看看合適不

5、求用css和div製作個人博客的網頁模板？

熟悉前端的可以自己製作，也可到網上下載別人參考修改。css+div製作個人博客的網頁模板地址lmlblog.com/blog/1/，喜歡的可以自己修改，也可以自己學習製作等

6、網頁設計的DIV是什麼效果的？

復雜,龍統的文字我就不說了,其實div+css排版的形式一般是這樣的

一段描述"樣式的代碼",（通常會單獨寫在一個文件裏）像這樣:

<style type="text/css">
<!--
.mysty{color:#F00}
-->
</style>

在裏頭我就定義一個叫做"mysty"樣式,他的屬性color是」#F00」紅色

然後我在頁面中想調用這個樣式時我就先打好一個div的合子,然後我用"class='mysty'"這樣的方法來調用這個樣式,於是乎,在這個div包含的內容的文字都變成紅色了,當然table也可以這樣用

<div class="mysty">紅色字</div>

至於優勢嘛,網上有好多地方都有寫,你最好自己體驗一下,它的簡潔我覺得是對table排版的最大的優勢

7、求一個網頁製作高手用div+css做一個網頁布局 急 謝謝！！！！！！！！！！！

<!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" />
<title>無標題文檔</title>
<style type="text/css">
#containt{ height:530px; width:400px; margin:0 auto; border:1px solid #000000;}
#top{ height:100px; width:380px; margin-top:7px; margin-left:9px;}
#top_left{ height:100px; width:138px; float:left; border:1px solid #000000; border-right:none;}
#top_right{ height:100px; width:238px; float:left; border:1px solid #000000;}
#content{ height:50px; width:380px; margin-top:5px; margin-left:9px; border:1px solid #000000;}
#bottom{ height:350px; width:380px; margin-top:5px; margin-left:9px;}
#bom_left{ height:350px; width:138px; float:left; border:1px solid #000000;}
#bom_right{ height:350px; width:235px; float:left; border:1px solid #000000; margin-left:3px;}
.b_r_div{ height:100px; width:68px; margin-left:6px; float:left; margin-top:5px; border:1px solid #000000;}
#b_r_bottom{ height:120px; width:225px; margin-left:5px; float:left; margin-top:5px; border:1px solid #000000;}
</style>
</head>
<body>
<div id="containt">
<div id="top">
<div id="top_left"></div>
<div id="top_right"></div>
</div>
<div id="content"></div>
<div id="bottom">
<div id="bom_left"></div>
<div id="bom_right">
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div id="b_r_bottom"></div>
</div>
</div>
</div>
</body>
</html>

與div游戲網頁設計模板相關的知識