老师帮忙查看一下！

来源：2-5 编程练习

好狗边上飘314

2019-10-11 12:53:10

<!-- <!DOCTYPE html> -->
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
font-family:Arial;
font-size:14px;
}
.main{
width:1200px;
/*height:473px;*/
margin:34px auto 0;

}
.main h1{
font-size:30px;

}
.main h1 > samp{
color:#7c7c7c;
font-size:30px;
}
aside{
width:450px;
float:left;
}
.main > aside > dl{
position:relative;
display:block;
height:105px;
margin-bottom:25px;
top:30px;
}
.main > aside > dl > dt{
position:absolute;
top:4px;
left:85px;
font-size:16px;
line-height:16px;
font-weight:bold;
text-decoration:underline;
}
.main > aside > dl > .pic{
position:absolute;
left:0;
top:0px;
}
.main > aside > dl > dd{
position:absolute;
left:85px;
top:30px;
}
span{
position:absolute;
top:10px;
left:18px;
color:#fff;
font-size:24px;

}
article{
width:723px;
float:right:;
overflow:hidden;
padding-left:25px;
}
article > p{
padding-top:30px; 
}
article > img{
width:723px;
height:189px;
}

</style>


</head>
<body>
<section>
<div class="main">
<!-- 侧边栏 -->
<aside>
<h1>Recent <samp>Course</samp></h1>
<dl>
<dt>HyperText Mark-up Language</dt>
<dd class="pic"><span>1</span><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dd>
<dd>超文本标记语言或超文本链接标示语言（标准通用标记语言下的一个应用）HTML（HyperText Mark-up Language）是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。</dd>
</dl>
<dl>
<dt>Cascading Style Sheets</dt>
<dd class="pic"><span>2</span><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dd>
<dd>超文本标记语言或超文本链接标示语言（标准通用标记语言下的一个应用）HTML（HyperText Mark-up Language）是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。</dd>
</dl>
<dl>
<dt>JavaScript</dt>
<dd class="pic"><span>3</span><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dd>
<dd>超文本标记语言或超文本链接标示语言（标准通用标记语言下的一个应用）HTML（HyperText Mark-up Language）是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。</dd>
</dl>
<dl>
<dt>AngularJS</dt>
<dd class="pic"><span>4</span><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dd>
<dd>超文本标记语言或超文本链接标示语言（标准通用标记语言下的一个应用）HTML（HyperText Mark-up Language）是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。</dd>
</dl>

</aside>
<!-- 内容 -->
<article>
<h1>Welcome to <samp>Massivbe Open Oline Course!</samp></h1>
<p>HTML可以嵌入如JavaScript的脚本语言，它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表（CSS）来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟（W3C）鼓励人们使用CSS替代一些用于表现的HTML元素。</p>
<img src="http://climg.mukewang.com/582e61180001ede703300130.jpg">
<p>HTML可以嵌入如JavaScript的脚本语言，它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表（CSS）来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟（W3C）鼓励人们使用CSS替代一些用于表现的HTML元素。</p>
<p>HTML可以嵌入如JavaScript的脚本语言，它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表（CSS）来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟（W3C）鼓励人们使用CSS替代一些用于表现的HTML元素。</p>



</article>
    </div>
</section>

</body>
</html>

PS:代码中的宽高数值都是模糊数值

写回答

1回答