实战项目：医院挂号网
一.准备工作
1.1 切图工具
工具：Photoshop
①修改设置：
1.首选项-》暂存盘-》选择c盘以外的其他盘
2.首选项-》单位与标尺 -》标尺和文字都改为像素
②预设：打开这五个视图
1.工具
2.标尺
3.图层
4.信息
5.字符
③切图的优化
1.颜色代替图片
2.雪碧图的制作：多张图片放在一张图片上（因为网页加载图片会浪费很多时间）
3.字体图标的使用
4.辅助工具
MarkDown
TinyPNG
前端自动化
1.2 第一步：需求分析
1.3 第二步：界面设计
1.3.1 首页标注（尺寸，颜色）
1.3.2 设计和交互
例如下图，点击下拉框，显示选项
标记图如下（可能还不全）：用的是PxCook
1.4 第三步：开发，用的是VSCode
ps:https://blog.csdn.net/major_zhang/article/details/79330205
vscode在浏览器中打开html页面
二、 开始开发
2.1 首页 页面框架代码编写
2.1.1 top header
当需要使用通用的宽度时，用class=wrap的div包裹 :水平居中的常见方式
为了让盒子中的文字不紧靠在浏览器的左侧：
使用该样式 Margin:0 auto;左右外边距自动设置。
2.1.2 banner
只要看slidder的宽度即可，因为左边的导航栏是属于header导航条的内容，所以banner中最左边的就是slider，设置好对应的padding值：9px 0 0 198px；
根据标注图设置banner-search,banner-help的样式
2.1.3 content
设置为浮动和宽高背景色之后，发现content盒子的紧贴左边，其他两个盒子紧贴右边，
此时应该将content中的三个模块放入wrap盒子中，使他们与浏览器有一定的间距，也方便将来调整宽度
2.1.4 footer
常规样式设置完后，发现footer盒子没有在底部，而是跑到了content里面
找找问题的原因：
打开浏览器，检查元素
我们发现content盒子只有一行的高度，原因是content中的盒子都设置了浮动，这些盒子脱离了文档流，不占据高度，那么如何才能让这些盒子占据高度呢
解决方法:清除浮动 ，谁浮动了我们就在他的父元素进行清除
即 content里的wrap盒子
以上代码如下：
html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>城市医院预约平台</title>
<link rel="stylesheet" type="text/css" href="css/layout.css">
</head>
<body>
<div id="top" class="top">
<div class="wrap">010-1114</div>
</div>
<div id="header" class="header">
</div>
<div id="nav" class="nav">
</div>
<div id="banner" class="banner">
<div class="banner-slider"></div>
<div class="banner-search"></div>
<div class="banner-help"></div>
</div>
<div id="content" class="content">
<div class="wrap clearfix">
<div class="content-tab"></div>
<div class="content-news"></div>
<div class="content-close"></div>
</div>
</div>
<div id="footer" class="footer">
</div>
</body>
</html>
css
body{
margin:0;
padding: 0;
}
.clearfix:after{
content:' ';
display: block;
height:0;
line-height:0px;
clear:both;
}
.wrap{
width:1000px;
margin:0 auto;
position: relative;
}
.top{
height:30px;
background-color: #f5f5f5;
}
.header{
height: 92px;
}
.nav{
height: 36px;
background-color:#60bff2;
}
.banner{
/* 1000-198 */
width:802px;
margin:0 auto;
height:414px;
padding:9px 0 0 198px;
}
.banner-slider{
float:left;
width:544px;
height:414px;
background-color: #8fe4f8;
}
.banner-search{
float: right;
width:250px;
height: 254px;
background-color: #ccc;
}
.banner-help{
float:right;
width:250px;
height:147px;
margin-top:14px;
background-color:#eee;
}
.content{
padding:10px 0 38px 0;
}
.content-tab{
float: left;
width:742px;
height:490px;
background-color:#eee;
}
.content-news,.content-close{
float:right;
width:248px;
height: 236px;
border:1px solid #ccc;
}
.content-close{
margin-top:12px;
border-color:red;
}
.footer{
height:132px;
padding:25px 0;
background-color: #eceef2;
}
2.2 基本样式-模块
2.1 基本样式-模块-top
<div id="top" class="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>
base.css
需要用到的图片如下：
p{
margin:0px;
padding: 0px;
display: inline-block;
}
a{
text-decoration: none;
}
/* #top模块内样式 */
.top{
color:#868686;
line-height: 30px;
font-size: 13px;
}
.top a{
color:#71caf5;
padding-left:10px;
}
.top .call{
float: left;
padding-left: 20px;
background:url(../img/icon-call.png) no-repeat center left;
/* 垂直居中，水平靠左 */
}
.top .welcome{
float: right;
}
2.2 基本样式-模块-header
<div id="header" class="header">
<div class="wrap clearfix">
<div class="logo">
<a href="#" ><img src="./img/logo.png"></a>
</div>
<div class="search">
</div>
</div>
</div>
/* #header模块内样式 */
.header .logo{
width:351px;
height:68px;
padding:12px 0;
display: inline-block;
}
.header .logo img{
width:100%;
height:100%;
}
.header .search{
width:326px;
height:38px;
position: absolute;
/* 根据上一个有position:relative属性的父级div来进行绝对定位 */
right:0px;
top:29px;
background-color:orange;
}
2.3 基本样式-模块-nav
<div id="nav" class="nav">
<div class="wrap">
<div class="link menu">全部科室
<div class="menu-list"></div>
</div>
<a href="#" class="link">按医院挂号</a>
<a href="#" class="link">按科室挂号</a>
<a href="#" class="link">按疾病挂号</a>
<a href="#" class="link">最新公告</a>
<a href="#" class="link right">社会知名医院</a>
</div>
</div>
/* #nav模块内样式 */
.nav .menu{
width:130px;
padding-right:30px;
background-color: #1fa4f0;
position: relative;
}
.nav .link{
display: inline-block;
float:left;
padding-left:30px;
line-height: 36px;
color:#fff;
font-size:16px;
min-width:80px;
text-align: center;
}
.nav .right{
float:right;
}
.nav a:hover{
color:#1fa4f0;
}
.nav .menu .menu-list{
width:100%;
height: 421px;
position:absolute;
left:0;
top:36px;
background-color:#1fa4f0;
}
批注：设置了position，如果没有设置宽度和高度，则div默认宽高为0
2.4 基本样式-模块-banner
需要的图片
<div id="banner" class="banner">
<div class="banner-slider"></div>
<div class="banner-search">
<div class="caption">
<span class="text">
快速预约
</span>
</div>
<div class="form">
<div class="line">
<select name="area"><option>医院地区</option></select>
</div>
<div class="line">
<select name="level"><option>医院等级</option></select>
</div>
<div class="line">
<select name="name"><option>医院名称</option></select>
</div>
<div class="line">
<select name="department"><option>医院科室</option></select>
</div>
</div>
<div class="submit">
<input type="button" class="button" value="快速查询">
</div>
</div>
<div class="banner-help">
<div class="caption"><span class="text">帮助中心</span></div>
<div class="list">
<a href="#" class="link">账号指南</a>
<a href="#" class="link">预约指南</a>
<a href="#" class="link">账号找回</a>
<a href="#" class="link">常见问题</a>
</div>
</div>
</div>
/* #banner模块内样式 */
.banner-search{
background-color: #fafafa;
}
.banner-help .caption,
.banner-search .caption{
height: 22px;
padding:15px 0;
text-align:center;
}
.banner-help .caption .text,
.banner-search .caption .text{
display: inline-block;
height: 22px;
line-height: 22px;
padding-left: 28px;
color:#fec009;
font-size:16px;
background:url(../img/icon-help.png) no-repeat 0 0;
}
.banner-search .form{
height: 150px;
}
.banner-search .form .line{
padding-bottom: 9px;
text-align: center;
}
.banner-search .form .line select{
width:170px;
font-size:12px;
z-index:0;
border:1px solid #dcdddd;
height: 26px;
line-height: 26px;
padding: 2px 0;
color:#666;
}
.banner-search .submit{
height: 32px;
text-align: center;
}
.banner-search .submit .button{
width:108px;
height: 33px;
background-color: #fecd09;
font-size:14px;
color:#fff;
border-radius: 3px;
}
.banner-help{
background-color: #fafafa;
}
.banner-help .caption .text{
color:#00b3ea;
background-position: 0 -23px;
}
.banner-help .link{
color:#00b3ea;
display: inline-block;
width:86px;
height: 26px;
line-height: 26px;
font-size:14px;
text-align: center;
padding: 0 0 8px 26px;
}
2.5 基本样式-模块-content
可分为三个部分：content-tab、content-news、content-close
<div id="content" class="content">
<div class="wrap clearfix">
<div class="content-tab">
<div class="caption">
<a href="#8" class="item item-focus">医院</a>
<a href="#7" class="item">科室</a>
</div>
<div class="block">
<div class="item">
<div class="block-caption">
<a href="#1" class="block-caption-item block-caption-item_foucs">全部</a>
<a href="#1" class="block-caption-item">东城区</a>
<a href="#1" class="block-caption-item">西城区</a>
<a href="#1" class="block-caption-item">朝阳区</a>
<a href="#1" class="block-caption-item">丰台区</a>
<a href="#1" class="block-caption-item">石景山区</a>
<a href="#1" class="block-caption-item">海淀区</a>
<a href="#1" class="block-caption-item">门头沟区</a>
<a href="#1" class="block-caption-item">房山区</a>
<a href="#1" class="block-caption-item">其他</a>
</div>
<div class="block-content">
<div class="block-list clearfix">
<div class="item">
<img src="img/hospital-1.jpg" alt="xx医院"/>
<div class="item-name">北京协和医院<span class="
item-level">[三级甲等]</span></div>
<div class="item-phone">
电话:东院咨询台：010-69155564..
</div>
<div class="item-address">[东院]
北京市东城区帅府园一号 [西院]北京市西城区大木仓...
</div>
</div>
<div class="item">
<img src="img/hospital-1.jpg" alt="xx医院"/>
<div class="item-name">北京协和医院<span class="
item-level">[三级甲等]</span></div>
<div class="item-phone">
电话:东院咨询台：010-69155564..
</div>
<div class="item-address">[东院]
北京市东城区帅府园一号 [西院]北京市西城区大木仓...
</div>
</div>
<div class="item">
<img src="img/hospital-1.jpg" alt="xx医院"/>
<div class="item-name">北京协和医院<span class="
item-level">[三级甲等]</span></div>
<div class="item-phone">
电话:东院咨询台：010-69155564..
</div>
<div class="item-address">[东院]
北京市东城区帅府园一号 [西院]北京市西城区大木仓...
</div>
</div>
<div class="item">
<img src="img/hospital-1.jpg" alt="xx医院"/>
<div class="item-name">北京协和医院<span class="
item-level">[三级甲等]</span></div>
<div class="item-phone">
电话:东院咨询台：010-69155564..
</div>
<div class="item-address">[东院]
北京市东城区帅府园一号 [西院]北京市西城区大木仓...
</div>
</div>
</div>
<div class="block-text-list clearfix">
<a href="#9" class="item">首都儿科研究所附属儿童医院
<span class="level">[三级甲等]</span></a>
<a href="#9" class="item">首都儿科研究所附属儿童医院
<span class="level">[三级甲等]</span></a>
<a href="#9" class="item">首都儿科研究所附属儿童医院
<span class="level">[三级甲等]</span></a>
<a href="#9" class="item">首都儿科研究所附属儿童医院
<span class="level">[三级甲等]</span></a>
<a href="#9" class="item">首都儿科研究所附属儿童医院
<span class="level">[三级甲等]</span></a>
<a href="#9" class="item">首都儿科研究所附属儿童医院
<span class="level">[三级甲等]</span></a>
</div>
<a href="#" class="block-more">更多医院</a>
</div>
</div>
<div class="item" style="display: none;">
科室内容
</div>
</div>
</div>
<div class="content-news">
<div class="caption">最新公告<a href="#8" class="more">|更多</a></div>
<div class="list">
<a href="#9" class="link">首都医科大学附属北京安贞医院消...</a>
<a href="#9" class="link">首都医科大学附属北京安贞医院妇...</a>
<a href="#9" class="link">首都医科大学附属北京安贞医院消...</a>
<a href="#9" class="link">首都医科大学附属北京安贞医院妇...</a>
<a href="#9" class="link">首都医科大学附属北京安贞医院消...</a>
<a href="#9" class="link">首都医科大学附属北京安贞医院妇...</a>
</div>
</div>
<div class="content-close">
<div class="caption">停诊公告<a href="#8" class="more">|更多</a></div>
<div class="list">
<a href="#9" class="link">首都医科大学附属北京安贞医院消...</a>
<a href="#9" class="link">首都医科大学附属北京安贞医院妇...</a>
<a href="#9" class="link">首都医科大学附属北京安贞医院消...</a>
<a href="#9" class="link">首都医科大学附属北京安贞医院妇...</a>
<a href="#9" class="link">首都医科大学附属北京安贞医院消...</a>
<a href="#9" class="link">首都医科大学附属北京安贞医院妇...</a>
</div>
</div>
</div>
</div>
/* #content模块内样式 */
.content-tab{
background:none;
/* 去掉背景 */
}
.content-tab .caption{
height: 34px;
line-height: 34px;
background-color: #f5f6fa;
}
.content-tab .caption .item{
display: block;
width:112px;
height: 34px;
text-align: center;
float: left;
color:#00b3ea;
}
.content-tab .caption .item-focus{
background-color: #60bff2;
color:#fff;
}
.content-tab .block{
border:1px solid #f4f6fa;
height: 452px;
}
.content-tab .block-caption{
height: 26px;
line-height: 26px;
padding: 8px;
border-bottom: 1px solid #f4f6fa;
}
.content-tab .block-caption-item{
display: block;
padding: 0 10px;
font-size:12px;
color:#4c4948;
float: left;
}
.content-tab .block-caption-item_foucs{
background-color: #60bff2;
color:#fff;
}
.content-tab .block-content{
padding: 16px 12px;
}
.content-tab .block-content .block-list .item{
float: left;
width:216px;
height: 102px;
padding: 0 20px 10px 120px;
position: relative;
font-size:12px;
}
.content-tab .block-content .block-list .item img{
width:110px;
height:98px;
position: absolute;
left:0;
top:0;
}
.content-tab .block-content .block-list .item-name{
color: #036eb7;
font-size:14px;
line-height: 21px;
padding-top: 13px;
}
.content-tab .block-content .block-list .item-level{
float: right;
font-size:12px;
color: #979797;
}
.content-tab .block-content .block-list .item-phone,
.content-tab .block-content .block-list .item-address{
line-height: 18px;
padding-bottom: 4px;
color: #666;
}
/* 医院文案列表 -容器 */
.content-tab .block-content .block-text-list .item{
display: block;
width: 351px;
height:27px;
font-size:14px;
color:#666;
padding-top:8px;
float:left;
border-bottom:1px dashed #dcdddd;
}
/*用来设置第偶数个的样式*/
.content-tab .block-content .block-text-list .item:nth-child(2n){
margin-left:13px;
}
.content-tab .block-content .block-more{
display: block;
line-height: 55px;
text-align: center;
color:#82c0ff;
font-size:14px;
}
.content-close,
.content-news{
background-color: #fff;
border:1px solid #f4f6fa;
}
.content-close .caption,
.content-news .caption{
height:39px;
line-height: 39px;
background-color: #f4f6fa;
text-indent: 20px;
/* 缩进 */
color:#fec009;
font-size:15px;
}
.content-close .more,
.content-news .more{
float: right;
padding-right: 22px;
font-size:12px;
color:#868686;
}
.content-close .list,
.content-news .list{
padding: 15px 20px 13px 35px;
background:url(../img/list-yellow.jpg) no-repeat 17px 20px;
font-size:12px;
line-height: 29px;
}
.content-close .link,
.content-news .link{
display: block;
color:#969696;
}
.footer{
line-height: 70px;
text-align: center;
font-size: 14px;
color: #666;
}
三、开发UI组件
3.1 首页.UI组件-UiSearch
引用js，css
<link rel="stylesheet" type="text/css" href="css/ui.css"> //新建
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/ui.js"></script>//新建
<div class="search ui-search">
<div class="ui-search-selected">医院</div>
<div class="ui-search-select-list">
<a href="#1">科室</a>
<a href="#1">疾病</a>
<a href="#1">医院</a>
</div>
<input type="text" name="search-content" class="ui-search-input" placeholder="请输入搜索内容">
<a href="#" class="ui-search-submit"> </a>
</div>
/* 搜索 */
.ui-search{
background:url(../img/ui-search.jpg);
font-size:14px;
color:#fff;
position: relative;
}
.ui-search-selected{
width:70px;
height: 38px;
line-height: 38px;
position: absolute;
left:0;
top:0;
text-indent: 14px;
}
.ui-search-select-list{
position: absolute;
width:67px;
line-height: 24px;
background-color:#fff;
box-shadow:3px 3px 5px rgba(0,0,0,.2);
left:2px;
top:36px;
z-index: 2;
}
.ui-search-select-list a{
display: block;
color:#a5a2a2;
text-align: center;
}
.ui-search-select-list a:hover{
background-color: #ebeef5;
}
.ui-search-input{
width:208px;
height: 26px;
position: absolute;
top:3px;
left:71px;
line-height: 26px;
font-size:13px;
color:#a5a2a2;
}
.ui-search-submit{
display: block;
width:40px;
height: 36px;
right: 0;
top:1px;
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
