html+css实例

其他 2018-08-08 19:02:26 阅读次数: 0

1.简单的物品浏览页

(1)reset.css文件(初始化一些样式,例如消除a标签的下划线)


/*将标签默认的间距设为0*/
body,ul,p,h1,h2,h3,h4,h5,h6,dl,dd,input,selector,form{
    margin: 0;padding: 0;
}

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


/*去掉默认的列表标签*/
ul{
    list-style: none;
}

/*设置em文字不倾斜*/
em{
    font-style: normal;
}

/*清除下划线*/
a{
    text-decoration: none;
}

/*清除图片的边框*/
img{
    border: none;
}

/*清楚margin-top塌陷和浮动问题*/
.clearfix:before,.clearfix:after{
    content: "";
    display: table;
}

.clearfix:after{
    clear: both;
}
/*解决ie清楚浮动的问题*/
.clearfix{
    zoom: 1;
}

/*向左浮动*/
.fl{
    float: left;
}
/*向右浮动*/
.fr{
    float: right;
}

2.页面内详细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';
    color: #666666;
}
.user_login_link,.user_welcome,.user_shopping{
    height: 29px;
    line-height: 29px;
}

.user_login_link a,.user_shopping a{
    color: #666666;

}

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

.user_welcome{
    display: none;
}
.user_welcome em{
    color: #ff8800;
}



/*logo 搜索  购物车样式*/
.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("../image_day/icons.png") 8px -337px no-repeat;
}

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

.search .input_btn{
    width: 100px;
    height: 38px;
    background-color: #37ab40;
    border: 0px;
    font: 14px/38px 'Microsoft Yahei';
    color: #ffffff;
    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';
    color: #37ab40;
    text-indent: 56px;
    background: url("../image_day/icons.png") 15px -301px no-repeat #f7f7f7;
}

.chart span{
    width: 40px;
    height: 40px;
    background-color: #f80;
    font: bold 18px/40px 'Microsoft Yahei';
    color: white;
    text-align: center;
}

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

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

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

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



.sub_menu li a{
    font: 14px/14px 'Microsoft Yahei';
    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("../image_day/icons.png") 175px -259px no-repeat;
}

.center_con .main_menu li a{
    display: block;
    width: 198px;
    height: 44px;
    font: 14px/44px 'Microsoft Yahei';
    color: #333333;
    text-indent: 71px;
    background: url("../image_day/icons.png") 16px 0px no-repeat;
}
.center_con .main_menu li .fruit{
    background-position: 16px 0px;
}

.center_con .main_menu li .seafood{
    background-position: 16px -44px;
}
.center_con .main_menu li .meat{
    background-position: 16px -88px;
}
.center_con .main_menu li .egg{
    background-position: 16px -134px;
}
.center_con .main_menu li .vegetables{
    background-position: 16px -176px;
}
.center_con .main_menu li .ice{
    background-position: 16px -221px;
}

/*轮播图*/

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

.prev{
    width: 15px;
    height: 23px;
    position: absolute;
    left: 11px;
    top: 122px;
    cursor: pointer;
    background: url("../image_day/icons.png") 40px -387px;
}

.next{
    width: 15px;
    height: 23px;
    position: absolute;
    right: 11px;
    top: 122px;
    cursor: pointer;
    background: url("../image_day/icons.png") 40px -427px;
}

