【小米商城首页简单设计】

最新推荐文章于 2024-05-10 18:56:31 发布

今夜鸣风

最新推荐文章于 2024-05-10 18:56:31 发布

阅读量2.4k

点赞数 2

分类专栏：菜鸟学习前端文章标签：前端 html

本文链接：https://blog.csdn.net/akisi/article/details/121848512

版权

效果如图，但做一个官网首页还需要设置轮播图和鼠标悬停和图片隐藏。

首先是爬取素材

利用F12查看网页布局和源代码，找到要爬取的图片链接以新标签页打开再保存即可。

然后是搭建页面布局框架

从图片可以看出这个官网总体是有四个大块，每个大块又分成多个小块，例如中间所占面积最大的主体部分就可以分为一个大框中有两个中框，第一个中框里面又有10个小框，其他布局以此类推。

设置定位和偏移量

素材和总体框架搭好之后需要把素材放到合适的位置，因此需要设置图片图标的大小和位置。

前一篇已经讲过定位的基本方式，根据需要使用定位——语法如下：

在框内进行样式编辑或者编写在图片样式里都可以。

.xx {width:你设置的框宽度；

height：高度；

position：定位方式（absolute\relative\fixed）；

left/right:偏移量;top：偏移量;}

或者style=“width:你设置的框宽度；height：高度；position：定位方式（absolute\relative\fixed）；left/right:偏移量;top：偏移量;”

注意，没有设置偏移量你的定位是不会生效的。

通过调整偏移量进行细微调整，其中要注意定位方式的特点——详情请看上一篇盒子嵌套和基本布局

里面还包括了轮播图，轮播图放到下篇讲，

<!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>小米</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
</head>
<style>
    #carouselExampleIndicators {
        width: 1000px;
        height: 900px;
        float: left;
        position: absolute;
        left: 337px;
        top: 130px;
    }
    
    .gongjvlan {
        width: 1500px;
        height: 30px;
        background: rgb(85, 82, 82);
        border: 5px solid rgb(85, 82, 82);
        line-height: 30px;
        text-align: left;
        font-size: 13px;
        color: white;
    }
    
    .head {
        width: 1500px;
        height: 100px;
        float: left;
        background: white;
    }
    
    .head1 {
        width: 30px;
        height: 20px;
        text-align: center;
        position: absolute;
        right: -1px;
        top: 3px;
        background: orange;
        opacity: 0;
    }
    
    .head1:hover {
        opacity: 1;
    }
    
    .zhuti {
        width: 200px;
        height: 700px;
        background: rgb(161, 159, 159);
        border: 10px solid rgb(161, 159, 159);
        text-align: center;
        font-size: 15px;
        color: white;
        float: left;
        position: relative;
        left: 110px;
    }
    
    .paimian {

最低0.47元/天解锁文章

今夜鸣风

关注

2
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
【小米商城首页简单设计】

效果如图，但做一个官网首页还需要设置轮播图和鼠标悬停和图片隐藏。首先是爬取素材利用F12查看网页布局和源代码，找到要爬取的图片链接以新标签页打开再保存即可。然后是搭建页面布局框架从图片可以看出这个官网总体是有四个大块，每个大块又分成多个小块，例如中间所占面积最大的主体部分就可以分为一个大框中有两个中框，第一个中框里面又有10个小框，其他布局以此类推。设置定位和偏移量素材和总体框架搭好之后需要把素材放到合适的位置，因此需要设置图片图标的大小和位置。前一篇已经讲过定位的基本方式，..
复制链接

扫一扫