CSS美化简单网站首页

2021-03-26 16:28

阅读:631

标签:版权   order   type   class   数码   ora   关于我   htm   注册   

DOCTYPE html>
html>
    head>
        meta charset="utf-8">
        title>网站首页美化版title>
        style>
            .top{
                float: left;
                width: 33%;
                height: 65px;
            }
            
            .amenu{
                color: white;
                text-decoration: none;
                line-height: 50px;
            }
            
            .price{
                color: red;
            }
            
            .pot{
                float: left;
                width: 16.66%;
                height: 50%;
                text-align: center;
            }
        style>
    head>
    body>
        div>
            div class="top">img src="img/6.png"/>div>
            div class="top">img src="img/5.jpg"/>div>
            div class="top" style="line-height: 50px; text-align: center;">
                a href="#">登录a>
                a href="#">注册a>
                a href="#">购物车a>
            div>
        div>
        div style="clear: both;">div>
        div style="height: 50px; background-color: black; width: 100%;">
            a href="#" class="amenu">font color="white">首页font>a>
            a href="#" class="amenu">font color="white">手机数码font>a>
            a href="#" class="amenu">font color="white">鞋靴箱包font>a>
            a href="#" class="amenu">font color="white">电脑办公font>a>
            a href="#" class="amenu">font color="white">香烟酒水font>a>
        div>
        div>
            img src="img/1.jpg" width="100%"/>
        div>
        div>
            h3>最新商品img src="img/9.jpg"/>h3>
        div>
        div style="float: left; width: 15%; height: 475px; border: 1px;">
            img src="img/3.jpg" width="100%" height="100%"/>
        div>
        div style="float: left; width: 85%; height: 475px;">
            div style="float: left; width: 50%; height: 50%;">
                img src="img/7.jpg" width="100%" height="100%"/>
            div>
            div class="pot">
                img src="img/8.jpg"/>
                p>p>
                p class="price">¥99p>
            div>
            div class="pot">
                img src="img/8.jpg"/>
                p>p>
                p class="price">¥99p>
            div>
            div class="pot">
                img src="img/8.jpg"/>
                p>p>
                p class="price">¥99p>
            div>
            div class="pot">
                img src="img/8.jpg"/>
                p>p>
                p class="price">¥99p>
            div>
            div class="pot">
                img src="img/8.jpg"/>
                p>p>
                p class="price">¥99p>
            div>
            div class="pot">
                img src="img/8.jpg"/>
                p>p>
                p class="price">¥99p>
            div>
            div class="pot">
                img src="img/8.jpg"/>
                p>p>
                p class="price">¥99p>
            div>
            div class="pot">
                img src="img/8.jpg"/>
                p>p>
                p class="price">¥99p>
            div>
            div class="pot">
                img src="img/8.jpg"/>
                p>p>
                p class="price">¥99p>
            div>
        div>
        div style="clear: both;">div>
        div>
            img src="img/2.jpg" width="100%"/>
        div>
        div>
            h3>热门商品img src="img/9.jpg"/>h3>
        div>
        div style="float: left; width: 15%; height: 475px; border: 1px;">
            img src="img/3.jpg" width="100%" height="100%"/>
        div>
        div style="float: left; width: 85%; height: 475px;">
            div style="float: left; width: 50%; height: 50%;">
                img src="img/7.jpg" width="100%" height="100%"/>
            div>
            div class="pot">
                img src="img/8.jpg"/>
                p>p>
                p class="price">¥99p>
            div>
            div class="pot">
                img src="img/8.jpg"/>
                p>p>
                p class="price">¥99p>
            div>
            div class="pot">
                img src="img/8.jpg"/>
                p>p>
                p class="price">¥99p>
            div>
            div class="pot">
                img src="img/8.jpg"/>
                p>p>
                p class="price">¥99p>
            div>
            div class="pot">
                img src="img/8.jpg"/>
                p>p>
                p class="price">¥99p>
            div>
            div class="pot">
                img src="img/8.jpg"/>
                p>p>
                p class="price">¥99p>
            div>
            div class="pot">
                img src="img/8.jpg"/>
                p>p>
                p class="price">¥99p>
            div>
            div class="pot">
                img src="img/8.jpg"/>
                p>p>
                p class="price">¥99p>
            div>
            div class="pot">
                img src="img/8.jpg"/>
                p>p>
                p class="price">¥99p>
            div>
        div>
        div style="clear: both;">div>
        div>
            img src="img/4.jpg"/ width="100%">
        div>
        div style="text-align: center;">
            a href="#">关于我们a>
            a href="#">联系我们a>
            a href="#">招贤纳士a>
            a href="#">法律声明a>
            a href="#">友情链接a>
            a href="#">支付方式a>
            a href="#">配送方式a>
            a href="#">服务声明a>
            a href="#">广告声明a>
            br/>
            Copyright © 2005-2016 传智商城 版权所有
        div>
    body>
html>

技术图片

 

CSS美化简单网站首页

标签:版权   order   type   class   数码   ora   关于我   htm   注册   

原文地址:https://www.cnblogs.com/yxfyg/p/12637229.html


评论


亲,登录后才可以留言!