码迷，mamicode.com
首页 > Web开发 > 详细

CSS——制作天天生鲜主页

时间：2018-06-10 15:30:51      阅读：446      评论：0      收藏：0      [点我收藏+]

标签：行高   12px   opp   out   rev   after   字体大小   文字   eee   

终于做好了！

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天天生鲜-首页</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    <div class="header_con">
        <div class="header">
            <div class="welcome fl">欢迎来到天天生鲜</div>
            <div class="user_info fr">

                <div class="user_login_link fl">
                    <a href="#">登陆</a>
                    <span>|</span>
                    <a href="#">注册</a>
                </div>

                <div class="user_welcome fl">
                    欢迎您 : <em>张三</em>
                </div>

                <div class="user_shopping fl">
                    <span>|</span>
                    <a href="#">我的购物车</a>
                    <span>|</span>
                    <a href="#">我的订单</a>
                </div>
            </div>
        </div>
    </div>
    <div class="logo_bar">
        <div class="logo fl">
            <a href="#"><img src="images/logo.png"></a>
        </div>
        <div class="search fl">
            <form>
                <!--placeholder:输入框中有“搜索”两个字，输入文字后消失的一种样式-->
                <input type="text" name="" placeholder="搜索" class="input_text fl">
                <input type="button" name="" value="搜索" class="input_btn fr">
            </form>
        </div>
        <div class="chart fr">
            <a href="#" class="fl">我的购物车</a>
            <span class="fr">0</span>
        </div>
    </div>
    <div class="sub_menu_con">
        <div class="sub_menu">
            <h1 class="fl">全部商品分类</h1>
            <ul class="fl">
                <li><a href="">首页</a></li>
                <li><a href="">手机生鲜</a></li>
                <li><a href="">抽奖</a></li>
            </ul>
        </div>
    </div>
    <div class="center_con" >
        <ul class="main_menu fl">
            <li><a href="" class="fruit">新鲜水果</a></li>
            <li><a href="" class="seafood">海鲜水产</a></li>
            <li><a href="" class="meat">猪肉牛肉</a></li>
            <li><a href="" class="egg">禽类蛋品</a></li>
            <li><a href="" class="vegetable">新鲜蔬菜</a></li>
            <li><a href="" class="ice">速冻食品</a></li>
        </ul>

        <div class="slide_con fl">
            <ul class="slide">
                <li><a href=""><img src="images/slide.jpg" alt="幻灯片"></a></li>
            </ul>

            <div class="prev"></div>
            <div class="next"></div>

            <ul class="points">
                <li class="active"></li>
                <li ></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="adv fl" >
            <a href=""><img src="images/adv01.jpg" alt="广告"></a>
            <a href=""><img src="images/adv02.jpg" alt="广告"></a>
        </div>
    </div>

    <div class="common_model">
        <div class="common_title">

            <h3 class="fl">新鲜水果</h3>

            <ul class="fl">
                <li><span>|</span></li>
                <li><a href="#">草莓</a></li>
                <li><a href="#">荔枝</a></li>
                <li><a href="#">牛油果</a></li>
            </ul>

            <a href="#" class="more fr">查看更多&gt;</a>
        </div>

        <div class="common_goods_list">
            <div class="goods_banner fl"><img src="images/banner.jpg" alt="商品banner">
            </div>
            <ul class="good_list fl">
                <li>
                    <h4>草莓</h4>
                    <a href="#"><img src="images/good_pic.jpg" alt="商品图片"></a>
                    <p>$ 5.00</p>
                </li>
                <li>
                    <h4>草莓</h4>
                    <a href="#"><img src="images/good_pic.jpg" alt="商品图片"></a>
                    <p>$ 5.00</p>
                </li>
                <li>
                    <h4>草莓</h4>
                    <a href="#"><img src="images/good_pic.jpg" alt="商品图片"></a>
                    <p>$ 5.00</p>
                </li>
                <li>
                    <h4>草莓</h4>
                    <a href="#"><img src="images/good_pic.jpg" alt="商品图片"></a>
                    <p>$ 5.00</p>
                </li>
            </ul>
        </div>
    </div>
    <div class="common_model">
        <div class="common_title">

            <h3 class="fl">新鲜水果</h3>

            <ul class="fl">
                <li><span>|</span></li>
                <li><a href="#">草莓</a></li>
                <li><a href="#">荔枝</a></li>
                <li><a href="#">牛油果</a></li>
            </ul>

            <a href="#" class="more fr">查看更多&gt;</a>
        </div>

        <div class="common_goods_list">
            <div class="goods_banner fl"><img src="images/banner.jpg" alt="商品banner">
            </div>
            <ul class="good_list fl">
                <li>
                    <h4>草莓</h4>
                    <a href="#"><img src="images/good_pic.jpg" alt="商品图片"></a>
                    <p>$ 5.00</p>
                </li>
                <li>
                    <h4>草莓</h4>
                    <a href="#"><img src="images/good_pic.jpg" alt="商品图片"></a>
                    <p>$ 5.00</p>
                </li>
                <li>
                    <h4>草莓</h4>
                    <a href="#"><img src="images/good_pic.jpg" alt="商品图片"></a>
                    <p>$ 5.00</p>
                </li>
                <li>
                    <h4>草莓</h4>
                    <a href="#"><img src="images/good_pic.jpg" alt="商品图片"></a>
                    <p>$ 5.00</p>
                </li>
            </ul>
        </div>
    </div>
    <div class="common_model">
        <div class="common_title">

            <h3 class="fl">新鲜水果</h3>

            <ul class="fl">
                <li><span>|</span></li>
                <li><a href="#">草莓</a></li>
                <li><a href="#">荔枝</a></li>
                <li><a href="#">牛油果</a></li>
            </ul>

            <a href="#" class="more fr">查看更多&gt;</a>
        </div>

        <div class="common_goods_list">
            <div class="goods_banner fl"><img src="images/banner.jpg" alt="商品banner">
            </div>
            <ul class="good_list fl">
                <li>
                    <h4>草莓</h4>
                    <a href="#"><img src="images/good_pic.jpg" alt="商品图片"></a>
                    <p>$ 5.00</p>
                </li>
                <li>
                    <h4>草莓</h4>
                    <a href="#"><img src="images/good_pic.jpg" alt="商品图片"></a>
                    <p>$ 5.00</p>
                </li>
                <li>
                    <h4>草莓</h4>
                    <a href="#"><img src="images/good_pic.jpg" alt="商品图片"></a>
                    <p>$ 5.00</p>
                </li>
                <li>
                    <h4>草莓</h4>
                    <a href="#"><img src="images/good_pic.jpg" alt="商品图片"></a>
                    <p>$ 5.00</p>
                </li>
            </ul>
        </div>
    </div>
    <div class="footer">
        <div class="links">
            <a href="">关于我们</a>
            <span>|</span>
            <a href="">联系我们</a>
            <span>|</span>
            <a href="">招聘人才</a>
            <span>|</span>
            <a href="">友情链接</a>
        </div>
        <p>CopyRight ? 2016 北京天天生鲜信息技术有限公司 All Rights Reserved<br />

