html 怎么把网页分块,div

作者&投稿:利官 (若有异议请与网页底部的电邮联系)
这个网页怎么用html来布局像这样分块?~

div+css可以很容易实现,一个简单的例子:
*{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实现左右布局。float能够使得元素向左或者向右靠边布局,如果在同级元素中设置一个正常流的区域与浮动块并列,则浮动块会在该正常流同级区域的边界处,只是浮动块会影响该区域块的布局,所以要清除浮动块的影响,所以此时将正常流区域块的盒子设置margin等于浮动块的宽度既可以清除影响。
.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;}左侧右侧

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就是块啊!

你要分成什么块?


彭州市19864975963: html5怎么分格局,三层 -
源纨希路: 可以通过DIV来分块布局,然后通过CSS样式来调整大小,颜色等样式.参考代码如下:<!DOCTYPE html><html><head><style>#header { background-color:black; color:white; text-align:center; padding:5px; }#nav { line-height:30px; background-...

彭州市19864975963: 用dreamweaver怎么把一个html页面分成左右两部分.不要用框架. -
源纨希路: 可以用div+css布局,用div把html分为两个部分.

彭州市19864975963: html中是用div还是frame进行区块划分的? -
源纨希路: frame是框架现在已经用的很少了 iframe网站中经常用 TABLE布局也已经不用了,新开发的网站基本都是 HTML+CSS DIV 布局你要学CSS的.首先要学会盒子模型 你才会算宽高像素.我当时就这里学的基础!http://www.w3school.com.cn/css/index.asp 希望你尽早掌握!

彭州市19864975963: 这个网页怎么用html来布局像这样分块? -
源纨希路: div+css可以很容易实现,一个简单的例子: <html> <head> <style type="text/css"> *{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...

彭州市19864975963: html怎么在一个网页里划分几个区域? -
源纨希路: 看你具体的需求.可以使用框架,不用框架的话,用div.现在一般用div+css来划分.

彭州市19864975963: html5中怎样分区块 -
源纨希路: html5可以将网页分块, 网页分块意味着将一个页面划分为几个独立的部分,包括内容、菜单、头部、底部、链接等, 这些只要使用一些新的标签.下面是一张html5概念图: 1、<header> 网站头部标签2、<nav> 导航标签3、<article> 内容标签4、<section> 文章标签5、<aside> 侧边栏6、<footer> 网站底部标签

彭州市19864975963: html中怎么用CSS实现将一个网页的主体部分分为9块 ?就是3*3的那种形式. -
源纨希路: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>3*3 </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> ...

彭州市19864975963: Html怎么把一个页面分成上中下三部分,中间和下面再分成左右两部分. -
源纨希路: < frame > frame cols=">/frameset> >right;50%;< src="cols="<< 20%; >top; >rigth1;src=" <>&nbsp.html" src="/frameset><20%,*"frame /frameset>src=&quot.html" frameset >&nbsp.html"frame&nbsp.html" rows="left1;frame <left,*"&nbsp,60%;frameset&nbsp,20%" <<src="<> &nbsp.html"frameset&nbsp<&nbsp

彭州市19864975963: html 让页面分左右两个div区域,都有卷动条可以拉动 -
源纨希路: 1 2<divstyle="width:50%;height:600px;overflow:auto; float:left"></div> <divstyle="width:50%;height:600px;overflow:auto; float:right"></div> 这样就ok了,默认时没有滚动体,当内容超出了600px;就自动出现滚动条.

彭州市19864975963: 怎么用css的div将网页分块 具体格式如图片 -
源纨希路: 这个很简单呐 把1和bottom设置一样的样式除了高不同,234就由bottom的宽度平均分或者随意分,但是要注意的是如果你要加边框那加了多少像素的边框就要减去相对应的div宽高,希望能帮到你

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网