经过一段时间学习后,我已经能通过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;
}
图标字体网上能下载到,可以自己百度下载然后引入