360商城模版

最新推荐文章于 2024-08-12 22:06:26 发布

鸿钧道友

最新推荐文章于 2024-08-12 22:06:26 发布

阅读量461

点赞数

分类专栏：小知识习题分析文章标签： css

本文链接：https://blog.csdn.net/qq_41912366/article/details/111465234

版权

本文介绍了作者尝试仿制360商城界面的过程，使用了div布局，并提到可以结合绝对定位或相对定位来实现更简洁的设计。目前网页尚处于初步阶段，缺少图片元素。

摘要由CSDN通过智能技术生成

看到360的商场界面感觉360的商城模版不难,所以决定做出一个类似的网页出来:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>360商城</title>
</head>
<style>
    body{
   
        margin: 0 auto;/*去掉body外边框的距离*/
    }
    /*div{*/
    /*    border: 1px solid blue;*/
    /*}*/
    a{
   
        text-decoration: none;/*去掉a标签的下划线*/
    }
    .box{
   
        width: 100%;
        height: 1890px;
    }

    .box .top{
   
        width: 100%;
        height: 40px;
        line-height: 40px;
        background-color: black;
        color: white;
    }
    .box .top .left{
   
        float: left;
        margin-left: 220px;
    }
    .box .top .left .al{
   
        margin-right: 25px;
    }
    .box .top .left .al:hover{
   
        cursor: pointer;
    }
    .box .top .bao{
   
        width: 40px;
        height: 40px;
        background:url("3.png") no-repeat -100px -40px;
        float: right;
        margin-right: 220px;
    }
    .box .top .bao:hover{
   
        cursor: pointer;
    }
    .box .top .right{
   
        float: right;
        margin-right: 25px;
    }
    .box .top .right .ar{
   
        margin-left: 25px;
    }
    .box .top .right .ar:hover{
   
        cursor: pointer;
    }

    .box .menu .shang{
   
        width: 100%;
        height: 80px;
    }
    .box .menu .shang .zuo1{
   
        height: 80px;
        width: 250px;
        float: left;
        margin-left: 220px;
    }
    .box .menu .shang .zuo2{
   
        height: 80px;
        width: 250px;
        float: left;
    }
    .box .menu .shang .zuo1 img{
   
        height: 40px;
        margin-top: 40px;
    }
    .box .menu .shang .zuo1 img:hover{
   
        cursor: pointer;
    }
    .box .menu .shang .zuo2 a{
   
        text-align: center;
        line-height: 120px;
        margin-right: 40px;
        font-size: 20px;
        font-weight: 500;
    }
    .box .menu .shang .zuo2 a:hover{
   
        cursor: pointer;
    }
    .box .menu .shang .you{
   
        height: 80px;
        width: 550px;
        float: right;
        margin-right: 220px;
        position: relative;
    }
    .box .menu .shang .you .fangdajing{
   
        width: 40px;
        height: 40px;
        background:url("3.png") no-repeat -163px -40px;
        float: right;
        margin-top: 20px;
        position: absolute;

        left:500px;
    }
    .box .menu .shang .you .sousuokuang{
   
        width: 500px;
        height: 40px;
        float: right;
        margin-top: 20px;

    }
    .box .menu .shang .you .sousuokuang .sousuo{
   
        width: 500px;
        height: 40px;
        float

最低0.47元/天解锁文章

鸿钧道友

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
360商城模版

看到360的商场界面感觉360的商城模版不难,所以决定做出一个类似的网页出来:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>360商城</title></head><style> body{ margin: 0 auto;/*去掉body外边框的距离*/ }
复制链接

扫一扫

专栏目录