掛號平臺首頁開發（靜態頁面部分）-有解無憂

1、首先是設計稿

2、然后使用PxCook進行尺寸標注

3、字體資訊去PS里看

4、首頁框架代碼撰寫

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="top" id="top">
        <div class="wrap">
        </div>
    </div>

    <div class="header" id="header">
        <div class="wrap">
        </div>
    </div>

    <div class="nav" id="nav">
        <div class="wrap">
        </div>
    </div>

    <div class="banner" id="banner">
        <div class="wrap">
            <div class="banner-slide" id="banner-slide"></div>
            <div class="banner-search" id="banner-search"></div>
            <div class="banner-help" id="banner-help"></div>
        </div>
    </div>

    <div class="content" id="content">
        <div class="wrap">
            <div class="content-tab" id="content-tab"></div>
            <div class="content-news" id="content-news"></div>
            <div class="content-stop" id="content-stop"></div>
        </div>
    </div>

    <div class="footer" id="footer">
        <div class="wrap">
        </div>
    </div>
</body>
</html>

style.css

*{
    margin:0;
    padding:0;
    border:none;
}

body{
    color:#8a8a8a;
}

ul{
    list-style:none;
}

a{
    text-decoration: none;
}

.top{
    width:100%;
    height:36px;
    background-color: #f5f5f5;
}

.wrap{
    width:1000px;
    margin:0 auto;
    position: relative;
}

.header{
    width:100%;
    height:97px;
}

.nav{
    width:100%;
    height:35px;
    background-color: #60bff2;
}

.banner{
    width:100%;
    height:424px;
    background-color: #f5f5f5;
    background-color: #fff;
}

.banner-slide{
    width:544px;
    height:416px;
    margin:8px 8px 0 197px;
    float: left;    
    background-color: #8fe1f6;
}

.banner-search{
    width:250px;
    height:253px;
    float:right;
    background-color: #fafafa;
    margin-top:8px;
}

.banner-help{
    width:250px;
    height:148px;
    float:right;
    background-color: #fafafa;
    margin-top:13px;
}

.content{
    width:100%;
    height:493px;
    background-color: #fff;
    margin-top:8px;
}

.content-tab{
    width:738px;
    height:493px;
    border:1px solid #f4f6fa;
    float: left;
}

.content-news,
.content-stop{
    width:250px;
    height:238px;
    border:1px solid #f4f6fa;
    float: right;
    margin-left:8px;
}

.content-stop{
    margin-top:11px;
}

.footer{
    width:100%;
    height:62px;
    line-height:62px;
    background-color: #eceef2;
    margin-top:42px;
}

效果圖

