麻烦老师查看写作业，是否有错及需要优化地方，谢谢。
来源：2-5 编程练习
qq_慕移动3101913
2019-07-31 17:28:38
*{
margin:0;
padding:0;
}
.main{
width: 1200px;
height: 500px;
margin:0 auto;
position: relative;
}
.main h1{
font-size: 30px;
font-weight: lighter;
margin-left: 10px;
margin-bottom: 15px;
}
.main h1 > samp {
font-size: 30px;
color: #7c7c7c;
}
.main > aside{
width: 450px;
position: absolute;
top: 0;
left: 0;
}
.main > aside > dl {
position: relative;
display: block;
height: 74px;
margin-bottom: 20px;
}
.main > aside > dl > dt {
position: absolute;
top:-1px;
left: 92px;
font-size: 16px;
font-weight: bold;
line-height: 16px;
text-decoration: underline;
margin:0 10px;
}
.main > aside > dl > dd:first-of-type{
z-index: 1;
position: absolute;
left: 35px;
}
.main > aside > dl > dd:last-of-type{
position: absolute;
top: 20px;
left: 90px;
margin:0 10px;
}
.main > aside > dl > .two{
z-index: 2;
position: absolute;
top:7px;
left: 53px;
color:#fff;
font-size: 25px;
}
.main > article{
width: 750px;
position:absolute;
top:0;
right:0;
}
.main > article > p,img{
margin-bottom: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<link rel="stylesheet" href="2-5style.css">
<body>
<section class="main">
<aside>
<h1>Recent <samp>Course</samp></h1>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dd>
<dd class="two">1</dd>
<dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites</dd>
</dl>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dd>
<dd class="two">2</dd>
<dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites</dd>
</dl>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dd>
<dd class="two">3</dd>
<dd>HTM\L is the standard markup language used to create web pages and its elements form the building blocks of all websites</dd>
</dl>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dd>
<dd class="two">4</dd>
<dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites</dd>
</dl>
</aside>
<article>
<h1>Welcome to <samp>Massive Open Online Course!</samp></h1>
<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回答
-
同学你好， 整体效果实现了。建议优化：
右侧标题可以不设置margin-left值，让其与下面的内容左对齐显示
可以适当的调整图片的宽度， 让显示效果更好哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~~
0h019-07-31
相似问题