前端学习day 10--小米商城首页的制作

于 2020-09-06 22:36:26 发布
阅读量2.9k 收藏 30
点赞数 4
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l1621834733/article/details/108438053
版权

经过一段时间学习后，我已经能通过css和html制作一些简单的静态网页，以下是我简单制作的小米商城的首页，可能有点粗糙，相信以后能更加完善。

一、项目搭建

我使用的编辑器是vscode，刚开始是用webstorm但是不知道为什么css修改之后浏览器打开样式却没变，最终还是决定用vscode
项目图片
我创建了mi文件夹用来存放项目，mi.html、mi.css分别用来写该网页的结构和样式，fontawesome是我从网上下载的图标字体库，可以直接在项目里使用图标字体，img用来存放一些背景图片，base.css用来存放一些公共样式,reset.css用于清除默认样式。

二、项目代码

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="mi.css">
    <link rel="stylesheet" href="fontawesome/css/all.css">
</head>
<body>
    <div class="beijing">
        <div class="daohang w">
            <a href="#">小米商城</a>
            <span>|</span>
            <a href="#">MIUI</a>
            <span>|</span>
            <a href="#">loT</a>
            <span>|</span>
            <a href="#">云服务</a>
            <span>|</span>
            <a href="#">金融</a>
            <span>|</span>
            <a href="#">有品</a>
            <span>|</span>
            <a href="#">小爱开放平台</a>
            <span>|</span>
            <a href="#">企业团购</a>
            <span>|</span>
            <a href="#">资质证照</a>
            <span>|</span>
            <a href="#">协议规则</a>
            <span>|</span>
            <a href="#" class="xiazai">下载app
                <!--设置下拉二维码 -->
                <div class="yincang">
                 <div class="sanjiao"></div>
                 <!-- 为二维码和文字设置一个白色背景 -->
                 <div class="baisebeijing">
                 <div class="erweima"></div>
                 <span>小米商城app</span>
                 </div>
                </div>
            </a>
            <span>|</span>
            <a href="#">智能生活</a>
            <span>|</span>
            <a href="#">Select Location</a>
    <!--设置右侧导航条-->
        <div class="daohanglang-right">
            <a href="#">登陆</a>
            <span>|</span>
            <a href="#">注册</a>
            <span>|</span>
            <a href="#">消息通知</a>
        </div>
        <!-- 设置右侧购物车 -->
        <div class="gouwuche">
            <a href="#"><span class="fas fa-shopping-cart"></span>购物车</a>
            <!-- 设置购物车下拉条 -->
            <div class="xialatiao">购物车中还没有商品，赶紧选购吧</div>
        </div>
        </div>
</div>
<!-- 头部导航栏设置结束 -->
<!-- 以下设置头部内容 -->
<header class="w clearfix">
    <!-- 左上角小米logo -->
     <div class="logo"></div>
     <!-- 头部导航栏 -->
     <div class="daohanglan-head">
         <a href="#">小米手机</a>
         <a href="#">Redmi 红米</a>
         <a href="#">电视</a>
         <a href="#">笔记本</a>
         <a href="#">家电</a>
         <a href="#">路由器</a>
         <a href="#">智能硬件</a>
         <a href="#">服务</a>
         <a href="#">社区</a>
     </div>
     <!--设置头部右侧搜索框-->
     <div class="sousuokuang">
         <!-- 设置文本框 -->
         <form action="#">
             <input type="text" class="text">
             <button class="button">
                <i class="fas fa-search"></i>
             </button>
         </form>
         <!-- 设置搜索按钮 -->
     </div>
