导航:首页 > 万维百科 > 网页设计盒子布局是div

网页设计盒子布局是div

 发布时间：2020-11-04 23:14:28

1、怎样才能用div和css把网页布局的很美观？

div+css不仅起到网页布局制作的功能还能起到代码优化，怎样才能以最快的速度打开网页。
在用打开速度方面我们就要考虑到用背景定位技术，这样无论你制作的页面含有多少小图标或小图片都可以统一放在一个图片里，这样减少浏览器网客户端读取的次数。。参考：www.qq.com 你右击把qq网站的背景图片，凌晨一下，在看一下那个图片，就会明白了。
div+css布局制作网页时还要考虑到浏览器兼容性的问题。比如怎样兼容IE6、7、8、及火狐浏览器等常用浏览器。
其实网页制作布局还有很多，我只一些例子而已。
我是做网页制作布局的大家可以一起探讨一下啊。

2、求一个网页制作高手用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>

3、网页设计中采用div+css布局，这里的DIV是什么意思？

DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。
DIV在编程中又叫做整除，即只得商的整数。 DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。

4、网页设计的一个问题。使用div+css不能成功布局.div布局设计如图所示.

给你个大概的思路，因为没有代码也不好分析你那里出问题了
你A没问题，我们就不管他了
做B的时候你先用一个总的DIV，然后把你的B1 B2 B3都写在B里面，记得给浮动，这样就OK了
下面是代码
.B{width:980px; height:500px; float:left;}
.B1{width:500px; height:500px; float:left;}

.B2{width:480px; height:250px; float:left;}

.B3{width:480px; height:250px; float:left;}

<div class="B">
<div class="B1"></div>
<div class="B2"></div>
<div class="B3"></div>
</div>

5、网页设计为什么要用DIV布局

说起来我干网页设计和网站制作也有六七年的时间了，当初DIV刚刚兴起的时候，曾和朋友们试过用DIV，但因为当时DIV+CSS这种技术还不成熟，所以也就没太在意，依然用TABLE，但，时至今日，DIV+CSS已把TABLE+CSS淘汰了，我们这些常用TABLE的人，也得慢慢熟悉DIV了。首先来说，DIV的好处在于样式与主体内容分离，大量减少网页代码量，使网页下载速度更快。而且对于后期网站维护来说，也是相当便捷的，这是DIV最大的优势。但个人认为，DIV也不一点缺点都没有，比如一个大型且架构复杂的网站来说，采用DIV布局对团队合作来说就是一个不小的折磨。因为全是DIV标签，如果不是本人做的，根本找不到需要的内容，当然可以添加注释，但这并不能完全解决这个问题。对于用习惯了TABLE的人来说，DIV确实很难适应，这就像学习武功，你本来学习的少林的功夫，如果再学武当的，兴许里面就有些冲撞，除非你忘了原来的基础，从头再来。DIV来说也是这样，对我来说对于用DIV控制盒子的各项属性就是一个不小的难题，兴好现在通过练习逐渐攻克了这个难关。

6、网页设计页面布局使用div+css是什么意思，还有怎么插入图片，谢谢各位大神

div模型，搭上css样式
用<img src="图片地址" alt="显示不出来的时候的文字" />插入图片

7、网页制作中框架结构和div是都可以给一个网页布局么？

一般都是用框架做，导航链接里面设置href="主显示界面的target名称"就可以了；
如果不想用框架那就只有只用第三方JS框架了，推荐一个：jquery easyui的框架，这个框架就是完全用div，后台用JS控制。

8、html+css+div网页设计与布局怎么样

方法/步骤

一个网页设计时，我们可以将一个页面设置为头部，中间，和底部三部分； 头部有分为店招（logo）和导航等
中间既内容部分，内容也可一个整体，也可左右分离，
底部来页面结尾，一般写版权信息，友情链接等

END
头部编辑

店招：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝助手网</title>
<style>
#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}
#logo{ width:100%; height:100px; background: #003; }
</style>
</head>

<body>
<div id="top">
<div id="logo">店招</div>
<div id="nav">导航</div>
</div>
<!--------头部------------>
<div id="centre">
<div id="centreLeft">内容左</div>
<div id="centreRight">内容右</div>
</div>
<!--------中间------------->
<div id="bottom">底部</div>
<!-----------底部---------------->
</body>
</html>

导航：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝助手网</title>
<style>
a,ul,li,div,span,td{ padding:0; margin:0;}
#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}
#logo{ width:100%; height:100px; background: #003; }
#nav{ width:100%; height:30px; background:#300}
a{ text-decoration: none; display:block;den}
ul li{list-style: none;}
#nav>ul>li{ float:left; margin-left: 50px; line-height:30px; }
#nav>ul>li>a{ color:#FFF; font-weight:900px}
</style>
</head>

