divcss简单代码怎么写

1.DIV+CSS代码,CSS怎么写在div中<div>
<div style="width:500px;height:500px; float:left;background-color:red; margin-right:10px;">
</div>
<div style="width:250px;height:500px; float:left;">
<div style="width:250px;height:200px;background-color:red;"></div>
<div style="width:250px;height:280px;margin-top:20px;background-color:red;"></div>
</div>
</div>
2.写一个简单的DIV+CSS<meta ; charset=utf-8" />无标题文档<style type="text/css">body{ margin:0px; padding:0px;}#container{ width:800px; margin:0px auto;}.A1{ height:30px; background:pink;}.wrap_A2A3{ zoom:1; overflow:hidden;}.A2{ float:left; width:200px; height:80px; background:yellow;}.A3{ float:left; width:600px; height:80px; background:#FF9999;}.A4{ height:30px; background:#FFCCFF;}#wrap_BC{ zoom:1; overflow:hidden;}#B{ float:left; width:100px;}.B1{ height:120px; background:#FFCC66;}.B2{ height:80px; background:#FF66CC;}.B3{ height:180px; background:#CCCCCC;}#C{ float:right; width:700px;}.C1{ height:150px; background:#CC99CC;}.C2{ height:230px; background:#CCFFCC;}.D1{ height:100px; background:#33CCFF;}.D2{ height:80px; background:#CCFFFF;}</style> <body>A1A2 A3A4B1 B2 B3C1 C2D1 D2 。
3.指导一个简单的css+div代码首先,建议你一点,与其在上一个div里面用margin-bottom不如在下一个div里面用margin-top,因为margin-bottom经常会失效,
而你这样的布局可以这样写
<style>
*{margin:0px;padding:0px;}
body{margin:0px auto;}
.blue{margin:0px auto;background:#34d5f2;padding:150px 50px;margin-top:100px;width:500px;overflow:hidden;}
.white{margin-top:50px;background:#fff;}
.white1{width:400px;height:250px;}
.white{width:400px;height:500px;margin-top:50px;}
.white2{width:400px;height:50px;margin-top:50px;}
.white,.white1,.white2{background:#fff;}
</style>
<body>
<div class="blue">
<div class="white1">;头部</div>
<div class="white">;内容部分</div>
<div class="white2">;尾部</div>
</div>
</body>
</html>
这样就是你要的效果了
4.DIV+CSS一行三列代码如何写大概的结构如下:
<div>
<div class=“left”><;!-----左边盒子----->
<ul>
<li>;条目1</li>
<li>;条目2</li>
<li>;条目3</li>
……
</ul>
</div>
<div class=“middle”><;!-----左边盒子----->
<ul>
<li>;条目1</li>
<li>;条目2</li>
<li>;条目3</li>
……
</ul>
</div>
<div class=“right”><;!-----右边边盒子----->
<ul>
<li>;条目1</li>
<li>;条目2</li>
<li>;条目3</li>
……
</ul>
</div>
</div>
需要注意:1)同列的这三个盒子,使用float浮动:如,float:left;这样就可以在一行排列顺次排列 。
也可以对left盒子使用float:left;,右边的盒子使用float:right;
2)最外边的div盒子的宽度要大于同列的3个盒子总宽度,如果小了,则会被挤下来,不是在一行中显示 。
5.div+css 如何简写代码Margin、border、padding、background、font、list-style和outline 都是可以进行简写的属性 。CSS简写就是不再使用不同的相类似属性的声明…
p { margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px; }
你可以把它们简写成这样:
p { margin: 10px 20px 30px 40px; }
6.指导一个简单的css+div代码首先,建议你一点,与其在上一个div里面用margin-bottom不如在下一个div里面用margin-top,因为margin-bottom经常会失效,而你这样的布局可以这样写<style> *{margin:0px;padding:0px;} body{margin:0px auto;} .blue{margin:0px auto;background:#34d5f2;padding:150px 50px;margin-top:100px;width:500px;overflow:hidden;} .white{margin-top:50px;background:#fff;} .white1{width:400px;height:250px;} .white{width:400px;height:500px;margin-top:50px;} .white2{width:400px;height:50px;margin-top:50px;} .white,.white1,.white2{background:#fff;}</style><body> 头部 内容部分 尾部