用h+c实现天天生鲜首页

网页效果图: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.jpg

logo.png                         pic01.jpg                                                  pic02.jpg

                                                          

buycar.png  icon01.png  icon02.png  icon03.png  icon04.png  icon05.png  icon06.png leftarrow.png listarrow.jpg rightarrow.png search.png

    

  sprite.png

原文地址:https://www.cnblogs.com/wf-skylark/p/9152073.html

时间: 2024-08-30 14:26:02

用h+c实现天天生鲜首页的相关文章

CSS——制作天天生鲜主页

终于做好了! index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>天天生鲜-首页</title> <link rel="stylesheet" type="text/css" href="css/reset.css"&g

天天生鲜 - App设计

天天生鲜-思路数据库设计 天天生鲜-各个App 全文检索 天天生鲜-静态文件 一.项目目录 daily_fresh_demo - daily_fresh_demo - df_cart # 购物车功能 - df_goods # 商品功能 - df_order # 订单功能 - df_user # 用户功能(包括登录验证等相关功能) - static # 静态文件 - templates # 前段模板- whoosh_index # 全局索引文件 db.sqlite3 manage.py  注:这个

天天生鲜项目

1.天天生鲜商业模式 认识电商 1.1 B2B--企业对企业 B2B ( Business to Business)是指进行电子商务交易的供需双方都是商家(或企业. 公司),她(他)们使用了互联网的技术或各种商务网络平台,完成商务交易的过程.电子 商务是现代 B2B marketing 的一种具体主要的表现形式 案例:阿里巴巴.慧聪网 1.2 C2C--个人对个人 C2C 即 Customer(Consumer) to Customer(Consumer),意思就是消费者个人 间的电子商务行为.

天天生鲜order.model.py

from django.db import models from db.base_model import BaseModel # Create your models here. class OrderInfo(BaseModel): '''订单模型类''' PAY_METHOD_CHOICES = ( (1, '货到付款'), (2, '微信支付'), (3, '支付宝'), (4, '银联支付') ) ORDER_STATUS_CHOICES = ( (1, '待支付'), (2, '待

天天生鲜中关于app的配置问题

如果需要把很多应用都放在一个apps下面,就需要重新配置一下他们的路径,也会更方便应用的调用 import sys sys.path.insert(0,os.path.join(BASE_DIR,'APPS'))这样就可以解决重复的使用apps.应用的麻烦了.BASE_DIR表示项目所在的目录 原文地址:https://www.cnblogs.com/myiuni/p/10263793.html

django开发经验(天天生鲜)

首先,django开发前要配置虚拟环境(相当于将原django环境复制一遍进行操作,不影响原django环境,也适用于同时开发不同项目) 在虚拟环境里下载包用“pip install 包名”,这样是对本虚拟环境下载,如果用“sudo pip install 包名”是对原django环境操作 原文地址:https://www.cnblogs.com/itheone/p/12024956.html

QQ_990814268 摘抄Django项目购物车、订单(三)

购物车 提示 使用redis数据库存储购物车数据 购物车需要完成增.删.改.查的逻辑 查询的结果,需要由服务器响应界面给客户端展示出来 增删改的操作,是客户端发数据给服务器,两者之间的交互是局部刷新的效果,需要用ajax交互 添加购物车的请求方法:post 服务器和客户端传输数据格式:json 服务器接收的数据 用户id:user_id 商品id:sku_id 商品数量:count 定义添加购物车视图 # 项目的urls url(r'^cart/', include('cart.urls', n

06 全文检索

商品列表页的视图处理函数: class ListView(View): def get(self,request,catagory_id,page): # 取出当前页的分类商品,商品的主页 sort = request.GET.get("sort",'default') if sort not in ("price", "hot"): sort = "default" try: catagory = GoodsCategory

摘抄Django项目(一)

果生鲜项目介绍 1.商业模式说明 2.开发流程介绍 3.项目需求分析 4.项目架构分析 5.数据库设计 6.模型类说明 7.创建dailyfresh项目 8.展示注册页面 9.视图函数的get和post请求处理 10.类视图 商业模式介绍 目的:知道天天生鲜项目属于那种商业模式 1.B2B--企业对企业 B2B (Business to Business)是指进行电子商务交易的供需双方都是商家(或企业.公司),她(他)们使用了互联网的技术或各种商务网络平台,完成商务交易的过程.电子商务是现代 B