前端学习（1801）：前端调试之清除浮动练习3

最新推荐文章于 2023-02-15 21:09:51 发布
最新推荐文章于 2023-02-15 21:09:51 发布
阅读量310 收藏
点赞数
分类专栏： # 歌谣--前端学习--总进程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43392489/article/details/107326706
版权
本文通过一个具体的实例，详细介绍了前端调试中清除浮动的方法，重点解析了如何在index.html和index.css中进行实践操作，以达到预期的运行效果。
摘要由CSDN通过智能技术生成

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <!--系统内置 start-->
    <script type="text/javascript"></script>
    <!--系统内置 end-->
    <meta charset="UTF-8">
    <title>练习</title>
    <!-- 不要忘记引入index.css -->
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <section class="section-goods">
        <main class="main-good-list">
            <!--商品头部-->
            <header class="clearFix">
                <div class="title-left">
                    智能
                </div>
                <ul class="title-right">
                    <li class="selected">智能</li>
                    <li>安防</li>
                    <li>出行</li>
                </ul>
            </header>

            <!--商品列表-->
            <ul class="good-list clearFix">
                <li>
                    <div class="picture clearfix">
                        <a class="phone" href="#"></a>
                    </div>
                    <ul>
                        <li class="title">小米&lt;小爱老师&gt;</li>
                        <li class="intro">口袋里的英语外教</li>
                        <li class="price">499元起</li>
                    </ul>
                </li>
                <li>
                    <div class="picture clearfix">
                        <a class="phone" href="#"></a>
                    </div>
                    <ul>
                        <li class="title">小米&lt;小爱老师&gt;</li>
                        <li class="intro">口袋里的英语外教</li>
                        <li class="price">499元起</li>
                    </ul>
                </li>
                <li>
                    <div class="picture clearfix">
                        <a class="phone" href="#"></a>
                    </div>
                    <ul>
                        <li class="title">小米&lt;小爱老师&gt;</li>
                        <li class="intro">口袋里的英语外教</li>
                        <li class="price">499元起</li>
                    </ul>
                </li>
                <li>
                    <div class="picture clearfix">
                        <a class="phone" href="#"></a>
                    </div>
                    <ul>
                        <li class="title">小米&lt;小爱老师&gt;</li>
                        <li class="intro">口袋里的英语外教</li>
                        <li class="price">499元起</li>
                    </ul>
                </li>
                <li class="margin-off">
                    <div class="picture clearfix">
                        <a class="phone" href="#"></a>
                    </div>
                    <ul>
                        <li class="title">小米&lt;小爱老师&gt;</li>
                        <li class="intro">口袋里的英语外教</li>
                        <li class="price">499元起</li>
                    </ul>
                </li>
                <li>
                    <div class="picture clearfix">
                        <a class="phone" href="#"></a>
                    </div>
                    <ul>
                        <li class="title">小米&lt;小爱老师&gt;</li>
                        <li class="intro">口袋里的英语外教</li>
                        <li class="price">499元起</li>
                    </ul>
                </li>
                <li>
                    <div class="picture clearfix">
                        <a class="phone" href="#"></a>
                    </div>
                    <ul>
                        <li class="title">小米&lt;小爱老师&gt;</li>
                        <li class="intro">口袋里的英语外教</li>
                        <li class="price">499元起</li>
                    </ul>
                </li>
                <li>
                    <div class="picture clearfix">
                        <a class="phone" href="#"></a>
                    </div>
                    <ul>
                        <li class="title">小米&lt;小爱老师&gt;</li>
                        <li class="intro">口袋里的英语外教</li>
                        <li class="price">499元起</li>
                    </ul>
                </li>
                <li>
                    <div class="picture clearfix">
                        <a class="phone" href="#"></a>
                    </div>
                    <ul>
                        <li class="title">小米&lt;小爱老师&gt;</li>
                        <li class="intro">口袋里的英语外教</li>
                        <li class="price">499元起</li>
                    </ul>
                </li>
                <li class="margin-off">
                    <div class="picture clearfix">
                        <a class="phone" href="#"></a>
                    </div>
                    <ul>
                        <li class="title">小米&lt;小爱老师&gt;</li>
                        <li class="intro">口袋里的英语外教</li>
                        <li class="price">499元起</li>
                    </ul>
                </li>
            </ul>
            <a class="book" href="#"></a>


        </main>
    </section>
</body>

