一张图学懂css+div 浮动分块
2016-07-29 14:19
441 查看
直接看代码和效果图:
代码片段:
<table style="margin:auto;width:900px;height:430px">
<tr>
<td>
<div id="bigBox" style="margin:auto;width:890px;height:430px">
<div id="top_left" style="background-color:blue; float:left; width:340px;height:165px">
Email
</div>
<div id="top_right" style="background-color:red; float:right; width:525px;height:340px;margin-left:16px">
Liuyanban
</div>
<div id="middle" style="float:left;width:340px;height:153px;margin-top:20px">
<div id="middle_left" style="background-color:purple; float:left; width:162px;height:153px;">
QQ
</div>
<div id="middle_middle" style="background-color:green; float:right; width:162px;height:153px;">
login
</div>
</div>
<div id="buttom_left" style="background-color:orange; float:left; width:340px;height:65px;margin-top:16px">
share
</div>
<div id="buttom_right" style="background-color:darkblue; float:right; width:525px;height:65px;margin-top:16px;margin-left:16px">
friengLink
</div>
</div>
</td>
</tr>
</table>
效果图:
代码片段:
<table style="margin:auto;width:900px;height:430px">
<tr>
<td>
<div id="bigBox" style="margin:auto;width:890px;height:430px">
<div id="top_left" style="background-color:blue; float:left; width:340px;height:165px">
</div>
<div id="top_right" style="background-color:red; float:right; width:525px;height:340px;margin-left:16px">
Liuyanban
</div>
<div id="middle" style="float:left;width:340px;height:153px;margin-top:20px">
<div id="middle_left" style="background-color:purple; float:left; width:162px;height:153px;">
</div>
<div id="middle_middle" style="background-color:green; float:right; width:162px;height:153px;">
login
</div>
</div>
<div id="buttom_left" style="background-color:orange; float:left; width:340px;height:65px;margin-top:16px">
share
</div>
<div id="buttom_right" style="background-color:darkblue; float:right; width:525px;height:65px;margin-top:16px;margin-left:16px">
friengLink
</div>
</div>
</td>
</tr>
</table>
效果图:
相关文章推荐
- jq在某个样式中删除某一条样式 强制移除样式
- css 过度
- JS 样式操作学习总结。
- css 2D 转换
- css基础
- css 导航栏
- django遇到css加载不成功的问题
- CSS-- 实用CSS样式
- [分享] 纯CSS完美实现垂直水平居中的6种方式
- [分享] 纯CSS完美实现垂直水平居中的6种方式
- 纯js css3 实现loading demo
- 解决换行造成元素间空隙的问题
- [分享] 纯CSS完美实现垂直水平居中的6种方式
- css控制文本单行,多行溢出显示省略号
- 10分钟使用纯css实现完整的响应式导航菜单栏的效果
- 史上最全Html与CSS布局技巧
- 性感的CSS菜单(Menus)
- 给当前页或者跳转后页面的导航栏添加选中样式
- 前端 HTML-CSS 规范
- css单独设定样式