电话：010-****888 京ICP备*******8号</p>
    </div>


</body>
</html>

main.css:

body{
    font-family: ‘Microsoft YaHei‘;
    color:#666;
    font-size:12px;
}

/*顶部状态条*/
.header_con{
    height:29px;
    background-color: #f7f7f7;
    border-bottom:1px solid #ddd;
}

.header{
    width:1200px;
    height:29px;
    margin:0 auto;
}

.welcome{
    font:12px/29px ‘Microsoft YaHei UI‘;
}

.user_login_link,.user_welcome, .user_shopping{
    height:29px;
    line-height:29px;
}

.user_login_link a, .user_shopping a{
    color:#666;
}

.user_login_link a:hover,.user_shopping a:hover{
    color:#f80;
}

.user_login_link span, .user_shopping span{
    margin:0 15px;
    color:#cecece;
}

/*把这个块藏起来*/
.user_welcome{
    display:none;
}

.user_welcome em{
    color:#f80;
}


/*左侧菜单样式*/
.logo_bar{
    width:1200px;
    height:115px;
    margin:0 auto;
}

.logo{
    width:151px;
    height:59px;
    margin:29px 0 0 17px;
}

.search{
    width:616px;
    height:38px;
    border:1px solid #37ab40;
    margin:34px 0 0 123px;
    /*雪碧图的放大镜作背景图*/
    background:url(../images/icons.png) 10px -335px no-repeat;
}

