老师看下代码是否正确，关于盒子高度的问题
来源：2-5 编程练习
yarwood
2020-07-19 22:29:35
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IMOOC</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<!-- 在此完成网页的HTML代码-->
<section>
<!-- 在旁边 -->
<aside>
<h1>Recent <samp>Course</samp></h1>
<dl>
<dt>Hyper TextMarkup Language</dt>
<span>1</span>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png" alt="icon1"></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 TextMarkup Language</dt>
<span>2</span>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png" alt="icon2"></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 TextMarkup Language</dt>
<span>3</span>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png" alt="icon3"></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 TextMarkup Language</dt>
<span>4</span>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png" alt="icon4"></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>
<h1>Welcome to <samp>Massive Open Online Course!</samp></h1>
<p>We provide the latest knowledge to help you cope with the changing world!</p>
<img src="http://climg.mukewang.com/582e61180001ede703300130.jpg" alt="imgae">
<p>We hope that all the students who love the Internet can be more convenient access to learning resources, using the Internet thinking to change our learning.</p>
<p>Focus on IT skills education MOOC, consistent with the development trend of the Internet down to earth's MOOC. We are free, we only teach useful, we concentrate on education.</p>
</article>
</section>
</body>
</html>
main.css
*{
margin:0;padding: 0;
font-family: "微软雅黑";
}
/* 主题盒子部分 */
section{
width:100%;
height:500px;
margin:0 auto;
}
/* 旁边部分 */
aside{
width:480px;
height:400px;
float: left;
}
h1{
font-size: 30px;
padding: 20px 0;
margin-bottom: 20px;
}
samp{
font-size: 30px;
color:#7c7c7c;
}
dl{
/* height:40px */
position:relative;
display:block;
margin-bottom: 20px;
}
dl> dt{
position: absolute;
left: 90px;
font-weight: bold;
text-decoration: underline;
}
dl> span{
font-size: 30px;
font-weight: bold;
font-family: "宋体";
color: white;
position: absolute;
top: 12px;
left: 40px;
z-index: 5;
}
dl dd:first-of-type{
position: absolute;
left: 23px;
top: 5px;
}
dl dd:last-of-type{
position: absolute;
top: 25px;
left: 90px;
font-size: 14px;
font-weight: lighter;
}
/* dl dd:first-of-type{position:absolute;left:23px;top:5px;}
dl dd:last-of-type{position:absolute;top:25px;left:90px;font-size:14px;font-weight:lighter;} */
/* 文章部位 */
article{
width: 700px;
height:400px;
float: right;
}
article>p{
font-size: 14px;
font-weight: lighter;
margin-bottom: 20px;
}
article>img{
width: 500px;
height: 200px;
margin-bottom:20px
}
这里面dl的高度不知道怎么得出的，我是凑数字看着那个数值合适就哪个？
1回答
-
好帮手慕码
2020-07-20
同学你好，代码效果有一些问题。建议优化：
另，dl的高度可以随意设置，美观即可。祝学习愉快~
0
相似问题