要求:淘宝首页框架布局 参考图片如下
用div与浮动有关知识完成
<!DOCTYPE html><html><head><meta chart="utf-8"><title></title><style type="text/css"> *{ margin: 0px; padding: 0rem; } #box1 { width: 1200px; } .box1_left, .box1_center, .box1_right { float: left; height: 800px; } .box1_left 跟领导出差{ background-color: #00FFFF; width: 300px; } .box1_center { background-color:aliceblue; width: 600px; height: 800px; } .box1_right { background-color: crimson; width: 300px; } .c11 { float: left; background-color:案组词语 green; height: 360px; width: 260px; margin: 20px 20px; } .c12 { float: left; background-color: yellow; height: 360px; width: 260px; margin: 20px 20px; } .c21 { float: left; background-color: red; height: 360px; width: 180px; margin: 20px 10px; } .c22 { float: left; background-color: lawngreen; height: 360px; width: 180px; margin: 20px 10px; } .c23 { float: left; background-color: salmon; height:360px; width: 180px; margin: 20px 10px; } </style></head><body><div></div><div id="box1"><div class="box1_left">box1</div><div class高复学校="box1_center"><div><div class="c11">左</div><div class="c12">右</div><div style="clear: left;"></div></div><div><div class="c21">左</div><div class="c22">中</div><div class="c23">右</div><div style="clear顾城经典语录: left;"></div></div></div&g日语等级考试报名t;<div class="box1_right">box3</div><div style="clear: left;"></div></div></body></html>
本文地址:https://blog.csdn.net/crraxx/article/details/109366950
本文发布于:2023-04-07 14:37:50,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/238385bbba4ecf11519b7814e5df6f9d.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:css简单练习3.doc
本文 PDF 下载地址:css简单练习3.pdf
留言与评论(共有 0 条评论) |