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"> 欢迎来到城市挂号预约统一平台 请 a href="">登录a>>注册 >帮助中心="" 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©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 */
效果图
至此,静态样式大致编写完成