请教DIV+CSS高手，这样的网页布局的DIV+CSS代码怎么写？

请教DIV+CSS高手，这样的网页布局的DIV+CSS代码怎么写？
我尝试了很多次都做不出来。希望高手指教
如图：

举报该文章

相关建议推荐于2017-09-02

给你写好了，你看下。模型给你定了高，否则看不到效果的，你用时可以将高删除就可以高度自适应了。

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
margin:0;
padding:0;}
body{
width:960px;
position:relative;
left:50%;
margin-left:-480px;}
div{
border:1px solid black;}
#header,#fooder{
height:100px;}
#container{
float:left;
border:none;}
.floatL{
float:left;
width:713px;
border:none;}
.floatR{
float:right;
width:240px;}
.zhuanji{
width:464px;
float:left;
height:180px;
}
.hihi{
width:240px;
height:180px;
float:left
}
.ri_cont{
width:240px;
height:500px;
float:left;}
.le_cont{
float:left;
width:240px;
height:315px;}
.new_tuijian01,.new_tuijian02,.new_tuijian03{
width:464px;
height:100px;
float:right;}
.clearB{
clear:both;}
.mb5{
margin-bottom:5px;}
.mb7{
margin-bottom:7px;}
.mr5{
margin-right:5px;}
</style>
</head>
<body>
<div id="header" class="mb7">header</div>
<div id="container" class="mb7">
<div class="floatL mr5">
<div class="zhuanji mr5 mb5">zhuanji</div>
<div class="hihi">hihi</div>
<div class="le_cont mr5">le_cont</div>
<div class="new_tuijian01 mb5">new_tuijian01</div>
<div class="new_tuijian02 mb5">new_tuijian02</div>
<div class="new_tuijian03">new_tuijian03</div>
</div>
<div class="ri_cont floatR">ri_cont</div>
</div>
<div id="fooder" class="clearB"></div>
</body>
</html>

温馨提示：内容为网友见解，仅供参考

当前网址：https://aolonic.com/aa/1a3kd45g5.html

其他看法

第1个回答 2011-01-17

方法就比较多了，目前用的大致有两种，虽然CSS3直接提供了相关属性，但不是一定要等它普及...

1是纯CSS，构建很多格子条条，下层比上层多或少一个像素，填充好纯色，大概6到8层可以做一个小弧了。这个高手可能用过，但现在很多人不用了，因为这个不仅有些麻烦，而且只做纯色的框。况且现在网速快了，背景也就几个k，很容易载，下面这个方法就比较主流了。

2是CSS和做图结合，用PS什么的画一个有圆弧的边框。
你可以直接画一个完整的圆角矩形，用一句background:url(图片地址)铺设到DIV上，这是长宽固定的。
要做变宽变长的框，就需要把圆角矩形分割，利用overflow:hidden或repeat:y这类属性结合着去铺设。具体分割成几块看个人习惯或具体要求。

贴个以前做的相关的图，不懂的再说啦。

第2个回答 2011-01-17

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css" >
.container{
text-align:center;
height:1150px;
width:960px;
border: 1px solid #000000;
margin:auto;
}
.heard{
height:100px;
border: 1px solid #000000;
}
.mainleft{
float:left;
height:960px;
width:750px;
border: 1px solid #000000;
}
.mainright{
float:right;
height:960px;
width:200px;
border: 1px solid #000000;
}
.zhuanji{
width:430px;
float:left;
height:150px;
border: 1px solid #000000;
margin-top:10px;
}
.hihi{
float:left;
width:300px;
height:150px;
margin-top:10px;
margin-left:10px;
border: 1px solid #000000;
}
.Le_cont{
float:left;
width:240px;
height:790px;
border: 1px solid #000000;
margin-top:10px;
}
.new1{
float:left;
width:489px;
height:230px;
margin-top:10px;
margin-left:10px;
border: 1px solid #000000;
}
.new2{
float:left;
width:489px;
height:230px;
margin-top:10px;
margin-left:10px;
border: 1px solid #000000;
}
.new3{
float:left;
width:489px;
height:290px;
margin-top:10px;
margin-left:10px;
border: 1px solid #000000;
}
.footer{
clear:both;
height:90px;
border: 1px solid #000000;
}
.Re_cont{
float:right;
margin-top:10px;
height:950px;
width:200px;
border: 1px solid #000000;
}
</style>
</head>
<body>

<div class="container">
<div class="heard">heard
</div>
<div class="mainleft">
<div class="zhuanji">zhuanji
</div>
<div class="hihi">hihi
</div>
<div class="Le_cont">Le_cont
</div>
<div class="new1">new1
</div>
<div class="new2">new2
</div>
<div class="new3">new3
</div>
</div>
<div class="mainright">
<div class="Re_cont">Re_cont
</div>
</div>
<div class="footer">footer
</div>

