使用HTML制作简单的小米界面（部分）

最新推荐文章于 2024-06-06 14:06:47 发布

成都—大数据开发工程师—杨洋

最新推荐文章于 2024-06-06 14:06:47 发布

阅读量8.4k

点赞数 23

文章标签： HTML 网页设计小米

本文链接：https://blog.csdn.net/weixin_43870646/article/details/84640533

版权

使用HTML制作简单的小米界面（部分）

以下为最终的效果图

需要实现的效果

最左边展示最新手机图片
右边并排展示销售的手机界面
每个块级元素并排
鼠标移动到块元素时出现阴影和向上弹起的效果

制作思路

使用HTML的div标签制作一个一级大盒子，实现整体大框架
在大框架中设置两个div标签，作为两个二级子盒子，分别放左边的图片以及右边的手机展示
在右边的div盒子中制作出八个放置手机展示的三级子盒子
在三级子盒子中插入图片以及文字
设置各个级别盒子的属性：宽、高、背景色、排版样式
实现鼠标移动到三级盒子上时产生阴影以及弹起效果

开始制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米界面</title>
    <style>
        <!--*号表示选中所有标签属性，margin、padding设置为0
        表示内外边距为0-->
        *{
            margin: 0;
            padding: 0;
        }
        /*body为网页可视部分，使用background设置背景色*/
        body{
            background-color: #f5f5f5;
        }
        /*.box选中一级盒子，设置宽度、高度、浮动、内边距
        使用了浮动，就可以不使用display：inline-block*/
        .box{
            width: 1234px;
            height: 628px;
            float: left;
            padding: 50px;

        }
        /*.box1设置左边盒子、宽、高、背景色、浮动*/
        .box1{
            width: 234px;
            height: 614px;
            background-color: black;
            float: left;
        }
        /*.box2设置左边盒子、宽、高、浮动*/
        .box2{
            width: 992px;
            height: 614px;
            float: left;
        }
        /*设置box3中box4的属性，
        list-style去除列表前面的小圆点
        box-sizing声明c3属性，调整内边距时不改变盒子大小
        text-align设置图片居中对齐*/
        .box3 .box4{
            list-style: none;
            width: 234px;
            height: 300px;
            background-color: white;
            float: left;
            box-sizing: border-box;
            text-align: center;
            margin: 0 0 14px 14px;

        }
        /*hover为伪类元素，效果为鼠标移动到块级元素时产生变化
        box-shadow 阴影属性 :水平阴影大小  垂直阴影大小  模糊距离  阴影尺寸 颜色  内inset /外 outset
        变换属性 transform:
           平移：translateX  translateY(100px)
           缩放: scale(0.5)
           倾斜: skew(-120deg)
           旋转：rotate(360deg)*/

        .box4:hover {
            box-shadow: 0 0 20px 0 gray;
            transform: translateY(-2px);
        }
        .box4 .text1{
            display: inline-block;
            width: 214px;
            height: 18px;
            font-size: 14px;
            text-align: center;
            font-family: 微软雅黑;
        }
        .box4 .text2{
            display: inline-block;
            width: 214px;
            height: 18px;
            margin: 0 10px 10px 10px;
            font-size: 12px;
            color: #b0b0b0;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            font-family: 微软雅黑;
        }
        .box4 .text3{
            color:  #ff6700;
            text-align: center;
            margin: 0 10px 14px 10px;
        }
    </style>
</head>
<body>
<!--创建一级盒子，类名为box-->
<div class="box">
    <!--创建两个二级盒子，class分别为box1、box2-->
    <div class="box1"><img src="images/xm.jpg" width="234px" height="614" alt=""></div>
    <div class="box2">
        <!--在二级盒子box2中创建八个三级盒子，使用ul列表标签-->
        <ul class="box3">
            <!--三级盒子中加入需要插入的图片以及文字，图片使用img标签，文字使用p标签-->
            <li class="box4">
                <img src="images/download.jpg" width="160px" height="160px" alt="">
                <p class="text1">小米8 青春版 4G+16GB</p>
                <p class="text2">潮流镜面渐变色,2400万自拍旗舰</p>
                <p class="text3">1399元</p>
            </li>
            <li class="box4">
                <img src="images/download.jpg" width="160px" height="160px" alt="">
                <p class="text1">小米8 青春版 4G+16GB</p>
                <p class="text2">潮流镜面渐变色，2400万自拍旗舰</p>
                <p class="text3">1399元</p>
            </li>
            <li class="box4">
                <img src="images/download.jpg" width="160px" height="160px" alt="">
                <p class="text1">小米8 青春版 4G+16GB</p>
                <p class="text2">潮流镜面渐变色，2400万自拍旗舰</p>
                <p class="text3">1399元</p>
            </li>
            <li class="box4">
                <img src="images/download.jpg" width="160px" height="160px" alt="">
                <p class="text1">小米8 青春版 4G+16GB</p>
                <p class="text2">潮流镜面渐变色，2400万自拍旗舰</p>
                <p class="text3">1399元</p>
            </li>
            <li class="box4">
                <img src="images/download.jpg" width="160px" height="160px" alt="">
                <p class="text1">小米8 青春版 4G+16GB</p>
                <p class="text2">潮流镜面渐变色，2400万自拍旗舰</p>
                <p class="text3">1399元</p>
            </li>
            <li class="box4">
                <img src="images/download.jpg" width="160px" height="160px" alt="">
                <p class="text1">小米8 青春版 4G+16GB</p>
                <p class="text2">潮流镜面渐变色，2400万自拍旗舰</p>
                <p class="text3">1399元</p>
            </li>
            <li class="box4">
                <img src="images/download.jpg" width="160px" height="160px" alt="">
                <p class="text1">小米8 青春版 4G+16GB</p>
                <p class="text2">潮流镜面渐变色，2400万自拍旗舰</p>
                <p class="text3">1399元</p>
            </li>
            <li class="box4">
                <img src="images/download.jpg" width="160px" height="160px" alt="">
                <p class="text1">小米8 青春版 4G+16GB</p>
                <p class="text2">潮流镜面渐变色，2400万自拍旗舰</p>
                <p class="text3">1399元</p>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

此界面并未加链接，只能实现排版以及鼠标移动到手机块上产生阴影以及弹起的效果，可作为HTML的初学者练习熟悉一些基本操作。

成都—大数据开发工程师—杨洋

关注

23
点赞
踩
89

收藏

觉得还不错? 一键收藏
打赏
2
评论
使用HTML制作简单的小米界面（部分）

使用HTML制作简单的小米界面（部分）以下为最终的效果图需要实现的效果最左边展示最新手机图片右边并排展示销售的手机界面每个块级元素并排鼠标移动到块元素时出现阴影和向上弹起的效果制作思路使用HTML的div标签制作一个一级大盒子，实现整体大框架在大框架中设置两个div标签，作为两个二级子盒子，分别放左边的图片以及右边的手机展示在右边的div盒子中制作出八个放置手机展示的三级...
复制链接

扫一扫