老师好，footer三小图标，鼠标经过没有透明度和箭头的变化，怎么回事，除此之外，代码还有什么问题
来源：2-6 html5页面布局（表现层_footer）
慕尼黑4041527
2020-02-09 12:14:34
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="suitang/style.css"> </head> <body> <header> <div class="container"> <a href="suitang.html"><img src="HTML5网页布局（源代码）/images/logo.png"></a> <nav> <a class="Home active" href="suitang.com">Home</a> <a class="Course" href="">Course</a> <a class="Actual" href="">Actual</a> <a class="Plan" href="">Plan</a> <a class="FAQ" href="">FAQ</a> <a class="Notes" href="">Notes</a> </nav> </div> </header> <section class="banner"> <ul> <li class="active"><img src="HTML5网页布局（源代码）/images/banner/banner1.jpg"></li> <li class="left"><img src="HTML5网页布局（源代码）/images/banner/banner3.jpg"></li> <li class="right"><img src="HTML5网页布局（源代码）/images/banner/banner2.jpg"></li> </ul> </section> <section class="main"> <aside> <h2>recent <samp>course</samp></h2> <dl> <dt>hyper text markup language</dt> <dd><img src="HTML5网页布局（源代码）/images/course/02_09.png"></dd> <dd>He says hello to the cat. He plays with paper towels.A moment later, the snowman takes James's hand and goes out.They go up, up, up into the air.</dd> </dl> <dl> <dt>hyper text markup language</dt> <dd><img src="HTML5网页布局（源代码）/images/course/05_05.png"></dd> <dd>Hooray! It's snowing! It's time to make a snowman.James runs out. He makes a big pile of snow. He puts a big snowball on top. He adds a scarf and a hat. </dd> </dl> <dl> <dt>hyper text markup language</dt> <dd><img src="HTML5网页布局（源代码）/images/course/06_04.png"></dd> <dd>Hooray! It's snowing! It's time to make a snowman.James runs out. He makes a big pile of snow. He puts a big snowball on top. He adds a scarf and a hat. </dd> </dl> <dl> <dt>hyper text markup language</dt> <dd><img src="HTML5网页布局（源代码）/images/course/09_07.png"></dd> <dd>Hooray! It's snowing! It's time to make a snowman.James runs out. He makes a big pile of snow. He puts a big snowball on top. He adds a scarf and a hat. </dd> </dl> </aside> <article> <h2>welcome to<samp>massive open online course!</samp></h2> <p>He says hello to the cat. He plays with paper towels.A moment later, the snowman takes James's hand and goes out.</p> <img src="HTML5网页布局（源代码）/images/article.jpg"> <p>He says hello to the cat. He plays with paper towels.A moment later, the snowman takes James's hand and goes out.</p> <p>He says hello to the cat. He plays with paper towels.A moment later, the snowman takes James's hand and goes out.</p> </article> </section> <footer> <div class="container"> <p>He says hello to the cat. He plays with paper towels.A moment later</p> <span> <img src="HTML5网页布局（源代码）/images/icon/qq.png"> <img src="HTML5网页布局（源代码）/images/icon/sina.png"> <img src="HTML5网页布局（源代码）/images/icon/weichat.png"> </span> </div> </footer> </body> </html>
写回答
2回答
-
同学你好，是符号书写的有问题。在代码中所有的符号都是在输入法为英文状态下的为正确的。可以参考下方修改：
整体效果实现的不错，继续加油~
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0 -
慕尼黑4041527
提问者
2020-02-09
*{padding: 0;margin: 0;border: none;list-style: none;font-size: 14px;font-family: "Arial";text-decoration: none;} /*header部分*/ header{width: 100%;background-color: black;height: 80px;} header .container{width: 1200px;margin: 0 auto;} header .container > a{display: block;float: left;margin: 5px 25px;} header .container nav{float: right;} header .container nav a{color: white;display: block;width: 110px; height: 73px;line-height: 73px;text-align: center;float: left;font-size: 24px;} header .container nav a.Home{background: #443b91;} header .container nav a.Course{background: #027dd3;} header .container nav a.Actual{background: #78b71c;} header .container nav a.Plan{background: #fcb802;} header .container nav a.FAQ{background: #f57a03;} header .container nav a.Notes{background: #d20213;} header .container nav a:hover,header .container nav a.active{padding-bottom: 7px;} /*这里是banner图部分*/ .banner{background-color: #eaeaea;} .banner ul{position: relative;width: 1490px;height: 538px;/*overflow: hidden;*/margin: 0 auto;padding-top: 10px;} .banner ul li{position: absolute;width: 610px;height: 300px;overflow: hidden;} .banner ul li.active{z-index: 2;top:0px;right: 0;left: 0;bottom:0; margin: auto;width: 960px;height: 460px;border: 1px solid #fff; } .banner ul li.left{z-index: 1;top: 0px;bottom: 0;left: 0;margin: auto;} .banner ul li.right{z-index: 1;top: 0px;bottom: 0;right: 0;margin: auto;} .banner ul li img{position: absolute;left: -30%;height: 100%;} /*这里是main部分*/ .main{height: 473px;width: 1200px;margin: 34px auto 0;} .main aside{width: 450px;float: left;} .main article{width: 720px;float: right;overflow: hidden;} .main h2{font-size: 30px;font-weight: lighter;margin-bottom: 34px;} .main h2 samp{font-size: 30px;color: #7c7c7c;} .main aside dl{position: relative;height: 74px;margin-bottom: 17px;} .main aside dl dt{position: absolute;top: -1px;font-size: 16px;line-height: 16px;left: 92px;font-weight: bolder;text-decoration: underline;} .main aside dl dd:first-of-type{position: absolute;left: 0;} .main aside dl dd:last-of-type{position: absolute;left: 92px;top: 20px;} .main article p,.main article img{padding-bottom: 20px;} /*这里是footer部分*/ footer{background: black;} footer .container{height: 64px;width: 1200px;margin: 0 auto;} footer .container p{line-height: 64px;color: white;float: left;} footer .container span{float: right;padding:14px 40px;} footer .container span img{display:inline-block;padding-left: 4px;opacity: 0.7;} footer .container span img：hover{opacity: 1;cursor: pointer;}0
相似问题