学生个人网页制作html代码cssHTML＆CSS：制作简易电商⽹站最近开始学习了写前端，HTML和CSS是前端的基础，所以⽤他们制作了⼀个简单的电商⽹站，⽬的在于细节学习和打牢基础。
先附上Code。
部分图：
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>
ashx文件
<div class="search clearf">
<div class="container">
<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>
<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 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>
substr函数代码</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;
}idea自带maven
.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;
}
tcpip体系结构哪四层.search .search-bk {
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论