CSS美化简单网站首页

喜夏-厌秋 提交于 2020-04-05 17:22:41
<!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>

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!