伤情最是晚凉天，憔悴厮人不堪言，吆酒催肠三杯醉，寻香惊梦五更寒，
钗头凤斜倾有泪，徒迷花寥我无缘，小楼寂寞心与月，也难如钩也难圆！
书接上文：前端系列之实战(城市医院预约挂号平台1.框架搭建)
基本样式预览图—棕色部分代码实现
项目实际截图
首页基本样式-模块-nav&header
新建base.css文件，在index.html文件引入
index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>城市医院预约平台</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
</head>
<body>
<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>
<div id="header" class="header">
<div class="wrap clearfix">
<a class="logo" href="#"><img src="./img/logo.png"></a>
<div class="search"></div>
</div>
</div>
<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>
<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>base.css
p{
margin: 0;
padding: 0;
display: inline-block;
}
i{
font-style: normal;
display: inline-block;
}
select,input{
border: none;
outline: none;
}
/* #top模块内界面 样式*/
.top{
line-height: 30px;
font-size: 13px;
color: #868686;
}
.top .call{
float: left;
padding-left: 20px;
background:url(../img/icon-call.png) no-repeat center left;
}
.top .welcome{
float: right;
}
.top a{
color: #2DA5E1;
padding-left: 10px;
}
/*#header 模块内样式*/
.header .logo{
width: 402px;
height: 74px;
padding: 9px 0;
display: inline-block;
}
.header .logo img{
width: 100%;
height: 100%;
}
.header .search{
width: 326px;
height: 38px;
position: absolute;
right: 0px;
top: 29px;
background-color: orange;
}
/*#nav 模块内样式*/
.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 a:hover{
color: #d7f3ff;
}
.nav .menu{
width: 130px;
padding-right: 30px;
background-color: #1fa4f0;
position: relative;
}
.nav .menu .menu-list{
background-color: #1FA4F0;
width: 100%;
height: 423px;
position: absolute;
left: 0;
top: 36px;
}
首页.基本样式-模块-banner
index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>城市医院预约平台</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
</head>
<body>
<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>
<div id="header" class="header">
<div class="wrap clearfix">
<a class="logo" href="#"><img src="./img/logo.png"></a>
<div class="search"></div>
</div>
</div>
<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>
<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>
<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>base.css
p{
margin: 0;
padding: 0;
display: inline-block;
}
a{
text-decoration: none;
}
i{
font-style: normal;
display: inline-block;
}
select,input{
border: none;
outline: none;
}
/* #top模块内界面 样式*/
.top{
line-height: 30px;
font-size: 13px;
color: #868686;
}
.top .call{
float: left;
padding-left: 20px;
background:url(../img/icon-call.png) no-repeat center left;
}
.top .welcome{
float: right;
}
.top a{
color: #2DA5E1;
padding-left: 10px;
}
/*#header 模块内样式*/
.header .logo{
width: 402px;
height: 74px;
padding: 9px 0;
display: inline-block;
}
.header .logo img{
width: 100%;
height: 100%;
}
.header .search{
width: 326px;
height: 38px;
position: absolute;
right: 0px;
top: 29px;
background-color: orange;
}
/*#nav 模块内样式*/
.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 a:hover{
color: #d7f3ff;
}
.nav .menu{
width: 130px;
padding-right: 30px;
background-color: #1fa4f0;
position: relative;
}
.nav .menu .menu-list{
background-color: #1FA4F0;
width: 100%;
height: 423px;
position: absolute;
left: 0;
top: 36px;
}
/*#banner 模块内样式*/
.banner-search{
background-color: #fafafa;
}
.banner-help .caption,
.banner-search .caption{
height: 22px;
padding: 15px 0 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 #dcddd;
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;
}
已完成
接下来完成
首页基本样式-模块-content_news content_close
index.html
<div id="content" class="content">
<div class="wrap clearfix">
<div class="content-tab"></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>base.css
/*#content 模块样式*/
.content-news{
background-color: #fff;
border: 1px solid #f4f6fa;
}
.content-close .caption,
.content-news .caption{
height: 38px;
line-height: 38px;
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;
line-height: 29px;
font-size: 12px;
background: url(../img/list-yellow.jpg) 17px 20px no-repeat;
}
.content-close .list .link,
.content-news .list .link{
display: block;
color: #969696;
}
.content-close{
background-color: #fff;
border: 1px solid #f4f6fa;
}
.content-close .caption{
color: #4ab4ed;
}
.content-close .list{
background-image:url(../img/list-blue.jpg);
}
首页基本样式-模块-content_tab
index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>城市医院预约平台</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
</head>
<body>
<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>
<div id="header" class="header">
<div class="wrap clearfix">
<a class="logo" href="#"><img src="./img/logo.png"></a>
<div class="search"></div>
</div>
</div>
<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>
<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>
<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="#8" class="item">科室</a>
</div>
<div class="block">
<div class="item">
<div class="block-caption">
<a href="#banner" class="block-caption-item block-caption-item_focus">全部</a>
<a href="#banner" class="block-caption-item">东城区</a>
<a href="#banner" class="block-caption-item">西城区</a>
<a href="#banner" class="block-caption-item">朝阳区</a>
<a href="#banner" class="block-caption-item">丰台区</a>
<a href="#banner" class="block-caption-item">石景山区</a>
<a href="#banner" class="block-caption-item">海淀区</a>
<a href="#banner" class="block-caption-item">门头沟区</a>
<a href="#banner" class="block-caption-item">房山区</a>
<a href="#banner" class="block-caption-item">其他</a>
</div>
<div class="block-content">
<div class="block-list">
<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 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>
<div id="footer" class="footer">
Copyright © 2017慕课网版权所有
</div>
</body>
</html>base.css
p{
margin: 0;
padding: 0;
display: inline-block;
}
a{
text-decoration: none;
}
i{
font-style: normal;
display: inline-block;
}
select,input{
border: none;
outline: none;
}
/* #top模块内界面 样式*/
.top{
line-height: 30px;
font-size: 13px;
color: #868686;
}
.top .call{
float: left;
padding-left: 20px;
background:url(../img/icon-call.png) no-repeat center left;
}
.top .welcome{
float: right;
}
.top a{
color: #2DA5E1;
padding-left: 10px;
}
/*#header 模块内样式*/
.header .logo{
width: 402px;
height: 74px;
padding: 9px 0;
display: inline-block;
}
.header .logo img{
width: 100%;
height: 100%;
}
.header .search{
width: 326px;
height: 38px;
position: absolute;
right: 0px;
top: 29px;
background-color: orange;
}
/*#nav 模块内样式*/
.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 a:hover{
color: #d7f3ff;
}
.nav .menu{
width: 130px;
padding-right: 30px;
background-color: #1fa4f0;
position: relative;
}
.nav .menu .menu-list{
background-color: #1FA4F0;
width: 100%;
height: 423px;
position: absolute;
left: 0;
top: 36px;
}
/*#banner 模块内样式*/
.banner-search{
background-color: #fafafa;
}
.banner-help .caption,
.banner-search .caption{
height: 22px;
padding: 15px 0 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 #dcddd;
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;
}
/*#content 模块样式*/
.content-news{
background-color: #fff;
border: 1px solid #f4f6fa;
}
.content-close .caption,
.content-news .caption{
height: 38px;
line-height: 38px;
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;
line-height: 29px;
font-size: 12px;
background: url(../img/list-yellow.jpg) 17px 20px no-repeat;
}
.content-close .list .link,
.content-news .list .link{
display: block;
color: #969696;
}
.content-close{
background-color: #fff;
border: 1px solid #f4f6fa;
}
.content-close .caption{
color: #4ab4ed;
}
.content-close .list{
background-image:url(../img/list-blue.jpg);
}
.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: #FFFFFF;
}
.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 0 10px;
font-size: 12px;
color: #4c4948;
float: left;
}
.content-tab .block-caption-item_focus{
background-color: #60BFF2;
color: #FFFFFF;
}
.content-tab .block-content{
padding: 16px 12px;
}
.content-tab .block-content .block-more{
display: block;
line-height: 55px;
text-align: center;
color: #5084c4;
font-size: 14px;
}
/*医院列表-容器*/
.content-tab .block-content .block-list{}
.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{}
.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;
}
.footer{
line-height: 70px;
text-align: center;
font-size: 12px;
color: #666666;
}
1424
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
