热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

CSS布局实战演练,掌握这些技巧在朋友面前大显身手吧!

许多学生在大学期间学习HTML和CSS时,并没有给予足够的重视,导致学完后仍然只能使用基础的表格布局方法来设计网页。本文将通过实战演练,详细介绍一些高级的CSS布局技巧,帮助读者在实际项目中更加灵活地运用CSS,提升网页设计水平。通过掌握这些技巧,你将在朋友面前展现出卓越的前端开发能力。

前言

很多同学在大学学习HTML+CSS这门课程的时候,并没有过多的重视,这就导致有许多同学在学完以后还只会使用最基本的表格布局方式对页面进行布局,这样做很明显是不能达到我们课程标准的要求的,所以让我们根据一个简单的淘宝小案例来一起学学另外使用更多也更方便的浮动布局的方式吧!注意,在开始之前,你需要提前了解什么是浮动布局。先查查资料,然后再着手练习这个小案例吧!



提示:以下是本篇文章正文内容,下面案例可供参考


一、最终效果

在这里插入图片描述


二、具体代码

下面展示一些 HTML代码片

// An highlighted block
<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代码片

// An highlighted block*{margin: 0px;padding: 0px;}.father{widows: 1000px; /* border: 1px solid red; */}.father span{float: left;width: 96px;height: 25px;/* border: 1px solid green; */font-size: 17px;font-weight: 900;color: orange;}.dao{width: 100%;height: 20px;/* border: 1px solid yellow; */margin: auto;margin-top: 20px;margin-left: 23px;}.dao li{width: 54px;height: 17px;/* border: 1px solid blueviolet; */float: left;list-style: none;margin-left: 0px;font-size: 10px;color: grey;}.tu{height: 400px;/* border: 5px solid purple; */}.tu li{float: left;list-style: none;width: 250px;/* border: 1px solid darkblue; */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;当我们需要将页面上的元素横排排放的时候首先考虑的布局方式就应该是浮动布局。
推荐阅读
author-avatar
灬哭着说再见灬
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有