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"> 欢迎来到城市挂号预约统一平台 请 <a href="">登录</a> <a href="">注册</a> <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©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 */
效果图
至此，静态样式大致编写完成
1570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
