浮动练习-手机模块

已于 2022-12-07 23:45:54 修改
阅读量219 收藏
点赞数
分类专栏： html+css 文章标签： css css3 html
于 2022-12-02 23:27:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L1585931143/article/details/128156260
版权

 

<!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>手机模块1</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        body {
            background-color: #F5F5F5;
        }

        .box {
            width: 1226px;
            height: 615px;
            /* background-color: pink; */
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 234px;
            height: 615px;
            /* background-color: purple; */

        }

        .left a {
            display: inline-block;
            width: 100%;
            height: 100%;
        }

        .right {
            float: left;
            width: 992px;
            height: 615px;
            /* background-color: skyblue; */
        }

        .right>ul li {
            float: left;
            width: 234px;
            height: 300px;
            /* background-color: pink; */
            background-color: #FFFFFF;
            margin-left: 14px;
            margin-bottom: 14px;
        }

        .right>ul li a {
            display: inline-block;
            width: 100%;
            height: 100%;
            text-decoration: none;
        }

        .right>ul li a .img {
            width: 160px;
            height: 166px;
            /* background-color: red; */
            margin-top: 20px;
            margin-left: 37px;
        }

        .right>ul li a .img img {
            width: 100%;
        }

        .right>ul li a h3 {
            font-size: 12px;
            font-weight: 400;
            color: #333333;
            text-align: center;
            margin-top: 12px;
        }

        .right>ul li a p {
            text-align: center;
            color: #b0b0b0;
            font-size: 12px;
            margin-top: 2px;
        }

        .right>ul li a .jiage {
            margin-top: 10px;
            color: #ff6700;
        }
        .right>ul li a .jiage span{
            color: #b0b0b0;
            margin-left: 7px;
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"><a href="#" target="_self"><img src="images/Redmi/Redmi Note12 Pro MaxImg.png" /></a></div>
        <div class="right">
            <ul>
                <li>
                    <a href="#" target="_self">
                        <div class="img">
                            <img src="images/Redmi/Redmi Note 12 5G.png" alt="Redmi Note 12 5G"
                                title="Redmi Note 12 5G">
                        </div>
                        <h3>Redmi Note 12 5G</h3>
                        <p>三星 OLED 护眼屏｜骁龙 5G 芯｜50...</p>
                        <p class="jiage">1199元起</p>
                    </a>
                </li>
                <li>
                    <a href="#" target="_self">
                        <div class="img">
                            <img src="images/Redmi/Redmi Note 12 Pro.png" alt="Redmi Note 12 Pro"
                                title="Redmi Note 12 Pro">
                        </div>
                        <h3>Redmi Note 12 Pro</h3>
                        <p> IMX766 防抖相机｜OLED 柔性直屏｜...</p>
                        <p class="jiage">1699元起</p>
                    </a>
                </li>
                <li>
                    <a href="#" target="_self">
                        <div class="img">
                            <img src="images/Redmi/Redmi Note 12 Pro+.png" alt="Redmi Note 12 Pro+"
                                title="Redmi Note 12 Pro+">
                        </div>
                        <h3>Redmi Note 12 Pro+</h3>
                        <p>2亿超清防抖相机｜OLED 柔性直屏</p>
                        <p class="jiage">2099元起<span>2199元</span></p>
                    </a>
                </li>
                <li>
                    <a href="#" target="_self">
                        <div class="img">
                            <img src="images/Redmi/Redmi Note 11 5G.png" alt="Redmi Note 11 5G"
                                title="Redmi Note 11 5G">
                        </div>
                        <h3>Redmi Note 11 5G</h3>
                        <p>5000mAh大电量</p>
                        <p class="jiage">1099元起<span>1199元</span></p>
                    </a>
                </li>
                <li>
                    <a href="#" target="_self">
                        <div class="img">
                            <img src="images/Redmi/Redmi K50.png" alt="Redmi K50"
                                title="Redmi K50">
                        </div>
                        <h3>Redmi K50</h3>
                        <p>2K直屏的狠旗舰</p>
                        <p class="jiage">2099元起<span>2399元</span></p>
                    </a>
                </li>
                <li>
                    <a href="#" target="_self">
                        <div class="img">
                            <img src="images/Redmi/Redmi Not 11T Pro.png" alt="Redmi Not 11T Pro"
                                title="Redmi Not 11T Pro">
                        </div>
                        <h3>Redmi Not 11T Pro</h3>
                        <p>天玑8100｜真旗舰芯</p>
                        <p class="jiage">1569元起<span>1799元</span></p>
                    </a>
                </li>
                <li>
                    <a href="#" target="_self">
                        <div class="img">
                            <img src="images/Redmi/Xiaomi 12S Pro.png" alt="Xiaomi 12S Pro"
                                title="Xiaomi 12S Pro">
                        </div>
                        <h3>Xiaomi 12S Pro</h3>
                        <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
                        <p class="jiage">4399元起<span>4699元</span></p>
                    </a>
                </li>
                <li>
                    <a href="#" target="_self">
                        <div class="img">
                            <img src="images/Redmi/Redmi K50 至尊版.png" alt="Redmi K50 至尊版"
                                title="Redmi K50 至尊版">
                        </div>
                        <h3>Redmi K50 至尊版</h3>
                        <p>骁龙8+ ｜1.5K 高清直屏</p>
                        <p class="jiage">2799元起<span>2999元</span></p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>

</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>手机模块2</title>
    <style>
        /* CSS三大特性:层叠性、继承性、优先级
            0 继承性或通配符
            1 标签选择器
            10 类选择器
            100 ID选择器
            1000 行内样式
        */
        /* 
            网页布局第1准则: 1、块级元素使用纵向排列找标准流。2、块级元素使用横向排列找浮动。
            网页布局第2准则: 1、先设置盒子大小。2、再设置盒子位置
        */
        /* 清除浏览器所有标签默认样式 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 设置body背景颜色 */
        body {
            background-color: #F5F5F5;
        }

        /* 设置大的块级盒子样式 */
        .box {
            width: 1226px;
            height: 614px;
            /* background-color: pink; */
            margin: 0 auto;
        }

        /* 设置左边盒子样式 */
        .left {
            /* 第1准则第2条 */
            float: left;
            /* 第2准则第1条 */
            width: 234px;
            height: 614px;
            /* background-color: purple; */
        }

        /* 设置右边盒子样式 */
        .right {
            float: left;
            width: 992px;
            height: 614px;
            /* background-color: skyblue; */
        }

        .right .minbox {
            float: left;
            width: 234px;
            height: 300px;
            background-color: #FFFFFF;
            margin: 0 0 14px 14px;
        }

        .minbox a {
            text-decoration: none;
        }

        /* 使用标准流纵向排列 */
        .minbox div {
            width: 234px;
            height: 184px;
            /* background-color: red; */
        }

        .minbox div img {
            float: left;
            width: 160px;
            margin-left: 37px;
            margin-top: 20px;
        }

        .minbox h3 {
            font-size: 12px;
            font-weight: 400;
            text-align: center;
            color: #333333;
            margin-top: 14px;
        }

        .minbox p {
            font-size: 12px;
            color: #B0B0B0;
            text-align: center;
            margin-top: 2px;
        }
        .minbox .jiage {
            color: #FF6700;
            margin-top: 10px;
        }

        .minbox .jiage span {
            color: #B0B0B0;
            margin-left: 7px;
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">
            <a href="#" target="_self">
                <img src="images/Redmi/Redmi Note12 Pro MaxImg.png" alt="Redmi Note12 Pro" title="Redmi Note12 Pro">
            </a>
        </div>
        <div class="right">
            <div class="minbox">
                <a href="#" target="_self">
                    <div>
                        <img src="images/Redmi/Redmi Note 12 5G.png" alt="Redmi Note 12 5G" title="Redmi Note 12 5G">
                    </div>
                    <h3>Redmi Note 12 5G</h3>
                    <p>三星 OLED 护眼屏｜骁龙 5G 芯｜50...</p>
                    <p class="jiage">1199元起</p>
                </a>
            </div>
            <div class="minbox">
                <a href="#" target="_self">
                    <div>
                        <img src="images/Redmi/Redmi Note 12 Pro.png" alt="Redmi Note 12 Pro" title="Redmi Note 12 Pro">
                    </div>
                    <h3>Redmi Note 12 Pro</h3>
                    <p>IMX766 防抖相机｜OLED 柔性直屏｜...</p>
                    <p class="jiage">1699元起</p>
                </a>
            </div>
            <div class="minbox">
                <a href="#" target="_self">
                    <div>
                        <img src="images/Redmi/Redmi Note 12 Pro+.png" alt="Redmi Note 12 Pro+" title="Redmi Note 12 Pro+">
                    </div>
                    <h3>Redmi Note 12 Pro+</h3>
                    <p>2亿超清防抖相机｜OLED 柔性直屏</p>
                    <p class="jiage">2099元起<span>2199元</span></p>
                </a>
            </div>
            <div class="minbox">
                <a href="#" target="_self">
                    <div>
                        <img src="images/Redmi/Redmi Note 11 5G.png" alt="Redmi Note 11 5G" title="Redmi Note 11 5G">
                    </div>
                    <h3>Redmi Note 11 5G</h3>
                    <p>5000mAh大电量</p>
                    <p class="jiage">1099元起<span>1199元</span></p>
                </a>
            </div>
            <div class="minbox">
                <a href="#" target="_self">
                    <div>
                        <img src="images/Redmi/Redmi K50.png" alt="Redmi K50" title="Redmi K50">
                    </div>
                    <h3>Redmi K50</h3>
                    <p>2K直屏的狠旗舰</p>
                    <p class="jiage">2099元起<span>2399元</span></p>
                </a>
            </div>
            <div class="minbox">
                <a href="#" target="_self">
                    <div>
                        <img src="images/Redmi/Redmi Not 11T Pro.png" alt="Redmi Not 11T Pro" title="Redmi Not 11T Pro">
                    </div>
                    <h3>Redmi Not 11T Pro</h3>
                    <p>天玑8100｜真旗舰芯</p>
                    <p class="jiage">1569元起<span>1799元</span></p>
                </a>
            </div>
            <div class="minbox">
                <a href="#" target="_self">
                    <div>
                        <img src="images/Redmi/Xiaomi 12S Pro.png" alt="Xiaomi 12S Pro" title="Xiaomi 12S Pro">
                    </div>
                    <h3>Xiaomi 12S Pro</h3>
                    <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
                    <p class="jiage">4399元起<span>4699元</span></p>
                </a>
            </div>
            <div class="minbox">
                <a href="#" target="_self">
                    <div>
                        <img src="images/Redmi/Redmi K50 至尊版.png" alt="Redmi K50 至尊版" title="Redmi K50 至尊版">
                    </div>
                    <h3>Redmi K50 至尊版</h3>
                    <p>骁龙8+ ｜1.5K 高清直屏</p>
                    <p class="jiage">2799元起<span>2999元</span></p>
                </a>
            </div>
        </div>
    </div>
</body>

</html>

图片元素

辐_射
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css:CSS基本练习模块
05-28
综上所述，这个CSS基础练习模块覆盖了从基本语法到实际布局的广泛内容，是学习和提高CSS技能的良好起点。通过实践这些知识点，你可以更好地理解和运用CSS，创造出更具吸引力和功能性的网页设计。
polo-360静态页面练习
07-10
3. **浮动与清除**：在旧版布局中，浮动(float)常用于创建多列布局，而清除(clear)则用于处理因浮动导致的布局问题。 4. **响应式设计**：利用媒体查询@media，根据设备的不同特性（如屏幕尺寸）来调整布局，确保...
HTML+CSS浮动布局练习：小米商城手机模块
睡觉对我来说很重要的博客
08-06 2833
小米商城手机模块 题目：利用所学浮动知识点，实现如下效果。 思路：整体看成一个大盒子，大盒子分成左右两大块，左边盒子放置一张图片，右边又分成8个小模块，利用margin设计两个模块间的距离。 实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init
CSS浮动练习-小米手机模块
weixin_64776610的博客
07-17 70
【代码】CSS浮动练习-小米受模块。
前端黑马 浮动手机模块练习 css
qq_43531541的博客
04-19 215
``<!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&g..
2018-01-22-前端基础练习-JD顶部导航.rar
01-22
【前端基础练习-JD顶部导航】是一个针对前端开发者的学习资源，主要目的是通过模拟京东首页的顶部导航栏来提升CSS布局和交互设计技能。这个压缩包包含了一组文件，旨在帮助学习者理解并实践如何用HTML和CSS构建一个...
Css-Demo:css练习案例
05-14
通过完成修真院平台的css模块的15个任务。我的css水平提升了很多，感谢修真院。对css的自适应，响应式，浮动，定位，flex布局，css sprite（雪碧图）等进行自学，以及制作下拉菜单和轮播图（纯css写的），掌握了...
个人练习+笔记.zip
05-13
设计师通常使用24或12列的栅格来组织内容，可以实现灵活的模块化设计。 5. **Flexbox布局**：CSS3引入的Flexbox模型（Flexible Box）提供了更方便的方式来处理一维布局，如行或列。它允许元素在容器内灵活伸缩，...
有序列表跟无序列表的嵌套
辐_射的博客
11-12 7729
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>有序列表跟无序列表的嵌套</title> <link href="css/style.css" type="text/css" rel="styl...
有序列表、无序列表、嵌套列表
辐_射的博客
01-14 2585
<!DOCTYPE HTML PUBLIC "-//DTD//W3C HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>H...
VSCode快速格式化代码
辐_射的博客
08-19 2249
2)搜索emmet.include或者搜索Font Ligatures;Vscode快速格式化代码(快捷键)：shift+alt+f。只需要设置一次即可,以后都可以自动保存格式化代码。1)文件--->【首选项】--->【设置】;
有序列表跟无序列表的嵌套-制作菜单页面
辐_射的博客
11-13 1485
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>有序列表跟无序列表的嵌套-制作菜单页面</title> <link href="css/style.css" type="text/css"...
无序列表-制作网页特效
辐_射的博客
11-13 1077
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>无序列表-制作网页特效</title> <link href="css/style.css" type="text/css" rel="sty...
CSS行高的继承
辐_射的博客
10-20 996
【代码】CSS行高的继承。
前端js禁止鼠标右键及F12禁止查看源代码
辐_射的博客
12-27 804
在前端开发中，F12审查元素的情况下，大家都可以随机更改一部分页面的代码，注入恶意JS等等，这种情况避免也不难，虽然还能看到一部分H5源码，但是无法修改。 一、屏蔽F12 审查元素 <script> document.onkeydown = function () { if (window.event && window.event.keyCode ==...
表单文件域跟图像域-制用用户信息注册页面
辐_射的博客
12-08 665
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>表单文件域跟图像域-制用用户信息注册页面</title> <link href="css/style.css" type="text/css" rel...
合并单元格
辐_射的博客
08-08 604
代码】合并单元格。
伪类选择器
辐_射的博客
05-07 597
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"/> <title>实现vivo X9s手机的宣传面面</title> <!-- 引用CSS样多文件，路径、类型、与当前文件关系 --> <link...
el-cascader-panel 浮动显示
最新发布
09-24
el-cascader-panel浮动显示是通过阻止冒泡事件来实现的。在点击el-cascader-panel之外的其他地方时，可以使用以下方法来判断点击位置： ``` $(document).click(function(e){ if(!$(e.target).closest("el-cascader-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值