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

CSS美化简单网站首页

时间:2020-04-05 15:26:38      阅读:406      评论:0      收藏:0      [点我收藏+]

标签:版权   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">¥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p></p>
                <p class="price">¥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p></p>
                <p class="price">¥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p></p>
                <p class="price">¥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p></p>
                <p class="price">¥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p></p>
                <p class="price">¥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p></p>
                <p class="price">¥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p></p>
                <p class="price">¥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p></p>
                <p class="price">¥99</p>
            </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">¥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p></p>
                <p class="price">¥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p></p>
                <p class="price">¥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p></p>
                <p class="price">¥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p></p>
                <p class="price">¥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p></p>
                <p class="price">¥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p></p>
                <p class="price">¥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p></p>
                <p class="price">¥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p></p>
                <p class="price">¥99</p>
            </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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!