麻烦老师帮我看看
来源：2-5 编程练习
陈孝芳
2019-10-25 20:30:40
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IMOOC</title>
<style type="text/css">
*{
padding:0;
margin:0;
border:0;
}
section{
height:500px;
width:1200px;
margin:30px auto;
}
h1{
font-size:30px;
font-weight:bolder;
margin-bottom:25px;
}
h1 samp{
font-size:30px;
color:#7c7c7c;
}
section aside{
float:left;
width:450px;
}
section aside dl{
position:relative;
display:block;
height:70px;
width:470px;
margin-bottom:30px;
}
section aside dl dt{
position:absolute;
top:-1px;
left:100px;
font-size:16px;
font-weight:bold;
line-height:16px;
text-decoration:underline;
}
section aside dl span{
font-size:30px;
font-weight: bolder;
color:white;
font-family:"宋体";
position:absolute;
top:9px;
left:18px;
z-index:5;
}
section aside dl dd:first-of-type{
position:absolute;
left:0;
}
section aside dl dd:last-of-type{
position:absolute;
left:100px;
top:30px;
}
section article{
float:right;
width:720px;
}
section article p{
margin-bottom:30px;
}
section article img{
display:block;
width:700px;
height:250px;
margin-bottom:30px;
}
</style>
</head>
<body>
<!-- 在此完成网页的HTML代码-->
<section>
<aside>
<h1>Recent <samp>Course</samp></h1>
<dl>
<dt>Hyper Text Markup Language</dt>
<span>1</span>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"/></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>
<span>2</span>
<dt>Cascading Style Sheets</dt>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"/></dd>
<dd>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.</dd>
</dl>
<dl>
<span>3</span>
<dt>JavaScript</dt>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"/></dd>
<dd>JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd>
</dl>
<dl>
<span>4</span>
<dt>AngularJS</dt>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"/></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回答
-
好帮手慕慕子
2019-10-26
同学你好， 整体效果实现的不错， 不过有如下细节需要注意一下
如下图所示，效果图中， 标题和下面的内容不是对齐效果哦
建议：可以给标题添加负的ｍａｒｇｉｎ值实现效果
可以适当增加左侧ｄｌ的高度，让左侧内容整体与右侧高度一致， 建议优化：
如果帮助到了你， 欢迎采纳！
祝学习愉快～～～
0
相似问题