项目练习——豆瓣首页静态页面

由于代码过长，就不全部展示，只展示部分关键代码

首页头部和横幅区域HTML代码：

    <div class="henfu">
        <div class="nav clearfix">
            <div class="douban_logo float-left">
                <h1 class="display-none">豆瓣网</h1>
            </div>
            <form class="search float-left">
                <input type="text" placeholder="书籍、电影、音乐、小组、小站、成员">
                <button class="search_logo iconfont icon-sousuo">
                    <div class="display-none">搜索</div>
                </button>
            </form>
            <div class="read_nav float-right">
                <a href="">
                    <span class="display-none">读书</span> 
                </a>
                <a href="">
                    <span class="display-none">电影</span>
                </a>
                <a href="">
                    <span class="display-none">音乐</span> 
                </a>
                <a href="">
                    <span class="display-none">同城</span>
                </a>
                <a href="">
                    <span class="display-none">小组</span>
                </a>
                <a href="">
                    <span class="display-none">阅读</span>    
                </a>
                <a href="">
                    <span class="display-none">FM</span>   
                </a>
                <a href="">
                    <span class="display-none">时间</span>
                </a>
                <a href="">
                    <span class="display-none">豆品</span>
                </a>
            </div>

        </div>
        <div class="login">
            <div class="app_login">
                <form class="login_reg float-right">
                    <iframe src="./loginiframe.html" frameborder="0"></iframe>
                </form>
                <div class="app float-right">
                    <h2>豆瓣 7.0</h2>
                    <div class="download_app">
                        <a class="float-left" href="">下载豆瓣 App</a>
                        <img class="app_logo_png float-left" src="./img/app_logo.png" alt="">
                        <div class="erweima">
                            <div class="app-erweima">
                                <img class="download-erweima" src="./img/doubanapp_qrcode.png" alt="">
                                <span class="title">iOS/Android 扫码直接下载</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

横幅区域CSS代码：

/* 横幅区域开始 */
.henfu{
    height: 361px;
    margin-bottom: 25px;
}

.henfu .nav{
    width: 1080px;
    margin: 0 auto;
    margin-bottom: 25px;
}

.henfu .nav .douban_logo{
    background:url(../img/sitename.png) no-repeat;
    width: 73px;
    height: 24px;
    background-size: contain;
    margin-top: 4px;
    margin-right: 27px;
}

.henfu .nav .search{
    position: relative;
    width: 270px;
    height: 30px;
    border:1px solid #c3c3c3;
}

.henfu .nav .search input[type="text"]{
    font-size: 13px;
    width: 240px;
    height: 20px;
    padding: 5px;
}

.henfu .nav .search input[type="text"]::placeholder{
    color: #c3c3c3;
}

.henfu .nav .search .search_logo{
    position: absolute;
    height: 20px;
    line-height: 20px;
    top:0;
    bottom: 0;
    right: 6px;
    margin: auto 0;
    color: #c3c3c3;
    font-weight: bold;
}

.henfu .nav .read_nav{
    margin-top: 2px;
}

.henfu .nav .read_nav a{
    float: left;
    width: 42px;
    height: 29px;
    margin-right: 14px;
    background:url(../img/anony_nav_logo.png) no-repeat;
    background-size: 470px;
    background-position: 0 5px;

}
.henfu .nav .read_nav a:nth-child(2){
    background-position-x: -60px;
}

.henfu .nav .read_nav a:nth-child(3){
    background-position-x: -121px;
}

.henfu .nav .read_nav a:nth-child(4){
    background-position-x: -304px;
}

.henfu .nav .read_nav a:nth-child(5){
    background-position-x: -183px;
}

.henfu .nav .read_nav a:nth-child(6){
    background: url(../img/ic_read_home_nav@.png) no-repeat;
    background-size: 41px;
    background-position: 2px 5px;
}

.henfu .nav .read_nav a:nth-child(7){
    background-position-x: -245px;

}

.henfu .nav .read_nav a:nth-child(8){
    background: url(../img/time_nav_logo.png) no-repeat;
    background-size: 46px;
    background-position: -2px 2px;
}

.henfu .nav .read_nav a:nth-child(9){
    background-position-x: -428px;
}

.henfu .login{
    height: 304px;
    background: url(../img/henfu_background.jpg) no-repeat;
    background-size: contain;
    background-color: #edf4ed;
    background-position-x: 100px;
}

.henfu .login .app_login{
    position: relative;
    width: 950px;
    height: 100%;
    margin: 0 auto;
}

.henfu .login .app_login .login_reg{
    position: relative;
    width: 300px;
    height: 300px;
    box-sizing: border-box;
}

.henfu .login .app_login .login_reg iframe{
    width: 300px;
    height: 300px;
}

.henfu .login .app_login .app{
    margin: 92px auto;
    margin-right: -33px;
}

