<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;//清除默认的外边距
padding: 0px;//清除默认的内边距
}
body{
background-color:#FF727B;
}
#main{
/*border: 1px solid black;*/
margin-left: 50px;
margin-right: 50px;
margin-top: 20px;
background-color: #FFFFFF;
border-radius: 10px;
}
#header{
/* border: 1px solid black;*/
height: 60px;
margin-left: 50px;
margin-right: 50px;
margin-top: 20px;
}
#header #header_1{
/*天猫*/
font-size:45px;
line-height: 68px;
margin-left: 50px;
color: #FF0000;
float: left;
}
#header #header_2{
/*搜索框*/
height: 30px;
width: 565px;
border: 1.5px solid black;
margin-left: 60px;
margin-top: 13px;
text-align: left;
text-indent: 30px;/*文字首行缩进*/
line-height: 30px;/*对搜索框字体设置*/
opacity: 0.4;/*文字的不透明度*/
float: left;
border-radius: 16px 0px 0px 16px;
/*display: inline-block;*/
}
#header #header_3{
background-color: #FF0000;
height: 33px;
width: 60px;
line-height: 32px;
color: #FFFFFF;
text-align: center;
margin-top: 13px;
border-radius: 0px 16px 16px 0px;
float: left;
}
#nav{
/*border: 1px solid black;*/
height: 60px;
margin-top: 10px;
margin-left: 50px;
margin-right: 50px;
/*background-color: aliceblue;*/
}
#nav #nav_1{
height: 60px;
width: 144.17px;
border: 0px solid black;
border-radius: 8px;
color: #00B262;
font-size:35px;
line-height: 60px;
font-family: "隶书";
/*background-color: #00FFFF;*/
text-align: center;
float: left;/*为什么不加左浮就不改变框子大小*/
}
#nav #nav_2{
height: 60px;
width: 144.17px;
border: 0px solid black;
border-radius: 8px;
font-size:35px;
color:#7C48DB;
font-family: "隶书";
line-height: 60px;
/*background-color: #00FFFF;*/
text-align: center;
float: left;/*为什么不加左浮就不改变框子大小*/
}
#nav #nav_3{
height: 60px;
width: 144.17px;
/* border: 1px solid black;*/
border-radius: 8px;
line-height: 60px;
text-align: center;
float: left;/*为什么不加左浮就不改变框子大小*/
/*background-color: #00FFFF;*/
}
.text{
/*主题市场和商品成列两个盒子外面的大盒子*/
/*border: 1px solid red;*/
margin-top: 10px;
margin-left: 50px;
margin-right: 50px;
height: 570px;
}
.side-nav{
width: 200px;
height: 400px;
background-color: white;
margin-top: 0px;
float: left;
}
.side-nav h2{
/*主题市场*/
height: 48px;
line-height: 48px;
text-align: center;
color: #FF0000;
background-color: white;
font-size: 20px;
}
.side-nav,.li_1{
list-style-type: none;//去掉小原点
opacity: 0.8;
float: left;
/* border: 1px solid black;*/
}
.li_1 li{
height: 37.1px;
text-align: center;
line-height: 37.1px;
/* background-color: white;*/
/* border: 1px solid black;*/
font-size:15px;
}
.right{
/*商品成列的盒子*/
/* border: 1px solid yellow;*/
/*width: 1111px;
height: 475px;*/
/* background-color: aliceblue;*/
float: left;
}
#dt_1{
width: 170px;
height: 200px;
background:url(01%20.JPG) no-repeat;
}
#dt_2{
width: 170px;
height: 200px;
background:url(02.JPG);
}
#dt_3{
width: 170px;
height: 200px;
background:url(03.JPG);
}
#dt_4{
width: 170px;
height: 200px;
background:url(04.JPG);
}
#dt_5{
width: 170px;
height: 200px;
background:url(05.JPG);
}
#dt_6{
width: 170px;
height: 200px;
background:url(06.JPG);
}
#dt_7{
width: 170px;
height: 200px;
background:url(07.JPG) no-repeat;
}
#dt_8{
width: 170px;
height: 200px;
background:url(08.JPG);
}
#dt_9{
width: 170px;
height: 200px;
background:url(04.JPG);
}
#dt_10{
width: 170px;
height: 200px;
background:url(10.JPG);
}
#dt_11{
width: 170px;
height: 200px;
background:url(11.JPG);
}
#dt_12{
width: 170px;
height: 200px;
background:url(12.JPG);
}
dd{
/*价格和介绍的大小*/
width: 168px;
height: 80px;
/* border: 1px solid black;*/
}
#dt_Y1{
/* 人名币标志*/
color: #FF0000;
font-size: 10px;
}
#dt_Y2{
/* 价格999*/
color: #FF0000;
font-size: 20px;
}
.right,.right_1{
display: inline-block;
margin-left: 10px;
}
.right,.right_2{
display: inline-block;
margin-left: 10px;
}
.right,.right_3{
display: inline-block;
margin-left: 10px;
}
.right,.right_4{
display: inline-block;
margin-left: 10px;
}
.right,.right_5{
display: inline-block;
margin-left: 10px;
}
.right,.right_6{
display: inline-block;
margin-left: 10px;
}
.right_7{
display: inline-block;
margin-left: 10px;
/*margin-top: 30px;*/
}
.right_8{
display: inline-block;
margin-left: 10px;
/*margin-top: 30px;*/
}
.right_9{
display: inline-block;
margin-left: 10px;
/*margin-top: 30px;*/
}
.right_10{
display: inline-block;
margin-left: 10px;
/*margin-top: 30px;*/
}
.right_11{
display: inline-block;
margin-left: 10px;
/*margin-top: 30px;*/
}
.right_12{
display: inline-block;
margin-left: 10px;
/*margin-top: 30px;*/
}
#footer{
/* border: 1px solid red; */
height: 80px;
margin-top: 10px;
margin-left: 50px;
margin-right: 50px;
}
#footer #footer_1{
height: 30px;
width: 326.67px;
/* border: 1px solid black;*/
border-radius: 8px;
line-height: 40px;
text-align: center;
font-size: 25px;
font-weight: bold;
color: #0000;
float: left;/*为什么不加左浮就不改变框子大小*/
/*background-color: #00FFFF;*/
}
#footer_2{
height: 30px;
width: 326.67px;
/* border: 1px solid yellow;*/
font-size: 25px;
font-size: 17px;
color: #000000;
opacity: 0.6;
float: left;
}
</style>
</head>
<body>
<div id="main">
<div id="header">
<span id="header_1">天猫</span>
<span id="header_2">搜索 天猫 商品/品牌/店铺</span>
<span id="header_3">搜索</span>
</div>
<div id="nav">
<span id="nav_1">天猫超市</span>
<span id="nav_2">天猫国际</span>
<span id="nav_3">天猫会员</span>
<span id="nav_3">喵鲜生</span>
<span id="nav_3">医药馆</span>
<span id="nav_3">魅力惠</span>
<span id="nav_3">飞猪旅行</span>
<span id="nav_3">苏宁易购</span>
</div>
<div class="text">
<div class="side-nav">
<h2>主题市场</h2>
<ul class="li_1">
<li>女装 / 内衣</li>
<li>男装 / 运动户外</li>
<li>女鞋 / 男鞋 / 箱包</li>
<li>美妆 / 个人护理</li>
<li>腕表 / 眼镜 / 珠宝饰品</li>
<li>手机 / 数码 / 电脑办公</li>
<li>母婴玩具</li>
<li>零食 / 茶酒 / 进口食品</li>
<li>生鲜水果</li>
<li>大家电 / 生活电器</li>
<li>家具 / 灯具 / 卫浴</li>
<li>汽车 / 配件 / 用品</li>
<li>
大学生网页仿天猫首页作业
需积分: 0 30 浏览量
2024-02-20
14:58:40
上传
评论
收藏 91KB ZIP 举报
实验三.zip （13个子文件） 
实验三 
03.JPG 6KB 09 .JPG 8KB 08.JPG 5KB 04.JPG 8KB 10.JPG 6KB 06.JPG 8KB 11.JPG 7KB 02.JPG 6KB 12.JPG 7KB 01 .JPG 10KB 05.JPG 6KB 07.JPG 8KB
实验三框架.html 12KB资源评论
