安利——练习

最新推荐文章于 2024-04-27 21:35:02 发布
最新推荐文章于 2024-04-27 21:35:02 发布
阅读量151 收藏 1
点赞数
分类专栏： 前端 文章标签： css html html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57752092/article/details/124651968
版权

浅说一下今天的感想，感觉最折磨我的部分就是高度塌陷。刚开始怎么都不对，找了半天原因也没有找到，过了很长时间才忽然想到了原因——高度塌陷

解决高度塌陷的几种比较简单的方法：

1.在父元素style内或者在浮动元素下方添加div使用css  clear：both

2.在父元素内使用overflow：auto

3.在父元素内使用overflow：hidden

结果展示：

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
                margin: 0;
                padding: 0;
            }
        .box1{
            width: 960px;
            margin: 0 auto;
            overflow: hidden;
        }
        .box .header{
            height: 110px;
        }
        .left{
            float: left;
        }
        .header>.span1{
            float: right;
            padding-top: 28px;
            padding-bottom: 10px;
        }
        span{
            border-right: 1px solid #bdabbd;
            padding-left: 10px;
            padding-right: 10px;
            font-size: 10px;
        }
        .span1 span:nth-child(1){
            color: #ed164b;
        }
        .span1 span:nth-child(3){
            color: #ed164b;
        }
        .span1 span:nth-child(6){
            color: #ed164b;
        }
        span:nth-child(6){
            border: none;
            padding-right: 0px;
        }
        form{
            border: 1px solid #d1d1d1;
            width: 235px;
            height: 30px;
            float: right;
        }
        form input:nth-child(1){
            float: left;
            outline: none;
            border: none;
            width: 205px;
            line-height: 30px;
            color: #d1d1d1;
        }
        form input:nth-child(2){
            width: 30px;
            height: 30px;
            border: none;
            background-image: url(../images/search.png);
            background-color: white;
            background-repeat: no-repeat;
            background-position: center;
            float: right;
        }

        ul li{
            list-style: none;
        }
        .box2 li{
            list-style: none;
            float: left;
            color: white;
            line-height: 54px;
            padding-right: 80px;
        }
        .banner{
            height: 54px;
            background: #0c335c;
        }
        .box2{
            width: 960px;
            margin: 0 auto;
        }
        .banner{
            height: 54px;
            background: #0c335c;
        }
        .box2{
            width: 960px;
            margin: 0 auto;
            /* 解决高度塌陷 */
            overflow: hidden;
        }
        center img{
            width: 100%;
        }
        center .box2{
            width: 960px;
            margin: 0 auto;
        }
        .box2 div{
            width: 304px;
            height: 212px;
            border: 1px solid #555454;
            float: left;
            margin-top: 52px;
            margin-bottom: 34px;
            margin-right: 21px;
        }
        .box2 .right1{
            margin-right: 0px;
        }
        footer{
            height: 206px;
            background: url(../images/footer.png) repeat;
            border-top:1px solid #cccccc;
        }
        .box3{
            width: 960px; 
            margin: 0 auto;
            height: 84px;
            padding-top: 30px;
            padding-bottom: 30px;
            border-bottom: 1px solid #ecebeb;
            line-height: 28px;
        }
        .box3 li{
            color: #336699;
            width: 210px;
            font-size: 12px;
            padding-left: 30px;
            float: left;
        }
        footer p{
            width: 960px; 
            margin: 0 auto;
            padding-left: 30px;
            font-size: 10px;
            line-height: 60px;
        }
        footer span{
            color: #0088cc;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="header box1">
                <div class="left">
                    <img src="../images/logo.png" alt="">
                </div>
                <div class="span1">
                    <span>安利海外购</span>
                    <span>掌上安利</span>
                    <span>安利悦享荟</span>
                    <span>安利植物研发中心</span>
                    <span>各地店铺</span>
                    <span>安利易联网</span>
                </div>
                <form action="">
                    <input type="text" placeholder="搜索">
                    <input type="button">
                </form>
        </div>  
    </div>
    <div class="banner">
        <ul class="box2">
            <li>走近安利</li>
            <li>产品展馆</li>
            <li>公司资讯</li>
            <li>企业责任</li>
            <li>安利云购</li>
            <li>其他</li>
        </ul>
</div>
</div>
<center>
    <img src="../images/bg.png" alt="">
    <div class="box2">
        <div class="left1">
            <img src="../images/item.png" alt="">
            <p>《总裁零距离》微站</p>
        </div>
        <div class="center1">
            <img src="../images/item.png" alt="">
            <p>安利，值得选择</p>
        </div>
        <div class="right1">
            <img src="../images/item.png" alt="">
            <p>安利式体验 全心为您</p>
        </div>
    </div>
</center>
<footer>
    <ul class="box3">
        <li>安利公益基金会</li>
        <li>安利培训中心</li>
        <li>安利云购</li>
        <li>安利轻创业平台</li>
        <li>直销信息披露</li>
        <li>安利教育网</li>
        <li>网站导航</li>
        <li>安利全球官方网站</li>
        <li>联系我们</li>
        <li>企业证照</li>
        <li>隐私声明条款</li>
        <li>国家工商总局直销行业管理</li>
    </ul>
    <p>版权为安利（中国）日用品有限公司所有未经许可不得转载或链接，粤ICP备<span>05013154</span>号</p>
</footer>
</body>
</html>

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <div class="header box1">
                <div class="left">
                    <img src="../images/logo.png" alt="">
                </div>
                <div class="span1">
                    <span>安利海外购</span>
                    <span>掌上安利</span>
                    <span>安利悦享荟</span>
                    <span>安利植物研发中心</span>
                    <span>各地店铺</span>
                    <span>安利易联网</span>
                </div>
                <form action="">
                    <input type="text" placeholder="搜索">
                    <input type="button">
                </form>
        </div>  
    </div>
    <div class="banner">
        <ul class="box2">
            <li>走近安利</li>
            <li>产品展馆</li>
            <li>公司资讯</li>
            <li>企业责任</li>
            <li>安利云购</li>
            <li>其他</li>
        </ul>
</div>
</div>
<center>
    <img src="../images/bg.png" alt="">
    <div class="box2">
        <div class="left1">
            <img src="../images/item.png" alt="">
            <p>《总裁零距离》微站</p>
        </div>
        <div class="center1">
            <img src="../images/item.png" alt="">
            <p>安利，值得选择</p>
        </div>
        <div class="right1">
            <img src="../images/item.png" alt="">
            <p>安利式体验 全心为您</p>
        </div>
    </div>
</center>
<footer>
    <ul class="box3">
        <li>安利公益基金会</li>
        <li>安利培训中心</li>
        <li>安利云购</li>
        <li>安利轻创业平台</li>
        <li>直销信息披露</li>
        <li>安利教育网</li>
        <li>网站导航</li>
        <li>安利全球官方网站</li>
        <li>联系我们</li>
        <li>企业证照</li>
        <li>隐私声明条款</li>
        <li>国家工商总局直销行业管理</li>
    </ul>
    <p>版权为安利（中国）日用品有限公司所有未经许可不得转载或链接，粤ICP备<span>05013154</span>号</p>
</footer>
</body>
</html>

css部分：

*{
    margin: 0;
    padding: 0;
}
.box1{
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.box .header{
height: 110px;
}
.left{
float: left;
}
.header>.span1{
float: right;
padding-top: 28px;
padding-bottom: 10px;
}
span{
border-right: 1px solid #bdabbd;
padding-left: 10px;
padding-right: 10px;
font-size: 10px;
}
.span1 span:nth-child(1){
color: #ed164b;
}
.span1 span:nth-child(3){
color: #ed164b;
}
.span1 span:nth-child(6){
color: #ed164b;
}
span:nth-child(6){
border: none;
padding-right: 0px;
}
form{
border: 1px solid #d1d1d1;
width: 235px;
height: 30px;
float: right;
}
form input:nth-child(1){
float: left;
outline: none;
border: none;
width: 205px;
line-height: 30px;
color: #d1d1d1;
}
form input:nth-child(2){
width: 30px;
height: 30px;
border: none;
background-image: url(../images/search.png);
background-color: white;
background-repeat: no-repeat;
background-position: center;
float: right;
}

ul li{
list-style: none;
}
.box2 li{
list-style: none;
float: left;
color: white;
line-height: 54px;
padding-right: 80px;
}
.banner{
height: 54px;
background: #0c335c;
}
.box2{
width: 960px;
margin: 0 auto;
}
.banner{
height: 54px;
background: #0c335c;
}
.box2{
width: 960px;
margin: 0 auto;
/* 解决高度塌陷 */
overflow: hidden;
}
center img{
width: 100%;
}
center .box2{
width: 960px;
margin: 0 auto;
}
.box2 div{
width: 304px;
height: 212px;
border: 1px solid #555454;
float: left;
margin-top: 52px;
margin-bottom: 34px;
margin-right: 21px;
}
.box2 .right1{
margin-right: 0px;
}
footer{
height: 206px;
background: url(../images/footer.png) repeat;
border-top:1px solid #cccccc;
}
.box3{
width: 960px; 
margin: 0 auto;
height: 84px;
padding-top: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #ecebeb;
line-height: 28px;
}
.box3 li{
color: #336699;
width: 210px;
font-size: 12px;
padding-left: 30px;
float: left;
}
footer p{
width: 960px; 
margin: 0 auto;
padding-left: 30px;
font-size: 10px;
line-height: 60px;
}
footer span{
color: #0088cc;
}

豆芽菜♀
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
安利商务随行客户端
03-12
安利手机客户端，如涉及侵权内容,请通知我，会将其被移除。
CSS3实战网页设计(2)
天涯芳草
07-16 392
html源代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>天马行空设计室</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href=...
C++ primer 练习 9.52——[中缀表达式求值]
algsup
07-17 1266
题目： emmm，说实话呀，昨天我就做到这题了，看了好几遍也没读懂题目意思，然后参考的大神的博客，算是解出来了吧。大神博客：https://blog.csdn.net/fengzhanghao23/article/details/48493757 本题的大致意思就是利用栈求一个算术表达式的值，这里我是参考网上的代码，即使用中缀表达式求算法表达式的值。 例如表达式：(1+2)*3/(2-1) 解题...
ShaderToy上后处理练习1——故障
JMXIN422的博客
06-12 614
故障艺术 主要参考，或者说就是照着著名大佬QianMo的后处理教程写的，不过他是在Unity里面实现的，作为一个高品质后处理插件，然后本人是在ShaderToy上实现的，当然我都是在复现大佬的代码，推荐大家去读大佬的文章，地址：https://github.com/QianMo/GPU-Gems-Book-Source-Code 强烈安利！！！！ RGB颜色分离故障（RGB Split Glitch） Common #define IDENSITY (0.091) #define PATTERRN (2)
ShaderToy上后处理练习2——模糊
JMXIN422的博客
06-12 458
模糊算法 主要参考，或者说就是照着著名大佬QianMo的后处理教程写的，不过他是在Unity里面实现的，作为一个高品质后处理插件，然后本人是在ShaderToy上实现的，当然我都是在复现大佬的代码，推荐大家去读大佬的文章，地址：https://github.com/QianMo/GPU-Gems-Book-Source-Code 强烈安利！！！！ 还有，就是，一些结果和代码不能一一对应，不过贴到ShaderToy上就能看到效果 高斯模糊 Commom #define SIZE 5. #define STEP
安利口才PDF
12-29
你还在苦苦寻找安利口才PDF吗？你还在为安利口才PDF而烦恼么？在这里，为您提供了最实用的安利...该文档为安利口才PDF，是一份很不错的参考资料，具有较高参考价值，感兴趣的可以下载看看
“小红书”——给你安利几个小程序的“坑”
03-29
相信很多人都用过小红书吧，我可是被它安利了很多好东西呢，所以想着就仿写一个小红书的微信小程序吧。下面我就给大家“安利”几个我在写的过程中的“坑”。 因为花的时间不多，功能有很多没有完善，页面写的不是很...
精典源码delphi源码下载 安利销售系统.zip
05-08
精典源码delphi源码下载 安利销售系统.zip
安利纽崔莱健康手册.pdf
03-13
安利纽崔莱健康手册.pdf
css利用transform:skew()属性画一个大屏的背景斜面四边形特效
最新发布
Demon's blog
04-27 101
使用css transform function中的skew()方法实现画其中一个斜面，然后调整背景色实现ß。在工作工程中需要写一个如下的大屏背景，是由几个斜面做成的效果。2. 添加transform属性。4. 重复三个，注意背景色不一样。3. 添加渐变背景色和阴影。
vuetify3.0+tailwindcss+vite最新框架
qq_43813351的博客
04-23 325
【代码】vuetify3.0+tailwindcss+vite最新框架。
js动态设置css主题(Style-setProperty)
zarek_jiamu的博客
04-27 116
定义的参考色，在开发的过程中希望后端人员能遵循// 用于按钮点击颜色num
CSS之显示覆盖内容（z-index）
qq_60624992的博客
04-27 336
我们有的时候，希望下方的内容能够显示到上方，达到类似于多个图层的效果，此时我们可以利用z-index这个属性。z-index属性值是用来设置元素的堆叠顺序(元素层级)。
【前端技术】CSS基础入门篇
软件测试知识输出
04-24 677
css（Cascading Style Sheets，缩写为，也叫作层叠样式表）是一套美化HTML标签所编写出页面的语法，CSS描述了如何在不同设备上渲染内容的方法。
深入解读CSS高级选择器
艾恩小灰灰的博客
04-27 176
CSS选择器是网页样式设计的核心组成部分，它们使开发者能够精准定位页面上的元素并施加相应的样式。在众多选择器中，高级选择器因其强大的定位能力和灵活性备受青睐。接下来，我们将逐一详解这些高级选择器，并通过实例代码加深理解。
CSS实现广告自动轮播
m0_72895175的博客
04-20 587
实现原理该广告轮播功能的实现主要依靠HTML和CSS。HTML负责搭建轮播框架，而CSS则控制样式和动画效果。通过CSS中的关键帧动画（Keyframes），我们可以定义图片在容器内的滚动效果，从而实现轮播功能。
CSS体验
lan_da_wang的博客
04-27 133
</em>:表示字体倾斜。区别：<em>
css盒子设置圆角边框的方法
2302_79590880的博客
04-24 340
css设置圆边盒子的方法
python语料清洗 练习
09-06
Python语料清洗练习是一种通过使用Python编程语言对文本数据进行处理和清理的练习。在实际应用中，数据通常需要进行清洗和预处理，以便于后续的分析和建模工作。Python语料清洗练习通常包括以下几个步骤： 1. 导入文本数据：使用Python的文件操作功能，将需要清洗的文本数据导入到Python环境中。 2. 数据清洗：根据具体需求，使用Python的字符串处理和正则表达式等功能，对文本数据进行清洗。这包括去除无关字符、标点符号和特殊符号，统一大小写，去除停用词等。 3. 分词：使用Python的自然语言处理工具，对文本数据进行分词处理。这可以将文本数据切割成一个个独立的词语或短语，方便后续的处理和分析。 4. 去除停用词：使用Python的停用词库，去除文本中的常用词语，如“的”、“是”等。这些常用词语对文本的分析和建模没有太大的帮助，可以在清洗过程中将它们去除。 5. 词性标注：使用Python的自然语言处理工具，对分词后的文本数据进行词性标注。这可以为每个词语添加它们在语法和语义上的词性，方便后续的分析和处理。 6. 数据处理：根据具体需求，对清洗后的文本数据进行进一步的处理。这包括统计词频、计算语义相似度、构建词向量等。 通过进行Python语料清洗练习，我们可以熟悉Python的文本处理功能，提高对文本数据的理解和分析能力。同时，清洗后的数据可以为后续的机器学习和自然语言处理任务提供更好的数据基础。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [小学生开始学Python,最接近AI的编程语言:安利一波Python书单](https://blog.csdn.net/weixin_39616379/article/details/111435920)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值