.henfu .login .app_login .app h2{
    font-size: 25px;
    margin: 7px auto;
    text-align: left;
}

.henfu .login .app_login .app .download_app{
    position: relative;
    width: 195px;
    height: 45px;
    margin-top: 8px;
}

.henfu .login .app_login .app .download_app a{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background: #00B51D;
    width: 111px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 2px;
    color: #fff;
}

.henfu .login .app_login .app .download_app .app_logo_png{
    position: absolute;
    right: 46px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 32px;
    border:1px solid #48aa0d;
    border-radius: 2px;
    box-sizing: border-box;
}

.henfu .login .app_login .app .download_app .erweima{
    background-color: #fff;
    width: 200px;
    height: 213px;
    position: absolute;
    right: -122px;
    top:6px;
    border-radius: 2px;
    z-index: 1;
    display: none;
}

.henfu .login .app_login .app .download_app .erweima .app-erweima{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin:auto auto;
    width: 160px;
    height: 180px;
    text-align: center;
    line-height: 2.1;
}

.henfu .login .app_login .app .download_app .erweima .app-erweima .download-erweima{
    height: 160px;
    width: 160px;
}

.henfu .login .app_login .app .download_app .app_logo_png:hover+.erweima{
    display: block;
}

.henfu .login .app_login .app .download_app .erweima:hover{
    display: block;
}
/* 横幅区域结束 */

登录区域部分HTML代码：

            <div class="main-1">
                <div class="login_nav clearfix">
                    <div class="duanxin-password-login selected float-left">短信登录/注册</div>
                    <div class="duanxin-password-login float-left">密码登录</div>
                </div>
                <div class="tiaoyue">
                    请仔细阅读<a href=""> 豆瓣使用协议、豆瓣个人信息保护政策</a>
                </div>
                <div class="sncode">
                    <div class="tel clearfix">
                        <select >
                            <option value="">+86</option>
                        </select>
                        <div class="area-code-choose display-none">
                            <div class="title">选择国际区号</div>
                            <ul class="clearfix">
                                <li><span class="li-selected float-left">国家名1 <i class="iconfont icon-gou"></i></span><span class="float-right">1</span></li>
                                <li><span class="float-left">国家名2</span><span class="float-right">2</span></li>
                                <li><span class="float-left">国家名3</span><span class="float-right">3</span></li>
                                <li><span class="float-left">国家名4</span><span class="float-right">4</span></li>
                                <li><span class="float-left">国家名5</span><span class="float-right">5</span></li>
                                <li><span class="float-left">国家名6</span><span class="float-right">6</span></li>
                                <li><span class="float-left">国家名7</span><span class="float-right">7</span></li>
                                <li><span class="float-left">国家名8</span><span class="float-right">8</span></li>
                                <li><span class="float-left">国家名9</span><span class="float-right">9</span></li>
                                <li><span class="float-left">国家名10</span><span class="float-right">10</span></li>
                                <li><span class="float-left">国家名11</span><span class="float-right">11</span></li>
                                <li><span class="float-left">国家名12</span><span class="float-right">12</span></li>
                                <li><span class="float-left">国家名13</span><span class="float-right">13</span></li>
                                <li><span class="float-left">国家名14</span><span class="float-right">14</span></li>
                                <li><span class="float-left">国家名15</span><span class="float-right">15</span></li>
                                <li><span class="float-left">国家名16</span><span class="float-right">16</span></li>
                                <li><span class="float-left">国家名17</span><span class="float-right">17</span></li>
                                <li><span class="float-left">国家名18</span><span class="float-right">18</span></li>
                                <li><span class="float-left">国家名19</span><span class="float-right">19</span></li>
                                <li><span class="float-left">国家名20</span><span class="float-right">20</span></li>
                                <li><span class="float-left">国家名21</span><span class="float-right">21</span></li>
                                <li><span class="float-left">国家名22</span><span class="float-right">22</span></li>
                                <li><span class="float-left">国家名23</span><span class="float-right">23</span></li>
                                <li><span class="float-left">国家名24</span><span class="float-right">24</span></li>
                                <li><span class="float-left">国家名25</span><span class="float-right">25</span></li>
                                <li><span class="float-left">国家名26</span><span class="float-right">26</span></li>
                                <li><span class="float-left">国家名27</span><span class="float-right">27</span></li>
                                <li><span class="float-left">国家名28</span><span class="float-right">28</span></li>
                                <li><span class="float-left">国家名29</span><span class="float-right">29</span></li>
                                <li><span class="float-left">国家名30</span><span class="float-right">30</span></li>
                                <li><span class="float-left">国家名31</span><span class="float-right">31</span></li>
                                <li><span class="float-left">国家名32</span><span class="float-right">32</span></li>
                                <li><span class="float-left">国家名33</span><span class="float-right">33</span></li>
                                <li><span class="float-left">国家名34</span><span class="float-right">34</span></li>
                                <li><span class="float-left">国家名35</span><span class="float-right">35</span></li>
                                <li><span class="float-left">国家名36</span><span class="float-right">36</span></li>
                                <li><span class="float-left">国家名37</span><span class="float-right">37</span></li>
                                <li><span class="float-left">国家名38</span><span class="float-right">38</span></li>
                                <li><span class="float-left">国家名39</span><span class="float-right">39</span></li>
                                <li><span class="float-left">国家名40</span><span class="float-right">40</span></li>
                                <li><span class="float-left">国家名41</span><span class="float-right">41</span></li>
                                <li><span class="float-left">国家名42</span><span class="float-right">42</span></li>
                                <li><span class="float-left">国家名43</span><span class="float-right">43</span></li>
                                <li><span class="float-left">国家名44</span><span class="float-right">44</span></li>
                                <li><span class="float-left">国家名45</span><span class="float-right">45</span></li>
                                <li><span class="float-left">国家名46</span><span class="float-right">46</span></li>
                                <li><span class="float-left">国家名47</span><span class="float-right">47</span></li>
                                <li><span class="float-left">国家名48</span><span class="float-right">48</span></li>
                                <li><span class="float-left">国家名49</span><span class="float-right">49</span></li>
                                <li><span class="float-left">国家名50</span><span class="float-right">50</span></li>
                            </ul> 
                        </div>      
                        <input type="text" placeholder="手机号">
                    </div>
                    <div class="sncode_num">
                        <input type="text" placeholder="验证码">
                        <a href="">获取验证码</a>
                    </div>
                </div>
                <button class="button">登录豆瓣</button>
                <div class="no-snocode clearfix">
                    <a class="float-right" href="">收不到验证码</a>
                </div>
            </div>