<body>
<div id="top">
<div id="logo">店招</div>
<div id="nav">
<ul>
<li><a href="" title="" target="_blank">淘宝</a></li>
<li><a href="" title="" target="_blank">图片</a></li>
<li><a href="" title="" target="_blank">视频</a></li>
<li><a href="" title="" target="_blank">资料下载</a></li>
<li><a href="" title="" target="_blank">视频下载</a></li>

</ul>
</div>
</div>
<!--------头部------------>
<div id="centre">
<div id="centreLeft">内容左</div>
<div id="centreRight">内容右</div>
</div>
<!--------中间------------->
<div id="bottom">底部</div>
<!-----------底部---------------->
</body>
</html>

END
内容

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝助手网</title>
<style>
a,ul,li,div,span,td{ padding:0; margin:0;}
#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}
#logo{ width:100%; height:100px; background: #003; }
#nav{ width:100%; height:30px; background:#300}
a{ text-decoration: none; display:block;}
ul li{list-style: none;}
#nav>ul>li{ float:left; margin-left: 50px; line-height:30px; }
#nav>ul>li>a{ color:#FFF; font-weight:900px}
/*******===================头====================************/
#centre{ margin:0 auto; width:1200px; height:auto; }
#centreLeft{ float:left; width:70%; height:500px;border:1px #333333 solid;}
#centreRight{ float: right; width:27%; height:400px;border:1px #333333 solid;}
</style>
</head>

<body>
<div id="top">
<div id="logo">店招</div>
<div id="nav">
<ul>
<li><a href="" title="" target="_blank">淘宝</a></li>
<li><a href="" title="" target="_blank">图片</a></li>
<li><a href="" title="" target="_blank">视频</a></li>
<li><a href="" title="" target="_blank">资料下载</a></li>
<li><a href="" title="" target="_blank">视频下载</a></li>

</ul>
</div>
</div>
<!--------头部------------>
<div id="centre">
<div id="centreLeft">内容左</div>
<div id="centreRight">内容右</div>
</div>
<!--------中间------------->
<div id="bottom">底部</div>
<!-----------底部---------------->
</body>
</html>

END
底部

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝助手网</title>
<style>
a,ul,li,div,span,td{ padding:0; margin:0;}
#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}
#logo{ width:100%; height:100px; background: #003; }
#nav{ width:100%; height:30px; background:#300}
a{ text-decoration: none; display:block;}
ul li{list-style: none;}
#nav>ul>li{ float:left; margin-left: 50px; line-height:30px; }
#nav>ul>li>a{ color:#FFF; font-weight:900px}
/*******===================头====================************/
#centre{ margin:0 auto; width:1200px; height:auto; overflow: hidden }
#centreLeft{ float:left; width:70%; height:500px;border:1px #333333 solid;}
#centreRight{ float: right; width:27%; height:400px;border:1px #333333 solid;}
/***********==============内容===================*******/
#bottom{ margin:0 auto; width:1200px; height:200px; border:1px #333333 solid; margin-top:20px; }
/***********==============底部===================*******/

</style>
</head>

<body>
<div id="top">
<div id="logo">店招</div>
<div id="nav">
<ul>
<li><a href="" title="" target="_blank">淘宝</a></li>
<li><a href="" title="" target="_blank">图片</a></li>
<li><a href="" title="" target="_blank">视频</a></li>
<li><a href="" title="" target="_blank">资料下载</a></li>
<li><a href="" title="" target="_blank">视频下载</a></li>

</ul>
</div>
</div>
<!--------头部------------>
<div id="centre">
<div id="centreLeft">内容左</div>
<div id="centreRight">内容右</div>
</div>
<!--------中间------------->
<div id="bottom">底部</div>
<!-----------底部---------------->
</body>
</html>

9、网页制作。做网页图文电影介绍，如何将文本(div)盒子置于图片(a)盒子下方,做出如图效果

你那种写法，可以直接将a标签设置为block就可以了。如：
<a href="#" title="谍影重重5" style="display:block";>
<img src="img/1-1.jpg"/>
<div style="display:block">aaa</div>
</a>

但是那张图片效果，可以用<dl></dl>去布局，如：
<dl>
<dt>
<a href="#" title="谍影重重5" style="display:block">
<img src="img/1-1.jpg"/>
</a>

</dt>

<dd>aaaa</dd>

</dl>

10、网页制作中这样的方格布局是用什么工具排的？表格？DIV？apdiv？

用div做 然后 做一下 div:hover{} 这样
比如 <div class="biao"></div>
样式就是
.biao{各种属性}
.biao:hover{鼠标移入的属性 红色边框等}
如果回是a标签 直接用a:hover 一样的答

与网页设计盒子布局是div相关的知识