麻烦老师检查一下~非常感谢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>25</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-family: Arial;
}
section.main{
width: 1200px;
height: 600px;
margin: 0 auto;
}
.main aside{
width: 500px;
height: 600px;
float: left;
}
.main h1{
font-size: 30px;
margin-bottom: 20px
}
.main h1 samp{
font-size: 30px;
color: #7c7c7c;
}
.main aside dl{
position: relative;
width: 400px;
height: 74px;
margin-bottom: 17px;
margin-left: 20px;
}
.main aside dl dt{
position: absolute;
top: -1px;
left: 70px;
font-size: 16px;
text-decoration: underline;
font-weight: bold;
line-height: 16px;
}
.main aside dl dd.image{
position: absolute;
left: 0;
}
.main aside dl dd.image div{
position: absolute;
left:18px;
top:9px;
color: white;
font-size: 25px;
}
.main aside dl dd.word{
position: absolute;
top: 20px;
left: 68px;
font-size: 15px;
}
.main article{
width: 700px;
height: 600px;
float: right;
}
.main article p{
margin: 20px 20px 20px 0px;
font-size: 15px;
}
.main article img{
width: 680px;
height: 150px;
}
</style>
</head>
<body>
<section class="main">
<aside>
<h1>Recent <samp>Course</samp></h1>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd class="image">
<img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png">
<div>1</div>
</dd>
<dd class="word">HTML is the standard markup language used to create web pages and its elements form the building blockes of all website</dd>
</dl>
<dl>
<dt>Cascading Style Sheets</dt>
<dd class="image">
<img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png">
<div>2</div>
</dd>
<dd class="word">Cascading Style Sheets(CSS) is a simple machanism for adding style (e.g, fonts, colors, spacing) to Web documents.</dd>
</dl>
<dl>
<dt>JavaScript</dt>
<dd class="image">
<img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png">
<div>3</div>
</dd>
<dd class="word">JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd>
</dl>
<dl>
<dt>AngularJS</dt>
<dd class="image">
<img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png">
<div>4</div>
</dd>
<dd class="word">AngularJS is an open-source web application framework mainly maintained ny Google and ny 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 th changing world!</p>
<img src="http://img1.sycdn.imooc.com/climg//582e61180001ede703300130.jpg">
<p>We provide the latest knowledge to help you cope with th changing world!We provide the latest knowledge to help you cope with th changing world!We provide the latest knowledge to help you cope with th changing world!</p>
<p>We provide the latest knowledge to help you cope with th changing world!We provide the latest knowledge to help you cope with th changing world!We provide the latest knowledge to help you cope with th changing world!</p>
</article>
</section>
</body>
</html>0
收起
正在回答
1回答
同学你好,
① 老师运行了你的代码，效果是正确的，继续努力哦~
② 还有一个小问题，因为下划线设置的位置是文字的基线，在英文中可以理解为四线三格的第三条线，所以y,和p等字母会在线的下方。因此我们可以使用下边框的方式让文字不在线的下方显示。
③ 修改
效果：
如果还有疑惑，可以在问答区再次提问，我们会继续为你解答的。
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星