</header>
<!-- 设置主要内容 -->
<main class="w clearfix">
    <div class="left">
        <div class="a">
        <a href="#">手机 电话卡<span class="fas fa-angle-right"></span></a>
        <a href="#">电视盒子<span class="fas fa-angle-right"></span></a>
        <a href="#">笔记本 显示器<span class="fas fa-angle-right"></span></a>
        <a href="#">家电 插线板<span class="fas fa-angle-right"></span></a>
        <a href="#">出行 穿戴<span class="fas fa-angle-right"></span></a>
        <a href="#">智能 路由器<span class="fas fa-angle-right"></span></a>
        <a href="#">电源 配件<span class="fas fa-angle-right"></span></a>
        <a href="#">健康 儿童<span class="fas fa-angle-right"></span></a>
        <a href="#">耳机 音箱<span class="fas fa-angle-right"></span></a>
        <a href="#">生活 箱包<span class="fas fa-angle-right"></span></a>
        </div>
    </div>
<!-- 设置左侧导航条-->
<a href="#" class="tupianlianjie">
</a>
<!--设置左右两个方向图标 -->
<div class="leftangle"><a href="#"><span class="fas fa-chevron-left"></span></a></div>
<div class="rightangle"><a href="#"><span class="fas fa-chevron-right"></span></a></div>
</main>
<!--设置底部 -->
<div class="footer w">
    <div class="zuoxia">
        <a href="#" class="box1">小米秒杀</a>
        <a href="#" class="box2">企业团购</a>
        <a href="#" class="box3">F码通道</a>
        <a href="#" class="box4">米粉卡</a>
        <a href="#" class="box5">以旧换新</a>
        <a href="#" class="box6">话费充值</a>
    </div>
    <div class="picture1"></div>
    <div class="picture2"></div>
    <div class="picture3"></div>
</div>
<!-- 右侧固定条 -->
<div class="guding">
    <div class="hezi1"><a href="#">手机app</a></div>
    <div class="hezi1"><a href="#">个人中心</a></div>
    <div class="hezi1"><a href="#">售后服务</a></div>
    <div class="hezi1"><a href="#">人工客服</a></div>
    <div class="hezi1"><a href="#">购物车</a></div>
</div>
</body>
</html>

base.css:

/* 该样式表用于存放一个公共的样式 */
.clearfix::before,
.clearfix::after{
    content: '';
    display: table;
    clear: none;
}
body{
    min-width: 1226px;
}
.w{
    width: 1226px;
    margin: 0 auto;
}

mi.css:

/* 该样式表用于存放该网页本身的样式 */
/*顶部黑色背景 */
.beijing{
    width: 100%;
    height: 40px;
    background-color:#333;
    line-height: 40px;
}
/* 顶部黑色背景结束 */
/* 顶部导航条 */
.beijing .daohang{
    height: 100%;
}
/* 去下划线 */
.daohang a,.daohang span{
    text-decoration:none;
    color:#b0b0b0;
    font-size: 13px;
    padding:2px;
}
/* 去下划线结束 */
/* 覆盖链接时样式*/
  .daohang a:hover{
      color:white;
  }
  /* 覆盖样式结束 */
  /*设置下拉二维码 */
 .xiazai .yincang{
  width:106px;
  height:0px;
  background-color:transparent;
  position:absolute;
  box-shadow:  0 0 3px #333;
  top:20px;
  left:-30px;
  text-align: center;
  overflow: hidden;
  transition: height 300ms;
  z-index:4;
  }
  /* 设置下拉二维码内文字位置 */
  .xiazai .yincang span{
    font-size: 15px;
    color:black;
    position: relative;
    bottom: -10px;
  }
  /* 文字设置结束 */
  /* 为下载开启BFC */
  .xiazai{
      position: relative;
  }
  /* 设置三角形 */
  .sanjiao{
      height: 0px;
      width: 0px;
      border:solid;
      border-width: 10px;
      border-color: white transparent;
      border-top:none;
      margin:0 auto;
  }
  /* 三角形设置结束 */
  /* 为二维码和文字设置白色背景 */
  .baisebeijing{
    height: 125px;
    background-color: white;
  }
  /* 设置下拉二维码 */
  .erweima{
      width: 75px;
      height: 75px;
      background-color: white;
      background-image: url('img/download.png');
      background-size: 75px 75px;
      position: relative;
      top:15px;
      left: 15px;
  }
  /* 二维码设置结束 */
