web网页设计实例作业~~主题是花盆售卖网页（HTML+CSS+JavaScript）

赵小白啊

已于 2022-06-23 20:56:15 修改

阅读量742

点赞数

分类专栏： web网页设计文章标签： web javascript html5 css3 前端

于 2022-06-23 19:02:08 首次发布

本文链接：https://blog.csdn.net/m0_58089839/article/details/125432877

版权

一、先来看实现效果吧！（效果并不是很惊艳，就平平无奇啦！）

首页开头↓

首页结尾↓

二、部分源代码：

<style>
            #container{
                width:1228px;
                height: 500px;
                margin: 0 auto;
            }
            #top{
                width: 1222px;
                height: 20px;
                background-color: #e7e7e7;
            }
            #top-left{
                width: 800px;
                float: left;
            }
            #contact{
                float: left;
            }
            #top-right{
                width: 161px;
                float: right;
            }
            #nav{
                width: 1222px;
                height: auto;
                margin-top: 30px;
                line-height: 20px;
            }
            #logo{
                padding-left:40px;
                float: left;
            }
            #cnav{
                padding-left: 60px;
                padding-top: 15px;
                float: left;
                line-height: 20px;
            }
            a{
                text-decoration: none;
                color: grey;
                font-size: 16px;
            }
            a:hover{
                color: black;
                text-decoration:underline;
            }/*鼠标经过的时候文字变成了黑色并带有下划线*/
            #show1{
                padding-left:60px;
                margin-right:200px;
            }
        </style>

<body bgcolor=#F0F8FF>
        <div class="top">
           <a href="https://imgtu.com/i/XlBSq1"><img src="https://s1.ax1x.com/2022/05/30/XlBSq1.jpg" alt="XlBSq1.jpg" border="0"></a>
        </div>
        <div class="clearfix"></div> 
        <div id="container">
            <div id="top">
                <div id="top-left">&nbsp;</div>
                <div id="contact"><a href="/login">会员注册</a