最近开始学习了写前端,HTML和CSS是前端的基础,所以用他们制作了一个简单的电商网站,目的在于细节学习和打牢基础。
先附上Code。
链接:https://pan.baidu/s/1PkgHUghworqcus0LwAuFDw
提取码:b672
部分图:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css-.CSS">
<title>淘宝网</title>
</head>
<body >
<div class="bjcolor clearf ">
<div class="container">
<div class="fl col-5 ">
<a class="item-1" href="">亲,请登录</a>
<a class="item" href="">免费注册</a>
</div>
<div class="fr col-3">
<a class="item" href="">购物车</a>
<a class="item" href="">收藏夹</a>
<a class="item" href="">卖家中心</a>
<a class="item" href="">联系客服</a>
</div>
</div>
</div>
<div class="search clearf">
<div class="container">
<div class="col-2 giff fl">
淘宝网
</div>
<div class="col-5 search-bk fl">
<input type="text">
<button>搜索</button>
</div>
</div>
</div>
<div class="advert clearf">
<div class="container">
<div class="col-2 advert-fl fl">
<div class="item">item/item/item</div>
<div class="item">item/item/item</div>
<div class="item">item/item/item</div>
<div class="item">item/item/item</div>
<div class="item">item/item/item</div>
<div class="item">item/item/item</div>
<div class="item">item/item/item</div>
<div class="item">item/item/item</div>
<div class="item">item/item/item</div>
<div class="item">item/item/item</div>
</div>
<div class="col-6 fl">
<img src="C:\Users\M\Desktop\新建文件夹\timg.jpg" alt="">
<div class="col-5 fl">
<img src="C:\Users\M\Desktop\新建文件夹\1.jpg" alt="">
</div>
<div class="col-5 fl">
<img src="C:\Users\M\Desktop\新建文件夹\2.jpg" alt="">
</div>
</div>
<div class="col-2 advert-dl fl">
<div class="dl-hy">
<div class="dl-tp"><img src="C:\Users\M\Desktop\新建文件夹\0.jpg" alt=""></div>
Hi!你好
</div>
<div class="dl-butt">
<a class="time" href="">注册</a>
<a class="time" href="">登录</a>
<a class="time" href="">开店</a>
</div>
<div class="dl-gg">
<div class="gg-g">公告</div>
长亭外,古道边,芳草碧连天。晚风拂柳笛声残,夕阳山外山。
天之涯,地之角,知交半零落。一壶浊酒尽余欢,今宵别梦寒。
长亭外,古道边,芳草碧连天。问君此去几时还,来时莫徘徊。
天之涯,地之角,知交半零落。人生难得是欢聚,惟有别离多
长亭外,古道边,芳草碧连天。晚风拂柳笛声残,夕阳山外山。
天之涯,地之角,知交半零落。一壶浊酒尽余欢,今宵别梦寒。
长亭外,古道边,芳草碧连天。问君此去几时还,来时莫徘徊。
天之涯,地之角,知交半零落。人生难得是欢聚,惟有别离多
</div>
</div>
</div>
</div>
<div class="container itemize">
<div class="clearf">
<div class="title">女装</div>
<div class="ize-giff">
<div class="col-2 fl timee">
<div class="card"></div>
</div>
<div class="col-3 fl timee" >
<div class="card"></div>
</div>
<div class="col-2 fl timee">
<div class="card"></div>
</div>
<div class="col-3 fl timee">
<div class="card"></div>
</div>
</div>
</div>
</div>
<div class="container itemize">
<div class="clearf">
<div class="title">男装</div>
<div class="ize-giff">
<div class="col-2 fl timee">
<div class="card"></div>
</div>
<div class="col-3 fl timee" >
<div class="card"></div>
</div>
<div class="col-2 fl timee">
<div class="card"></div>
</div>
<div class="col-3 fl timee">
<div class="card"></div>
</div>
</div>
</div>
</div>
<div class="container itemize">
<div class="clearf">
<div class="title">童装</div>
<div class="ize-giff">
<div class="col-2 fl timee">
<div class="card"></div>
</div>
<div class="col-3 fl timee" >
<div class="card"></div>
</div>
<div class="col-2 fl timee">
<div class="card"></div>
</div>
<div class="col-3 fl timee">
<div class="card"></div>
</div>
</div>
</div>
</div>
<div class="container itemize">
<div class="clearf">
<div class="title">潮牌</div>
<div class="ize-giff">
<div class="col-2 fl timee">
<div class="card"></div>
</div>
<div class="col-3 fl timee" >
<div class="card"></div>
</div>
<div class="col-2 fl timee">
<div class="card"></div>
</div>
<div class="col-3 fl timee">
<div class="card"></div>
</div>
</div>
</div>
</div>
<div class="container itemize">
<div class="clearf">
<div class="title">促销</div>
<div class="ize-giff">
<div class="col-2 fl timee">
<div class="card"></div>
</div>
<div class="col-3 fl timee" >
<div class="card"></div>
</div>
<div class="col-2 fl timee">
<div class="card"></div>
</div>
<div class="col-3 fl timee">
<div class="card"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="foot">
<div> text text text</div>
<div>Whatever is worth doing is worth doing well.</div>
</div>
</div>
</body>
</html>
* {
-webkit-box-sizing: border-box;
box-sizing:border-box;
}
body
{
font-size: 14px;
color: #444444;
background: #f9f9f9;
}
.container{
display: block; /* 显示 */
max-width: 1080px;
margin: 0 auto; /*外边距 */
}
a{
text-decoration: none; /* 消除链接下划线 */
}
img {
display: block;
max-width: 100%;
}
.clearf:after,
.clearf:before
{
content: "";
display: block;
clear: both;
}
.fl{
float: left;
}
.fr{
float: right;
}
.col-1{
width: 10%;
}
.col-2{
width: 20%;
}
.col-3{
width: 30%;
}
.col-4{
width: 40%;
}
.col-5{
width: 50%;
}
.col-6{
width: 60%;
}
.col-7{
width: 70%;
}
.col-8{
width: 80%;
}
.col-9{
width: 90%;
}
.col-10{
display: block;
position: relative;
min-height: 1px;
}
.bjcolor{
background: #eee;
}
.bjcolor .item{
display: inline-block;
padding: 6px 10px; /* 填充 */
color: #666;
}
.bjcolor .item-1{
display: inline-block;
padding: 6px 10px; /* 填充 */
color: #dd182b;
}
.bjcolor .item:hover{ /*鼠标触摸颜色加重 */
color:#444;
}
.search{
display:block;
padding: 20px 0;
}
.search .giff{
font-size: 30px;
}
.search .search-bk {
border:2px solid #dd182b;
}
.search .search-bk input,
.search .search-bk button{
display: block;
float: left;
border: 0; /* 边框 */
padding: 10px;
font-size: 20px;
}
.search .search-bk input {
width: 80%;
}
.search .search-bk button {
width: 20%;
background: #dd182b;
}
.advert{
background: #cccccc;
}
.advert .advert-fl{
background:#6e6568;
color: #ffffff;
}
.advert .advert-fl .item{
padding: 17px 17px;
}
.advert .advert-fl .item:hover{
color: #555555;
}
.advert .advert-dl .dl-hy{
background: #6e6568;
line-height: 100px;
color: #ffffff;
}
.advert .advert-dl .dl-hy .dl-tp{
float: left;
margin-right: 20px;
}
.advert .advert-dl .dl-butt{
float: left;
padding: 20px;
background: #6e6568;
}
.advert .advert-dl .dl-butt .time{
padding: 8px;
color: #dd182b;
font-size: 20px;
}
.advert .advert-dl .dl-gg
{
padding: 10px;
background: #6e6568;
color: #ffffff;
}
.advert .advert-dl .dl-gg .gg-g
{
margin-left: 70px;
padding: 13px;
color: #dd182b;
}
.itemize{
display:block;
}
.itemize .title::before{
content: "";
display: inline-block;
vertical-align: middle;
width: 5px;
height: 25px;
background: #dd182b;
padding-right: 5px;
margin-right: 10px;
}
.itemize .title{
font-size: 22px;
margin-top: 20px;
}
.itemize .ize-giff{
}
.itemize .timee
{
padding: 10px;
}
.itemize .card{
height: 300px;
background: #cccccc;
border-radius: 10px;
}
.foot{
color: #999999;
margin-top: 20px;
padding: 10px;
text-align: center; /* 字体居中 */
background: #eee;
}
box-sizing属性用于更改用于计算元素的宽度和高度默认的CSS盒子模型,可以使用此属性来模拟不正确支持CSS盒子模型规范的游览器行为。
更多推荐
HTML&CSS:制作简易电商网站
发布评论