老师，帮忙检查下，谢谢！
来源：2-5 编程练习
慕仙0287733
2019-11-11 21:12:17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IMOOC</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
border: none;
}
section{width: 100%;}
aside{width: 40%;float: left;position: relative;}
article{width: 60%;float: left;position: relative;}
dl{width: 100%;position: relative;}
dt{
background-image: url(http://climg.mukewang.com/582e61290001787900500051.png);
background-repeat: no-repeat;
margin-top: 20px; margin-bottom: 40px; margin-left: 30px;
height: 50px;width: 50px;
color: #fff;line-height: 50px;text-align: center;
}
aside h2{margin-top: 10px; margin-left: 20px;font-weight: normal;}
aside h2 span{color: gray;}
dd{
position: absolute;
left: 100px;top: 0px;
line-height: 1.2em;
}
dd p{text-decoration: underline;font-weight: bold;font-size: 18px;}
dd div{font-size: 16px;}
article h2{margin-top: 10px; margin-left: 20px;font-weight: normal;}
article h2 span{color: gray;}
article p{margin: 20px;}
article img{margin-left: 20px;width: 700px;height: 180px;}
</style>
</head>
<body>
<!-- 在此完成网页的HTML代码-->
<section>
<aside>
<h2>Recent <span>Course</span></h2>
<dl>
<dt class="one">1</dt>
<dd>
<p>Hyper Text Markup Language</p>
<div>HTML is the standard markup language used to create web pages and its elements form
the building blocks of all websites</div>
</dd>
</dl>
<dl>
<dt class="two">2</dt>
<dd>
<p>Cascading Style Sheets</p>
<div>Cascading Style Sheets(CSS) is a simple mechanism for adding style(e,g,fonts,colors,
spacing) to web documents.</div>
</dd>
</dl>
<dl>
<dt class="three">3</dt>
<dd>
<p>JavaScript</p>
<div>JavaScript is a high-level,dynamic,untyped,and interpreted programming language.</div>
</dd>
</dl>
<dl>
<dt class="four">4</dt>
<dd>
<p>AngularJS</p>
<div>AngularJS is an open-source web application framework mainly maintained by Google
and by a commutry of indiviuals and...</div>
</dd>
</dl> </aside>
<article>
<h2>Welcome to <span>Massive Open Online Course!</span></h2>
<p>We provide the latest knowledge to help you cope with the changing world!</p>
<img src="http://climg.mukewang.com/582e61180001ede703300130.jpg">
<p>We hope that all the students who love the internet can be more convenient access to learning
resources,using the internet thinking to change our learning.</p>
<p>Focus on IT skills education MOOC,consistent with the development trend of the internet down
to earth's MOOC.We are free,we only teach useful ,we concentrate on education.</p>
</article>
</section></body>
</html>
请老师帮忙看看有哪些需要改进的地方，谢谢！
1回答
-
同学你好， 代码正确，效果实现的不错。 建议优化：
调整section的宽度， 结合margin属性，让整体水平居中显示，效果会更好
可以将相同的代码使用组合选择器写在一起， 简化代码的书写
如果帮助到了你， 欢迎采纳，祝学习愉快~~~
0
相似问题