.search .input_text{
    width:470px;
    height:37px;
    border:0px;
    margin-left:37px;
    outline:none;
}

.search .input_btn{
    width:100px;
    height:38px;
    background-color: #37ab40;
    border:0;
    font:14px/38px ‘Microsoft YaHei UI‘;
    color:#fff;
    /*鼠标变成手*/
    cursor:pointer;
}

.chart{
    width:200px;
    height:40px;
    margin-top:34px;
}
.chart a{
    width:158px;
    height:38px;
    border:1px solid #ddd;
    font:14px/38px ‘Microsoft YaHei UI‘;
    color:#37ab40;
    text-indent:56px;
    background:url(../images/icons.png) 10px -300px no-repeat #f7f7f7;
}

.chart span{
    width: 40px;
    height:40px;
    background-color:#f80;
    font:bold 18px/40px ‘Microsoft YaHei UI‘;
    text-align:center;
    color:#fff;
}

.sub_menu_con{
    height:40px;
    border-bottom:2px solid #37ab30
}

.sub_menu{
    width:1200px;
    height:40px;
    margin:0 auto;
}

.sub_menu h1{
    width:200px;
    height:40px;
    background-color: #37ab40;
    font:14px/40px ‘Microsoft YaHei UI‘;
    text-align:center;
    color:#fff;
}

.sub_menu ul{
    overflow:hidden;
}

.sub_menu li{
    float:left;
    height:14px;
    padding:0 25px;
    border-left:1px solid #666;
    margin-left:-2px;
    margin-top:13px;
}

.sub_menu li a{
    font:14px/14px ‘Microsoft YaHei UI‘
    color:#666;
}

.sub_menu li a:hover{
    color:#f80;
}

.center_con{
    width:1200px;
    height:270px;
    margin:0 auto;
}

.center_con .main_menu{
    width:200px;
    height:270px;
    overflow:hidden;
}

.center_con .main_menu li{
    width:198px;
    height:44px;
    border:1px solid #eee;
    margin-top:-1px;
    background:url(../images/icons.png) 166px -260px no-repeat;
}

.center_con .main_menu li a{
    display:block;
    width:198px;
    height:44px;
    text-indent:71px;
    font:14px/44px ‘Microsoft YaHei UI‘;
    color:#333;
    background:url(../images/icons.png) 33px -260px no-repeat;
}

.center_con .main_menu li .fruit{
    background-position: 30px 0px;
}

.center_con .main_menu li .seafood{
    background-position: 30px -41px;
}

.center_con .main_menu li .meat{
    background-position: 30px -87px;
}

.center_con .main_menu li .egg{
    background-position: 30px -132px;
}

.center_con .main_menu li .vegetable{
    background-position: 30px -174px;
}

.center_con .main_menu li .ice{
    background-position: 30px -220px;
}

/*幻灯片样式*/

.slide_con{
    width:760px;
    height:270px;
    position:relative
}

.prev{
    width:15px;
    height:23px;
    /*绝对定位*/
    position: absolute;
    left:11px;
    top:122px;
    background:url(../images/icons.png) -2px -388px no-repeat;
    cursor: pointer;
}

.next{
    width:15px;
    height:23px;
    /*绝对定位，叠加图片*/
    position: absolute;
    left:732px;
    top:122px;
    background:url(../images/icons.png) -2px -428px no-repeat;
    cursor: pointer;
}
.points{
    position: absolute;
    width:100%;
    height:11px;
    left:0;
    bottom:9px;
    text-align:center;
    font-size:0px;
}

