老师遇到点问题关于滚动条如何实现
来源：5-12 项目作业
小杨同学呀
2020-03-28 23:36:21
*{
margin:0;
padding:0;
}
a{
text-decoration: none;
}
p{
margin: 0;
padding: 0;
display: inline-block;
line-height:30px;
font-size:14px;
}
/*top区域*/
.top .wrap .call{
float: left;
padding-left: 20px;
background: url(../img/icon-call.png) no-repeat center left;
}
.top .wrap .welcome{
float:right;
}
.top a{
color: #2da5e1;
padding-left: 10px;
}
/*header区域*/
.header{
width:100%;
height:84px;
}
.header .wrap .logo{
width:402px;
height:56px;
padding:9px 0;
display:inline-block;
}
.header .wrap .logo img{
width:100%;
height:74px;
}
/*搜索框*/
.header .wrap .content{
height:30px;
width:250px;
position: absolute;
top:50%;
margin-top:-15px;
right:0;
}
.header .wrap .content .search img{
width:30px;
width:250px;
position: relative;
}
.header .wrap .content .search .item-one{
position: absolute;
top:5px;
left:5px;
font-size:14px;
color:#fff;
}
.header .wrap .content .search .item{
width:30px;
text-align: center;
position: absolute;
top:29px;
box-shadow: 3px 3px 5px rgba(0,0,0,.2);
background-color: #fff;
display:none;
}
.header .wrap .content .search .item a:hover{
background-color:gray;
}
.header .wrap .content .search .item a{
display:block;
color: #A5a2a2;
font-size:14px;
}
.header .wrap .content .search .search-content{
position: absolute;
left:53px;
top:2px;
width:165px;
height:25px;
border:none;
outline:none;
}
.clearfix:after{
content: ' ';
display: block;
height: 0;
line-height: 0;
clear: both;
zoom: 1;
}
/*nav区域*/
.nav .wrap .nav-item a{
font-size:16px;
line-height:30px;
padding-left:30px;
color:#fff;
}
.nav .wrap .nav-item a:hover{
color:black;
}
.nav .wrap .nav-item .lt{
position: absolute;
right:0;
}
.content .wrap{
overflow:hidden;
}
.content .wrap .Introduction{
background: #f5f5f5;
width:100%;
height:300px;
margin-top:20px;
}
.content .wrap .Introduction .Int-nav{
height:40px;
width:100%;
margin:0 auto;
text-align:center;
}
.content .wrap .Introduction .Int-nav .Int-nav-item{
display:inline-block;
width:95%;
border-bottom:1px solid gray;
padding:10px 0 10px 0;
line-height:30px;
}
.content .wrap .Introduction .Int-nav .Int-nav-item .lf{
left:0;
float:left;
font-size:16px;
}
.content .wrap .Introduction .Int-nav .Int-nav-item .lf a{
font-size:10px;
color:orange;
}
.content .wrap .Introduction .Int-nav .Int-nav-item .rg{
float:right;
font-size: 12px;
line-height:30px;
}
.content .wrap .Introduction .Int-nav .Int-body{
width:95%;
position: relative;
margin: 0 auto;
}
.content .wrap .Introduction .Int-nav .Int-body .item1 {
width:200px;
height:150px;
display:inline-block;
position: absolute;
left:0;
top:20px;
}
.content .wrap .Introduction .Int-nav .Int-body .item2{
display:inline-block;
font-size:12px;
width:400px;
height:150px;
position: absolute;
right:340px;
top:20px;
text-align:left;
left:250px;
}
.content .wrap .Introduction .Int-nav .Int-body .item2 span{
margin-bottom:10px;
display: inline-block;
}
.content .wrap .Introduction .Int-nav .Int-body .item2 .itemOne{
padding-left:20px;
background: url(../img/icon-web.png) no-repeat;
}
.content .wrap .Introduction .Int-nav .Int-body .item2 .itemTwo{
padding-left:20px;
display:inline-block;
background: url(../img/icon-web.png) no-repeat 0 -21px;
}
.content .wrap .Introduction .Int-nav .Int-body .item2 .itemThree{
padding-left:20px;
display:inline-block;
background: url(../img/icon-web.png) no-repeat 0 -43px;
}
.content .wrap .Introduction .Int-nav .Int-body .item2 .itemFour{
padding-left:20px;
display:inline-block;
line-height:20px;
position: relative;
}
.content .wrap .Introduction .Int-nav .Int-body .item2 .itemFour::before{
position: absolute;
content:'';
display: block;
left:0;
top:0;
width:15px;
height:20px;
background: url(../img/icon-web.png) no-repeat 0 -63px;
}
.content .wrap .Introduction .Int-nav .Int-body .item3{
display:inline-block;
width:250px;
height:212px;
position: absolute;
right:0px;
top:20px;
}
.content .wrap .system{
width:100%;
height:100%;
margin-top:30px;
}
.content .wrap .system .system-item1{
height:25px;
border-bottom: 2px solid #2da5e1;
}
.content .wrap .system .system-item1 a{
float:left;
color: #2da5e1;
line-height: 25px;
width:120px;
text-align: center;
}
.content .wrap .system .system-item1 a:hover{
background:#2da5e1;
color:#f5f5f5;
}
.content .wrap .system .system-item2{
width:100%;
margin-top:20px;
}
.content .wrap .system .system-item2 .item1{
width:70%;
height:100%;
float:left;
border:1px solid rgb(128,128,128,0.1);
}
.content .wrap .system .system-item2 .item2{
float:right;
width:28%;
height:300px;
background-color: #f5f5f5;
}
.content .wrap .system .system-item2 .item1 .item1-1 {
background-color: #f5f5f5;
width:100%;
height:30px;
}
.content .wrap .system .system-item2 .item1 .item1-1 span{
display:inline-block;
line-height:30px;
margin-left:30px;
font-size:14px;
}
.content .wrap .system .system-item2 .item1 .square{
width:100%;
height:100px;
}
.content .wrap .system .system-item2 .item1 .square span{
text-align: center;
line-height:30px;
font-size:14px;
display:inline-block;
width:100px;
height:100px;
}
.content .wrap .system .system-item2 .item1 .square .bgc{
float:left;
width:20%;
height:100px;
background-color: rgba(45,165,225,0.1);
}
.content .wrap .system .system-item2 .item2 tt{
height:30px;
}
.content .wrap .system .system-item2 .item2 span{
font-size:14px;
line-height: 30px;
margin-left:10px;
}
.content .wrap .system .system-item2 .item2 span a{
font-size:3px;
color: #2da5e1;
}
.content .wrap .system .system-item2 .item2 .content .on{
display: inline-block;
}
.content .wrap .system .system-item2 .item2 .content .on span{
display: block;
}
.content .wrap .system .system-item2 .item2 .content .up{
display: inline-block;
}
.content .wrap .system .system-item2 .item2 .content .up span{
display: block;
}
.footer{
width:100%;
background:#eceef2;
text-align:center;
height:50px;
}
.footer span{
color:#acacac;
line-height:50px;
}
.top{
width:100%;
background-color:#f5f5f5;
height:30px;
}
.wrap{
width:1000px;
margin:0 auto;
position: relative;
}
.header{
width:100%;
height:50px;
margin:0 auto;
}
.nav{
width:100%;
height:30px;
background-color:#60bff2;
position: relative;
}
.content{
width:100%;
height:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>挂号平台</title>
<link rel="stylesheet" href="./css/layout.css">
<link rel="stylesheet" href="./css/base.css">
</head>
<body>
<!--顶端区域-->
<div 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 class="header">
<div class="wrap clearfix">
<a href="#" class="logo"><img src="img/logo.png"></a>
<div class="content">
<div class="search">
<img src="./img/ui-search.jpg" alt="">
<div class="item-one">医院</div>
<div class="item">
<a>科室</a>
<a>疾病</a>
<a>医院</a>
</div>
<input type="text" class="search-content" placeholder="请输入要搜索的内容">
</div>
</div>
</div>
</div>
<!--导航区域-->
<div class="nav">
<div class="wrap">
<div class="nav-item">
<a href="#">首页</a>
<a href="#">按院挂号</a>
<a href="#">按课室挂号</a>
<a href="#">按疾病挂号</a>
<a href="#">最新公告</a>
<a href="#" class="lt">社会知名医院</a>
</div>
</div>
</div>
<!--内容区域-->
<div class="content">
<div class="wrap">
<div class="Introduction">
<div class="Int-nav">
<div class="Int-nav-item">
<span class="lf">北京协和医院 <a href="#">关注医院</a></span>
<span class="rg"><a href="#">等级:</a>三级甲等 <a href="#">区域:</a>东城区 <a
href="#">分类:</a>中国医科院所属医院</span>
</div>
<div class="Int-body">
<div class="item1">
<img src="./img/hospital-1.jpg">
</div>
<div class="item2">
<span class="itemOne">[东院]北京市东城区帅府圆一号 [西院]北京市西城区大木仓胡同41号</span>
<span class="itemTwo">http://www.puch.com.cn/</span>
<span class="itemThree">东院咨询台:010-69155564; 西院咨询台:010-69158010</span>
<span
class="itemFour">东院:106,108,110,111,116,664,685到东单路口北;41,401快,814到东单路口南; 1,52,728,802到东单路口西；
20,2,37,55,65,到东单路口东;</br>
103,104,420,803到新东安市场;地铁1、5号线到东单。西院:69到育才胡同洞口;更多乘车路线纤见长治
</span>
</div>
<div class="item3">
<img src="./img/map-1.png">
</div>
</div>
</div>
</div>
<div class="system">
<div class="system-item1">
<a href="#">预约挂号</a>
<a href="#">医院介绍</a>
<a href="#">预约须知</a>
<a href="#">停诊信息</a>
<a href="#">查询取消</a>
</div>
<div class="system-item2">
<div class="item1">
<div class="item1-1">
<span>开放预约科室</span>
</div>
<div class="square">
<span class="bgc">2018</span>
<span>特殊门诊科</br>特殊门诊科<br>特殊门诊科</span>
<span>特殊门诊科</br>特殊门诊科<br>特殊门诊科</span>
<span>特殊门诊科</br>特殊门诊科<br>特殊门诊科</span>
<span>特殊门诊科</br>特殊门诊科<br>特殊门诊科</span>
</div>
<div class="square">
<span class="bgc">2018</span>
<span>特殊门诊科</br>特殊门诊科<br>特殊门诊科</span>
<span>特殊门诊科</br>特殊门诊科<br>特殊门诊科</span>
<span>特殊门诊科</br>特殊门诊科<br>特殊门诊科</span>
<span>特殊门诊科</br>特殊门诊科<br>特殊门诊科</span>
</div>
<div class="square">
<span class="bgc">2018</span>
<span>特殊门诊科</br>特殊门诊科<br>特殊门诊科</span>
<span>特殊门诊科</br>特殊门诊科<br>特殊门诊科</span>
<span>特殊门诊科</br>特殊门诊科<br>特殊门诊科</span>
<span>特殊门诊科</br>特殊门诊科<br>特殊门诊科</span>
</div>
<div class="square">
<span class="bgc">2018</span>
<span>特殊门诊科</br>特殊门诊科<br>特殊门诊科</span>
<span>特殊门诊科</br>特殊门诊科<br>特殊门诊科</span>
<span>特殊门诊科</br>特殊门诊科<br>特殊门诊科</span>
<span>特殊门诊科</br>特殊门诊科<br>特殊门诊科</span>
</div>
</div>
<div class="item2">
<div class="tt">
<span>预约规则<a href="#">(更新时间每日8:30更新)</a></span>
</div>
<div class="content">
<div class="on">
<span>预约时间:</span>
<span>放号时间:</span>
<span>停挂时间:</span>
<span>退号时间:</span>
<span>特殊规则:</span>
</div>
<div class="up">
<span>7天</span>
<span>8:30</span>
<!--<span>下午14:00停止次日预约挂号(周五14:00后停止至下周一)</span>
<span>就诊前一工作日14:00前取消</span>
<span>使用烟雨剑法、飘渺式时增加伤害，装备后降低5%防御，仅对NPC使用有效
增加人物等级/2(1级组合)|人物等级/1.5(2级组合)|人物等级×1(3级组合)的伤害
五庄观门派，武器符石耐久消耗快，建议除武器外5件防具镶嵌，效果最多叠加2次
符石颜色（从左到右）
</span>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--页脚-->
<div class="footer">
<span> 本节目由慕课网独家冠名</span>
</div>
</body>
</html>
1回答
-
好帮手慕慕子
2020-03-29
同学你好，可以直接给外层盒子添加overflow-y:scroll;属性实现滚动条
同学可以测试下，祝学习愉快~
0
相似问题