写静态页面4——浮动练习

已于 2024-02-07 11:21:15 修改
阅读量823 收藏 30
点赞数 22
分类专栏： web前端 文章标签： 前端
于 2024-01-31 22:01:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sz1125218970/article/details/135962957
版权
本文展示了如何使用HTML和CSS创建一个包含声学配件和Flyme模块的网页布局，涉及浮动元素、响应式设计和样式控制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

0、效果：

在这里插入图片描述

1、html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动练习</title>
    <link rel="stylesheet" href="./CSS/全局样式.css">
    <link rel="stylesheet" href="./CSS/浮动练习.css">
</head>
<body>
    <div class="shengXuePeiJian">
        <div class="wrap sx_title">声学配件</div>
        <div class="sx_d1"></div>
        <div class="wrap sx_d2">
            <div class="sx_item">
                <img class="sx_img" src="./图片/1-1.jpg" alt="">
                <p class="sx_p1">PANDAER 游戏耳机 1s</p>
                <p class="sx_p2">28h 超长续航无线充电 | 0.035s 超低延迟</p>
                <p class="sx_p3">￥269 <del class="sx_p3_del">￥369</del> </p>
            </div>
            <div class="sx_item">
                <img class="sx_img" src="./图片/1-1.jpg" alt="">
                <p class="sx_p1">PANDAER 游戏耳机 1s</p>
                <p class="sx_p2">28h 超长续航无线充电 | 0.035s 超低延迟</p>
                <p class="sx_p3">￥269 <del class="sx_p3_del">￥369</del> </p>
            </div>
            <div class="sx_item">
                <img class="sx_img" src="./图片/1-1.jpg" alt="">
                <p class="sx_p1">PANDAER 游戏耳机 1s</p>
                <p class="sx_p2">28h 超长续航无线充电 | 0.035s 超低延迟</p>
                <p class="sx_p3">￥269 <del class="sx_p3_del">￥369</del> </p>
            </div>
            <div class="sx_item sx_item_clear">
                <img class="sx_img" src="./图片/1-1.jpg" alt="">
                <p class="sx_p1">PANDAER 游戏耳机 1s</p>
                <p class="sx_p2">28h 超长续航无线充电 | 0.035s 超低延迟</p>
                <p class="sx_p3">￥269 <del class="sx_p3_del">￥369</del> </p>
            </div>
            <div class="sx_item">
                <img class="sx_img" src="./图片/1-1.jpg" alt="">
                <p class="sx_p1">PANDAER 游戏耳机 1s</p>
                <p class="sx_p2">28h 超长续航无线充电 | 0.035s 超低延迟</p>
                <p class="sx_p3">￥269 <del class="sx_p3_del">￥369</del> </p>
            </div>
            <div class="sx_item">
                <img class="sx_img" src="./图片/1-1.jpg" alt="">
                <p class="sx_p1">PANDAER 游戏耳机 1s</p>
                <p class="sx_p2">28h 超长续航无线充电 | 0.035s 超低延迟</p>
                <p class="sx_p3">￥269 <del class="sx_p3_del">￥369</del> </p>
            </div>
            <div class="sx_item">
                <img class="sx_img" src="./图片/1-1.jpg" alt="">
                <p class="sx_p1">PANDAER 游戏耳机 1s</p>
                <p class="sx_p2">28h 超长续航无线充电 | 0.035s 超低延迟</p>
                <p class="sx_p3">￥269 <del class="sx_p3_del">￥369</del> </p>
            </div>
            <div class="sx_item sx_item_clear">
                <img class="sx_img" src="./图片/1-1.jpg" alt="">
                <p class="sx_p1">PANDAER 游戏耳机 1s</p>
                <p class="sx_p2">28h 超长续航无线充电 | 0.035s 超低延迟</p>
                <p class="sx_p3">￥269 <del class="sx_p3_del">￥369</del> </p>
            </div>
            <div class="sx_item">
                <img class="sx_img" src="./图片/1-1.jpg" alt="">
                <p class="sx_p1">PANDAER 游戏耳机 1s</p>
                <p class="sx_p2">28h 超长续航无线充电 | 0.035s 超低延迟</p>
                <p class="sx_p3">￥269 <del class="sx_p3_del">￥369</del> </p>
            </div>
            <div class="sx_item">
                <img class="sx_img" src="./图片/1-1.jpg" alt="">
                <p class="sx_p1">PANDAER 游戏耳机 1s</p>
                <p class="sx_p2">28h 超长续航无线充电 | 0.035s 超低延迟</p>
                <p class="sx_p3">￥269 <del class="sx_p3_del">￥369</del> </p>
            </div>
            <div class="sx_item">
                <img class="sx_img" src="./图片/1-1.jpg" alt="">
                <p class="sx_p1">PANDAER 游戏耳机 1s</p>
                <p class="sx_p2">28h 超长续航无线充电 | 0.035s 超低延迟</p>
                <p class="sx_p3">￥269 <del class="sx_p3_del">￥369</del> </p>
            </div>
            <div class="sx_item sx_item_clear">
                <img class="sx_img" src="./图片/1-1.jpg" alt="">
                <p class="sx_p1">PANDAER 游戏耳机 1s</p>
                <p class="sx_p2">28h 超长续航无线充电 | 0.035s 超低延迟</p>
                <p class="sx_p3">￥269 <del class="sx_p3_del">￥369</del> </p>
            </div>
        </div>
    </div>
    <div class="zhouBianPeiJian">
        <div class="wrap zb_title">Flyme</div>
        <div class="wrap zb_d2">
            <div class="fig1">
                <img src="./图片/3.webp" alt="">
            </div>
            <div class="fig">
                <img src="./图片/4.webp" alt="">
                <p>Flyme 隐私安全白皮书</p>
            </div>
            <div class="fig fig_clear">
                <img src="./图片/4.webp" alt="">
                <p>Flyme 隐私安全白皮书</p>
            </div>
            <div class="fig">
                <img src="./图片/4.webp" alt="">
                <p>Flyme 隐私安全白皮书</p>
            </div>
            <div class="fig">
                <img src="./图片/4.webp" alt="">
                <p>Flyme 隐私安全白皮书</p>
            </div>
            <div class="fig">
                <img src="./图片/4.webp" alt="">
                <p>Flyme 隐私安全白皮书</p>
            </div>
            <div class="fig fig_clear">
                <img src="./图片/4.webp" alt="">
                <p>Flyme 隐私安全白皮书</p>
            </div>
        </div>
    </div>
