利用html和CSS制作的鲜花市场首页

顶部区域为一个导航条，导航条上是多个超链接，当鼠标悬停时字体会发生颜色改变。
广告区域可分为三个部分，一个是上部导航条，当鼠标悬停时，底部会出现边框，中部则放了一张和网页同宽的图片，底部是三个视频图片，鼠标悬停会有播放键动画。
内容部分的动画也都是用动画制作出来的效果。
底部则是用得ul和li，让li浮动，垂直居中排列，li中则是几个超链接，给超链接设置背景图片。底部横线使用底部div的上边框设置。
顶部区域部分：

<div class="top">
    <div class="top_in">
        <div class="top_left">
            <h1>
                <a href="#" title="鲜花"></a>
            </h1>
        </div>
        <div class="top_right">
            <ul class="top_nav">
                <li><a href="#">首页</a></li>
                <li><a href="#">商城</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">应用</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">体验店</a></li>
            </ul>
            <ul class="top_login">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li></li>
            </ul>
        </div>
    </div>
</div>

广告区域：

<div class="banner">
    <div class="nav_out">
        <div class="nav">
            <ul>
            <li><a href="#">
                <img src="images/xh1.png">
                <p>珍珠雪山
                    <span style="color: #ffcaf3">玫瑰</span>
                </p>
            </a></li>
            <li><a href="#">
                <img src="images/xh2.jpg">
                <p>白色
                    <span style="color: #ffcaf3">洋桔梗</span>
                </p>
            </a></li>
            <li><a href="#"><img src="images/xh3.jpg">
                <p>爱莎
                    <span style="color: #ffcaf3">玫瑰</span>
                </p>
            </a></li>
            <li><a href="#"><img src="images/xh4.jpg">
                <p>粉色
                    <span style="color: #ffcaf3">洋桔梗</span>
                </p>
            </a></li>
            <li><a href="#"><img src="images/xh5.jpg">
                <p>粉佳人
                    <span style="color: #ffcaf3">玫瑰</span>
                </p>
            </a></li>
            <li><a href="#"><img src="images/xh6.jpg">
                <p>粉佳人
                    <span style="color: #ffcaf3">捧花</span>
                </p>
            </a></li>
            <li><a href="#"><img src="images/xh7.jpg">
                <p>粉红雪山
                    <span style="color: #ffcaf3">玫瑰</span>
                </p>
            </a></li>
        </ul>
        </div>

    </div>
    <div class="figure">
        <img src="images/huahua4.jpg">
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <div class="video">
        <ul>
            <li><img src="images/h1.jpg">
                <div class="video_info">
                    <img src="images/bfj.png">
                    <h3>樱花</h3>
                    <p>视频</p>
                </div>
            </li>
            <li><img src="images/h3.jpg">
                <div class="video_info">
                    <img src="images/bfj.png">
                    <h3>粉色</h3>
                    <p>视频</p>
                </div>
            </li>
            <li><img src="images/h2.jpg">
                <div class="video_info">
                    <img src="images/bfj.png">
                    <h3>玫瑰</h3>
                    <p>视频</p>
                </div>
            </li>
        </ul>
    </div>
</div>

最后效果静态图：