登陆区域CSS部分代码：

@import "reset.css";
@import "common.css";
/* 通用样式 */
input[type="text"],
input[type="password"]{
    font-size: 13px;
    padding: 8px 10px;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    height: 34px;
    border:1px solid rgb(228, 230, 229);
    border-radius: 2px;
    margin-bottom: 10px;
    line-height: 34px;
}

a{
    color: #41ac52;
}
/* 结束通用样式 */
.iframe{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 300px;
    width: 300px;
    box-sizing: border-box;
}

.qrcode{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 300px;
    height: 270px;
    box-sizing: border-box;
    text-align: center;
}

.qrcode .title{
    width: 280px;
    height: 25px;
    box-sizing: border-box;
    margin-bottom: 20px;
    border-bottom: 1px solid #ececec;
    text-align: left;
}

.qrcode img{
    width: 170px;
    height: 170px;
    font-size: 0;
}

.qrcode .tip{
    border-radius:20px ;
    background-color: rgba(0,0,0,.08);
    font-size: 13px;
    padding: 3px 10px;
    margin-top: 10px;
    color: #494949
}

.login_reg{
    position: relative;
    width: 300px;
    height: 300px;
    box-sizing: border-box;
}

.login_reg header{
    position: absolute;
    top: 0;
    right: 0;
}

.login_reg{
    padding: 0 10px 10px 10px;
}

.login_reg header img{
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.login_reg header .title{
    position: absolute;
    width: 66px;
    color: #666;
    height: 20px;
    font-size: 13px;
    top: 10px;
    right: 50px;
    border: 1px solid rgba(66,189,86,.3);
    border-radius: 3px;
    text-align: center;
    background-color: #f5faf9;
    padding: 3px 5px;
}

.login_reg header .duanxin-login{
    width: 90px;
}

.login_reg header .img-1:hover~.saoma-login{
    display: block;
}

.login_reg header .img-2:hover~.duanxin-login{
    display: block;
}

最终效果图：

项目总结

1. 无论做什么项目，一定要摆正心态，注意思考，慢慢来注重细节。
2. 注释一定要写清楚，这是必不可少的。
3. 将重复使用的样式可以放在一个通用样式css文件里，通过导入这个文件来使用样式。这样子可以方便后期页面的维护。
4. 将要提交数据的元素外面套一个表单元素form这样方便后面使用js来提交数据。
5. 区域划分必不可少，每一块区域开始时要先分析一下区域的具体划分。
6. 如果一个区域在别的网页也会使用到，样式设置较多，那么可以将这块区域单独做成一个网页，在通过iframe元素将这块区域导入到别的网页里。
7. 遇到多栏布局时，注意创建BFC区域来避开浮动区域。
8. 如果要将图片横向排列的话，用浮动来做的话，容器里的文字多少会撑开容器，最终导致浮动样式不正常，因此设置图片的容器为行块盒并设置vertical-align:top即朝上对齐，缺点是在图片区域会有白边。
9. 浮动元素都是块盒。
10.box-shadow：x方向长度 y方向长度 阴影模糊程度（单位px）扩散范围（单位px）；//用于盒子边边的阴影设置的css3属性。