初学WEb开发,DIV+CSS页面布局中怎么实现这个效果,求高手指点啊 或者给点资料啊 感谢、 3个div的顺序

如题所述

第1个回答  2012-10-10
首先在分两个部分,一个是html中
一个是css中

在html中如下代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<link href="css.css" type="text/css" rel="stylesheet"/> //链接CSS.CSS这个文档

</head>
<body>

<div id="body"></div> //定义一个整体

<div id="1"></div> //图中1的区域

<div id="2"></div>

<div id="3"></div>

</body>
</html>

这三个div的意思就是整个页面有分成三个部分:

下面写CSS代码部分
#body{width:400px} //首先将页面分为 {1 ,2} 与 {3}两个块,其中{1,2}我用body这个包括.然后在body这个块里面划分1 2两个区域,懂????

# 1{width:400px}
#2{width:400px}

#3{width:400px;float:left}

高度自设,若是还是看不懂,建议去这个网址下个pdf的教学文档,很详细,

http://www.mycodes.net/

搜索这个网址,在里面的"教程书籍"里面下载"DIV+CSS入门教程"

DIV+CSS布局这个PDF文件,很详细.

要是还是看不懂,我也没有办法了
第2个回答  2012-10-10
<style type="text/css">
.big-left{float: left; width: 400px;}
.left-child{height:300px;}
.right-child{height:400px;}
.green{background: green;}
.black{background: black;}
.red{background: red;}
</style>
<div class="big-left">
<div class="left-child black"></div>
<div class="left-child red"></div>
</div>
<div class="big-left">
<div class="right-child green"></div>
</div>本回答被提问者和网友采纳
第3个回答  2012-10-10
<div style=" float:left;">
<div style="height: 100px; width: 100px; background-color: Red;">
</div>
<div style="height: 100px; width: 100px; background-color: Green;">
</div>
</div>
<div style=" float:left;">
<div style="height: 150px; width: 100px; float: left; background-color: Black;">
</div>
</div>
第4个回答  2012-10-10
在这说比较麻烦

求高手指点使用div+css要达到这样的效果应该怎么写代码?
大的div、长宽和背景色或者背景图片,然后li、每个li前面插入一个png的图片,然后p个人中心,a.hover可以使用背景图片,也可以使用矩形的css

用DIV+CSS布局中,如何设置图片与文字在同一高度?高手请进..
图片和文字是在一个div标签里,很明显给图片一个右浮动就可以了;里面的文字放在<img>下面;可以放在p标签里(不能放在块类标签里如div,table..);问题四(什么时候才用表格呢,)其实呢div也是可以完成table的效果的;但会麻烦些;如果你喜欢那么你可以都用div打造;一般来说很明显的表格样子我们会用一下表...

在写div+css时,怎么样才能使网页在各个浏览器中兼容,我是网页美工的新手...
CSS中要注意的几个属性:要用绝对定位,那个外边的DIV最好相对,display:block会全部树排,设置宽度后,float:left就横着了,clear也重要 还有:万一万一有一个标记没法换行就插一个空div如:<DIV class="ClearDIV"><\/DIV> .ClearDIV{display:block; width:51%; height:1px; top:-1px; position:...

零基础开始学 Web 前端开发,有什么建议吗
1、HTML + CSS 这部分建议在 W3school 在线教程 上学习,边学边练,每章后还有小测试。 之后可以模仿一些网站做些页面。在实践中积累了一些经验后,可以系统的读一两本书,推荐《Head First HTML 与 CSS 中文版》,这本书讲的太细了,我没能拿出耐心细读。你可以根据情况斟酌。也可以去w3school和...

网页高手帮帮我 啊
但它的动画效果、互动效果、多媒体效果十分出色。而且还可以在Flash动画中封装Mp3音乐、填写表单等;并且由于Flash编制的网页文件比普通网页文件要小得多,所以大大加快了浏览速度。这是一款十分适合动态Web制作的工具。 另外,个人网站制作者还需了解W3C的HTML4.0规范、CSS层叠样式表的基本知识、javascript、VBScript的基本...

DIV+CSS的问题,将图片作为链接,如何实现点击之后点击处变成另一张图片...
你现在的效果应该是鼠标移上去之后会变成另外一张图片。使用的是CSS的伪类,a:link {color: #FF0000}\/* 未访问的链接 *\/ a:visited {color: #00FF00}\/* 已访问的链接 *\/ a:hover {color: #FF00FF}\/* 鼠标移动到链接上 *\/ a:active {color: #0000FF}\/* 选定的链接 *\/ 提示:在 ...

我做的网页怎么在不同分辨率下表格之间出现空隙
一般说来,布局有两种常用的,就是用table来布局和DIV+Css布局,两种布局有时候能够达到的效果可能是一样的,但是在不同的计算机和不同的浏览器上看到的效果也是不一样的,同时,将你的网放到网上运行时能够得到的效果也是不一样的。通常用table布局的网页,网页的整体稳定性都不错,而且在不用的浏览...

怎么才算学好HTML了,请高手指点迷津
1、html标签能看明白,会使用常用的标签。2、至少会用表格布局页面,尽量使用CSS+DIV设计HTML静态页面,能将静态大图用软件切割城静态页面。3、在使用标签时候尽量手写代码,而不是拖控件。4、能看懂并能使用简单的JavaScript脚本。最好掌握JQuery。5、对网站的整体规划和艺术观感有一定的了解和掌握,最好...

...自学规划!发展前景!诸多问题!求好心的高手指点迷津~!
自己对网页设计比较感兴趣,现已自己学习HTML CSS,能够熟练运用DREAMWEAVER和PS~做一些简单的静态网页。也稍懂一点JAVASCRIPT~现在想学关于网页编程的知识,在学习JAVA,JSP和c#,ASP.NET两个系统上犹豫,希望高手能够帮忙分析下我的情况(有C,C++基础,身边也有JAVA强人能够指点迷津),给我点宝贵的意见。还有就是在学习过程...

web前端开发需要天天加班熬夜吗?
【点击测试我适不适合学设计】 如果您想要学习IT知识,来千锋教育。作为拥有IT基因和数字技术能力的教育机构,千锋十分注重联手高校和企业协同培养数字化人才,建立数字技能人才培育机制和行业标准,引领新时代职业教育实现高质量发展。展望未来,千锋将在高校、企业、学员和各方合作伙伴支持下,努力成为一个...

相似回答