.points{
    position: absolute;
    width: 100%;
    height: 11px;
    left: 0px;
    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_model .common_title{
    height: 38px;
    border-bottom: 2px solid #42ad46;
}

.common_model .common_title h3{
    font: bold 16px/38px 'Microsoft Yahei';
    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;
    font-size: 12px;
    line-height: 10px;
}

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

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

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

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

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

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

.common_model .common_goods_list .goods_list li h4{
    height: 52px;
    font: 14px/52px 'Microsoft Yahei';
    color: #666666;
    text-align: center;
}

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

.common_model .common_goods_list .goods_list li p{
    height: 52px;
    font: bold 20px/52px 'Microsoft Yahei';
    color: #c40000;
    text-align: center;
}

.common_model .common_goods_list .goods_list li:hover{
    width: 248px;
    height: 298px;
    border: 1px solid gold;
}

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

.footer .links{
    text-align: center;
    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;
}


/*=======================首页样式==========================*/



/*=======================登录页样式==========================*/




.login_header{
    width: 953px;
    height: 133px;
    margin: 0 auto;
}

.login_header a{
    display: block;
    width: 193px;
    height: 76px;
    margin-top: 28px;
}

.login_form_con{
    border-top: 1px solid #79a652;
    height: 480px;
    background-color: #518e17;
}

.login_form{
    width: 953px;
    height: 482px;
    margin: 0 auto;
}

.login_form .login_banner{
    margin: 92px 0 0 15px;
}

.login_form .slogan{
    color: #ffffff;
    font-size: 30px;
    width: 30px;
    height: 293px;
    text-align: center;
    line-height: 36px;
    margin-top: 83px;
    margin-left: 114px;
}

.login_form .form_input_con{
    width: 368px;
    height: 379px;
    background-color: white;
    border: 1px solid #c6c6c5;
    margin-top: 50px;
}

.login_footer{
    border-top: 0px;
    margin-top: 0px;
}

.form_title{
    width: 308px;
    height: 70px;
    border-bottom: 1px solid #e0e0e0;
    margin: 0 auto;
}

.form_title h1{
    float: left;
    height: 70px;
    font: bold 24px/70px 'Microsoft Yahei';
    color: #a8a8a8;
    margin-left: 44px;
}

.form_title a{
    width: 100px;
    height: 16px;
    font: 16px/16px 'Microsoft Yahei';
    color: #5fb42a;
    text-indent: 25px;
    float: left;
    background: url("../image_day/icons02.png") 0px 0px no-repeat;
    margin: 27px 0 0 33px;
}


.form_input_con form{
    width: 308px;
    height: 221px;
    margin: 20px auto 0;
}

.form_input_con form .form_group{
    width: 308px;
    height: 68px;

}

.form_group .input_txt,.form_group .input_pwd{
    width: 306px;
    height: 38px;
    border: 1px solid #e0e0e0;
    outline: none;
    text-indent: 10px;
    background: url("../image_day/icons02.png") 274px -43px no-repeat #f8f8f8;
}

.form_group .input_pwd{
    background-position: 274px -93px;
}

.form_group .error{
    font: 12px/28px 'Microsoft Yahei';
    color: #ff5400;
    display: none;
}

.form_group .input_check{
    margin: 2px 10px 0 0;
}

.find_pass{
    color: #4b4b4b;
}

.find_pass:hover{
    color: #f80;
}

.input_sub{
    width: 308px;
    height: 40px;
    background-color: #47aa34;
    border: 0;
    font: 24px/40px 'Microsoft Yahei';
    color: white;
    cursor: pointer;
}

3.html文件:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <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" style="display: none">

                 <a href="#">登录</a>
                 <span>|</span>
                 <a href="#">注册</a>

             </div>
             <!--用户欢迎页-->
             <div class="user_welcome fl" style="display: block">
                 欢迎您:<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="image_day/logo.png" alt="logo"/></a>
    </div>

    <div class="search fl">
        <form action="#">
            <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>
            <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="vegetables">新鲜蔬菜</a></li>
        <li><a href="" class="ice">速冻食品</a></li>
    </ul>

    <div class="slide_con fl">
        <ul class="slide">
            <li><a href=""><img src="image_day/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="image_day/adv01.jpg" alt="广告1"></a>
        <a href=""><img src="image_day/adv02.jpg" alt="广告2"></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="image_day/banner01.jpg" alt="banner"/></div>
        <ul class="goods_list fl">
            <li>
                <h4>草莓</h4>
                <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
                <p>￥ 38.00</p>
            </li>
            <li>
                <h4>草莓</h4>
                <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
                <p>￥ 38.00</p>
            </li>
            <li>
                <h4>草莓</h4>
                <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
                <p>￥ 38.00</p>
            </li>
            <li>
                <h4>草莓</h4>
                <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
                <p>￥ 38.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="image_day/banner02.jpg" alt="banner"/></div>
        <ul class="goods_list fl">
            <li>
                <h4>草莓</h4>
                <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
                <p>￥ 38.00</p>
            </li>
            <li>
                <h4>草莓</h4>
                <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
                <p>￥ 38.00</p>
            </li>
            <li>
                <h4>草莓</h4>
                <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
                <p>￥ 38.00</p>
            </li>
            <li>
                <h4>草莓</h4>
                <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
                <p>￥ 38.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="image_day/banner03.jpg" alt="banner"/></div>
        <ul class="goods_list fl">
            <li>
                <h4>草莓</h4>
                <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
                <p>￥ 38.00</p>
            </li>
            <li>
                <h4>草莓</h4>
                <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
                <p>￥ 38.00</p>
            </li>
            <li>
                <h4>草莓</h4>
                <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
                <p>￥ 38.00</p>
            </li>
            <li>
                <h4>草莓</h4>
                <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
                <p>￥ 38.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="image_day/banner04.jpg" alt="banner"/></div>
        <ul class="goods_list fl">
            <li>
                <h4>草莓</h4>
                <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
                <p>￥ 38.00</p>
            </li>
            <li>
                <h4>草莓</h4>
                <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
                <p>￥ 38.00</p>
            </li>
            <li>
                <h4>草莓</h4>
                <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
                <p>￥ 38.00</p>
            </li>
            <li>
                <h4>草莓</h4>
                <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
                <p>￥ 38.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>

4.简单的登录页

<!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="login_header clearfix">
    <a href=""><img src="image_day/logo02.png" alt="logo"></a>
</div>

<div class="login_form_con clearfix">
    <div class="login_form">
        <img src="image_day/login_banner.png" class="login_banner fl">
        <p class="slogan fl">日夜兼程 . 急速送达</p>

        <div class="form_input_con fr">

            <div class="form_title">
                <h1>会员登录</h1>
                <a href="#">立即注册</a>
            </div>

            <form>
                <div class="form_group">
                    <input type="text" name="username" class="input_txt" placeholder="请输入用户名">
                    <span class="error">文字提示</span>

                </div>


                <div class="form_group">
                    <input type="password" name="pwd" class="input_pwd" placeholder="请输入密码">
                    <span class="error">文字提示</span>
                </div>


                <div class="form_group">
                    <input type="checkbox" name="remember" id="remember" class="input_check fl">
                    <label class="fl" for="remember">记住用户名</label>
                    <a href="#" class="find_pass fr">忘记密码</a>
                </div>

                <input class="input_sub" type="submit" name="" value="登 录">
            </form>

        </div>
    </div>
</div>

<div class="footer login_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>

猜你喜欢

转载自blog.csdn.net/pgg_cold/article/details/81319225
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022