老师麻烦检查下
来源：2-5 编程练习
豆包侠
2021-09-26 11:21:05
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*
{
margin: 0;padding: 0;
}
.main
{
width: 1200px; height: 500px;margin: 36px auto;
}
.main > aside
{
float: left; width: 350px;
}
.main > article
{
float: right; width: 850px;
}
.main h1
{
font-size: 40px; font-weight: lighter;position: relative;left: -40px;margin-bottom: 15px;
}
.main h1 > samp
{
font-size: 40px; color: #ccc;
}
.main > aside > dl
{
position: relative; display: block; overflow: hidden; height: 60px;margin-bottom: 36px;
}
.main > aside > dl > dt
{
font-size: 16px; font-weight: bold; line-height: 20px; position: relative; left: 60px; text-decoration: underline;
}
.main > aside > dl > dd:first-of-type
{
position: absolute; top: 10px; left: 0;
}
.main > aside > dl > dd:last-of-type
{
font-size: 14px; font-weight: lighter; position: absolute;left: 60px;
}
article p
{
font-size: 14px; font-weight: lighter;
}
.main > article > p,
.main > article > img
{
margin-bottom: 10px; margin-left: 20px;
}
.main span
{
font-size: 20px; position: absolute; z-index: 2 ;top: 12%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
.main > dl > dd > img
{
width: 100%;height: 100%;
}
article img
{
width: 850px; height: 220px;
}
.main > article > h1
{
margin-left: 54px;
}
</style>
</head>
<body>
<section class="main">
<aside>
<h1>Recent<samp>Course</samp></h1>
<!-- 左侧标题部分 -->
<dl>
<dt>Hyper Text Markup Language</dt>
<dd><span>1</span><img src="http://climg.mukewang.com/582e61290001787900500051.png"></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>Cascading Style Sheets</dt>
<dd><span>2</span><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dd>
<dd>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.</dd>
</dl>
<!-- 第二组 -->
<dl>
<dt>JavaScript</dt>
<dd><span>3</span><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dd>
<dd>JavaScript is a high-level, dynamic, untyped, and interpreted programming language</dd>
</dl>
<!-- 第三组 -->
<dl>
<dt>AngularJS</dt>
<dd><span>4</span><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dd>
<dd>AngularJS is an open-source web application framework mainly maintained by Google and by 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 the changing world!</p>
<img src="http://climg.mukewang.com/582e61180001ede703300130.jpg" >
<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>
1回答
-
好帮手慕久久
2021-09-26
同学你好，代码中有如下问题：
1、左侧第二个dd，部分内容被隐藏了：
原因是父元素设置了固定高度，并设置了overflow: hidden;。由于dd中的内容比较多，部分内容超出了父元素，因此内容没有显示完整。
建议不给父元素设置固定高度，让其高度由内容撑开：
2、优化建议：右侧图片超出了父元素：
建议考虑margin-left，调整一下图片的宽度，让其刚好占满父元素:
同学可以再调整一下细节，让效果更好看，比如增大aside的宽度。
祝学习愉快！
0
相似问题