</body>
</html>

2、CSS代码：

  • 全局样式
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,textarea,button,p,blockquote,th,td{margin:0;padding:0;}
li{list-style-type:none;}
a{text-decoration:none;}
img,input,button{border:none;vertical-align:middle;}
*{font-weight:400;font-style: normal;}
body{text-align: center;}
/* 居中样式 */
.wrap{width: 100%;margin: 0 auto;}
  • 浮动练习样式
/* 声学配件模块样式 */
.sx_title,.zb_title{
    font-size: 30px;
    font-family: Helvetica,Tahoma,Arial,"Hiragino Sans GB","Microsoft YaHei",SimSun,Heiti,sans-serif;
    margin-bottom: 10px;
}
.sx_d1{width:2560.01px;height:450px;background-image: url(../图片/1.webp);background-size: 2560.01px 450px;background-repeat: no-repeat;margin: 0 auto;border-bottom: 1px solid #eee;}

.sx_d2{
    width: 1240px;
    height: 1154.95px;
}
.sx_item{
    background-color: #fff;     
    width: 303px;
    height: 375px;
    margin-top: 10px;
    margin-right: 9px;
    float: left;
}
.sx_item_clear{
    margin-right: 0px;
}
.sx_img{
    width: 230px;
    margin:30px 0 0;
}
.sx_p1{
    color: #333;
    font-size: 16px;
    margin-bottom: 2px;
}
.sx_p2{
    color: #999;
    font-size: 14px;
}
.sx_p3{
    color: #CC0000;
    font-size: 22px;
}
.sx_p3_del{
    color: #666666;
    font-size: 14px;
}

.shengXuePeiJian{overflow: hidden;} /* 清除上面浮动对下面的影响 */
/* Flyme模块样式 */
.zb_title{
    height: 45px;
}
.zb_d2{
    width: 1240px;
    height: 520px;
}
.fig,.fig1{
    background-color: #fff;
    float: left;
    width: 615px;
    height: 245px;
    margin-right: 9px;
    margin-bottom: 15px;
}
.fig{
    width: 302.99px;
    height: 245px;
}
.fig_clear{
    margin-right: 0;
}
/* 用子代选择器可以省去写类选择器的麻烦 */
.fig1 > img{ 
    width: 615px;
    height: 245px;
}
.fig > img{ 
    width: 302.99px;
    height: 190px;
}
.fig > p{
    line-height: 55px;
    height: 55px;
    color:#515151;
    font-size: 16px;
}
Linux SVN备份及迁移 - dump方式实操
system1190的专栏
01-10 2094
Linux SVN备份及迁移 - dump方式
4.2、svn备份还原 svnadmin dump load 1
08-08
本文将详细讲解如何使用svnadmin工具进行svn仓库的备份与还原，确保项目数据的安全。 首先，我们需要理解svn仓库的结构。在svnserver中，仓库是一个包含所有版本历史记录的目录，它存储了项目的全部历史版本信息，...
svn admin dump备份
11-24
适用于svn备份操作，这是subversion官方推荐的备份方式。可备份svn存储库，恢复svn存储库。
svn dump
yeweimian999的博客
04-18 203
1、导出： 在windows下，打开命令窗口，进入下列目录： "c:\Program Files\VisualSVN Server\bin\" 执行： svnadmin.exe 输入下列命令并执行： svnadmin dump D:\Repositories\TestProject > D:\svndumpfile\TestProject_20090722.dump 2、将du...
svnadmin dump导入导出命令
yuezhilangniao的博客
03-31 7456
svn是一个跨平台的开源的版本控制系统，svn版本管理工具管理随时间改变的各种数据。这些数据放置在一个中央资料档案库中，这个档案库很像一个普通的文件服务器或者FTP服务器，但是，与众不同的是，svn会备份并记录每一个文件每一次的修改更新变动。这样我们就可以把任意时间点的档案恢复到想要的某一个旧版本。svn是一个非常通用的软件管理系统，它常被用来管理程序源码，但是他也可以管理任何类型的文件，如：文本，图片，视频等。目前版本管理还有VSS，CSV，SVN，GIT但是目前最常用的还是SVN。
SVN 备份及还原包括逻辑和物理备份
04-09
SVN备份及还原策略应包括逻辑和物理备份，以应对各种可能的风险。通过定期执行备份计划，并结合本地和远程备份，可以最大程度地减少数据丢失的可能性。提供的bat脚本和相关文档可能提供了实现这些策略的具体步骤和...
SVN备份还原清理BAT
07-21
对网上的SVN备份、还原、清理几天之前的备份进行了测试与修改。 全量备份：fullbackup.bat(使用前先修改目录)、hotcopy.bat 增量备份：svndump.bat(使用前先修改目录)、dump.bat、projectlist.conf(使用前先修改svn...
SVN备份与恢复：实战脚本体验
基于这个主题，我们可以预期该压缩包中可能包含了关于SVN备份与恢复的脚本文件、操作指南文档、备份策略配置文件，以及可能的恢复测试报告等。这些文件对于理解和实现SVN备份恢复机制来说，是非常宝贵的资源。 总结...
SVN备份脚本使用指南与下载
SVN（Subversion）是一种...编写和使用SVN备份脚本是确保版本控制数据安全、可靠和易于恢复的重要手段。企业应当确保备份脚本经过妥善配置和定期测试，确保在紧急情况下能够迅速而有效地还原数据，从而保障业务连续性。
史上最好用的SVN自动（增量）备份&还原批处理脚本
07-22
完全实现SVN备份的自动化，使用超级简单方便
svnrdumpfilter妙用
12-24
使用SVN时，当服务器上存在很大的无效文件时，需要彻底删除的时候就可以使用此方法
linux svn dump 备份,svn dump 全自动备份脚本
weixin_35615495的博客
05-14 307
# our actual rsyncing functiondo_accounting(){echo " " >> $LogFileecho " " >> $LogFileecho "###########################" >> $LogFileecho "$DATE" >> $LogFileecho "##############...
SVN资料库转移-----dump和load
dingzuogun1518的博客
07-16 354
最近由于大批量的更换服务器，所以之前布署的SVN服务器需要重新布署，需要把原来的资源库转移到新服务器上，并且使管理的项目版本一致，在网上查了一下SVN版本库迁移，但看了一上google出来的也很少，所以去看了Subversion的官方文档，svnadmin有两个子命令dump(导出)和load(导入) svnadmin使用时需要先将工作目录转至subversion...
SVN备份/恢复脚本
weixin_34228662的博客
11-21 139
上一篇介绍了svn的配置，这里就写了两个脚本对svn进行全备和恢复，由于是全备，所以可以做个计划任务，每天执行一次即可。保留几天的数据。 1、备份脚本： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 3...
Linux SVN备份迁移 - dump方式
hellboy0621的博客
05-24 4514
该种方式适用于代码库不大的情况1、dump出源服务器的SVN代码库：svnadmin dump /usr/local/svnRepo/demo/ &gt; 20180524.dump 其中/usr/local/svnRepo/demo/为源服务器上SVN代码库路径2、使用scp命令，将备份文件上传至新服务器上scp /data/20180524.dump root@新服务器IP:/data/3、在...
linux svn 增量备份,svn dump增量备份脚本
weixin_35909607的博客
05-13 387
svn 增量备份脚本，环境：系统，centos6.5,svn version 1.6.11,httpd Apache/2.2.15 (Unix)APR 1.3.9, APR-Util 1.3.9,全部为yum编译一些常用命令svn ls -v /opt/svn/snn 查看svn目录文件列表svn --version 查看...
svnrdump dump 实现 SVN 库的远程导出
MONKEYK
09-25 9137
svnrdump dump 命令必须 在 SVN 1.7版本以上提供的用于远程dump SVN库的命令. 一个例子: svnrdump dump https://monkeyk.googlecode.com/svn/trunk/ > monkeyk.dump 该命令的详细描述请参考: http://svnbook.red-bean.com/en/1.7/svn.ref
SVN脚本备份与恢复的方案
chengjh06的专栏
12-10 1183
脚本备份与恢复的方案 #add for SVN 添加环境变量 exportPATH=/svn/csvn/bin:$PATH 范例脚本： 在需要备份的机器上：如（内网服务器10.50.2.54） svnlook youngest/svn/csvn/data/repositories/FTSSvn svnadmin dump -r30 svn/csvn/data/repositories/
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值