</div>

</body>

第3个回答 2011-01-16

第4个回答 2011-01-17

给你个结构
<div class="header"></div>
<div class="container">
<div class="content">
<div class="zhuanji"></div>
<div class="hihi"></div>
<div class="lecont"></div>
<div class="new_tuijian"></div>
<div class="new_tuijian2"></div>
<div class="new_tuijian3"></div>
</div>
<div class="re_cont"><div>
</div>
<div class="foot"></div>

css

主要的大框架我就不写了你可以参照一楼的

.zhuanji,.le_cont{ float:left;}
.hihi,.new_tuijian,.new_tuijian2,.new_tuijian3{ float:right;}

1 2 下一页

请教DIV+CSS高手,这样的网页布局的DIV+CSS代码怎么写?
<div id="left"> <div id="left_top"> <div id="zj"><\/div> <div id="hihi"><\/div> <\/div> <div id="left_down"> <div id="le_cont"><\/div> <ul id="new"> <li><\/li> <li><\/li> <li><\/li> <\/ul> <\/div> <\/div> <div id="right"><\/div> <\/div> <di...

divcss网页布局实例代码(网页设计divcss布局)
1、新建一个html文件，命名为test.html，用于讲解div+css布局的基本流程。2、在test.html文件内，对body进行样式初始化，设置外边距margin为0，内边距padding为0，同时使用text-align设置文字居中。3、在test.html文件内，为了讲解方便，设置所有的div高度为200px，内容的颜色为红色。4、在test.html文件...

如何用DIV+CSS进行网页样式布局
一、选择“div标签”命令打开dreamweaver，新建网页并保存为“die.html”，选择【插入】【布局对象】【div标签】命令，打开“div标签”对话框。二、输入div标签名称 1、在“ID”列表框中选择“top”2、单击“新建css规则”按钮准备进行css规则定义三、新建css规则在打开的对话框中保持默认设置，单击“...

急急急,网页布局二级导航条div+css,这个效果怎么做呢,在线等。。。
用CSS控制的下拉菜单，在各个浏览器中表现的不够完美，最佳的方法是使用jQuery来制作，代码如下，加了一个缓动的效果：[HTML部分]<div id="nav"> <ul> <li><a href="#">菜单零<\/a><\/li> <li><a href="#">菜单一<\/a><\/li> <ul class="childnav"> <li><a href="#">子菜单<...

DIV+CSS一行三列代码如何写?
……<\/ul> <\/div> <\/div> 需要注意：1）同列的这三个盒子，使用float浮动：如，float：left；这样就可以在一行排列顺次排列。也可以对left盒子使用float：left；，右边的盒子使用float：right；2）最外边的div盒子的宽度要大于同列的3个盒子总宽度，如果小了，则会被挤下来，不是在一行中显示。

怎么用div布局加css样式做网页
下面我们进行布局一般网页都是3层一级，所以我们需要div布局了在body里面写一般我会先分为3层 <html> <head> <title><\/title> <link href="main.css" type="text\/css" rel="stylesheet"> <\/head> <body> <div id="top"> <div id="top1"><\/div> <div id="top2"><\/div> <div ...

用div+css设计一个页面布局
<style>.head{width:100%;height:60px;}.main{width:70%;height:400px;float:left;}.main{width:30%;height:400px;float:right;}.footer{width:100%;height:60px;}<\/style><div class ="head">这里是head区域<\/div><div class ="main">这里是主要内容区域<\/div><div class="main_left...

前端代码div+css是什么意思
前端代码div+css，就是现在一种网页设计的一种实现方式，通过div+css，可以现在对一些杂乱无章的图片和文字，进行排版和使用，从而实现了人们通常看到的漂亮的网页，具体看下代码：<head> <link rel="stylesheet" type="text\/css" href="CSS-kuaidu.css"\/> <title>宽度的学习<\/title> <\/head> <...

div+css 请问这个首页css如何写,才能上下居中?
<div id="layout"> <div id="wrap"> <div id="menu"> <\/div> <div id="copyright"> <a href="http:\/\/www.5ulove.com\/home" title="进入交友中心" target="_blank">进入交友中心<\/a> \/ <a href="http:\/\/www.5ulove.com\/bbs" title="进入论坛." target="_blank">进入论坛...

到底什么是div+css设计网页啊?
DIV就是网页设计里面的层，CSS就是网页设计中用到的样式控制表，首先采用这种方法就是用层来布局用CSS来控制层的表现。也可以灵活的应用层来控制网页的一些效果！例如下面一个简单的DIV+CSS的网页代码：可以存为index.html:<html> <head> <title>这是一个简单的DIV+CSS控制的网页<\/title> <link ...

相似回答

大家正在搜