作者:灬哭着说再见灬 | 来源:互联网 | 2024-11-11 11:15
许多学生在大学期间学习HTML和CSS时,并没有给予足够的重视,导致学完后仍然只能使用基础的表格布局方法来设计网页。本文将通过实战演练,详细介绍一些高级的CSS布局技巧,帮助读者在实际项目中更加灵活地运用CSS,提升网页设计水平。通过掌握这些技巧,你将在朋友面前展现出卓越的前端开发能力。
前言
很多同学在大学学习HTML+CSS这门课程的时候,并没有过多的重视,这就导致有许多同学在学完以后还只会使用最基本的表格布局方式对页面进行布局,这样做很明显是不能达到我们课程标准的要求的,所以让我们根据一个简单的淘宝小案例来一起学学另外使用更多也更方便的浮动布局的方式吧!注意,在开始之前,你需要提前了解什么是浮动布局。先查查资料,然后再着手练习这个小案例吧!
提示:以下是本篇文章正文内容,下面案例可供参考
一、最终效果
二、具体代码
下面展示一些 HTML代码片
。
<div class&#61;"father"><span>| 热 卖 单 品</span><div style&#61;"clear: both;"></div><ul class&#61;"dao"><li>客厅灯</li><li>床垫</li><li>电脑椅</li><li>窗帘</li><li>男内裤</li><li>鞋柜</li><li>沙发</li><li>收纳箱</li><li>茶几</li><li>抱枕</li><li>椅子</li><li>电脑桌</li><li>拉杆箱</li><li>浴室柜</li><li>运动鞋</li><li>电风扇</li><li>衣柜</li><li>面膜</li><li>风扇</li><li>充电宝</li><li>男T恤</li><li>耳机</li><li>拖鞋</li><li>零食</li><li>男鞋</li></ul><div style&#61;"clear: both;"></div><ul class&#61;"tu"><li class&#61;"son1"><img src&#61;"./img/第一大图.webp" alt&#61;"xiaoxion"><div class&#61;"js">泰迪熊正品 毛衣熊公仔 新品 女生生日礼物</div><div class&#61;"pj">评价 255 收藏 684</div><div class&#61;"jg1">&#xffe5;</div><div class&#61;"jg2">96</div><div class&#61;"yuanjia">&#xffe5;472</div><div class&#61;"xiaoliang " id&#61;"teshu">月销62笔</div></li><li class&#61;"son2"><img src&#61;"./img/第二大图.webp" alt&#61;"xiaoxion"><div class&#61;"js">幼儿园数字字帖描红本 儿童凹槽写字本练字</div><div class&#61;"pj">评价 0 收藏 26134</div><div class&#61;"jg1">&#xffe5;</div><div class&#61;"jg2">13.8</div><div class&#61;"yuanjia">&#xffe5;68</div><div class&#61;"xiaoliang">月销62笔</div></li><li class&#61;"son3"><img src&#61;"./img/第三大图.webp" alt&#61;"xiaoxion"><div class&#61;"js">磁性画板灰色家用写字黑板墙涂鸦板多功能</div><div class&#61;"pj">评价 0 收藏 3320</div><div class&#61;"jg1">&#xffe5;</div><div class&#61;"jg2">39</div><div class&#61;"yuanjia">&#xffe5;472</div><div class&#61;"xiaoliang">月销398笔</div></li><li class&#61;"son4"><img src&#61;"./img/第四大图.webp" alt&#61;"xiaoxion"><div class&#61;"js">逻辑思维训练机益智玩具创造力小学生早教机</div><div class&#61;"pj">评价 0 收藏 80</div><div class&#61;"jg1">&#xffe5;</div><div class&#61;"jg2">1499</div><div class&#61;"yuanjia">&#xffe5;2598</div><div class&#61;"xiaoliang">月销14笔</div></li><li class&#61;"son5"><img src&#61;"./img/第五大图.webp" alt&#61;"xiaoxion"><div class&#61;"js">儿童三轮拉杆书包小学生男孩6-12周岁</div><div class&#61;"pj">评价 2143 收藏 29856</div><div class&#61;"jg1">&#xffe5;</div><div class&#61;"jg2">138</div><div class&#61;"yuanjia">&#xffe5;629</div><div class&#61;"xiaoliang">月销710笔</div></li></ul></div>
下面展示一些 css代码片
。
*{margin: 0px;padding: 0px;}.father{widows: 1000px; }.father span{float: left;width: 96px;height: 25px;font-size: 17px;font-weight: 900;color: orange;}.dao{width: 100%;height: 20px;margin: auto;margin-top: 20px;margin-left: 23px;}.dao li{width: 54px;height: 17px;float: left;list-style: none;margin-left: 0px;font-size: 10px;color: grey;}.tu{height: 400px;}.tu li{float: left;list-style: none;width: 250px;margin-left: 15px;margin-top: 21px;}.tu li img{margin-left: 30px;}.pj{font-size: 5px;color: grey;margin-top: 10px;}.jg1{font-size: 5px;color: orange;float: left;margin-top: 16px;}.jg2{font-size: 28px;color: orange;float: left;}.yuanjia{float: left;text-decoration: line-through;color: grey;font-size: 5px;margin-top: 15px;}.xiaoliang{float: left;font-size: 15px;color: grey;margin-left: 105px;margin-top: -18px;}#teshu{margin-top: 15px;}
总结
例如&#xff1a;浮动布局消除了框架对于整个页面布局的影响&#xff0c;即脱离文档流&#xff0c;当我们需要将页面上的元素横排排放的时候首先考虑的布局方式就应该是浮动布局。