仿爱打听网站首页布局(http://www.idting.com),项目结构:

    

    部分代码:

    

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>爱打听首页</title>
    <link rel="stylesheet" type="text/css"  href="aidating.css"/>
</head>
<body>
    <div class="menu">
        <div>
            <ul class="clear">
                <li><a href="#">登录|</a></li>
                <li><a href="#">免费注册</a></li>
                <li><a href="#" class="color">打听游玩|</a></li>
                <li><a href="#" class="color">游记分享|</a></li>
                <li><a href="#" class="color">景区攻略</a></li>
            </ul>
        </div>
    </div>
    <div class="top clear">
        <p class="logo"><img src="img/logo.gif" alt="logo"/></p>
        <div class="search">
        <form action="">
            <input class="text" type="text" value="请输入您想要去的目的地"/>
            <input class="btn" type="submit" value=" "/>
        </form>
        </div>
        <p class=><img src="img/erweima.gif" alt=""/></p>
    </div>
<div class="bgpic">
   <div class="menu1 clear" >
            <ul class="menu2 clear">
                <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>
                <li><a href="#" >全国商家 |</a></li>
            </ul>
       <form action="">
           <input class="text1" type="text" value="要去哪里玩?"/>
       </form>
    最终实现图: