老师，不知道哪里出了问题
来源：5-12 项目作业
木子小可爱
2019-11-12 14:26:44
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>docuemnt</title>
<link rel='stylesheet'type='text/css' href='css/index.css'>
<link rel='stylesheet' type='text/css' href='css/base.css'>
</head>
<body>
<!--top-->
<div class='top'>
<div class='wrap clearfix'>
<div class='top-left'>
<img src='image/icon-call.png' alt='call'>
<span class='tel-number'>010-114/116114电话预约</span>
</div>
<div class='top-right'>
<span class='welcome'>欢迎来到城市预约挂号统一平台 请</span>
<span >
<a href='#' class='login' >登录</a>
<a href='#' class='register' >注册</a>
<a href='#' class='helping-center' >帮助中心</a>
</span>
</div>
</div>
</div>
<!--header-->
<div class='header'>
<div class='wrap clearfix'>
<div class='logo'>
<img src='./image/logo.png'>
</div>
<div class='seach ui-search'>
<div class='ui-search-selected'>医院</div>
<div class='ui-search-selected-list'>
<a class=''>科室</a>
<a class=''>疾病</a>
<a class=''>医院</a>
</div>
<input type='text' placeholder='请输入搜索内容' class='seacrch-input'>
<a href='#' class='ui-search-submit'></a>
</div>
</div>
</div>
<div class='nav'>
<div class='wrap clearfix'>
<div class='nav-left'>
<a class='nav-item'>首页</a>
<a class='nav-item'>安医院挂号</a>
<a class='nav-item'>按科室挂号</a>
<a class='nav-item'>按疾病挂号</a>
<a class='nav-item'>最新公告</a>
</div>
<div class='nav-right'>
<a class='nav-item'>社会知名医院</a>
</div>
</div>
</div>
<!--医院简介-->
<div class='hos-intro wrap'>
<div class='hos-head clearfix'>
<div class=hos-head-left>
<span class='hos-name'>北京协和医院</span>
<a class='foucus-hosp'>关注医院</a>
</div>
<div class=hos-head-right>
<a class='hos-level'>等级:</a>
<span class=''>三级甲等</span>
<a class='hos-area'>区域:</a>
<span class=''>东城区</span>
<a class='hos-classify'>分类:</a>
<span class=''>中国医科院所属医院</span>
</div>
</div>
<div class='clearfix'>
<div class='hos-image'>
<img src='./image/hospital-1.jpg'/>
</div>
<div class='hos-info'>
<p class='hos-address'>[东城]北京市东城区帅府苑一号[西院]北京市西城区美仓胡同41号
</p>
<p class='hos-online'>http://www.punch.cn/
</p>
<p class='hos-consult-number'>东院咨询台：010-69155564；西院咨询台：010-619581010 </p>
<p class='hos-bus'>东院：106，108，110，111，664到东单路口北：41，101快，814到东段路< br/>口南；1，52，728，802到东段路口西；20，25，37，29，到东单路口东；<br/>
103，104，420，803到新安市场；地铁1、5号线到东单。西院：68到辟才胡同东<br/>
口；更多乘车路线想见须知
</p>
</div>
<div class='hos-map'></div>
</div>
</div>
</body>
</html>
.wrap{
width:1000px;
margin:0 auto;
/*text-align:center;*/
}
.clearfix:after{
content:'';
display:block;
height:0;
line-height:0;
clear:both;
zoom:1;
}
/*div{
margin:0;
padding:0;
}*/
a,input{
text-decoration:none;
outline-style: none;
border:none;
}
.top{
height:30px;
width:100%;
line-height:30px;
background-color:#f5f5f5;
font-size:12px;
color:#868686;
}
.top-left{
float:left;
width:500px;
position:relative;
}
.top-right{
float:right;
width:500px;
}
.top img{
display:inline-block;
height:17px;
position:absolute;
top:6px;
}
.tel-number{
display:inline-block;
padding-left:30px;
}
.welcome{
display:inline-block;
}
.login,
.register{
display:inline-block;
display:inline-block;
padding-left:30px;
}
.helping-center{
padding-left:50px;
}
/*header*/
/*header*/
.header{
width:100%;
}
.logo{
width:500px;
height:100px;
float:left;
position:relative;
}
.logo img{
display:inline-block;
text-align:center;
width:500px;
height:100px;
left:0;
top:0;
position:absolute;
margin:0 auto;
}
.seach{
float:right;
width:500px;
height:100px;
position:relative;
background:url(../image/ui-search.jpg) no-repeat center;
}
.ui-search-selected{
position:absolute;
top:38px;
left:98px;
color:#fff;
}
.ui-search-selected-list{
background-color:#fff;
text-align:center;
width:64px;
top:68px;
left:90px;
position:absolute;
color:#868686;
display:none;
}
.ui-search-selected-list a{
display:block;
}
.seacrch-input{
position:absolute;
top:39px;
left:163px;
}
/*nav*/
.nav{
background-color:#60bff2;
width:100%;
color:#fff;
}
.nav-left{
float:left;
width:500px;
margin-left:50px;
}
.nav-right{
float:right;
margin-right:85px;
}
.nav-item{
display:inline-block;
margin:10px 10px;
}
.nav-item:hover{
cursor:pointer;
background-color:#87CEEB;
}
.hos-intro{
background-color:#f7f7f7;
margin-top:20px;
}
.hos-head{
border-bottom:1px solid #eee;
height:50px;
line-height:50px;
margin-left:15px;
}
.hos-head-left{
float:left
}
.hos-head-right{
float:right;
font-size:12px;
}
.foucus-hosp{
display:inline-block;
color:orange;
font-size:12px;
}
.hos-name{
font-size:20px;
}
.hos-head-right a{
color:blue;
}
.hos-image{
width:200px;
height:200px;
float:left;
position:relative;
right:110;
}
.hos-image img{
/*width:100%
height:100%
background-size:cover;*/
position:absolute;
/*left:-110px;
top:10px;*/
}
.hos-info{
float:left;
width:400px;
font-size:12px;
}
.hos-map{
width:200px;
height:200px;
float:left;
background:url(../image/map-1.png) no-repeat left;
}
1回答
-
好帮手慕星星
2019-11-12
同学你好，
1、建议将index.css自己写的样式文件放在base.css文件下面，去覆盖初始化的样式：
2、同学说的问题是这里吗？图片没有显示到左侧：
是因为左侧盒子和右侧盒子高度不一致，左侧高于右侧，导致下面的元素浮动不到左侧：
可以给父容器添加超出隐藏属性，参考：
如果还没有解决你的疑问，建议描述具体一些，便于准确定位问题所在。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题