编程练习检查。
来源：2-5 编程练习
滚回去立正坐好
2019-08-06 15:33:26
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="section.css" type="text/css">
<style>
*{
padding:0;
margin:0;
font-family:sans-Serif;
}
section{
width:1200px;
margin:0 auto;
}
section > aside{
width:450px;
float:left;
}
section h1{
font-size: 30px;
margin: 25px auto;
font-weight: lighter;
}
section samp{
color:#7c7c7c;
}
section > aside > dl{
position: relative;
/*margin-bottom: 20px;*/
height:100px; /*不设置dl高度有什么影响*/
}
section > aside > dl > dt{
font-size:16px;
font-weight: bold;
text-decoration: underline;
position:absolute;
left:80px;
}
section > aside > dl > dd:first-of-type{
position:relative;
z-index: 1;
left:17px;
}
section > aside > dl > dd > span{
font-size: 25px;
z-index: 2;
position:absolute;
left:25px;
top:25px;
margin-top:-14px;
margin-left:-7px;
color:#fff;
}
section > aside > dl > dd:last-of-type{
font-size: 14px;
position:absolute;
left:80px;
top:25px;
}
section > article{
width:720px;
float:right;
}
section > article > p,
section > article > img{
margin-bottom: 20px;
font-size:14px;
}
section > article > img{
height:210px;
width:720px;
}
</style>
</head>
<body>
<!-- section网页主体 -->
<section>
<!-- 侧边栏 -->
<aside>
<h1>Recent <samp>Course</samp></h1>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"><span>1</span></dd>
<dd>html is the standard markup language used to create web pages and its
elements form the building blocks of all websites.</dd>
</dl>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"><span>2</span></dd>
<dd>html is the standard markup language used to create web pages and its
elements form the building blocks of all websites.</dd>
</dl>
<dl>
<dt>JAVASCRIPT</dt>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"><span>3</span></dd>
<dd>javascript is a high-level,dynamic,untyped,and interpreted programing
language.</dd>
</dl>
<dl>
<dt>AngularJS</dt>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"><span>4</span></dd>
<dd>html is the standard markup language used to create web pages and its
elements form the building blocks of all websites.</dd>
</dl>
</aside>
<!-- article -->
<article>
<h1>welcome to <samp>massive open online course</samp></h1>
<p>we provide the lastest knowledge to help you cope the changing the world.</p>
<img src="http://climg.mukewang.com/582e61180001ede703300130.jpg"/>
<p>we hope that all students who love the internet can be more convenient access ti
learning resources,using the internet thinking to change our learing.</p>
<p>focus on it skill education mooc,that all students who love the internet can be more convenient access ti
learning resources.</p>
</article>
</section>
</body>
</html>
请纠出需要改进的地方。高度宽度，内边距外边距设置数字合理吗？怎样还能更简化？
1回答
-
好帮手慕慕子
2019-08-06
同学你好，
aside下的dl不设置高度， 由于子元素设置了绝对定位，脱离文档流，父级元素高度不能有子元素撑开， 导致文字出现重叠现象。示例：不设置高度的效果
代码中的内外边距，宽高等设置的都很合理， 效果实现的很棒。 代码条理也很清晰简洁，可以不用简化优化了哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~~
0
相似问题