老师您好我有个问题请教
来源：4-7 小慕医生项目开发（5）
ZcKing
2020-12-14 21:22:26
# 具体遇到的问题
按照课程视频要求书写代码，我发现<a></a>的高度应该被撑开（内部的img和转块的span是有高度的），但是实际情况下却没有，这里不是很理解。
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
* {
padding: 0;
margin: 0;
}
/* 去掉所有ul ol的小圆点 */
ul, ol {
list-style: none;
}
/* 去掉所有超级链接下划线 */
a {
text-decoration: none;
}
/* 使用继承性，给body标签设置字体 */
body {
font: normal 14px/25px '微软雅黑';
}
/* 页面头部样式 */
header {
}
/* 页面头部上半部分 */
header .header-top {
width: 1201px;
margin: 0 auto;
/* 清除浮动 */
overflow: hidden;
}
header .header-top .logo {
padding-top: 39px;
width: 193px;
height: 63px;
/* 左浮动 */
float: left;
color: #015E58;
font-size: 20px;
}
header .header-top .logo h1 {
width: 193px;
height: 63px;
}
header .header-top .tool {
/* 右浮动 */
float: right;
width: 266px;
height: 65px;
padding: 36px;
}
header .header-top .tool .row1 {
margin-bottom: 12px;
}
header .header-top .tool .row1 .tel {
width: 32px;
height: 26px;
}
header .header-top .tool .row1 .telnumber {
font-size: 20px;
color: #00978E;
display: inline-block;
width: 158px;
height: 26px;
text-align: center;
}
header .header-top .tool .row1 .icon {
width: 24px;
height: 24px;
}
header .header-top .tool .row1 .chinese_icon {
margin-right: 7px;
}
header .header-top .tool .row2 {
width: 264px;
height: 28px;
border: 1px solid rgba(202,202,202,0.60);
background: #FFFFFF;
}
header .header-top .tool .row2 input {
float: left;
width: 224px;
height: 28px;
border: none;
padding-left: 20px;
outline: none;
}
header .header-top .tool .row2 button {
float: left;
border: none;
width: 20px;
height: 20px;
background: none;
outline: none;
cursor: pointer;
/* 相对定位微调位置 */
position: relative;
top: 3px;
right: 3px;
}
/* 导航条样式设计 */
header .main-nav {
width: 100%;
height: 60px;
background-color: #00978E;
margin: 0 auto;
}
header .main-nav ul {
height: 60px;
padding-left: 360px;
}
header .main-nav ul li {
float: left;
width: 150px;
height: 60px;
font-size: 16px;
color: #FFFFFF;
/* 行高设置文字垂直居中 */
line-height: 60px;
text-align: center;
}
header .main-nav ul li.current {
background-color: #015E58;
}
header .main-nav ul li a {
display: block;
width: 150px;
height: 60px;
font-size: 16px;
color:white;
}
header .main-nav ul li a:hover {
background-color: orange;
}
.banner {
width: 100%;
position: relative;
}
.banner .banner-img {
width: 100%;
display: block;
}
.banner .center {
width: 1200px;
height: 300px;
/* background-color: orange; */
/* 绝对定位 */
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -600px;
}
.banner .center h2 {
font-size: 60px;
font-weight: normal;
color: #015E58;
/* 绝对定位 */
position: absolute;
top: 50%;
margin-top: -84px;
margin-left: 148px;
}
.banner .center .left-btn {
display: inline-block;
width: 56px;
height: 64px;
background-color: rgba(202,202,202,0.60);
line-height: 64px;
text-align: center;
/* 利用绝对定位垂直居中 */
position: absolute;
top: 50%;
left: 0;
margin-top: -32px;
}
.banner .center .right-btn {
display: inline-block;
width: 56px;
height: 64px;
background-color: rgba(202,202,202,0.60);
line-height: 64px;
text-align: center;
/* 利用绝对定位垂直居中 */
position: absolute;
top: 50%;
right: 0;
margin-top: -32px;
}
.banner ol {
width: 120px;
height: 12px;
/* background-color: red; */
/* 绝对定位 */
position: absolute;
left: 50%;
margin-left: -60px;
bottom: 20px;
}
.banner ol li {
width: 20px;
height: 12px;
float: left;
background-color: white;
margin-right: 10px;
/* 设置圆角 */
border-radius: 10px;
}
.banner ol li:last-child {
margin-right: 0px;
}
.banner ol li.current {
width: 30px;
background-color: orange;
}
/* 内容部分 */
.content {
padding-top: 71px;
}
.content .useful-links {
width: 906px;
height: 151px;
background-color: orange;
margin: 0 auto;
}
.content .useful-links ul {
/* 清除浮动 */
overflow: hidden;
}
.content .useful-links ul li {
float: left;
width: 104px;
margin-right: 54px;
}
.content .useful-links ul li:last-child {
margin-right: 0;
}
.content .useful-links ul li span {
/* 转块，不设置宽度，就相当于width属性为100% */
display: block;
text-align: center;
color: #333333;
font-size: 20px;
line-height: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>张氏医院</title>
<meta name="Keywords" content="张氏医院是专业的医院，理念就是责任、品质、关爱">
<meta name="Description" content="美容、减脂、内科、外科">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<!-- 页面头部 -->
<header>
<!-- 页面头部上半部分 -->
<div class="header-top">
<!-- 网页logo -->
<div class="logo">
<h1>张氏医院</h1>
</div>
<!-- 功能区域 -->
<div class="tool">
<div class="row1">
<img class="tel" src="images/tel.png" alt="咨询电话" />
<span class="telnumber">400-888888888</span>
<img class="chinese_icon icon" src="images/chinese_icon.png" alt="切换中文" />
<img class="english_icon icon" src="images/english_icon.png" alt="切换英文" />
</div>
<div class="row2">
<input placeholder="找医生/找科室...">
<button><img src="./images/search.png" /></button>
</div>
</div>
</div>
<!-- 网页导航条 -->
<nav class="main-nav">
<ul>
<li class="current"><a href="#">页首</a></li>
<li><a href="#">医院概况</a></li>
<li><a href="#">医院动态</a></li>
<li><a href="#">专家学科</a></li>
<li><a href="#">服务指南</a></li>
<li><a href="#">医院文化</a></li>
<li><a href="#">信息公开</a></li>
<li><a href="#">互动交流</a></li>
</ul>
</nav>
</header>
<!-- 网页banner -->
<section class="banner">
<img class="banner-img" src="images/banner.png" />
<div class="center">
<h2>责任、科学、严谨</h2>
<a class="left-btn" href="#"><</a>
<a class="right-btn" href="#">></a>
</div>
<!-- 手动轮播图——小圆点 -->
<ol>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
</ol>
</section>
<!-- 网页的主要内容 -->
<section class="content">
<!-- 常用链接 -->
<div class="useful-links">
<ul>
<li>
<a href="#">
<img src="images/icon_jzxz.png" />
<span>就诊须知</span>
</a>
</li>
<li>
<a href="#">
<img src="images/icon_jylc.png" />
<span>就医流程</span>
</a>
</li>
<li>
<a href="#">
<img src="images/icon_zjjs.png" />
<span>专家介绍</span></a>
</li>
<li>
<a href="#">
<img src="images/icon_ksjs.png" />
<span>科室介绍</span></a>
</li>
<li>
<a href="#">
<img src="images/icon_ybjy.png" />
<span>医保就医</span></a>
</li>
<li>
<a href="#">
<img src="images/icon_jktj.png" />
<span>健康体检</span>
</a>
</li>
</ul>
</div>
.... 后续代码无关
1回答
-
好帮手慕张
2020-12-15
同学你好，a标签是行内元素，不能被嵌套的子元素撑起高度，如果想要撑起高度，可以给a标签通过display:block;转块元素即可。
祝学习愉快！
1h020-12-15
相似问题