04_前端项目实战_day1
2021-12-01 本文已影响0人
Du1in9
一、顶部广告的实现
init.css
/*整体演示设置*/
*{
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
}
a{
color: #666560;
}
a:hover{
color: red;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="init.css">
<style type="text/css">
/*顶部广告条*/
.top_ad{
background: url(top_ad.jpg) center center no-repeat black;
height: 80px;
/* border: 1px solid red;*/
}
.top_ad>.w{
margin: 0 auto;
text-align: right;
padding-top: 10px;
/* border: 1px solid red;*/
}
.top_ad>.w>a{
margin-right: 20px;
/* border: 1px solid red;*/
}
</style>
</head>
<body>
<div class="top_ad">
<div class="w">
<a href="" title="关闭广告">
<img src="button.jpg" alt="">
</a>
</div>
</div>
<div class="top_nav"></div>
<div class="logo_search"></div>
<div class="nav2"></div>
<div class="main"></div>
</body>
</html>
二、主导航的实现
init.css
/*整体演示设置*/
*{
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
font-style: normal;
font-style: normal;
color: #666560;
text-decoration: none;
}
a{
color: #666560;
}
a:hover{
color: red;
}
.w{
width: 1200px;
margin: 0 auto;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="init.css">
<link rel="stylesheet" href="icon_font./iconfont.css">
<style type="text/css">
/*1、顶部广告的实现*/
.top_ad{
background: url(top_ad.jpg) center center no-repeat black;
height: 80px;
/* border: 1px solid red;*/
}
.top_ad>.w{
text-align: right;
padding-top: 5px;
/* border: 1px solid red;*/
}
.top_ad>.w>a{
margin-right: 5px;
/* border: 1px solid red;*/
}
/*2、主导航的实现*/
.top_nav{
line-height: 30px;
background: #e5e5e3;
}
.top_nav>.w{
height: 30px;
/* border: 1px solid red;*/
}
.top_nav>.w>.left{
float: left;
}
.top_nav>.w>.right{
float: right;
color: #cccccc;
}
.top_nav>.w>.right>a{
padding:0 5px;
}
.top_nav>.w>.right>a:hover>span{
color: red;
}
.red{
color: red;
}
</style>
</head>
<body>
<div class="top_ad">
<div class="w">
<a href="" title="关闭广告">
<img src="button.jpg" alt="">
</a>
</div>
</div>
<div class="top_nav">
<div class="w">
<div class="left">
欢迎来拼邮购
请<a href="">登陆</a>
<a href="" class="red">免费注册</a>
</div>
<div class="right">
<a href="">我的订单<span class="iconfont icon-xiala-"></span></a> |
<a href="">购物车</a> |
<a href="">收藏夹</a> |
<a href="">手机版</a> |
<a href="">商家支持</a> |
<a href="">网站导航<span class="iconfont icon-xiala-"></span></a> |
<a href="">商品分类<span class="iconfont icon-xiala-"></span></a> |
<a href="">联系客服</a>
</div>
</div>
</div>
<div class="logo_search"></div>
<div class="nav2"></div>
<div class="main"></div>
</body>
</html>
三、第二个导航条的实现
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="init.css">
<link rel="stylesheet" href="icon_font./iconfont.css">
<style type="text/css">
.top_ad{/*1、顶部广告的实现*/
background: url(top_ad.jpg) center center no-repeat black;
height: 80px;
/* border: 1px solid red;*/
}
.top_ad>.w{
text-align: right;
padding-top: 5px;
/* border: 1px solid red;*/
}
.top_ad>.w>a{
margin-right: 5px;
/* border: 1px solid red;*/
}
.top_nav{/*2、主导航的实现*/
line-height: 30px;
background: #e5e5e3;
}
.top_nav>.w{
height: 30px;
/* border: 1px solid red;*/
}
.top_nav>.w>.left{
float: left;
}
.top_nav>.w>.right{
float: right;
color: #cccccc;
}
.top_nav>.w>.right>a{
padding:0 5px;
}
.top_nav>.w>.right>a:hover>span{
color: red;
}
.red{
color: red;
}
.nav2{/*3、商品分类区的实现*/
height: 45px;
border-bottom:solid 2px #ca0000;
}
.nav2>.w{
height: 45px;
/* background-color: pink;*/
line-height: 45px;
}
.nav2>.w>.left{
float: left;
width: 210px;
background-color: #cccccc;
color: white;
font-size: 18px;
font-weight: bold;
text-align: center;
}
.nav2>.w>.right{
float: left;
padding-left: 35px;
}
.nav2>.w>.right>li{
float: left;
padding-right: 25px;
}
.nav2>.w>.right>li>a{
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="top_ad">
<div class="w">
<a href="" title="关闭广告">
<img src="button.jpg" alt="">
</a>
</div>
</div>
<div class="top_nav">
<div class="w">
<div class="left">
欢迎来拼邮购
请<a href="">登陆</a>
<a href="" class="red">免费注册</a>
</div>
<div class="right">
<a href="">我的订单<span class="iconfont icon-xiala-"></span></a> |
<a href="">购物车</a> |
<a href="">收藏夹</a> |
<a href="">手机版</a> |
<a href="">商家支持</a> |
<a href="">网站导航<span class="iconfont icon-xiala-"></span></a> |
<a href="">商品分类<span class="iconfont icon-xiala-"></span></a> |
<a href="">联系客服</a>
</div>
</div>
</div>
<div class="logo_search"></div>
<div class="nav2">
<div class="w">
<div class="left">全部商品分类</div>
<ul class="right">
<li><a href="">家纺</a></li>
<li><a href="">汽车</a></li>
<li><a href="">房产</a></li>
<li><a href="">服装城</a></li>
<li><a href="">家用电器</a></li>
<li><a href="">居家用品</a></li>
<li><a href="">运动户外</a></li>
<li><a href="">图书音影</a></li>
</ul>
</div>
</div>
<div class="main"></div>
</body>
</html>
四、主体1区的实现
init.css
/*整体演示设置*/
*{
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
font-style: normal;
font-style: normal;
color: #666560;
text-decoration: none;
}
a{
color: #666560;
}
a:hover{
color: red;
}
.w{
width: 1200px;
margin: 0 auto;
}
img{
border: none;
display: block;
}
.clear::after{
content: "";
display: block;
clear: both;
visibility: hidden;
zoom:1;
height: 0;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="init.css">
<link rel="stylesheet" href="icon_font./iconfont.css">
<style type="text/css">
.top_ad{/*1、顶部广告的实现*/
background: url(top_ad.jpg) center center no-repeat black;
height: 80px;
}
.top_ad>.w{
text-align: right;
padding-top: 5px;
}
.top_ad>.w>a{
float: right;
margin-right: 5px;
}
.top_nav{/*2、主导航的实现*/
line-height: 30px;
background: #e5e5e3;
overflow: hidden;
}
.top_nav>.w{
height: 30px;
}
.top_nav>.w>.left{
float: left;
}
.top_nav>.w>.right{
float: right;
color: #cccccc;
}
.top_nav>.w>.right>a{
padding:0 5px;
}
.top_nav>.w>.right>a:hover>span{
color: red;
}
.red{
color: red;
}
.nav2{/*3、商品分类区的实现*/
height: 45px;
border-bottom:solid 5px #ca0000;
}
.nav2>.w{
height: 45px;
line-height: 45px;
}
.nav2>.w>.left{
float: left;
width: 210px;
background-color: #ca0000;
color: white;
font-size: 18px;
font-weight: bold;
text-align: center;
}
.nav2>.w>.right{
float: left;
padding-left: 35px;
}
.nav2>.w>.right>li{
float: left;
padding-right: 25px;
}
.nav2>.w>.right>li>a{
font-size: 18px;
font-weight: bold;
}
.nav2>a{
display: block;
text-align: center;
background: url(bg.jpg) center center no-repeat;
height: 475px;
position: relative;
top:5px;
}
/*主体1区*/
.main1{
height: 465px;
background-color: yellow;
position: relative;
overflow: hidden;
}
.main1>.left{
float: left;
width: 210px;
height: 465px;
background-color: #e20000;
position: relative;
}
.main1>.center{
float: left;
margin-top: 10px;
margin-left: 7px;
}
.main1>.right{
float: right;
width: 250px;
height: 465px;
border: 2px solid gray;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="top_ad">
<div class="w">
<a href="" title="关闭广告">
<img src="button.jpg" alt="">
</a>
</div>
</div>
<div class="top_nav">
<div class="w">
<div class="left">
欢迎来拼邮购
请<a href="">登陆</a>
<a href="" class="red">免费注册</a>
</div>
<div class="right">
<a href="">我的订单<span class="iconfont icon-xiala-"></span></a> |
<a href="">购物车</a> |
<a href="">收藏夹</a> |
<a href="">手机版</a> |
<a href="">商家支持</a> |
<a href="">网站导航<span class="iconfont icon-xiala-"></span></a> |
<a href="">商品分类<span class="iconfont icon-xiala-"></span></a> |
<a href="">联系客服</a>
</div>
</div>
</div>
<div class="logo_search"></div>
<div class="nav2">
<div class="w">
<div class="left">全部商品分类</div>
<ul class="right">
<li><a href="">家纺</a></li>
<li><a href="">汽车</a></li>
<li><a href="">房产</a></li>
<li><a href="">服装城</a></li>
<li><a href="">家用电器</a></li>
<li><a href="">居家用品</a></li>
<li><a href="">运动户外</a></li>
<li><a href="">图书音影</a></li>
</ul>
</div>
<a href=""></a>
</div>
<div class="main w">
<div class="w">
<div class="main1 clear">
<aside class="left"></aside>
<aside class="center"><img src="banner.jpg"></aside>
<asied class="right"></asied>
</div>
<div class="main2">主体2区</div>
<div class="main3">主体3区</div>
<div class="main4">主体4区</div>
</div>
</div>
</body>
</html>
五、主体2、3区的实现
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="init.css">
<link rel="stylesheet" href="icon_font./iconfont.css">
<style type="text/css">
.top_ad{/*1、顶部广告的实现*/
background: url(top_ad.jpg) center center no-repeat black;
height: 80px;
}
.top_ad>.w{
text-align: right;
padding-top: 5px;
}
.top_ad>.w>a{
float: right;
margin-right: 5px;
}
.top_nav{/*2、主导航的实现*/
line-height: 30px;
background: #e5e5e3;
overflow: hidden;
}
.top_nav>.w{
height: 30px;
}
.top_nav>.w>.left{
float: left;
}
.top_nav>.w>.right{
float: right;
color: #cccccc;
}
.top_nav>.w>.right>a{
padding:0 5px;
}
.top_nav>.w>.right>a:hover>span{
color: red;
}
.red{
color: red;
}
.nav2{/*3、商品分类区的实现*/
height: 45px;
border-bottom:solid 5px #ca0000;
}
.nav2>.w{
height: 45px;
line-height: 45px;
}
.nav2>.w>.left{
float: left;
width: 210px;
background-color: #ca0000;
color: white;
font-size: 18px;
font-weight: bold;
text-align: center;
}
.nav2>.w>.right{
float: left;
padding-left: 35px;
}
.nav2>.w>.right>li{
float: left;
padding-right: 25px;
}
.nav2>.w>.right>li>a{
font-size: 18px;
font-weight: bold;
}
.nav2>a{
display: block;
text-align: center;
background: url(bg.jpg) center center no-repeat;
height: 475px;
position: relative;
top:5px;
}
/*主体1区*/
.main1{
height: 465px;
background-color: yellow;
position: relative;
overflow: hidden;
}
.main1>.left{
float: left;
width: 210px;
height: 465px;
background-color: #e20000;
position: relative;
}
.main1>.center{
float: left;
margin-top: 10px;
margin-left: 7px;
}
.main1>.right{
float: right;
width: 250px;
height: 465px;
border: 2px solid gray;
margin-top: 10px;
}
/*主体2区*/
.main2{
margin:15px 0;
}
.main2>.left{
float: left;
width: 200px;
height: 163px;
background-color: #604f4d;
}
.main2>.right{
float: left;
width: 1000px;
height: 163px;
background-color: #ebebeb;
}
/*主体3区*/
.main3{
line-height: 3em;
}
.main3>.up{
border-bottom: solid 2px red;
}
.main3>.up>.right{
float: right;
}
.main3>.down{
height: 360px;
background-color: pink;
}
</style>
</head>
<body>
<div class="top_ad">
<div class="w">
<a href="" title="关闭广告">
<img src="button.jpg" alt="">
</a>
</div>
</div>
<div class="top_nav">
<div class="w">
<div class="left">
欢迎来拼邮购
请<a href="">登陆</a>
<a href="" class="red">免费注册</a>
</div>
<div class="right">
<a href="">我的订单<span class="iconfont icon-xiala-"></span></a> |
<a href="">购物车</a> |
<a href="">收藏夹</a> |
<a href="">手机版</a> |
<a href="">商家支持</a> |
<a href="">网站导航<span class="iconfont icon-xiala-"></span></a> |
<a href="">商品分类<span class="iconfont icon-xiala-"></span></a> |
<a href="">联系客服</a>
</div>
</div>
</div>
<div class="logo_search"></div>
<div class="nav2">
<div class="w">
<div class="left">全部商品分类</div>
<ul class="right">
<li><a href="">家纺</a></li>
<li><a href="">汽车</a></li>
<li><a href="">房产</a></li>
<li><a href="">服装城</a></li>
<li><a href="">家用电器</a></li>
<li><a href="">居家用品</a></li>
<li><a href="">运动户外</a></li>
<li><a href="">图书音影</a></li>
</ul>
</div>
<a href=""></a>
</div>
<div class="main w">
<div class="w">
<div class="main1 clear">
<aside class="left"></aside>
<aside class="center"><img src="banner.jpg"></aside>
<asied class="right"></asied>
</div>
<div class="main2">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="main3">
<div class="up">
<a href=""><b>家用电器</b></a>
<div class="right">
<a href="">大家电</a> |
<a href="">大家电</a> |
<a href="">大家电</a> |
<a href="">大家电</a> |
<a href="">大家电</a> |
<a href="">大家电</a> |
<a href="">大家电</a> |
<a href="">大家电</a>
</div>
</div>
<div class="down">
</div>
</div>
<div class="main4">主体4区</div>
</div>
</div>
</body>
</html>
