收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 1324|回复: 3

我做的div练习

[复制链接]
发表于 2009-5-18 17:13:32 | 显示全部楼层 |阅读模式
我做的div的练习,
第一次发帖,那个运行代码我好像用不成的样子。
感谢jiedamu,他帮我把这个代码运行了,在三楼。


<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#main{
                width:800px;
                height:100px;
                background-color:#009933;
                margin-left:auto;
                margin-right:auto;
}
#a{
                width:800px;
                height:200px;
                margin-left:auto;
                margin-right:auto;
}
#aa1{
                width:100%;
                height:100px;
                background-color:#663366;
                margin:0px;
                padding:0px;
}
#aa2{
                width:100%;
                height:100px;
                background-color:#003366;
                margin:0px;
                padding:0px;
}
#a1{
                width:800px;
                height:100px;
                margin-left:auto;
                margin-right:auto;
}
#aa3{
                width:50%;
                height:100%;
                background-color:#990000;
                margin:0px;
                padding:0px;
                float:left;
}
#aa4{
                width:50%;
                height:100%;
                background-color:#FF6633;
                margin:0px;
                padding:0px;
                float:right;
               
}
#s{
                width:300px;
                height:50px;
                margin-left:auto;
                margin-right:auto;
                padding:0px;
}
#aa5{
                width:100px;
                height:50px;
                background-color:#66CCFF;
                margin:0px;
                padding:0px;
                float:left;
}
#aa6{
                width:100px;
                height:50px;
                background-color:#66FF99;
                margin:0px;
                padding:0px;
                float:left;
}
#aa7{
                width:100px;
                height:50px;
                background-color:#FFCC66;
                margin:0px;
                padding:0pz;
                float:left;
}
#ss{
                width:150px;
                height:200px;
                margin-left:auto;
                margin-right:auto;
                padding:0px;
                display:block;
}
#top{
                width:150px;
                height:50px;
                background-color:#00FFFF;
                margin:0px;
                padding:0px;
}
#left{
                width:50px;
                height:100px;
                background-color:#FF0033;
                margin:0px;
                padding:0px;
                float:left;
}
#center{
                width:50px;
                height:100px;
                background-color:#CC9966;
                margin:0px;
                padding:0px;
                float:left;
}
#right{
                width:50px;
                height:100px;
                background-color:#FF3333;
                margin:0px;
                padding:0px;
                float:left;
}
#bottom{
                width:150px;
                height:50px;
                background-color:#00FFFF;
                margin:0px;
                padding:0px;
                display:block;
}
#ss1{
                width:300px;
                height:200px;
                margin-left:auto;
                margin-right:auto;
                padding:0px;
                display:block;
}
#top1{
                width:300px;
                height:50px;
                background-color:#FF9966;
                margin:0px;
                padding:0px;
}
#left1{
                width:50px;
                height:100px;
                background-color:#FFCCFF;
                margin:0px;
                padding:0px;
                float:left;
}
#center1{
                width:200px;
                height:100px;
                margin:0px;
                padding:0px;
                float:left;
}
#centertop{
                width:100%;
                height:20px;
                background-color:#FF66CC;
                margin:0px;
                padding:0px;
}
#centerleft{
                width:100px;
                height:80px;
                background-color:#FFCC66;
                margin:0px;
                padding:0px;
                float:left;
}
#centerright{
                width:100px;
                height:80px;
                background-color:#CC66FF;
                margin:0px;
                padding:0px;
                float:right;
}
#right1{
                width:50px;
                height:100px;
                background-color:#FFCCFF;
                margin:0px;
                padding:0px;
                float:left;
}
#bottom1{
                width:300px;
                height:50px;
                background-color:#FF9966;
                margin:0px;
                padding:0px;
                display:block;
}
<!--

-->
</style>
</head>

<body>
  <p>div一行一列</p>
   <div id="main"></div>
  <p>div两行一列</p>
    <div id="a">
      <div id="aa1"></div>
          <div id="aa2"></div>
    </div>
  <p>div一行两列</p>
    <div id="a1">
      <div id="aa3"></div>
          <div id="aa4"></div>
    </div>
  <p>div一行三列</p>
    <div id="s">
      <div id="aa5"></div>
          <div id="aa6"></div>
          <div id="aa7"></div>
    </div>
  <p>div两行三列</p>
    <div id="ss">
      <div id="top"></div>
            <div id="left"></div>
          <div id="center"></div>
          <div id="right"></div>
          <div id="bottom"></div>
    </div>
  <p>div两行三列+一行两列</p>
    <div id="ss1">
      <div id="top1"></div>
            <div id="left1"></div>
          <div id="center1">
            <div id="centertop"></div>
                <div id="centerleft"></div>
                <div id="centerright"></div>
          </div>
          <div id="right1"></div>
          <div id="bottom1"></div>
    </div>
</body>
</html>

[[i] 本帖最后由 GD2009 于 2009-5-19 23:18 编辑 ]
发表于 2009-5-18 17:28:03 | 显示全部楼层
不错,鼓励一下
回复 支持 反对

使用道具 举报

发表于 2009-5-18 17:32:06 | 显示全部楼层

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-5-18 17:48:31 | 显示全部楼层

回复 3# jiedamu 的帖子

太感谢你了,谢谢!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-12-11 08:29 , Processed in 0.102282 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表