医院简介这一块的雪碧图要怎么实现?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>首页</title>
<link rel="stylesheet" href="CSS/index.css">
<link rel="stylesheet" href="CSS/base.css">
</head>
<body>
<div class="top">
<div class="wrap">
<div class="top-left">
<p><img src="图片素材\icon-call.png" alt="电话" />
<p class="call">010-114/116114电话预约</p>
</p>
</div>
<div class="top-right">
<p>欢迎来到城市预约挂号统一平台 请 </p>
<a href="###" class="login">登录</a>
<a href="###" class="register">注册</a>
<p class="help"><a href="###">帮助中心</a></p>
</div>
</div>
</div>
<div class="header wrap">
<a href="index.html" class="logo"><img src="图片素材\logo.png" alt="logo"></a>
<span class="text">医院</span>
<a href="" class="header-right"><img src="图片素材\ui-search.jpg" alt=""></a>
<input type="text" placeholder="请输入搜索的内容" class="serch-input">
</div>
<div class="nav" id="nav">
<div class="wrap nav-title">
<p class="">首页</p>
<a href="">按医院挂号</a>
<a href="">按科室挂号</a>
<a href="">按疾病挂号</a>
<a href="">最新公告</a>
<a href="">社会知名医院</a>
</div>
</div>
<div class="introduction wrap">
<div class="introduction-title">
<p class="introduction-title_left">
<a href="" class="introduction-title_hospitalName">北京协和医院</a>
<a href="" class="introduction-title_attenionHospital">关注医院</a>
</p>
<p class="introduction-title_right">
<span class="hospital_grade">等级:</span><span class="hospital_text">三级甲等</span>
<span class="hospital_grade">区域:</span><span class="hospital_text">东城区</span>
<span class="hospital_grade">分类:</span><span class="hospital_text">中国医科院所属医院</span>
</p>
</div>
<div class="introduction-content">
<div class="introduction-content_img">
<img src="图片素材\hospital-1.jpg" alt="医院图片">
</div>
<div class="introduction-content_icon">
<div class="introduction-content_icon_one">
<span class="introduction-content_icon_one_text">[东院]北京市东城区帅府园一号[西院]北京市西城区大木仓胡同41号</span>
</div>
<div class="introduction-content_icon_two">
<span class="introduction-content_icon_one_text">http://www.punch.cn/</span>
</div>
<div class="introduction-content_icon_one">
<span class="introduction-content_icon_one_text">东院咨询台:010-69155564;西院咨询台:010-69158010</span>
</div>
<div class="introduction-content_icon_one">
<span class="introduction-content_icon_one_text">东院：106,108,110,111,684到东单路口北;41,104快
814到东单路口南；1,52,728,802到东单路口西;814到东单路口南；1,52,728,802到东单路口西;814到东单路口南；
1,52,728,802到东单路口西;更多详情乘车路线详见须知</span>
</div>
</div>
<div class="introduction-content_right">
<img src="图片素材\map-1.png" alt="地图">
</div>
</div>
</div>
<div class="hospitalSystem wrap">
<div class="hospitalSystem-title">
<p>预约挂号</p>
<p>医院介绍</p>
<p>预约须知</p>
<p>停诊信息</p>
<p>查询取消</p>
</div>
<div class="hospitalSystem-content">
<form action="">
</form>
</div>
</div>
</body>
</html>
index.css:
.top {
background-color: #f5f5f5;
width: 100%;
height: 30px;
}
.wrap {
width: 1017px;
margin: 0 auto;
}
.top-left {
float: left;
}
.top-right {
float: right;
line-height: 30px;
}
.top-right a {
color: rgb(33, 167, 245);
padding-left: 20px;
}
.top-right .help a {
color: rgb(33, 167, 245);
padding-left: 40px;
}
.top-left .call {
line-height: 30px;
color: #868686;
padding-left: 5px;
}
.header img {
height: 74px;
width: 402px;
padding: 9px 0 0 9px;
}
.header-right img {
float: right;
height: 38px;
width: 328px;
margin-top: 20px;
}
.header .text{
position: absolute;
margin-top: 37px;
padding-left: 287px;
color: #fff;
}
.header .serch-input{
position: absolute;
margin-top: 30px;
margin-left: 350px;
height: 30px;
outline: none;
border: #fff solid 1px;
}
.nav{
width: 100%;
background-color: #4ba7f3;
height: 40px;
}
.nav-title a{
color: #fff;
line-height: 40px;
padding-left: 36px;
font-size: 18px;
}
.nav-title a:nth-last-child(1){
color: #fff;
line-height: 40px;
padding-left: 36px;
font-size: 18px;
float: right;
}
.nav-title p{
color: #fff;
line-height: 40px;
width: 180px;
font-size: 18px;
text-align: center;
background-color: rgb(28, 134, 255);
}
.nav-title a:hover{
color: rgb(83, 236, 247);
}
.introduction{
height: 224px;
background-color: rgb(240, 234, 234);
margin-top: 30px;
}
.introduction .introduction-title{
width: 970px;
height: 46px;
margin-left: 20px;
line-height: 46px;
border-bottom: 1px solid rgb(190, 189, 189);
}
.introduction .introduction-title_left{
padding-left: 25px;
}
.introduction-title_hospitalName{
font-weight: bold;
color: rgb(24, 23, 23);
font-size: 20px;
cursor: default;
}
.introduction-title_attenionHospital{
color: rgb(253, 187, 43);
padding-left: 10px;
}
.introduction-title_right{
float: right;
}
.introduction-title_right .hospital_grade{
color: #4ba7f3;
font-weight: bold;
}
.introduction-title_right .hospital_text{
font-weight: bold;
}
.introduction-content_img img{
margin-top: 10px;
margin-left: 20px;
float: left;
}
.introduction-content_icon {
width: 395px;
height: 161px;
padding-left: 55px;
padding-top: 10px;
float: left;
}
.introduction-content_icon div{
display: inline-block;
}
.introduction-content_icon_one{
background: url(../图片素材/icon-web.png) no-repeat 1px 3px;
}
.introduction-content_icon .introduction-content_icon_one_text{
font-size: 10px;
padding-left: 25px;
color: rgb(146, 141, 141);
}
.introduction-content_icon_two{
background: url(../图片素材/icon-web.png) no-repeat 1px;
}
.introduction-content_right img{
padding-left: 55px;
padding-top: 10px;
width: 250px;
height: 150px;
}
.hospitalSystem{
margin-top: 36px;
height: 800px;
}
.hospitalSystem-title{
height: 40px;
border-bottom: #4ba7f3 4px solid;
}
.hospitalSystem-title p:nth-child(1){
line-height: 40px;
width: 130px;
text-align: center;
color: #ffffff;
background-color: rgb(48, 134, 247);
}
.hospitalSystem-title p{
line-height: 40px;
width: 130px;
text-align: center;
color: #4ba7f3;
}
.hospitalSystem-content{
margin-top: 20px;
}
base.css
body{
margin: 0;
padding: 0;
}
p{
margin: 0;
padding: 0;
display: inline-block;
}
a{
text-decoration: none;
}
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星