2-5 编程练习作业提交
来源：2-5 编程练习
MiMicccc
2020-09-06 18:00:59
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IMOOC</title>
<style>
* {
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
section {
margin: 0 auto;
padding-top: 20px;
width: 1200px;
height: 500px;
}
section h1 {
margin-bottom: 20px;
font-size: 24px;
font-weight: bold;
}
section h1 > samp {
font-size: 24px;
font-weight: bold;
color: #999;
}
section > aside {
float: left;
width: 500px;
height: 400px;
}
section > aside > dl {
position: relative;
width: 500px;
height: 75px;
}
section > aside > dl > dt {
position: absolute;
top: -1px;
left: 85px;
font-weight: bold;
font-size: 18px;
line-height: 18px;
text-decoration: underline;
}
section > aside > dl > dd:first-of-type {
position: absolute;
top: 0;
left: 8px;
width: 50px;
height: 51px;
font-size: 24px;
line-height: 51px;
color: #fff;
text-align: center;
background: url('http://climg.mukewang.com/582e61290001787900500051.png') no-repeat;
}
section > aside > dl > dd:last-of-type {
position: absolute;
top: 20px;
left: 84px;
font-size: 16px;
}
section > article {
float: right;
width: 650px;
height: 400px;
}
section > article > p ,
section > article > img {
margin-bottom: 20px;
}
section > article > img {
width: 650px;
height: 150px;
}
</style>
</head>
<body>
<!-- 在此完成网页的HTML代码-->
<section>
<aside>
<h1>我是左侧标题 <samp>标题1</samp></h1>
<dl>
<dt>这是第一个小标题</dt>
<dd>1</dd>
<dd>简述简述简述简述简述简述简述简述简述简述简述简述</dd>
</dl>
<dl>
<dt>这是第二个小标题</dt>
<dd>2</dd>
<dd>简述简述简述简述简述简述简述简述简述简述简述简述</dd>
</dl>
<dl>
<dt>这是第三个小标题</dt>
<dd>3</dd>
<dd>简述简述简述简述简述简述简述简述简述简述简述简述</dd>
</dl>
<dl>
<dt>这是第四个小标题</dt>
<dd>4</dd>
<dd>简述简述简述简述简述简述简述简述简述简述简述简述</dd>
</dl>
</aside>
<article>
<h1>我是右侧标题 <samp>标题2</samp></h1>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<img src="http://climg.mukewang.com/582e61180001ede703300130.jpg">
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
</article>
</section>
</body>
</html>写回答
1回答
-
好帮手慕慕子
2020-09-06
同学你好，代码正确，效果实现的很棒，继续加油，祝学习愉快~
0
相似问题