导航:首页 > 万维百科 > 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游戏网页设计模板相关的知识