5、靜態頁面基本樣式撰寫

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="base.css">
</head>
<body>
    <div class="top" id="top">
        <div class="wrap">
            <p class="call">010-114/116114電話預約</p>
            <p class="welcome">
                歡迎來到城市掛號預約統一平臺&nbsp;請&nbsp;&nbsp;
                <a href="">登錄</a>&nbsp;&nbsp;
                <a href="">注冊</a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="">幫助中心</a>
            </p>
        </div>
    </div>

    <div class="header" id="header">
        <div class="wrap">
            <a href="" class="header-logo">
                <img src="img/logo.png">
            </a>
            <div class="header-search"></div>
        </div>
    </div>

    <div class="nav" id="nav">
        <div class="wrap">
            <div class="nav-item nav-item-special" id="nav-item">
                全部科室
                <div class="nav-item-list" id="nav-item-list"></div>
            </div>

            <a href="" class="nav-item">按醫院掛號</a>
            <a href="" class="nav-item">按科室掛號</a>
            <a href="" class="nav-item">按疾病掛號</a>
            <a href="" class="nav-item">最新公告</a>
            <a href="" class="nav-item right">社會知名醫院</a>
        </div>
    </div>

    <div class="banner" id="banner">
        <div class="wrap">
            <div class="banner-slide" id="banner-slide"></div>
            <div class="banner-search" id="banner-search">
                <div class="caption"><span class="caption-order">快速預約</span></div>
                <form class="banner-search-form">
                    <div class="line">
                        <select name="area" id="area">
                            <option value="">醫院地區</option>
                        </select>
                    </div>
                    <div class="line">
                        <select name="level" id="level">
                            <option value="">醫院等級</option>
                        </select>
                    </div>
                    <div class="line">
                        <select name="name" id="name">
                            <option value="">醫院名稱</option>
                        </select>
                    </div>
                    <div class="line">
                        <select name="depa" id="depa">
                            <option value="">醫院科室</option>
                        </select>
                    </div>
                </form>
                <div class="submit">
                    <input type="submit" value="快速查詢">
                </div>
            </div>
            <div class="banner-help" id="banner-help">
                <div class="caption"><span class="caption-order">幫助中心</span></div>
                <a href="" class="link">賬號指南</a>
                <a href="" class="link">預約指南</a>
                <a href="" class="link">賬號找回</a>
                <a href="" class="link">常見問題</a>
            </div>
        </div>
    </div>

    <div class="content" id="content">
        <div class="wrap">
            <div class="content-tab" id="content-tab">
                <div class="caption">
                    <a href="" class="item item_current">醫院</a>
                    <a href="" class="item">科室</a>
                </div>
                <div class="block">
                    <div class="item">
                        <div class="block-caption">
                            <a href="" class="current">全部</a>
                            <a href="">東城區</a>
                            <a href="">西城區</a>
                            <a href="">朝陽區</a>
                            <a href="">豐臺區</a>
                            <a href="">石景山區</a>
                            <a href="">海淀區</a>
                            <a href="">門頭溝區</a>
                            <a href="">房山區</a>
                            <a href="">其他</a>
                        </div>
                        <div class="block-content">
                            <!-- 醫院串列 -->
                            <div class="block-list">
                                <div class="block-list-item">
                                    <img src="img/hospital-1.jpg" class="block-list-item-img">
                                    <p class="block-list-item-title">
                                        北京協和醫院<span class="level">【三級甲等】</span>
                                    </p>
                                    <div class="block-list-item-phone">電話：東院咨詢臺 010-69155564</div>
                                    <div class="block-list-item-address">地址：【東院】北京市東城區帥富元一號【西苑】北京市西城區大木倉...</div>
                                </div>
                                <div class="block-list-item">
                                    <img src="img/hospital-1.jpg" class="block-list-item-img">
                                    <p class="block-list-item-title">
                                        北京協和醫院<span class="level">【三級甲等】</span>
                                    </p>
                                    <div class="block-list-item-phone">電話：東院咨詢臺 010-69155564</div>
                                    <div class="block-list-item-address">地址：【東院】北京市東城區帥富元一號【西苑】北京市西城區大木倉...</div>
                                </div>
                                <div class="block-list-item">
                                    <img src="img/hospital-1.jpg" class="block-list-item-img">
                                    <p class="block-list-item-title">
                                        北京協和醫院<span class="level">【三級甲等】</span>
                                    </p>
                                    <div class="block-list-item-phone">電話：東院咨詢臺 010-69155564</div>
                                    <div class="block-list-item-address">地址：【東院】北京市東城區帥富元一號【西苑】北京市西城區大木倉...</div>
                                </div>
                                <div class="block-list-item">
                                    <img src="img/hospital-1.jpg" class="block-list-item-img">
                                    <p class="block-list-item-title">
                                        北京協和醫院<span class="level">【三級甲等】</span>
                                    </p>
                                    <div class="block-list-item-phone">電話：東院咨詢臺 010-69155564</div>
                                    <div class="block-list-item-address">地址：【東院】北京市東城區帥富元一號【西苑】北京市西城區大木倉...</div>
                                </div>
                            </div>
                            <!-- 醫院文案串列 -->
                            <div class="block-text-list">
                                <a href="" class="block-text-list-item">中國醫學科學院腫瘤醫院<span class="level">【三級甲等】</span></a>
                                <a href="" class="block-text-list-item">中國醫學科學院腫瘤醫院<span class="level">【三級甲等】</span></a>
                                <a href="" class="block-text-list-item">中國醫學科學院腫瘤醫院<span class="level">【三級甲等】</span></a>
                                <a href="" class="block-text-list-item">中國醫學科學院腫瘤醫院<span class="level">【三級甲等】</span></a>
                                <a href="" class="block-text-list-item">中國醫學科學院腫瘤醫院<span class="level">【三級甲等】</span></a>
                                <a href="" class="block-text-list-item">中國醫學科學院腫瘤醫院<span class="level">【三級甲等】</span></a>
                            </div>
                            <a class="block-more">更多醫院</a>
                        </div>
                    </div>
                    <div class="item">

                    </div>
                </div>
            </div>
            <div class="content-news" id="content-news">
                <div class="caption">最新公告<a href="" class="more">| 更多</a></div>
                <div class="list">
                    <a href="" class="link">醫院特需門診暫停更新號源...</a>
                    <a href="" class="link">醫院特需門診暫停更新號源...</a>
                    <a href="" class="link">醫院特需門診暫停更新號源...</a>
                    <a href="" class="link">醫院特需門診暫停更新號源...</a>
                    <a href="" class="link">醫院特需門診暫停更新號源...</a>
                    <a href="" class="link">醫院特需門診暫停更新號源...</a>
                </div>
            </div>
            <div class="content-stop" id="content-stop">
                <div class="caption">停診公告<a href="" class="more">| 更多</a></div>
                <div class="list">
                    <a href="" class="link">醫院特需門診暫停更新號源...</a>
                    <a href="" class="link">醫院特需門診暫停更新號源...</a>
                    <a href="" class="link">醫院特需門診暫停更新號源...</a>
                    <a href="" class="link">醫院特需門診暫停更新號源...</a>
                    <a href="" class="link">醫院特需門診暫停更新號源...</a>
                    <a href="" class="link">醫院特需門診暫停更新號源...</a>
                </div>
            </div>
        </div>
    </div>

    <div class="footer" id="footer">
        copyright&copy;2020cyy
    </div>
