设为主页
会员登录 账号 密码 注册会员
首页 |把纪律挺在前面|走进职中|万博app下载|教学教研|万博直播app|专业介绍|招生就业|德育工作|社会培训|实训设施|菁菁校园|教育博客|校园论坛
 站内搜索:
当前位置:首页 ->
网站设计--DIV块简易布局
日期:2013/4/10 8:40:21 发布者:董濯滔 浏览:4310次 评论:0次 

default.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>网站设计--DIV块简易布局</title>
<link  href="sy.css"  rel="stylesheet" type="text/css">
</head>

<body>
<div id="A"></div>
<div id="B"></div>
<div id="C"></div>
<div id="D">

       <div id="D_lf"></div>
         
       <div id="D_md"></div>

       <div id="D_rt"></div>


</div>
<div id="E"></div>
<div id="F"></div>
</body>
</html>

sy.css代码实例

/* CSS Document */

body{
     background:#FFFF00;
  margin:0px auto 0px auto;
  color:#000000;
  line-height:180%;
  overflow:hidden;
}
#A{
     background: #CCCCCC;
  height:22px;
  margin:0px auto 0px auto;
  width:1024px;
  float:none;
}
#B{
     background: #66FFFF;
  height:180px;
  margin:0px auto 0px auto;
  width:1024px;
  float:none;
}
#C{
     background: #00FF00;
  height:27px;
  margin:0px auto 0px auto;
  width:1024px;
  float:none;
}
#D{
     background: #FFFFCC;
  height:270px;
  margin:0px auto 0px auto;
  width:1024px;
  float:none;
}

#D_lf{
     float:left;
  background:#FF3300;
  width:270px;
  height:270px;
}
#D_md{
     float:left;
  background:#FF3300;
  width:450px;
  height:270px;
  margin:0px 0px 0px 17px;
}

#D_rt{
     float:right;
  background:#FF3300;
  width:270px;
  height:270px;
 
}

 

 


#E{
     background: #00CCFF;
  height:144px;
  margin:0px auto 0px auto;
  width:1024px;
  float:none;
}


#F{
     background: #CCCCCC;
  height:70px;
  margin:0px auto 0px auto;
  width:1024px;
  float:none;
}

先登陆后才能参与评论,谢谢!

用户名
密  码 忘记密码
 
热点博客
三清山114 2013-2014 赣ICP备07003203号