热门标签 | 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;当我们需要将页面上的元素横排排放的时候首先考虑的布局方式就应该是浮动布局。
推荐阅读
  • 如果应用程序经常播放密集、急促而又短暂的音效(如游戏音效)那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点:1)延时时间较长,且资源占用率高 ... [详细]
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • 本文详细介绍了Java代码分层的基本概念和常见分层模式,特别是MVC模式。同时探讨了不同项目需求下的分层策略,帮助读者更好地理解和应用Java分层思想。 ... [详细]
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 第二十五天接口、多态
    1.java是面向对象的语言。设计模式:接口接口类是从java里衍生出来的,不是python原生支持的主要用于继承里多继承抽象类是python原生支持的主要用于继承里的单继承但是接 ... [详细]
  • 解决Parallels Desktop错误15265的方法
    本文详细介绍了在使用Parallels Desktop时遇到错误15265的多种解决方案,包括检查网络连接、关闭代理服务器和修改主机文件等步骤。 ... [详细]
  • 利用python爬取豆瓣电影Top250的相关信息,包括电影详情链接,图片链接,影片中文名,影片外国名,评分,评价数,概况,导演,主演,年份,地区,类别这12项内容,然后将爬取的信息写入Exce ... [详细]
  • oracle c3p0 dword 60,web_day10 dbcp c3p0 dbutils
    createdatabasemydbcharactersetutf8;alertdatabasemydbcharactersetutf8;1.自定义连接池为了不去经常创建连接和释放 ... [详细]
  • 最详尽的4K技术科普
    什么是4K?4K是一个分辨率的范畴,即40962160的像素分辨率,一般用于专业设备居多,目前家庭用的设备,如 ... [详细]
  • 自定义滚动条美化页面内容
    当页面内容超出显示范围时,为了提升用户体验和页面美观,通常会添加滚动条。如果默认的浏览器滚动条无法满足设计需求,我们可以自定义一个符合要求的滚动条。本文将详细介绍自定义滚动条的实现过程。 ... [详细]
  • 微软推出Windows Terminal Preview v0.10
    微软近期发布了Windows Terminal Preview v0.10,用户可以在微软商店或GitHub上获取这一更新。该版本在2月份发布的v0.9基础上,新增了鼠标输入和复制Pane等功能。 ... [详细]
  • 本文介绍了如何使用 CMD 批处理脚本进行文件操作,包括将指定目录下的 PHP 文件重命名为 HTML 文件,并将这些文件复制到另一个目录。 ... [详细]
  • php更新数据库字段的函数是,php更新数据库字段的函数是 ... [详细]
  • 解决 Windows Server 2016 网络连接问题
    本文详细介绍了如何解决 Windows Server 2016 在使用无线网络 (WLAN) 和有线网络 (以太网) 时遇到的连接问题。包括添加必要的功能和安装正确的驱动程序。 ... [详细]
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社区 版权所有