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

效果图

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

挂号平台首页开发（静态页面部分）相关推荐

  1. HTML5响应式手机模板：电商网站设计——歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板 企业手机网站模板...

    HTML5响应式手机模板:电商网站设计--歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板 企业手机网站模板 手机网站模板 手机模板 响应式手机网站 ht ...

  2. HTML5响应式手机模板：电商网站设计——歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板 企业手机网站模板

    HTML5响应式手机模板:电商网站设计--歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板 企业手机网站模板 手机网站模板 手机模板 响应式手机网站 ht ...

  3. [html] 开发静态页面时，不依赖node相关的工具，如何提取出公共部分并引入？

    [html] 开发静态页面时,不依赖node相关的工具,如何提取出公共部分并引入? 比如我现在有一个index.html,如果要在其中html中引入html的话,我们假设该组件为modal.html, ...

  4. HTMLCSS仿京东首页制作静态页面总结

    目录 一.网站优化三大标签:title(网站标题),description(网站说明),Keywords(网站关键词) 二.favicon图表的使用 三.字体图标的使用 四.base.css和comm ...

  5. 折800首页的静态页面

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 用phpcms如何将静态页面制作成企业网站（上）

    首先,先要准备好这个静态网页的源文件,如图 bs里面是一些css和js的文件,img则是放图片的,文件中的index是网页的首页 运行一下,看看 是这样的 然后打开phpcms文件,上篇博客中有提到, ...

  7. 前端HTML5+CSS3静态页面开发-京东首页

    前端html5+css3静态页面开发-京东首页 项目介绍 (1)京东首页项目由html + css 布局完成页面,对前端基础知识的入门及掌握有非常好的提升效果,本项目旨在教授HTML和CSS的基础知识 ...

  8. Day210.服务端渲染技术NUXT、整合前台主页面、名师、课程静态页面、首页整合banner数据后端部分【创建banner微服务、接口、banner后台前端实现】 -谷粒学院

    谷粒学院 服务端渲染技术NUXT 一.服务端渲染技术NUXT 1.什么是服务端渲染 服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容,而不是在客户端通过AJAX获 ...

  9. gulp+PC前端静态页面项目开发

    前言: 现在单页面很流行,但是在 PC 端多页面还是常态,所以构建静态页面的工具还有用武之地 gulp构建前言: 如今我们开发web网页的方式主要有几种,使用vue-cli.create-react- ...

最新文章

  1. python json提取器_【编号0004】爬虫中常用到的数据提取手段
  2. 安装启动gui卡住_为什么Windows 10升级安装卡住了，原因在这
  3. Cpp 对象模型探索 / 带有虚继承类的构造函数的调用顺序
  4. Spark Streaming 实战案例（四) Spark Streaming 缓存、Checkpoint机制
  5. Linux QoS实现框架：函数调用流程图
  6. 如果测试没有梦想，那跟咸鱼有什么区别？
  7. 从链表中删除数据的时间复杂度真的是O(1)吗？
  8. P2419 [USACO08JAN]牛大赛Cow Contest
  9. 农业银行数据库最佳实践和发展规划
  10. pytorch学习笔记（二十）：Padding-And-Strides
  11. ASP.NET MVC 2 正式版发布了的
  12. Elasticsearch: 配置文件详解
  13. 太阳能充电调节代码_储能管理系统对于充电站的作用
  14. mysql获取多张表中的数据_mysql – 从具有递归关系的两个表中获取数据
  15. ora-28500 ora-02063 mysql_ORA-01017/ORA-02063 DbLink建立错误问题分析及解决
  16. 计算机教案word格式模板,大学授课教案模板Word格式
  17. 处理器后面的字母含义_CPU后面的数字和字母都是什么意思？全面解答。
  18. python re search match_简诉Python Re模块中re.search和re.match的区别
  19. 三，java流程控制常见练习题及面试题
  20. 基于HMM的拼音转汉字程序

热门文章

  1. 频繁加班，你还能坚持多久
  2. 如何计算方阵的特征值和特征向量np.linalg.eig()
  3. matlab最简矩阵,Matlab将一般矩阵变换为行最简矩阵
  4. 深思数盾使用脚本加密（加壳）踩的坑
  5. 关于 数据可视化、Canvas
  6. 亲测好用的智能手写笔记软件GoodNotes 5（支持big sur、适配M1芯片）
  7. vim配置文件（分享两篇）——vimrc
  8. 【蓝桥杯集训100题】scratch加减大师 蓝桥杯scratch比赛专项预测编程题 集训模拟练习题第10题
  9. Oracle数据库查询语句
  10. 跨平台应用开发进阶(三十五) ：Android权限列表permission说明