html 怎么把网页分块,div html网页分块

\u8fd9\u4e2a\u7f51\u9875\u600e\u4e48\u7528html\u6765\u5e03\u5c40\u50cf\u8fd9\u6837\u5206\u5757\uff1f

div+css\u53ef\u4ee5\u5f88\u5bb9\u6613\u5b9e\u73b0\uff0c\u4e00\u4e2a\u7b80\u5355\u7684\u4f8b\u5b50\uff1a
*{margin:0px;padding:0px;border:0px;}body{text-align:center;margin:0px auto;}#container{width:80%;height:768px;margin:0px auto;}#banner{width:100%;height:10%;background-color: red;}#body{width:100%;height:90%;}#left{width:20%;height:100%;float:left;background-color: blue;}#middle{width:60%;height:100%;float:left;background-color: yellow}#right{width:20%;height:100%;float:left;background-color: pink;}

float+margin\u5b9e\u73b0\u5de6\u53f3\u5e03\u5c40\u3002float\u80fd\u591f\u4f7f\u5f97\u5143\u7d20\u5411\u5de6\u6216\u8005\u5411\u53f3\u9760\u8fb9\u5e03\u5c40\uff0c\u5982\u679c\u5728\u540c\u7ea7\u5143\u7d20\u4e2d\u8bbe\u7f6e\u4e00\u4e2a\u6b63\u5e38\u6d41\u7684\u533a\u57df\u4e0e\u6d6e\u52a8\u5757\u5e76\u5217\uff0c\u5219\u6d6e\u52a8\u5757\u4f1a\u5728\u8be5\u6b63\u5e38\u6d41\u540c\u7ea7\u533a\u57df\u7684\u8fb9\u754c\u5904\uff0c\u53ea\u662f\u6d6e\u52a8\u5757\u4f1a\u5f71\u54cd\u8be5\u533a\u57df\u5757\u7684\u5e03\u5c40\uff0c\u6240\u4ee5\u8981\u6e05\u9664\u6d6e\u52a8\u5757\u7684\u5f71\u54cd\uff0c\u6240\u4ee5\u6b64\u65f6\u5c06\u6b63\u5e38\u6d41\u533a\u57df\u5757\u7684\u76d2\u5b50\u8bbe\u7f6emargin\u7b49\u4e8e\u6d6e\u52a8\u5757\u7684\u5bbd\u5ea6\u65e2\u53ef\u4ee5\u6e05\u9664\u5f71\u54cd\u3002
.main{clear:both;width:800px;margin:auto;}.left{float:left;width:390px;height:300px;border:1px solid #ccc;}.right{float:right;width:390px;height:300px;border:1px solid #ccc;}\u5de6\u4fa7\u53f3\u4fa7

1、启动dreamweaver cs5,在弹出的对话框窗口中选择html,进入主界面编辑区域。

2、接着对网页的整个布局在草纸上绘制下来,做到心中有数,主要分成那几个模块。主要有脚注、菜单导航、主体、导航条四大部分。

3、接着点击设计进入设计状态,在代码区域书写整体框架的css,即

#ztkj{width:80%;

boder:1px solid #000000;

height:800px;}

在body里添加<div id="ztkj"></div>即可在下面看到整体框架。

4、接着在书写导航条代码,即

#dht{padding:10px;

boder:1px solid#000000;

background-color:#a2a2ff;}

在第一个div中输入<div id="dht"></div>,查看效果变化。

5、书写主体内容的代码,即

#ztnr{

float:left;width:60%;

height:600px;boder:1px solid #000000;

text-align:center;

margin-light:10px;

margin-left:10px;}

在整体框架中输入<div id="ztnr">主体内容</div>,查看效果

6、书写菜单导航代码

#cddh{

float:right;

margin-right:10px;

width:35%;boder:1px #a2a2ff;

height:600px;}

接着在整体框架中输入代码<div id="cddh">菜单导航</div>

7、书写脚注的代码

#jz{

padding:10px;

boder:3px #a2a2ff;

text-algin:center;

 clear:both;

margin-top:20px;}

在整体框架中输入代码<div id="jz">脚注</div>查看效果。

8、这样大体框架就制作出来了,按f12进行查看效果,效果不好需要进一步修改代码。把边框设置出来,把所有的boder进行修改为border:solid 5px #fcc;

9、由于整个框架不在中间位置,需要修改让其居中对齐,所以要在ztkj中添加一条语句margin:auto;

10、这样整个框架就出来,在实际的使用过程中要根据自己的需要进一步调整,执行文件-另存为命令,将网页保存就完成了。



楼主所说的我明白:

分块单独用div是体现不出来的,需要 div+css

比如:我要让三个div 排序可以这样写:

<div class="box">
   <div class="left"></div>
   <div class="center"></div>
   <div class="right"></div>
</div>
<style>
.box {border:1px #ccc solid; width:300px; height:200px;}
.box div { float:left;}
.box .left {border:1px #000 solid;width:100px; height:200px;}
.box .center {border:1px #000 solid;width:100px; height:200px;}
.box .right {border:1px #000 solid;width:100px; height:200px;}
</style>

希望能帮助你



没弄明白你想表达什么。
一个div就是块啊!

你要分成什么块?

扩展阅读:免费可直接打开网站的网页 ... 免费html网页模板网站 ... 如何把html变成网址 ... 免费html网站代码 ... 人人视频macbook怎么下载 ... 免费开放的api网站应用 ... 浏览器怎么打开网站 ... 如何将网页以网页仅为html ... 直接进入网站的代码 ...

本站交流只代表网友个人观点,与本站立场无关
欢迎反馈与建议,请联系电邮
2024© 车视网