请老师检查一下，谢谢！
来源：2-5 编程练习
Redamancy_Y6
2019-12-15 19:02:24
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IMOOC</title> <link href="homework.css" rel="stylesheet" type="text/css"/> </head> <body> <!-- 在此完成网页的HTML代码--> <header> <div class="main"> <aside> <h1>Recent <span>Course</span></h1> <dl> <dt>Hyper Text Markup Language</dt> <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 bullding blocks of allwebsites. </dd> </dl> <dl> <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> <dt>JavaScript</dt> <dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dd> <dd> JavaScipt is a high-level,dynamic,untyped,and interpreted programming language. </dd> </dl> <dl> <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> <section> <h1>Welcome to <span>Mmassive Open Online Course!</span></h1> <article> <p>We providle the latest knowledge to help you cope with the changing word!</p> <img src="http://climg.mukewang.com/582e61180001ede703300130.jpg"> <p>Focus on IT skills education MOOC,consistent with the development trent of intement down to earth's MOOC We are free,we only teach useful,we concentrate on education.</p> <p>Focus on IT skills education MOOC,consistent with the development trent of intement down to earth's MOOC We are free,we only teach useful,we concentrate on education.</p> </article> </section> </div> </header> </body> </html>
*{
padding: 0;
margin: 0;
font-family: Arial;
border: none;
}
.main{
width: 1200px;
height: 473px;
overflow: hidden;
margin: 0 auto;
}
aside{
width: 450px;
float: left;
}
aside > h1{
font-size: 30px;
margin-bottom: 10px;
}
aside > h1 >span{
font-size: 20px;
color:#999;
}
aside > dl{
position: relative;
display: block;
height: 74px;
margin-bottom: 17px;
}
aside > dl > dt{
position: absolute;
top: -1px;
left: 60px;
font-size: 16px;
font-weight: bold;
line-height: 16px;
text-decoration: underline;
}
aside > dl > dd:first-of-type{
position: absolute;
left: 0;
top: 0;
}
aside > dl > dd:last-of-type{
position: absolute;
top: 20px;
left: 60px;
font-weight:lighter;
}
section{
width: 720px;
float: right;
}
section > h1{
font-size: 30px;
margin-bottom: 10px;
}
section > h1 > span{
font-size: 20px;
color: #999;
}
section > article > p{
margin-bottom: 10px;
}
section > article > img{
margin-bottom: 10px;
width: 720px;
height: 220px;
}
1回答
-
同学你好，整体效果是可以的，但是左侧内容的数字没有写，效果图如下：
数字可以利用定位调整到相应的位置。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0h019-12-15
相似问题