</body>
</html>

在之前的 style.css 中統一設定 select 和 input 的邊框

select,input{
    border:none;
    outline: none;
}

base.css

/*top模塊*/
.top p{
    display: inline-block;
    font-size:13px;
    line-height:36px;
}
.top .call{
    float: left;
    background:url(img/icon-call.png) no-repeat center left;
    text-indent: 20px;
}
.top .welcome{
    float:right;
}
.top .welcome a{
    color:#60bff2;
}

/*header模塊*/
.header-logo{
    display: inline-block;
    width:474px;
    height:97px;
    margin-left:-20px;
}
.header-logo img{
    width:100%;
    height:100%;
}
.header-search{
    width:323px;
    height:42px;
    background-color: #fec009;
    display: inline-block;
    position: absolute;
    right:0;
    top:20px;
}

/*nav模塊*/
.nav-item{
    display: inline-block;
    color:#fff;
    line-height:35px;
    margin-right:25px;
}
.nav-item-special{
    width:189px;
    background-color: #1fa4f0;
    text-align: center;
    position: relative;
}
.nav-item-list{
    position: absolute;
    top:34px;
    left:0;
    height:425px;
    width:100%;
    background-color: #1fa4f0;
}
.right{
    float: right;
    margin-right:0;
}

/*banner模塊*/
.banner-search .caption,
.banner-help .caption{
    color:#fec009;
    height:23px;
    margin:15px 0;
    text-align: center;    
}
.banner-search .caption-order,
.banner-help .caption-order{
    background:url(img/icon-help.png) no-repeat 0 0;
    text-indent:25px;
    display: inline-block;
}
.banner-search-form{
    width:170px;
    margin:0 auto;
}
.banner-search-form .line{
    width:100%;
    height:26px;
    line-height:24px;
    margin-bottom:10px;
    border:1px solid #c6c6c6;
    border-radius:5px;
    padding:0 5px;
}
.banner-search-form .line select{
    width:100%;
    color:#696969;
}
.submit{
    text-align: center;
}
.submit input{
    width:108px;
    height:34px;
    line-height: 34px;
    text-align: center;
    background-color: #fec009;
    border-radius:5px;
    color:#fff;
}
.banner-help .caption{
    color:#60bff2;
}
.banner-help .caption-order{
    background-position: 0 -24px;
}
.banner-help .link{
    color:#60bff2;
    display: block;
    float:left;
    width:72px;
    height:34px;
    padding-left:38px;
}