.points li{
    width:11px;
    height:11px;
    display:inline-block;
    background-color: #9f9f9f;
    margin:0 5px;
    /*设置圆角，半径为高度的一半*/
    border-radius:50%;
}

.points .active{
    background-color: #cecece;
}

.adv{
    width:240px;
    height:270px;
}
.adv a{
    float:left;
    width:240px;
    height:135px;
}

/*解决图片下方3像素白边的情况*/
.adv a img{
    display:block;
}

.common_model{
    width:1200px;
    height:340px;
    margin:18px auto 0;
}

.common_title{
    height:38px;
    border-bottom: 2px solid #42ad46;
}

.common_model h3{
    font:bold 16px/38px ‘Microsoft YaHei UI‘;
    color:#37ab40;
}

.common_model .common_title ul{
    height:12px;
    margin:13px 0 0  20px;
}

.common_model .common_title li{
    float:left;
    margin:0 10px;
}


.common_model .common_title li a{
    /*微软雅黑默认有行高*/
    color:#666;
}

.common_model .common_title li a:hover{
    color:#f80;
}

.common_model .common_title .more{
    height:38px;
    line-height:38px;
    color:#666;
}

.common_model .common_title .more:hover{
    color:#f80;
}

.common_model .common_goods_list{
    height:300px;
    width:1200px;
}

.common_model .common_goods_list .goods_banner{
    width:200px;
    height:300px;
}

.common_model .common_goods_list .good_list{
    width:1000px;
    height:300px;
}

.common_model .common_goods_list .good_list li{
    width:249px;
    height:299px;
    border-right:1px solid #ededed;
    border-bottom:1px solid #ededed;
    float:left;
}

.common_goods_list .good_list li:hover{
    width:248px;
    height:298px;
    border:1px solid #ff0;
}

.common_goods_list .good_list li h4{
    height:52px;
    font:14px/52px ‘Microsoft YaHei UI‘;
    color:#666;
    text-align:center;
}

.common_goods_list .good_list li a{
    display:block;
    height:180px;
    width:180px;
    margin:0 auto;
}

.common_goods_list .good_list li p{
    height:52px;
    font:bold 20px/52px ‘Microsoft YaHei UI‘;
    color:#c40000;
    text-align: center;
}

.footer{
    height:145px;
    border-top:2px solid #4ab14e;
    margin-top:30px;
}

.footer .links{
    text-align:center;
    /*有边框就没有margin-top塌陷了*/
    margin-top:40px;
}

.footer .links a{
    color:#4e4e4e;
}

.footer .links a:hover{
    color:#f80;
}

.footer .links span{
    color:#4e4e4e;
    margin:0 10px;
}

.footer p{
    text-align: center;
    line-height:27px;
    color:#4e4e4e;
    margin-top:10px;
}

reset.css:

/*不要用网上现成的，不用的标签不要写，会影响性能，标签组选择器*/
body,ul,p,h1,h2,h3,h4,h5,h6,dl,dd,input,select,form{
    margin:0;
    padding:0;
}

/*让h标签继承body类设置的字体大小*/
h1,h2,h3,h4,h5,h6{
    font-size:100%;
}

/*去掉默认. 标签选择器*/
ul{
    list-style: none;
}

/*不倾斜*/
em{
    font-style:normal;
}

/*去掉下划线*/
a{
    text-decoration:none;
}

/*去掉IE下，图片做链接时产生的边框*/
img{
    border:none;
}

/*清除margin-top塌陷和清除浮动*/
.clearfix:before, .clearfix:after{
    content:"";
    /*一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局，
    使我们能够轻松定义一个单元格的边界、背景等样式，
    而不会产生因为使用了table那样的制表标签所导致的语义化问题。*/
    display:table;
}

.clearfix:after{
    /*清除左右两边浮动*/
    clear:both;
}

.clearfix{
    zoom:1;
}

.fl{
    float:left;
}

.fr{
    float:right;
}

网页展示;

 

CSS——制作天天生鲜主页

标签：行高   12px   opp   out   rev   after   字体大小   文字   eee   

原文地址：https://www.cnblogs.com/gaoquanquan/p/9162704.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！