无法显示背景色为黑色,还有块状元素那里也打不到老师演示的那样
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>imooc</title> <!-- 引入css样式 12 --> <link rel="stylesheet" type="text/css" href="testcss.css"> </head> <body> <!-- 头部标签 header 1--> <header> <!-- container容器的意思 2 --> <div> <!-- 创建首页标签LOGO 引入切好的图片标签 3 --> <a href="test1.html"><img src="images/logo.png" ></a> <!-- 导航标签 4--> <nav> <a class="Home active" href="test1.html">Home</a> <a href="#">Course</a> <a href="#l">Actual</a> <a href="#l">Plan</a> <a href="#l">FAQ</a> <a href="#l">Notes</a> </nav> </div> </header> <!--添加横幅 5 --> <section> <ul> <li><img src="images/banner/banner1.jpg" ></li> <li><img src="images/banner/banner2.jpg" ></li> <li><img src="images/banner/banner3.jpg" ></li> </ul> </section> <!-- 主题部分 6 --> <section> <!-- 侧边栏 7 --> <aside> <!-- 标题 ,并同samp强调 8 --> <h1>Recent <samp>Course</samp></h1> <!-- d1>dd>dt 9 --> <d1> <dt>这里是Java</dt> <dd><img src="images/Course/05_05.png" ></dd> <dd>这里是我开始做的第一个网页布局实验</dd> </d1> <d1> <dt>这里是C++</dt> <dd><img src="images/Course/06_04.png" ></dd> <dd>这里是我开始做的第一个网页布局实验</dd> </d1> <d1> <dt>这里是JavaScript</dt> <dd><img src="images/Course/09_07.png" ></dd> <dd>这里是我开始做的第一个网页布局实验</dd> </d1> <d1> <dt>这里是AngularJs</dt> <dd><img src="images/Course/02_09.png" ></dd> <dd>这里是我开始做的第一个网页布局实验</dd> </d1> </aside> <!-- 9 --> <article> <!-- 10 --> <h1>Welcome to <samp>Massive Open Online Course</samp></h1> <!-- 11 --> <img src="images/article.jpg" > <p>这是我的第一段文章</p> <p>这是我的第二段文章</p> <p>这是我的第三段文章</p> </article> </section> <!-- 尾部标签 12 --> <footer> <div> <p>Copyright @2016 imooc.com All Rights Reserved.</p> <span> <img src="images/icon/weichat.png" > <img src="images/icon/qq.png" > <img src="images/icon/sina.png" > </span> </div> </footer> </body> </html>
*{ /*这里是通配符*/
font-family: Arial;
font-size: 14px;
margin: 0;
padding: 0;
border: none;;
}
a{ /*这里是超链接*/
text-decoration:none;
}
ul{ /*这里是UL*/
list-style: none;
}
header{
height: 80px;
background: #000;
}
header >.container{ /*这里是设置容器的,>是子选择器*/
width: 1200px; /*宽度设置为1200像素*/
margin: 0 auto; /*这里是设置自动区中*/
}
header >.container> a{ /*这里是设置LOGO标题部分*/
display: block;
float: left; /*浮动块设置往左移动*/
margin: 5px 25px; /*这里是控制好5像素和25像素*/
}
header>.container> nav{ /*这里是设置导航条*/
float: right; /*控制往右浮动*/
}
header > .container > nav >a{ /*这里是控制导航条下面的超链接*/
font-size: 24px; /*控制字体大小*/
line-height: 73px; /*控制行高数73,就会数值居中*/
display: block; /*转换成块级元素,不然宽度和高度就无效*/
float: left; /*设置成浮动元素*/
width: 110px;
height: 73px;
text-align: center; /*设置文字居中*/
color: #fff; /*设置背景为白色*/
}
header > .container > nav > a.Home{ background: #433b90;}
header > .container > nav > a.Course{ background: #017fcb; }
header > .container > nav > a.Actual{ background: #78b917; }
header > .container > nav > a.Plan{ background: #feb800; }
header > .container > nav > a.FAQ{ background: #f27c01 }
header > .container > nav > a.Notes{ background: #d40112; }
header > .container > nav > a.hover,
header > .container > nav > a.active {
padding-bottom: 7px;
}如题,达不到这两个要求,不知道是哪里出问题了。另外下载sublimeCodeIntel时,出现异常,不知道该怎样解决?
29
收起
正在回答
2回答



关于sublimeCodeInte下载失败,你可以尝试重新安装Package Control,祝学习愉快!
HTML5与CSS3实现动态网页 2018
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础,却不知道如何进阶?本路径带你通过系统学习,完成从“会做网页”到“做出好的动态网页”的蜕变,迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星