制作网页

最新推荐文章于 2024-05-26 10:59:41 发布

Sunyxn

最新推荐文章于 2024-05-26 10:59:41 发布

阅读量916

点赞数 1

本文链接：https://blog.csdn.net/Sunyxn/article/details/101206566

版权

1.先创建一个html的网页，用div来完成网页的框架
代码如下：

首页

登入注册购物车

<div style="background-color: black;height: 50px;">
    <a href="#" class="menu"><font color="white">首页</font> </a>
    <a href="#" class="menu"><font color="white">手机数码</font> </a>
    <a href="#" class="menu"><font color="white">鞋靴箱包</font> </a>
    <a href="#" class="menu"><font color="white">电脑办公</font> </a>
    <a href="#" class="menu"><font color="white">香烟酒水</font> </a>

</div>

最新商品

<div style="float: left;height: 480px">
    <img src="../products/hao/big01.jpg">
</div>
<div style="float: left;height: 480px;width: 80%">
    <div style="float: left;width: 50%;height: 240px">
        <img src="../products/hao/middle01.jpg" width="100%" height="100%">
    </div>
    <div class="product">
        <img src="../products/hao/small06.jpg">
        <p>洗衣机</p>
        <p style="color: red;">$999</p>
    </div>
    <div class="product">
        <img src="../products/hao/small06.jpg">
        <p>洗衣机</p>
        <p style="color: red;">$999</p>
    </div>
    <div class="product">
        <img src="../products/hao/small06.jpg">
        <p>洗衣机</p>
        <p style="color: red;">$999</p>
    </div>
    <div class="product">
        <img src="../products/hao/small06.jpg">
        <p>洗衣机</p>
        <p style="color: red;">$999</p>
    </div>
    <div class="product">
        <img src="../products/hao/small06.jpg">
        <p>洗衣机</p>
        <p style="color: red;">$999</p>
    </div>
    <div class="product">
        <img src="../products/hao/small06.jpg">
        <p>洗衣机</p>
        <p style="color: red;">$999</p>
    </div>
    <div class="product">
        <img src="../products/hao/small06.jpg">
        <p>洗衣机</p>
        <p style="color: red;">$999</p>
    </div>
    <div class="product">
        <img src="../products/hao/small06.jpg">
        <p>洗衣机</p>
        <p style="color: red;">$999</p>
    </div>
    <div class="product">
        <img src="../products/hao/small06.jpg">
        <p>洗衣机</p>
        <p style="color: red;">$999</p>
    </div>

</div>

关于我们关于我们关于我们关于我们关于我们关于我们

结果如图： ![在这里插入图片描述](https://img-blog.csdnimg.cn/2019092315101077.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bnl4bg==,size_16,color_FFFFFF,t_70) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190923151029842.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bnl4bg==,size_16,color_FFFFFF,t_70)