1. 技术文章
  2. 挂号平台首页开发（静态页面部分）

挂号平台首页开发（静态页面部分）

由 天涯浪子 提交于 2020-02-19 19:23:33

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 */

效果图

 

至此，静态样式大致编写完成

 

标签
line-height
静态页面
background
link
广告条
top
select
margin
display
block
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!