老师，麻烦检查一下
来源：2-4 html5页面布局（表现层_main）
山有木兮木有枝z
2020-06-02 23:01:26
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
section{
width: 1500px;
height: 600px;
}
h1{
font-size: 30px;
font-weight: bold;
}
samp{
font-size: 30px;
color: #7c7d7f;
}
aside dl{
position: relative;
height: 100px;
}
aside dl dt{
position: absolute;
left: 100px;
top: 15px;
text-decoration: underline;
font-weight: bold;
}
aside dl dd:first-of-type{
position: absolute;
left: 100px;
top:40px;
}
aside dl dd:last-of-type{
position: absolute;
left: 30px;
top: 20px;
}
aside{
float: left;
width: 600px;
padding-top: 30px;
}
article{
float: right;
width: 850px;
padding-top: 30px;
}
article p ,.one{
margin-top: 30px;
}
.one{
height: 150px;
width: 800px;
}
</style>
</head>
<body>
<section>
<aside>
<h1>Recent <samp>Course</samp></h1>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd>HTML is the standard markup language used to create web pages
and its elements form the building blocks of all websites.</dd>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dd>
</dl>
<dl>
<dt>Cascading Style Sheets</dt>
<dd>Cascading Style Sheets (CSS) is a simple mechanism
for adding style (e.g., fonts, colors, spacing) to Web documents.</dd>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dd>
</dl>
<dl>
<dt>JavaScript</dt>
<dd>JavaScript is a high-level, dynamic, untyped,
and interpreted programming language.</dd>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dd>
</dl>
<dl>
<dt>AngularJS</dt>
<dd>AngularJS is an open-source web application framework mainly
maintained by Google and by a community of individuals and...</dd>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"></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 class="one" 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回答
-
同学你好，左侧内容的数字没有实现。如下：
建议：在html中添加结构，使用定位调整位置，例如：
同学可以根据效果图再调整下样式。其他地方实现的不错。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