/*content模塊*/
.content-news .caption,
.content-stop .caption{
    width:250px;
    height:40px;
    line-height:40px;
    color:#fec009;
    text-indent:17px;
    background-color: #f4f6fa;
}
.content-stop .caption{
    color:#60bff2;
}
.content-news .more,
.content-stop .more{
    float:right;
    color:#8a8a8a;
    font-size:13px;
    padding-right:22px;
}
.content-news .list,
.content-stop .list{
    padding:15px 17px 17px 17px;
    background:url(img/list-yellow.jpg) no-repeat 18px 21px;
    text-indent: 25px;
}
.content-news .list .link,
.content-stop .list .link{
    line-height:29px;
    display: block;
    font-size:13px;
    color:#8a8a8a;
}
.content-stop .list{
    background-image:url(img/list-blue.jpg);
}
/*tab區*/
.content-tab .caption{
    height:40px;
    line-height:40px;
    background-color: #f4f6fa;
}
.content-tab .caption .item{
    display: inline-block;
    width:114px;
    height:100%;
    color:#60bff2;
    text-align: center;
}
.content-tab .caption .item.item_current{
    color:#fff;
    background-color: #60bff2;
}
.content-tab .block .item .block-caption{
    border-bottom:1px solid #f4f6fa;
    padding-left:15px;
}
.content-tab .block .item .block-caption a{
    display: inline-block;
    padding:5px 8px;
    font-size:13px;
    margin:8px 0;
    color:#8a8a8a;
}
.content-tab .block .item .block-caption a.current{
    color:#fff;
    background-color: #60bff2;
}
.block-content{
    padding-left:15px;
}
/*醫院串列*/
.block-list{
    height:270px;
}
.block-list-item{
    position: relative;
    width:350px;
    height:124px;
    float:left;
    font-size:13px;
    padding-top:15px;
    margin-right:10px;
}
.block-list-item-img{
    float:left;
    width:113px;
    height:99px;
    margin-right:5px;
}
.block-list-item-title{
    margin-top:14px;
    color:#60bff2;
}
.block-list-item-title .level{
    float: right;
    color:#8a8a8a;
}
.block-list-item-phone,
.block-list-item-address{
    line-height:19px;
    margin-top:5px;
}
/*醫院文案串列*/
.block-text-list{
    width:100%;
}
.block-text-list-item{
    display: inline-block;
    width:348px;
    height:31px;
    line-height:31px;
    float:left;
    font-size:13px;
    color:#8a8a8a;
    border-bottom:1px dashed #eceef2;
    margin-right:11px;
}
.block-text-list-item .level{
    float:right;
}
.block-more{
    color:#60bff2;
    text-align: center;
    display: inline-block;
    width:100%;
    line-height:35px;
}

/*底部模塊*/
.footer{
    text-align: center;
    line-height:62px;
    font-size:13px;
}
/*# sourceMappingURL=base.css.map */

效果圖

至此，靜態樣式大致撰寫完成

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/7119.html

標籤：jQuery

上一篇：AJAX優勢、跨域方案及JSON資料格式和瀏覽器中JSON物件

下一篇：前端——jQuery