</html>

index.css

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}


ul {
    list-style: none;
}

.clearFix::after {
    content: '';
    display: block;
    clear: both;
}

.section-goods {
    width: 1439px;
    background: #F5F5F5;
}

.main-good-list {
    width: 1048px;
    margin: 0 auto;
}

/*商品头部*/
.title-left {
    float: left;
    color: #000000;
    font-size: 20px;
    line-height: 54px;
}

.title-right {
    float: right;
}

.title-right>li {
    position: relative;
    box-sizing: border-box;
    float: left;
    margin-left: 20px;
    line-height: 54px;
    color: #999999;
    font-size: 16px;
}

.title-right>li.selected {
    margin-left: 0px;
    color: #FD6821;
}

.title-right>li.selected::after {
    content: '';
    position: absolute;
    bottom: 11px;
    left: 1px;
    width: 30px;
    height: 2px;
    background: #FD6821;
}
.good-list>li {
    float: left;
    width: 200px;
    height: 256px;
    margin-right: 12px;
    margin-bottom: 12px;
    background-color: #FFFFFF;
}

.good-list>li.margin-off {
    margin-right: 0px;
}

/*电纸书*/
.book {
    display: block;
    width: 1048px;
    height: 103px;
    margin: 0 auto;
    margin-top: 20px;
    background: url(./images/book.jpg) no-repeat center;
    background-size: contain;
}
.phone{
  margin-top:22px;
  display:block;
 
  height:130px;
  background:url(./images/phone.jpg) no-repeat center;
  background-size:contain;

  margin-bottom:16px;
 
}

.clearfix::after{
  content:'';
  display:block;
  clear:both;
}
ul{
    list-style:none;
   
}
.title{
 
height: 17px;
font-size: 12px;
line-height: 17px;
color: #000000;
text-align:center;
margin-bottom:4px;
 
}
.intro{
 
height: 17px;
font-size: 12px;
line-height: 17px;
color: #A8A8A8;
text-align:center;
margin-bottom:8px;

}
.price{
  
height: 17px;
font-weight: 500;
font-size: 12px;
line-height: 17px;
color: #FD6821;
text-align:center;
 
}

运行结果

