老师麻烦帮我看下 问题该怎么解决2-10
<!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>css网页布局2-10编程练习</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.daohang{
background: black;
width: 100%;
height: 100px;
}
.logo{
float: left;
}
.wenzi{
float: right;
text-decoration: none;
}
.one,.two,.three,.four,.five{
float: left;
font-size:24px;
margin-right: 100px;
margin-left:50px;
line-height: 100px;
color: white;
/* 导航右边的文字 */
}
.neirong{
width: 100%;
margin: 0 auto;
height: 1200px;
overflow: hidden;
*zoom:1;
/* 导航和页面这块也有个明显缝隙 */
/* 页面内容主要区域 */
}
.left{
width: 50%;
height: 1200px;
float: left;
background: rgb(113, 201, 196);
/* 页面内容左半边 */
}
.right{
width: 50%;
height: 1200px;
float: right;
background: rgb(113, 201, 196);
/* 页面内容右边区域 */
}
.biaoti{
padding-top: 150px;
padding-left: 300px;
font-size: 36px;
font-weight: bold;
/* 左边标题 */
}
.lujing{
background: pink;
font-weight: bold;
display: inline-block;
margin-left: 300px;
margin-top: 20px;
/* 左边标题下的粉色背景文字 */
}
.wangye01{
float: right;
}
.dongtaiwangye{
margin-right: 150px;
margin-top: 20px;
/* 粉色背景文字 右边的文字，老师 我这里不知道如何让其左对齐 */
}
.lujing02{
padding-top: 150px;
padding-left: 300px;
font-size: 36px;
font-weight: bold;
/* 右边文字标题 */
}
.wangye02{
margin-left: 300px;
line-height: 60px;
/* 右边标题底下文字 */
}
.yejiao{
background: black;
width: 100%;
height: 100px;
text-align: center;
}
.yejiao03,.yejiao04,.yejiao05,.yejiao06,.yejiao07,.yejiao08{
line-height: 100px;
font-size: 24px;
color: white;
margin-right: 75px;
margin-left: 75px;
display: inline-block;
text-decoration: none;
/* 老师这页脚写完后 各个字之间有条很短的线是怎么回事 */
}
</style>
</head>
<body>
<div class="daohang">
<div class="logo">
<a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" ></a>
</div>
<div class="wenzi">
<a href="#">
<div class="one">课程</div>
<div class="two">职业路劲</div>
<div class="three">实战</div>
<div class="four">猿问</div>
<div class="five">手记</div>
</a>
</div>
</div>
<div class="neirong">
<div class="left">
<div class="biaoti">课程推荐</div>
<div class="lujing">职业路径</div>
<div class="wangye01">
<div class="dongtaiwangye">html与css实现动态网页</div>
</div>
<div class="lujing">职业路径</div>
<div class="wangye01">
<div class="dongtaiwangye">零基础入门Android语法与界面</div>
</div>
<div class="lujing">职业路径</div>
<div class="wangye01">
<div class="dongtaiwangye">ios基础语法与常用控件</div>
</div>
<div class="lujing">职业路径</div>
<div class="wangye01">
<div class="dongtaiwangye">php入门开发</div>
</div>
<div class="lujing">职业路径</div>
<div class="wangye01">
<div class="dongtaiwangye">java入门开发</div>
</div>
</div>
<!-- 左边文字部分 -->
<div class="right">
<div class="lujing02"> 相关推荐</div>
<div class="wangye02"> html css JavaScript</div>
<div class="wangye02"> html css Jqurey </div>
<div class="wangye02"> 移动端基础 移动端开发</div>
</div>
</div>
<div class="yejiao">
<a href="#" class="yejiao02">
<div class="yejiao03">网站首页</div>
<div class="yejiao04">企业合作</div>
<div class="yejiao05">人才招聘</div>
<div class="yejiao06">联系我们</div>
<div class="yejiao07">常见问题</div>
<div class="yejiao08">友情链接</div>
</a>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
同学你好，对于你的问题解答如下：
1、由于img默认存在间隙，所以logo区域的实际高度溢出顶部，导致顶部导航和中间内容存在空白间隙，如下图所示：
建议修改：给img添加display:block;属性消除间隙。
2、去掉给粉色背景文字右侧文字设置的右浮动，添加display:inline-block;属性调整为行内块元素，让其在一排居左对齐显示，然后添加margin适当调整文字间距即可。示例：
3、因为使用a标签包裹了底部导航项的内容，a标签又默认存在下划线样式，粘贴的代码中是给div添加的text-decoration属性，并不是针对a标签的，所以无法消除a标签默认的下划线，导致文字间存在短横线。
建议：直接a标签设置text-decoration属性即可。
经过上述修改后，代码效果实现是对的，不过同学的代码有些复杂，老师这里给同学提供另一种实现的参考思路，同学可以结合下面代码的注释测试理解
<!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>Document</title>
<style>
/* 去除所有默认的内外边距 */
* {
margin: 0;
padding: 0;
}
/* 去除li的默认样式 */
li {
list-style: none;
}
a {
text-decoration: none;
/* 去除a标签默认的下划线样式 */
color: #fff;
/*设置a标签的文字为白色*/
}
/* 顶部样式 */
.header {
width: 100%;
/* 设置行高高度，让文字垂直居中显示 */
height: 100px;
line-height: 100px;
/* 背景为黑色 */
background: black;
}
/* logo左浮动 */
.header a {
float: left;
}
/* 消除图片的自带间隙问题 */
.header a img {
display: block;
}
.header ul {
/* 导航整体右浮动 */
float: right;
/* 设置窗口右侧的间距 */
margin-right: 40px;
}
.header ul li {
/* 里面的导航项左浮动在一排显示 */
float: left;
/* 设置每个导航项之间得间距 */
margin-left: 40px;
}
/* 中间内容样式 */
.main {
width: 100%;
height: 800px;
background-color: #add8e6;
}
/* 样式相同的代码可以设置相同的类名一起设置，简化书写 */
.main .content {
/* 左浮动 */
float: left;
/* 宽度为父元素宽度的一半 */
width: 50%;
/* 设置上内边距，调整内容与盒子上方的间距 */
padding-top: 100px;
/* 设置为border-box盒子，让盒子的实际宽度等于设置的width属性值 */
box-sizing: border-box;
}
/* 设置左侧内容的文字左侧空白间距 */
.main .main-left {
padding-left: 100px;
}
/* 统一设置内容区域的标题和li的margin-bottom属性，简化书写*/
.main h2,
.main ul li {
/* 调整文字的上下间距 */
margin-bottom: 20px;
}
/* 统一给内容区域的span设置右间距，调整文字间距 */
.main ul li span {
margin-right:10px;
}
/* 文字设置粉色背景 */
.main .main-left .main-left-bg {
background: pink;
}
/* 页脚样式 */
.footer {
width: 100%;
/* 设置高度和行高一致，让文字垂直居中显示 */
height: 100px;
line-height: 100px;
/* 内容水平居中显示 */
text-align: center;
/* 背景颜色为黑色 */
background: black;
}
/* */
.footer li {
/* 设置为行内块元素在一行显示 */
display: inline-block;
/* 设置左右margin调整文字左右间距 */
margin: 0 20px;
}
</style>
</head>
<body>
<!-- 顶部 -->
<div class="header">
<!-- 左侧logo -->
<a class="logo">
<img src="//img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" alt="">
</a>
<!-- 右侧导航 -->
<ul>
<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>
</div>
<!-- 中间内容 -->
<div class="main">
<!-- 中间内容的左侧 -->
<div class="content main-left">
<!-- 标题 -->
<h2>课程推荐</h2>
<!-- 内容 -->
<ul>
<li><span class="main-left-bg">职业路径</span><span>html5与css3实现动态网页</span></li>
<li><span class="main-left-bg">职业路径</span><span>零基础入门Android语法与界面</span></li>
<li><span class="main-left-bg">职业路径</span><span>ios基础语法与常见控件</span></li>
<li><span class="main-left-bg">职业路径</span><span>php入门开发</span></li>
<li><span class="main-left-bg">职业路径</span><span>Java入门开发</span></li>
</ul>
</div>
<!-- 中间内容的右侧 -->
<div class="content main-right">
<!-- 标题 -->
<h2>相关课程</h2>
<!-- 内容 -->
<ul>
<li><span>HTML</span><span>css</span><span>JavaScript</span></li>
<li><span>HTML</span><span>css</span><span>jQuery</span></li>
<li><span>移动端基础</span><span>移动端APP开发</span></li>
</ul>
</div>
</div>
<!-- 页脚 -->
<div class="footer">
<ul>
<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>
</div>
</body>
</html>祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星