请老师帮忙看下，谢谢
来源：2-5 编程练习
weixin_慕仔2495609
2019-05-21 14:32:18
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IMOOC</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
section.main{
width:1200px;
height:473px;
margin: 34px auto 0;
}
section.main h1{
font-size:30px;
font-weight:400;
margin-bottom:23px;
}
section.main h1 samp{
font-size:30px;
font-weight:400;
color:#7c7c7c;
}
section.main aside{
float:left;
width:450px;
}
section.main aside dl{
position:relative;
height:74px;
display:block;
margin-bottom:23px;
}
section.main aside dl dt{
position:absolute;
top:-1px;
left:92px;
font-size:16px;
font-weight:700;
line-height:16px;
text-decoration:underline;
}
section.main aside dl dd:first-of-type{
position:absolute;
left:0;
font-size:35px;
background-image:url(http://climg.mukewang.com/582e61290001787900500051.png);
background-size: 50px;
background-position: center;
padding:3 15px;
color:#fff;
}
section.main aside dl dd:last-of-type{
position:absolute;
top:20px;
left:90px;
font-size:14px;
}
section.main article{
float:right;
width:720px;
overflow:hidden;
}
section.main article p,
section.main article img{
margin-bottom:20px;
font-size:14px;
}
section.main article img{
width:100%;
height:210px;
}
</style>
</head>
<body>
<!-- 在此完成网页的HTML代码-->
<section class="main">
<aside>
<h1>Recent <samp>Course</samp></h1>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd>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>Cascading Style Sheets</dt>
<dd>2</dd>
<dd>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.</dd>
</dl>
<dl>
<dt>JavaScript</dt>
<dd>3</dd>
<dd>JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd>
</dl>
<dl>
<dt>AngularJS</dt>
<dd>4</dd>
<dd>AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and...</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-05-21
相似问题