请老师检查 谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IMOOC</title>
<link rel="stylesheet" type="text/css" href="../css/index.css">
</head>
<body>
<section>
<aside>
<h1>Recent <span>Course</span></h1>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd class="img"><img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png"></dd>
<dd class="num">1</dd>
<dd class="content">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 class="img"><img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png"></dd>
<dd class="num">2</dd>
<dd class="content">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 class="img"><img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png"></dd>
<dd class="num">3</dd>
<dd class="content">JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd>
</dl>
<dl>
<dt>AngularJS</dt>
<dd class="img"><img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png"></dd>
<dd class="num">4</dd>
<dd class="content">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 <span>Massive Open Online Course!</span></h1>
<p>We provide the latest knowledge to help you cope with the changing world!</p>
<img src="http://img1.sycdn.imooc.com/climg//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>
--------------------------------------------------------------------------------------------
*{
margin:0;
padding: 0;
border: none;
}
section{
width: 1200px;
margin: 36px auto;
}
section h1{
font-size: 24px;
padding-bottom: 12px;
}
section h1 span{
color:#c7c7c7;
}
section > aside{
float: left;
width: 480px;
margin-right: 32px;
}
section > aside > dl{
position: relative;
height: 129px;
}
section > aside > dl > dt{
position: absolute;
top: -1px;
left: 76px;
font-size: 20px;
font-weight: bolder;
text-decoration: underline;
}
section > aside > dl > dd.img{
position: absolute;
display: block;
top: 0;
left: 0;
}
section > aside > dl > dd.num{
position: absolute;
top: 10px;
left: 18px;
/*
请教老师这里使用margin负边距设置不能居中
dd.img = 50 * 51
margin-top: -的-的dd.mun一半高度;
margin-left: -的dd.mun一半长度度;
*/
font-size: 24px;
color: white;
}
section > aside > dl > dd.content{
position: absolute;
top: 36px;
left: 76px;
}
section > aside > dl > dd
section > article{
float: right;
width: 720px;
margin-left: 32px;
}
section > article > p,
section > article > img{
padding-bottom: 35px;
}
section > article > img{
/* 这里设置宽度最大怎么计算 */
width: 680px;
}14
收起
正在回答
2回答
同学你好，关于你的问题，回答如下：
1、非常抱歉，老师之前告诉同学的是通用的使用绝对定位设置居中的方式。
但是在当前的例子中，使用绝对定位设置居中的方式并不合适，因为是相对于有定位的父级元素设置定位的，就是这里的dl，但是dl是包裹整体的。图片元素.img这个是它的兄弟元素，不能相对于兄弟元素哦。当前这样的设置就是可以的，直接调整left与top值即可。
另，如下，老师写了一个使用绝对定位设置居中的例子，同学可以参考下，例：
2、另一个问题： /* 这里设置宽度最大怎么计算 */
这个没有特别的要求，可以设置父级宽度的100%，当前这样的设置也是可以的。
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星