为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/HTML/CSS

/网页布局基础

为什么跟显示的效果跟教程中的不一样呢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>前端开发教程-练习代码</title>
<style type="text/css">
*{margin:0;padding:0;font-size:12px;color:#333;font-family:Verdana, Geneva, sans-serif, "宋体";list-style:none;}
a{text-decoration:none;}
a:hover{border-bottom:3px solid #cc0000;}
p{line-height:24px;}
#warp{width:780px;margin:0 auto;padding:0 10px 10px;border-left:1px solid #e7e7e7;border-right:1px solid #e7e7e7;}
#header{width:100%;overflow:hidden;}
.logo{width:100%;height:80px;background:#3399cc;color:#fff;line-height:80px;text-indent:30px;font-size:30px;font-family="微软雅黑";}
.nav{width:100%;margin-top:10px;}
.nav li{float:left;margin:0 32px;}
.nav li a{color:#7f7f7f;font-size:16px;display:block;padding-bottom:2px;}
.nav li a:hover{boder-bottom:3px solid #cc0000;text-decoration:none;}
.nav li.current{border-bottom:3px solid #cc0000;}
.nav li.current a:hover{border-bottom:none;}
#mainbody{position:relative;margin-top:20px;}
#sidebar{width:180px;paidding-bottom:10px;}
#sidebar dl{padding:0 0 5px;}
#sidebar dt{font-weight:normal;line-height:22px;font-family="微软雅黑";font-size:14px;color:#fff;background:#3399cc;padding:5px 0 5px 15px;margin-bottom:10px;}
#sidebar dd{line-height:20px;padding-left:15px;}
#sidebar dt.current a{color:#f00;}
#content{position:absolute;top:0;margin-left:200px;}
#content h1{color:#000;font-size:24px;font-family:"微软雅黑";text-weight:normal;}
#content h3{margin-top:10px;line-height:26px;}
#content dl{margin-bottom:10px;}
#content dt{font-weight:bold;line-height:26px;}
#content dd{line-height:22px;}
.learn{color:#900b09;text-decoration:underline;padding-bottom:2px;}
.learn a:hover{text-decoration:none;}
.tips{color:#999;margin-top:20px;}
.pageto{border-top:1px solid #aaa;border-bottom:3px solid #aaa;margin-top:5px;padding:15px 0;}
.pageto a{margin:0 10px;background:#f3f3f3;padding:5px 20px;border:1px solid #fdfdfd;color:#555;}
.pageto a:hover{color:#000;text-decoration:none;}
.disline{border:1px dashed #ccc;}
#footer{width:100%;margin-top:15px;padding:0 15px;text-align:center;color:#999;background:#ddd;}
</style>
</head>

<body>
<div id="wrap">
  <div id="header">
    <div class="logo">前端开发教程</div>
    <div class="nav">
      <ul>
        <li class="current"><a href="#">CSS</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">JQuery</a></li>
        <li><a href="#">Ajax</a></li>
      </ul>
    </div>    
  </div>
  <div id="mainbody">
    <div id="sidebar">
      <dl>
        <dt>CSS 基础教程</dt>
        <dd class="current"><a href="#">CSS 简介</a></dd>
        <dd><a href="#">CSS 基础语法</a></dd>
        <dd><a href="#">CSS 高级语法</a></dd>
        <dd><a href="#">CSS 派生选择器</a></dd>
        <dd><a href="#">CSS id选择器</a></dd>
        <dd><a href="#">CSS 类选择器</a></dd>
        <dd><a href="#">CSS 属性选择器</a></dd>
        <dd><a href="#">CSS 创建</a></dd>
        <dt>CSS 样式</dt>
        <dd><a href="#">CSS 背景</a></dd>
        <dd><a href="#">CSS 文本</a></dd>
        <dd><a href="#">CSS 字体</a></dd>
        <dd><a href="#">CSS 链接</a></dd>
        <dd><a href="#">CSS 列表</a></dd>
        <dd><a href="#">CSS 表格</a></dd>
        <dd><a href="#">CSS 轮廓</a></dd> 
        <dt>CSS 盒子模型</dt>
        <dd><a href="#">CSS 盒子模型概述</a></dd>
        <dd><a href="#">CSS 内边距</a></dd>
        <dd><a href="#">CSS 外框</a></dd>
        <dd><a href="#">CSS 外边距</a></dd>
        <dd><a href="#">CSS 外边距合并</a></dd>
        <dt>CSS 定位</dt>
        <dd><a href="#">CSS 定位概述</a></dd>
        <dd><a href="#">CSS 相对定位</a></dd>
        <dd><a href="#">CSS 绝对定位</a></dd>
        <dd><a href="#">CSS 浮动</a></dd>
        <dt>CSS 选择器</dt>
        <dd><a href="#">CSS 元素选择器</a></dd>
        <dd><a href="#">CSS 选择器分组</a></dd>
        <dd><a href="#">CSS 类选择器详解</a></dd>
        <dd><a href="#">CSS ID选择器详解</a></dd>
        <dd><a href="#">CSS 属性选择器详解</a></dd>
        <dd><a href="#">CSS 后代选择器</a></dd>
        <dd><a href="#">CSS 子元素选择器</a></dd>
        <dd><a href="#">CSS 相邻兄弟选择器</a></dd>
        <dd><a href="#">CSS 伪类</a></dd>
        <dd><a href="#">CSS 伪元素</a></dd>
        <dt>CSS 高级</dt>
        <dd><a href="#">CSS 对齐</a></dd>
        <dd><a href="#">CSS 尺寸</a></dd>
        <dd><a href="#">CSS 分类</a></dd>
        <dd><a href="#">CSS 导航栏</a></dd>
        <dd><a href="#">CSS 图片库</a></dd>
        <dd><a href="#">CSS 图片透明</a></dd>
        <dd><a href="#">CSS 媒介类型</a></dd>
        <dd><a href="#">CSS 注意事项</a></dd>
        <dd><a href="#">CSS 总结</a></dd>
      </dl>
    </div>    
    <div id="content">
      <h1>CSS 简介</h1>
      <div class="pageto"><a href="#">上一章</a><a href="#">下一章</a></div>
      <h3>你应该知道这些知识</h3>
      <p>&middot;HTML/XHTML</p>
      <p>如果你希望首先学习这些项目，我们的<a href="#">主页</a>上可以找到教程。</p>
      <div class="disline"></div>
      <h3>什么是CSS？</h3>
      <p>CSS即级联样式表。 它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p>
      <div class="disline"></div>
      <h3>基本信息</h3>
      <p>CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。</p>
      <div class="disline"></div>
      <h3>发展历史</h3>
      <dl>
        <dt>CSS1</dt>
        <dd>作为一项W3C推荐，CSS1发布于 1996年12月17 日。1999 年1月11日，此推荐被重新修订。</dd>
      </dl>
      <dl>
        <dt>CSS2</dt>
        <dd>作为一项 W3C 推荐，CSS2发布于 1999年1月11日。CSS2添加了对媒介（打印机和听觉设备）和可下载字体的支持。</dd>
      </dl>
      <h3>CSS3</h3>
      <dl>
        <dt>CSS3 计划将 CSS 划分为更小的模块。</dt>
        <dd class="learn"><a href="#">亲自体验一下</a>！</dd>
      </dl>
      <div class="pageto"><a href="#">上一章</a><a href="#">下一章</a></div>
      <p class="tips">本站提供的内容仅用于学习培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。</p>
    </div>        
  </div>
  <div id="footer">版权所有</div>
</div>  
</body>
</html>

各位大神帮我看看：

  1. wrap的宽度，我设置了，但是还是全屏的。

  2. sidebar的dt标签的margin-top值没有表现出来。

  3. a:hover与教程的源码效果不一样。

  4. footer的高度问题。我写的跟教程源码一样的，为什么效果还是不一样。

十十十十十三

2017-04-18

源自：网页布局基础  4-6

关注问题 我要回答
601
操作
收起

正在回答

3 回答

左右手年华
2017-07-20

#mainbody{position:relative;margin-top:20px;}这里错了，应该这样

#mainbody {

    width:100%;

    position:relative;

    margin-top:20px;

}

0 回复 有任何疑惑可以回复我~
收起回答
可乐要加冰Xx
2017-06-01

你把html代码里的[任务一]？[任务二]？[任务三]？去掉就OK了

0 回复 有任何疑惑可以回复我~
收起回答
轲粒
2017-04-18

margin-left:200px 改成 margin-left:220px

0 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
网页布局基础
  • 参与学习       214707    人
  • 解答问题       1756    个

让你精通CSS中三大定位机制，彻底掌握网页布局的相关知识

进入课程

为什么跟显示的效果跟教程中的不一样呢

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信