前端小歌谣
关注
专栏目录
HTML+CSS+JS网页设计与制作期末大作业：网站——宏源山庄
qq_55989149的博客
04-25 2863
宏源山庄网站主要包括首页、山庄简介、新闻资讯、特色美食、山庄环境、人才招聘、联系我们等七个页面适合学生作业。 目录 部分效果图展示 index.html页面 about.html页面 news.html页面 代码目录 源码 部分效果图展示： index.html页面： about.html页面： news.html页面： 代码目录： 源码： <!DOCTYPE html> <html> <head> <m..
CSS#3：定位元素
weixin_62428841的博客
12-10 1127
元素的前景层包含内容（如文本或图片）和边框，元素的背景层可以用实色填充（使用background-color属性），也可以包含任意多个背景图片（使用background-image属性），背景图片叠加在背景颜色之上。由于包含元素一定会包围非浮动的子元素，而且清除会让这个子元素位于（清除一侧）浮动元素的下方，因此包含元素一定会包含这个子元素——以及前面的浮动元素。如果几个相邻的元素都具有设定的宽度，都是浮动的，而且水平空间也足以容纳它们，它们就会并列排在一行。被清除的元素不会被提升到浮动元素的旁边。
web前端学习笔记---鼠标控制悬浮框的出现与消失
前端学习笔记
10-12 3526
初学前端,随手记录日常所遇问题,可以时常回顾,若能帮助别人则更好,若有不妥之处或更为便捷之法,希望以评论告知,谢谢! 要解决问题为
CSS之关于clearfix--清除浮动
∧︵∧全世界的屋顶 ∧︵∧
05-22 1609
一，什么是.clearfix 你只要到Google或者Baidu随便一搜"css清除浮动"，就会发现很多网站都讲到"盒子清除内部浮动时可以用到.clearfix"。 .clearfix:after {   content: " ";   display: block;   clear: both;   height: 0; } .clearfix {   zoom: 1; } div cla
html+css静态页面学习 首页demo
fengxue_snow的博客
08-13 1164
1、最终效果图 在这里插入图片描述 2、html结构代码 <div class="header"> <div class="top clearfix"> <a href="javascript:;" class="logo fl"> <img src="img/logo.jpg"> </a> &lt...
前端学习（1800）：前端调试之清除浮动练习1
歌谣的博客
07-29 218
<!DOCTYPE html> <html lang="en"> <head> <!--系统内置 start--> <script type="text/javascript"></script> <!--系统内置 end--> <meta charset="UTF-8"> <title>练习</title> <link rel=".
前端学习（1800）：前端调试之清除浮动练习2
歌谣的博客
07-29 277
<!DOCTYPE html> <html lang="en"> <head> <!--系统内置 start--> <script type="text/javascript"></script> <!--系统内置 end--> <meta charset="UTF-8"> <title>练习</title> <!-- 不要忘记引入.
前端学习总结：2、CSS与CSS3美化页面
逍遥游的博客
11-15 348
前端学习总结：2、CSS与CSS3美化页面 文章目录前端学习总结：2、CSS与CSS3美化页面1、CSS的概念2、CSS的优势3、CSS的使用：CSS与html结合使用3.1 行内样式3.2 内部样式3.3 外部样式4、CSS语法5、CSS注释6、基本选择器：筛选具有相似特征的元素6.1 id选择器6.2 class选择器6.3 元素选择器/标签选择器7、优先级7.1 选择器的优先级7.2 样式表的优先级8、CSS常用样式8.1 color :字体颜色8.2 width height:宽高8.3 背景样
Web前端CSS清除浮动的5种方法
艾编程带你学前端博客
02-15 1699
根据实际情况选择适合的方法，需要注意兼容性和语义性问题。在移动端，清除浮动布局的方法与在桌面端是相同的。
一位大学生的前端学习笔记
01-22
- `float`和`clear`：用于创建浮动布局，`clear`用于清除浮动的影响。 - `position`属性：定义元素的定位方式，如`absolute`（绝对定位）、`fixed`（固定定位）、`relative`（相对定位）和`static`（默认定位）。 ...
十个静态页面展示-练习 HTML-CSS
12-12
在本实践项目中，"十个静态页面展示-练习 HTML-CSS" 是一个为初学者设计的教程，旨在帮助那些刚刚接触前端开发或者对前端技术感兴趣...记得多尝试、多实践，不断探索和学习新的前端技术，你的前端之路将会越来越宽广。
web前端面试题及提问问题6.doc
10-21
- **使用`:after`伪对象**：CSS3中的`::after`，配合`clear:both`和`content:""`清除浮动，适用于非IE浏览器。 3. **浏览器兼容性问题解决方案**： - **使用条件注释**：针对IE特定版本的CSS或JavaScript。 - **...
java基于ssm+jsp珠宝购物网站系统源码 带毕业论文
最新发布
09-20
【资源说明】 1、开发环境：ssm框架；内含Mysql数据库；JSP技术 2、项目代码都经过严格调试，代码没有任何bug！下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。
基于SSM的企业工资管理系统.zip(毕设&课设&实训&大作业&竞赛&项目)
09-20
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
基于java的大学生兼职系统设计与实现.docx
09-20
基于java的大学生兼职系统设计与实现.docx
沙威玛传奇(电脑游戏)
09-20
沙威玛传奇(电脑游戏)
使用加权最小二乘法进行电力系统状态估计。测量包括电压幅值、功率注入和功率流Matlab代码.rar
09-20
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
vue+SpringBoot488基于springboot的医务室管理系统java毕业设计源码含论文.rar
09-20
jdk版本:jdk1.8+ 前端：vue.js+ElementUI 开发工具：IDEA 或者eclipse都支持 编程语言: java 框架支持：springboot 数据库: mysql 版本不限 数据库工具：Navicat/SQLyog都可以 详细技术：java+springboot+vue+MYSQL+MAVEN 前端采用的Vue框架，后端采用java语言，sprinboot框架，mybatis操作数据源，使用软件：idea,eclipse、MySQL。完成了用户登录管理等模块的设计与实现。完成了系统数据库的设计，并基于MySQL数据库管理系统
2020前端学习指南：从基础到进阶的完整视频教程
2020最新版前端学习路线图提供了一个全面的学习路径，旨在帮助初学者和进阶者系统地掌握前端开发技能。以下是一份详尽的前端学习计划： 一、基础阶段 1. HTML&CSS：这是前端开发的基础，从尚硅谷的HTML&CSS基础视频...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小歌谣

放弃很容易 但是坚持一定很酷

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值