/* 设置覆盖下载时二维码的浮现 */
.xiazai:hover .yincang{
    height: 135px;
}
/* 二维码下拉设置结束 */
/* 设置右侧导航栏 */
.daohanglang-right{
    width: 240px;
    height: 100%;
    position: relative;
    right: -950px;
    top:-40px;
}
/* 右侧导航栏设置结束 */
/* 设置右侧购物车 */
.gouwuche{
    width: 120px;
    height: 40px;
    position: relative;
    left:1107px;
    top:-81px;
}
.gouwuche a{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color:#424242;
    text-align: center;
    z-index: 4;
    padding:0px;
}
/* 购物车设置结束 */
/* 设置覆盖购物车时样式 */
.daohang .gouwuche:hover a,.daohang .gouwuche:hover span{
    background-color: white;
    color:#ff6700;
}
/* 覆盖购物车样式设置结束 */
/* 设置购物车下拉条样式 */
.xialatiao{
    width:300px;
    height: 0px;
    position: absolute;
    top:40px;
    right:0px;
    background-color:white;
    line-height: 100px;
    text-align: center;
    font-size:14px;
    color:#b0b0b0;
    box-shadow: 0 0 3px #424242;
    z-index: 3;
    overflow: hidden;
    transition: height 400ms;
}
/* 购物车样式设置结束 */
/* 设置覆盖购物车时出现效果 */
.gouwuche:hover .xialatiao{
    height: 100px;
}
/* 覆盖购物车样式设置结束 */
/* 设置header样式 */
header{
    width: 100%;
    height:100px;
    background-color: white;
}
/* header样式设置结束 */
/* 设置logo样式 */
.logo{
    width:50px;
    height: 50px;
    background-color: black;
    margin-top:26px;
    background-image:url('img/logo.png');
}
/* logo样式设置结束 */
/* 设置覆盖时切换效果 */
.logo:hover{
    background-image: url('img/logo1.png');
    background-size: 50px 50px;
}
/* 设置头部导航栏*/
.daohanglan-head{
    width:540px;
    height:30px;
    position: relative;
    bottom:40px;
    left:240px;
}
/*去链接下划线 */
.daohanglan-head a{
    text-decoration: none;
    color:#333;
    padding-left:7px;
}
/* 设置覆盖链接时样式 */
.daohanglan-head a:hover{
    color:tomato;
}
/*为搜索框设置样式 */
.sousuokuang{
    width: 300px;
    height: 50px;
    background-color: white;
    position: relative;
    left: 927px;
    top:-80px;
}
/* 设置文本框大小 */
.text{
    width: 250px;
    height: 50px;
    line-height:48px;
    font-size: 14px;
    padding:0px;
    outline: none;
    border:solid;
    border-width:1px;
    border-color: rgb(193, 193, 193);
}
/* 设置按钮大小 */
.button{
    height:53px;
    width:50px;
    position:absolute;
    right:0px;
    top:0px;
    padding:0px;
    border:solid;
    border-width: 1px;
    background-color: white;
    border-color: rgb(193 , 193, 193);
    font-size: 15px;
}
/* 设置鼠标移入出现橙色边框效果 */
.text:focus,.text:focus + .button{
    border-color: tomato;
}
.button:hover{
    background-color: tomato;
    color:white;
}
/* 设置主要内容背景 */
main{
    height: 460px;
    background-color: rgb(223, 12, 12);
    position: relative;
}
/* 设置左侧导航条 */
.left{
    height: 460px;
    width: 236px;
    background-color:rgba(105,101,101,.6);
    position: absolute;
    z-index: 2;
}
/* 设置链接样式 */
.a{
    height:90%;
    padding-top:10%;
    position: relative;
}
.left a{
    display: block;
    height:42px;
    line-height: 42px;
    text-decoration: none;
    color:white;
    font-size: 14px;
    padding-left: 30px;
    position: relative;
}
.left a span{
    font-size:20px;
    float: right;
    margin-right:30px;
    margin-top:10px;
}
/* 设置覆盖时样式*/
.left a:hover{
    background-color: tomato;
}
/* 设置背景图片 */
.tupianlianjie{
    display: block;
    height: 100%;
    width: 100%;
    background-image: url(img/5.jpg);
    background-size:100% 100%; 
    position: relative;
}
/*设置左右两个隐藏图标 */
.leftangle{
    width:40px;
    height: 70px;
    background-color: black;
    position: absolute;
    top:195px;
    left: 236px;
    background-color: transparent;
}
.leftangle a{
    font-size: 30px;
    line-height: 70px;
    color:rgba(207, 201, 201, 0.726)
}
.rightangle{
    width:40px;
    height: 70px;
    background-color: black;
    position: absolute;
    top:195px;
    left: 1187px;
    background-color: transparent;
}
.rightangle a{
    font-size: 30px;
    line-height: 70px;
    color:rgba(207, 201, 201, 0.726)
}
.rightangle a span{
    position: absolute;
    right: 0px;
    top:15px;
}
/* 设置覆盖时样式 */
.leftangle:hover,.rightangle:hover{
    background-color: rgba(105,101,101,.6);
}
/* 设置底部 */
.footer{
    height: 170px;
    background-color: white;
    margin-top:20px;
}
/* 设置左下链接样式 */
.zuoxia{
    width: 234px;
    height: 100%;
    background-color:rgb(76, 69, 63);
    position: relative;
}
.zuoxia a{
    text-decoration: none;
    float: left;
    width: 33%;
    height: 50%;
    line-height: 150px;
    color:#fff;
    vertical-align: baseline;
    text-align: center;
}
.box1{
    background-image: url('img/miaosha.png');
    background-size:50px 50px;
    background-position: center center;
    background-repeat: no-repeat;
}
.box2{
    background-image: url('img/qiye.png');
    background-size:50px 50px;
    background-position: center center;
    background-repeat: no-repeat;
}
.box3{
    background-image: url('img/F.png');
    background-size:50px 50px;
    background-position: center center;
    background-repeat: no-repeat;
}
.box4{
    background-image: url('img/mifen.png');
    background-size:50px 50px;
    background-position: center center;
    background-repeat: no-repeat;
}
.box5{
    background-image: url('img/yijiuhuanxinpng.png');
    background-size:50px 50px;
    background-position: center center;
    background-repeat: no-repeat;
}
.box6{
    background-image: url('img/huafei.png');
    background-size:50px 50px;
    background-position: center center;
    background-repeat: no-repeat;
}
.picture1{
    width: 316px;
    height: 100%;
    background-color: red;
    position: relative;
    top:-170px;
    left: 250px;
    background-image: url('img/tupian1.jpg');
    background-size: 316px 170px;
}
.picture2{
    width: 316px;
    height: 100%;
    background-color: red;
    position: relative;
    top:-340px;
    left: 580px;
    background-image: url('img/tupian2.jpg');
    background-size: 316px 170px;
}
.picture3{
    width: 316px;
    height: 100%;
    background-color: red;
    position: relative;
    top:-510px;
    left:910px;
    background-image: url('img/tupian3.jpg');
    background-size: 316px 170px;
}
/* 右侧固定条 */
.guding{
    width: 85px;
    height: 365px;
    background-color:white;
    position: fixed;
    right: 0px;
    top:30%;
    box-shadow: 0 0 4px grey;
}
/* 固定条内容 */
.hezi1{
    width: 100%;
    height: 20%;
    background-color: white;
    box-shadow: 0 0 2px grey;
    vertical-align: bottom;
}
.hezi1 a{
    display:block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    line-height:100px;
    text-align: center;
    color:grey
}

reset.css:

/* v2.0 | 20110126
  http://meyerweb.com/eric/tools/css/reset/ 
  License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*为文字设置样式*/
.yingcangkuang .wenzi{
	padding-bottom:20px;
}

图标字体网上能下载到，可以自己百度下载然后引入

三、效果

代码运行结果

l1621834733
关注
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值