请教DIV+CSS高手,这样的网页布局的DIV+CSS代码怎么写?
请教DIV+CSS高手,这样的网页布局的DIV+CSS代码怎么写?我尝试了很多次都做不出来。希望高手指教如图:...
请教DIV+CSS高手,这样的网页布局的DIV+CSS代码怎么写?
我尝试了很多次都做不出来。希望高手指教
如图: 展开
我尝试了很多次都做不出来。希望高手指教
如图: 展开
7个回答
展开全部
给你写好了,你看下。模型给你定了高,否则看不到效果的,你用时可以将高删除就可以高度自适应了。
<!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>
<!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>
展开全部
方法就比较多了,目前用的大致有两种,虽然CSS3直接提供了相关属性,但不是一定要等它普及...
1是纯CSS,构建很多格子条条,下层比上层多或少一个像素,填充好纯色,大概6到8层可以做一个小弧了。这个高手可能用过,但现在很多人不用了,因为这个不仅有些麻烦,而且只做纯色的框。况且现在网速快了,背景也就几个k,很容易载,下面这个方法就比较主流了。
2是CSS和做图结合,用PS什么的画一个有圆弧的边框。
你可以直接画一个完整的圆角矩形,用一句background:url(图片地址)铺设到DIV上,这是长宽固定的。
要做变宽变长的框,就需要把圆角矩形分割,利用overflow:hidden或repeat:y这类属性结合着去铺设。具体分割成几块看个人习惯或具体要求。
贴个以前做的相关的图,不懂的再说啦。
1是纯CSS,构建很多格子条条,下层比上层多或少一个像素,填充好纯色,大概6到8层可以做一个小弧了。这个高手可能用过,但现在很多人不用了,因为这个不仅有些麻烦,而且只做纯色的框。况且现在网速快了,背景也就几个k,很容易载,下面这个方法就比较主流了。
2是CSS和做图结合,用PS什么的画一个有圆弧的边框。
你可以直接画一个完整的圆角矩形,用一句background:url(图片地址)铺设到DIV上,这是长宽固定的。
要做变宽变长的框,就需要把圆角矩形分割,利用overflow:hidden或repeat:y这类属性结合着去铺设。具体分割成几块看个人习惯或具体要求。
贴个以前做的相关的图,不懂的再说啦。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
<!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>
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
<style>
body{margin:0px; padding:0px;}
.header{margin:0px auto 7px auto;width:960px;}
.center{margin:0px auto ;width:960px;}
.foot{margin:7px auto 0px auto;width:960px;}
.re_cont{width:240px;}
.left{display:inline;margin-right:7px;}
.one{height:200px;margin-bottom:7px;}
.zhuanji{ width:466px; height:200px; float:left;margin-right:7px;}
.hihi{ width:240px; height:200px; float:left;}
.tow{height:700px;}
.le_cont{height:700px;width:240px; float:left;margin-right:7px;}
.tow_right{float:left;width:466px;}
</style>
<div class="header"></div>
<div class="center">
<div class="left" >
<div class="one" >
<div class="zhuanji"></div>
<div class="hihi"></div>
</div>
<div class="tow" >
<div class="le_cont"></div>
<div class="tow_right">
<div class="new_tuijian" style="margin-bottom:7px;" ></div>
<div class="new_tuijian2" style="margin-bottom:7px;"></div>
<div class="new_tuijian3" style="margin-bottom:7px;"></div>
</div>
</div>
</div>
<div style="display:inline" ><div class="re_cont"></div></div>
</div>
<div class="foot"></div>
body{margin:0px; padding:0px;}
.header{margin:0px auto 7px auto;width:960px;}
.center{margin:0px auto ;width:960px;}
.foot{margin:7px auto 0px auto;width:960px;}
.re_cont{width:240px;}
.left{display:inline;margin-right:7px;}
.one{height:200px;margin-bottom:7px;}
.zhuanji{ width:466px; height:200px; float:left;margin-right:7px;}
.hihi{ width:240px; height:200px; float:left;}
.tow{height:700px;}
.le_cont{height:700px;width:240px; float:left;margin-right:7px;}
.tow_right{float:left;width:466px;}
</style>
<div class="header"></div>
<div class="center">
<div class="left" >
<div class="one" >
<div class="zhuanji"></div>
<div class="hihi"></div>
</div>
<div class="tow" >
<div class="le_cont"></div>
<div class="tow_right">
<div class="new_tuijian" style="margin-bottom:7px;" ></div>
<div class="new_tuijian2" style="margin-bottom:7px;"></div>
<div class="new_tuijian3" style="margin-bottom:7px;"></div>
</div>
</div>
</div>
<div style="display:inline" ><div class="re_cont"></div></div>
</div>
<div class="foot"></div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
给你个结构
<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;}
<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;}
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询