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

1、首先是设计稿

2、然后使用PxCook进行尺寸标注

3、字体信息去PS里看

4、首页框架代码编写

index.html

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

    ="header"="header"="nav"="nav"="banner"="banner">
            ="banner-slide"="banner-slide"></="banner-search"="banner-search"="banner-help"="banner-help"="content"="content"="content-tab"="content-tab"="content-news"="content-news"="content-stop"="content-stop"="footer"="footer"html>

style.css

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

body{
    color:#8a8a8a;
}

ul{
    list-style:

a{
    text-decoration: none;
}

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

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

.header{97px;
}

.nav{35px; #60bff2;
}

.banner{424px; #f5f5f5; #fff;
}

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

.banner-search{250px;253px;right; #fafafa;
    margin-top:8px;
}

.banner-help{148px;13px;
}

.content{493px; #fff;

.content-tab{738px;1px solid #f4f6fa; left;
}

.content-news,.content-stop{238px; right;
    margin-left:

.content-stop{11px;
}

.footer{62px;
    line-height: #eceef2;42px;
}

效果图

5、静态页面基本样式编写

index.html

="base.css"p ="call">010-114/116114电话预约p="welcome">
                欢迎来到城市挂号预约统一平台&nbsp;请&nbsp;&nbsp;
                a href="">登录a>>注册&nbsp;&nbsp;&nbsp;&nbsp;
                >帮助中心="" class="header-logo">
                img src="img/logo.png"="header-search"="nav-item nav-item-special"="nav-item"
                全部科室
                ="nav-item-list"="nav-item-list">

            >按医院挂号>按科室挂号>按疾病挂号>最新公告="nav-item right">社会知名医院="caption"><span ="caption-order">快速预约spanform ="banner-search-form">
                    ="line">
                        select name="area"="area">
                            option value>医院地区optionselect="level"="level">医院等级="name"="name">医院名称="depa"="depa">医院科室form="submit"input type="submit" value="快速查询"="link">账号指南>预约指南>账号找回>常见问题="item item_current">医院="item">科室="block"="block-caption"="current">全部>东城区>西城区>朝阳区>丰台区>石景山区>海淀区>门头沟区>房山区>其他="block-content"<!-- 医院列表 -->
                            ="block-list">
                                ="block-list-item">
                                    ="img/hospital-1.jpg"="block-list-item-img"="block-list-item-title"
                                        北京协和医院>【三级甲等】="block-list-item-phone">电话：东院咨询台 010-69155564="block-list-item-address">地址：【东院】北京市东城区帅富元一号【西苑】北京市西城区大木仓... 医院文案列表 ="block-text-list"="block-text-list-item">中国医学科学院肿瘤医院="block-more">更多医院>

                    ="more">| 更多="list">医院特需门诊暂停更新号源...>停诊公告
        copyright&copy;2020cyy
    >

在之前的 style.css 中统一设置 select 和 input 的边框

select,input{none;
    outline: none;
}

base.css

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

header模块
.header-logo{474px;97px;-20px;
}
.header-logo img{100%;
}
.header-search{323px;42px; #fec009; absolute;
    right:
    top:20px;
}

nav模块
.nav-item{#fff;
    margin-right:25px;
}
.nav-item-special{189px; #1fa4f0;
    text-align: center;
.nav-item-list{34px;
    left:425px; #1fa4f0;
}
.right{0;
}

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

content模块
.content-news .caption,.content-stop .caption{40px;17px; #f4f6fa;
}
.content-stop .caption{
.content-news .more,.content-stop .more{#8a8a8a;
    padding-right:22px;
}
.content-news .list,.content-stop .list{15px 17px 17px 17px;url(img/list-yellow.jpg) no-repeat 18px 21px; 25px;
}
.content-news .list .link,.content-stop .list .link{29px;
.content-stop .list{
    background-image:url(img/list-blue.jpg);
}
tab区
.content-tab .caption{
.content-tab .caption .item{114px;
.content-tab .caption .item.item_current{
.content-tab .block .item .block-caption{
    border-bottom:15px;
}
.content-tab .block .item .block-caption a{5px 8px;8px 0;
.content-tab .block .item .block-caption a.current{
.block-content{15px;
}
医院列表
.block-list{270px;
}
.block-list-item{ relative;350px;124px;
    padding-top:15px;10px;
}
.block-list-item-img{113px;99px;5px;
}
.block-list-item-title{14px;
.block-list-item-title .level{
.block-list-item-phone,.block-list-item-address{19px;5px;
}
医院文案列表
.block-text-list{
.block-text-list-item{348px;31px;1px dashed #eceef2;
.block-text-list-item .level{
.block-more{35px;
}

底部模块
.footer{13px;
}
# sourceMappingURL=base.css.map */

效果图

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

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

相关推荐