網頁效果圖：http://www.dycun.cc/
以下：
css代碼
main.css：
/*由於大部分的字體都是12px,顏色一致, 因此統一設置下*/
body{
font-size: 12px;
color: #666666;
}
/*!--1.登陸部分login -->*/
.login{
/*外層div 1280px 29px border:1px dddddd bac:f7f7f7*/
height: 29px;
border-bottom: 1px solid #dddddd;
background-color: #f7f7f7;
}
/*<!--1.2 內層內容--> */
.login-content{
/*內層: 1200px 29px 居中*/
width: 1200px;
height: 29px;
margin: 0 auto;
}
/*<!--1.3 每天生鮮 h2-->*/
.login-content h2{
/*h2, 12px 666666; 設置行高 居中顯示*/
line-height: 29px;
}
/*1.4右側 的登陸*/
.login-right{
width: 250px;
height: 29px;
line-height: 29px;
}
/*<1.4.1已經登陸部分div-->*/
.logined{
display: none;
}
.logined a{
color: #ff8800;
}
/*1.4.2未登陸+個人訂單*/
.unlogin a,.myorder a{
color: #666666;
}
.unlogin span,.myorder span{
margin: 0 10px;
}
.unlogin a:hover,.myorder a:hover{
color: orange;
}
/*2.search部分*/
.search{
height: 90px;
}
.search-content{
width: 1200px;
height: 90px;
margin: 0 auto;
}
/*2.1logo圖標*/
.logo{
/*//注意: a標籤行內屬性, 不支持寬高,margin上下*/
display: inline-block;
margin-left: 17px;
margin-top: 28px;
}
/*2.搜索框 div>form>input: text submit*/
.searchbar{
width: 618px;
height: 38px;
border: 1px solid #37ab40;
margin-top: 34px;
margin-left: 124px;
}
/*2.1內部的input*/
.searchbar input{
outline: none;
border: 0;
}
.searchtext{
width: 515px;
height: 38px;
line-height: 38px;
text-indent: 38px;
background: url(../images/sprite.png) no-repeat 12px 9px;
}
/*2.3搜索按鈕*/
.searchtbtn{
width: 103px;
height: 38px;
color: white;
font-size: 14px;
line-height: 38px;
background-color:#37ab40;
}
/*2.4.個人購物車 div >a+span*/
.mycar{
width: 200px;
height: 40px;
margin-top: 34px;
}
.mycar a{
width: 158px;
height: 38px;
display: inline-block;
background-color: #f7f7f7;
border: 1px solid #dddddd;
font-size: 14px;
color: #37ab40;
text-indent: 37px;
line-height: 38px;
text-align: center;
background: url(../images/sprite.png) no-repeat 13px -43px;
float: left;
}
.mycar span{
color: white;
background-color: #FD8824;
font-size: 18px;
line-height: 40px;
height: 40px;
width: 40px;
text-align: center;
display: inline-block;
float: left;
}
/*3.分類的文字*/
.category{
height: 40px;
margin-top: 27px;
border-bottom: 2px solid #37ab40;
}
.category-content{
width: 1200px;
height: 40px;
margin: 0 auto;
}
/*<!--3.1所有商品分類-->*/
.category-content h3{
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 14px;
color: white;
background-color: #37ab40;
float: left;
}
.category-content ul{
width: 600px;
height: 40px;
margin-left: 34px;
float: left;
}
.category-content ul li{
height: 40px;
line-height: 40px;
float: left;
}
.category-content ul li a{
height: 40px;
font-size: 14px;
color: #666666;
line-height: 40px;
display: inline-block;
}
.category-content ul span{
margin: 0 20px;
}
.category-content ul li a:hover{
color: orange;
}
/*4.sldier*/
.slider{
height: 270px;
}
.slider-content{
width: 1200px;
height: 270px;
margin: 0 auto;
background-color: lightcoral;
}
/*4.1左側列表*/
.categorylist{
background-color: #ffffff;
width: 200px;
height: 270px;
}
.categorylist li{
width: 198px;
height: 44px;
border: 1px solid #eeeeee;
border-top: 0;
line-height: 44px;
text-align: center;
background: url(../images/sprite.png) no-repeat 35px -91px;
}
.categorylist li:nth-of-type(2){
background: url(../images/sprite.png) no-repeat 35px -141px;
}
.categorylist li:nth-of-type(3){
background: url(../images/sprite.png) no-repeat 35px -191px;
}
.categorylist li:nth-of-type(4){
background: url(../images/sprite.png) no-repeat 35px -241px;
}
.categorylist li:nth-of-type(5){
background: url(../images/sprite.png) no-repeat 35px -291px;
}
.categorylist li:nth-of-type(6){
background: url(../images/sprite.png) no-repeat 35px -339px;
}
.categorylist li a{
display: inline-block;
width: 198px;
height: 44px;
line-height: 44px;
font-size: 14px;
color: #333333;
background: url(../images/listarrow.jpg) no-repeat 182px 12px;
}
/*4.2中間的輪播圖*/
.middleslider{
width: 760px;
height: 270px;
background-color: lightgreen;
position: relative;
overflow: hidden;
}
/*<!--4.2.1 內部的6張圖片-->*/
.sliderimage{
width: 4560px;
height: 270px;
float: left;
}
.sliderimage li{
float: left;
}
/*<!--4.2.2左右箭頭-->*/
.leftarrow{
width: 19px;
height: 25px;
position: absolute;
left: 13px;
top:120px;
cursor: pointer;
background: url(../images/sprite.png) no-repeat -4px -400px;
}
.rightarrow{
width: 19px;
height: 25px;
position: absolute;
right: 13px;
top:120px;
cursor: pointer;
background: url(../images/sprite.png) no-repeat -4px -450px;
}
/*4.2.3小圓點*/
.points{
width: 760px;
height: 11px;
position: absolute;
bottom: 10px;
left: 0px;
text-align: center;
}
.points li{
margin: 0 5px;
display: inline-block;
background-color: #9f9f9f;
width: 11px;
height: 11px;
border-radius: 50%;
}
.points .active{
background-color: #cecece;
}
/*4.3ad*/
.ad{
float: left;
width: 240px;
height: 270px;
font-size: 0;
}
/*5.foods商品詳情*/
.foods{
height: 335px;
margin-top: 25px;
}
.foods-content{
width: 1200px;
height: 335px;
margin: 0 auto;
}
.foodstitle{
height: 35px;
line-height: 35px;
}
.foodstitle h5{
float: left;
font-size: 16px;
color: #37ab40;
margin-right: 20px;
}
.foodstitle .titlelist{
float: left;
}
.foodstitle li{
float: left;
margin-right:12px;
}
.foodstitle li a{
color: #cecece;
}
.more{
color: #cecece;
float: right;
}
/*5.2 左側的圖片*/
.foodpic{
width: 200px;
height: 300px;
float: left;
}
/*5.3商品詳情 右側*/
.fooddetail{
float: left;
width: 1000px;
height: 300px;
}
.fooddetail li{
float: left;
width: 248px;
height: 299px;
border: 1px solid #ededed;
text-align: center;
}
.fooddetail li h5{
font-size: 14px;
height: 50px;
line-height: 50px;
margin-bottom: 10px;
}
.fooddetail li div{
font-size: 20px;
color:red;
font-weight: bold;
height: 58px;
line-height: 58px;
margin-top:5px;
}
/*
右側詳情展現:ul>li >h5+a>img+div
ul:1000px 300
li 249px 299px border 1px ededed
\h5 14px 居中 50px;
間距10
img 180 180
div:58px 20px 紅色 居中*/
reset.css
/*1.將一些標籤的 margin和padding去掉*/
body,p,ul,ol,h1,h2,h3,h4,h5,h6,input,select,dd,dt{
margin: 0;
padding: 0;
}
/*2.去掉a標籤的下劃線*/
a{
text-decoration: none;
}
/*3.列表的 前面的小圖標*/
ul,ol{
list-style: none;
}
/*4.清除浮動和塌陷的僞類*/
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear:both;
}
.clearfix{
zoom:1;
}
/*5.設置浮動*/
.lf{
float: left;
}
.rf{
float: right;
}
h1,h2,h3,h4,h5,h6{
font-size: 100%;
font-weight: normal;
}
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>每天生鮮</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--1.登陸部分login 歡迎來到每天生鮮!-->
<!--1.1 最外層的div-->
<div class="login">
<!--1.2 內層內容-->
<div class="login-content">
<!--1.3 每天生鮮 h2-->
<h2 class="lf">歡迎來到每天生鮮!</h2>
<!--1.4 登陸-->
<div class="login-right rf">
<!--<1.4.1已經登陸部分div-->
<div class="logined lf">
歡迎您:
<a href="">張三</a>
</div>
<!--<1.4.2未登陸部分div-->
<div class="unlogin lf">
<a href="">登陸</a>
<span>|</span>
<a href="">註冊</a>
</div>
<!--<1.4.3 個人訂單div-->
<div class="myorder lf">
<span>|</span>
<a href="">個人購物車</a>
<span>|</span>
<a href="">個人訂單</a>
</div>
</div>
</div>
</div>
<!--2.search部分-->
<!--<2.1外層的div-->
<div class="search">
<!--2.2內部的內容div-->
<div class="search-content">
<!--2.2.1-logo-->
<a class="logo lf" href="">
<img src="images/logo.png" alt="每天生鮮的圖片" title="每天生鮮logo">
</a>
<!--2.2.2搜索框 searchbar-->
<div class="searchbar lf">
<form action="">
<!--2.2.2.1文本輸入框-->
<input type="text" placeholder="搜索" class="searchtext lf">
<!--2.2.2.2按鈕-->
<input type="submit" value="搜索" class="searchtbtn lf">
</form>
</div>
<!--2.2.3個人購物車-->
<div class="mycar rf">
<a href="">個人購物車</a>
<span>0</span>
</div>
</div>
</div>
<!--3. 所有商品 category-->
<div class="category">
<div class="category-content">
<!--3.1所有商品分類-->
<h3>所有商品分類</h3>
<!--3.2首頁-->
<ul>
<li>
<a href="">首頁</a>
</li>
<li>
<span>|</span>
</li>
<li>
<a href="">手機生鮮</a>
</li>
<li>
<span>|</span>
</li>
<li>
<a href="">捐贈時令果蔬</a>
</li>
<li>
<span>|</span>
</li>
<li>
<a href="">抽獎</a>
</li>
<li>
<span>|</span>
</li>
<li>
<a href="">免費領取解暑大西瓜 🍉</a>
</li>
</ul>
</div>
</div>
<!--4.slider輪播圖-->
<div class="slider">
<div class="slider-content">
<!--4.1左側分類列表-->
<ul class="categorylist lf">
<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>
<!--4.2中間的輪播圖-->
<div class="middleslider lf">
<!--4.2.1 內部的6張圖片-->
<ul class="sliderimage">
<li>
<a href="">
<!-- <img src="images/slider.jpg" alt="輪播圖1"> -->
</a>
</li>
<li>
<a href="">
<!-- <img src="images/slider.jpg" alt="輪播圖1"> -->
</a>
</li>
<li>
<a href="">
<!-- <img src="images/slider.jpg" alt="輪播圖1"> -->
</a>
</li>
<li>
<a href="">
<!-- <img src="images/slider.jpg" alt="輪播圖1"> -->
</a>
</li>
<li>
<a href="">
<!-- <img src="images/slider.jpg" alt="輪播圖1"> -->
</a>
</li>
<li>
<a href="">
<!-- <img src="images/slider.jpg" alt="輪播圖1"> -->
</a>
</li>
</ul>
<!--4.2.2左右箭頭-->
<div class="leftarrow"></div>
<div class="rightarrow"></div>
<!--4.2.3小圓點-->
<ul class="points">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!--4.3ad廣告部分-->
<div class="ad">
<a href="">
<img src="images/pic01.jpg" alt="廣告1">
</a>
<a href="">
<img src="images/pic02.jpg" alt="廣告2">
</a>
</div>
</div>
</div>
<!--5.foods 商品詳情-->
<div class="foods">
<div class="foods-content">
<!--5.1title-->
<div class="foodstitle">
<h5>養分海鮮 🐋</h5>
<ul class="titlelist">
<li>
<span>|</span>
</li>
<li>
<a href="">大鯊魚</a>
</li>
<li>
<a href="">小烏賊</a>
</li>
<li>
<a href="">小海豚</a>
</li>
</ul>
<a href="" class="more">查看更多></a>
</div>
<!--5.2左側圖片-->
<div class="foodpic">
<a href="">
<img src="images/fresh.jpg" alt="海鮮圖">
</a>
</div>
<!--5.3右側商品詳情-->
<ul class="fooddetail">
<li>
<h5>基圍蝦</h5>
<a href="">
<img src="images/foods.jpg" alt="基圍蝦">
</a>
<div>¥ 35</div>
</li>
<li>
<h5>老海豹(有嚼勁)</h5>
<a href="">
<img src="images/foods.jpg" alt="老海豹(有嚼勁)">
</a>
<div>¥ 35</div>
</li>
<li>
<h5>小海豚</h5>
<a href="">
<img src="images/foods.jpg" alt="小海豚">
</a>
<div>¥ 35</div>
</li>
<li>
<h5>大白鯊</h5>
<a href="">
<img src="images/foods.jpg" alt="大白鯊">
</a>
<div>¥ 35</div>
</li>
</ul>
</div>
</div>
<!--5.foods 商品詳情-->
<div class="foods">
<div class="foods-content">
<!--5.1title-->
<div class="foodstitle">
<h5>新鮮水果 🍌</h5>
<ul class="titlelist">
<li>
<span>|</span>
</li>
<li>
<a href="">芒果</a>
</li>
<li>
<a href="">加州提子</a>
</li>
<li>
<a href="">亞馬孫牛油果</a>
</li>
</ul>
<a href="" class="more">查看更多></a>
</div>
<!--5.2左側圖片-->
<div class="foodpic">
<a href="">
<img src="images/friut.jpg" alt="水果圖">
</a>
</div>
<!--5.3右側商品詳情-->
<ul class="fooddetail">
<li>
<h5>芒果</h5>
<a href="">
<img src="images/foods.jpg" alt="芒果">
</a>
<div>¥ 35</div>
</li>
<li>
<h5>牛油果</h5>
<a href="">
<img src="images/foods.jpg" alt="牛油果">
</a>
<div>¥ 35</div>
</li>
<li>
<h5>西班牙大西瓜</h5>
<a href="">
<img src="images/foods.jpg" alt="西班牙大西瓜">
</a>
<div>¥ 35</div>
</li>
<li>
<h5>馬爾代夫大菠蘿</h5>
<a href="">
<img src="images/foods.jpg" alt="馬爾代夫大菠蘿">
</a>
<div>¥ 35</div>
</li>
</ul>
</div>
</div>
<!--5.foods 商品詳情-->
<div class="foods">
<div class="foods-content">
<!--5.1title-->
<div class="foodstitle">
<h5>綠色蔬菜🍆</h5>
<ul class="titlelist">
<li>
<span>|</span>
</li>
<li>
<a href="">西紅柿</a>
</li>
<li>
<a href="">紅辣椒</a>
</li>
<li>
<a href="">大黃瓜</a>
</li>
</ul>
<a href="" class="more">查看更多></a>
</div>
<!--5.2左側圖片-->
<div class="foodpic">
<a href="">
<img src="images/capate.jpg" alt="蔬菜圖">
</a>
</div>
<!--5.3右側商品詳情-->
<ul class="fooddetail">
<li>
<h5>西紅柿</h5>
<a href="">
<img src="images/foods.jpg" alt="西紅柿">
</a>
<div>¥ 35</div>
</li>
<li>
<h5>紅辣椒</h5>
<a href="">
<img src="images/foods.jpg" alt="紅辣椒">
</a>
<div>¥ 35</div>
</li>
<li>
<h5>大黃瓜</h5>
<a href="">
<img src="images/foods.jpg" alt="紅辣椒">
</a>
<div>¥ 35</div>
</li>
<li>
<h5>小茄子</h5>
<a href="">
<img src="images/foods.jpg" alt="小茄子">
</a>
<div>¥ 35</div>
</li>
</ul>
</div>
</div>
<!--5.foods 商品詳情-->
<div class="foods">
<div class="foods-content">
<!--5.1title-->
<div class="foodstitle">
<h5>農家小食 🐤</h5>
<ul class="titlelist">
<li>
<span>|</span>
</li>
<li>
<a href="">純牛奶</a>
</li>
<li>
<a href="">新鮮土雞蛋</a>
</li>
<li>
<a href="">天山犛牛肉</a>
</li>
</ul>
<a href="" class="more">查看更多></a>
</div>
<!--5.2左側圖片-->
<div class="foodpic">
<a href="">
<img src="images/egg.jpg" alt="雞蛋圖">
</a>
</div>
<!--5.3右側商品詳情-->
<ul class="fooddetail">
<li>
<h5>純牛奶</h5>
<a href="">
<img src="images/foods.jpg" alt="純牛奶">
</a>
<div>¥ 35</div>
</li>
<li>
<h5>小雞蛋</h5>
<a href="">
<img src="images/foods.jpg" alt="小雞蛋">
</a>
<div>¥ 35</div>
</li>
<li>
<h5>犛牛肉</h5>
<a href="">
<img src="images/foods.jpg" alt="犛牛肉">
</a>
<div>¥ 35</div>
</li>
<li>
<h5>土雞蛋</h5>
<a href="">
<img src="images/foods.jpg" alt="土雞蛋">
</a>
<div>¥ 35</div>
</li>
</ul>
</div>
</div>
</body>
</html>
資源文件：
capate.jpg egg,jpg fresh.jpg friut.jpg foods.jpgcss
logo.png pic01.jpg pic02.jpghtml
buycar.png icon01.png icon02.png icon03.png icon04.png icon05.png icon06.png leftarrow.png listarrow.jpg rightarrow.png search.pngide
sprite.png字體