请老师过目,指出不足之处,谢谢!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IMOOC</title>
<link rel="stylesheet" type="text/css" href="main.css">
<style>
*{margin:0;padding:0;border:none;font-size:14px;font-family: Arial;}
section{width:1200px;margin:0 auto;padding:15px;}
section h1{font-size:26px;font-weight: lighter;margin-bottom:30px;}
section h1 samp{font-size:26px;font-weight:lighter;color:#7C7C7C;}
section > aside {width:450px;float:left;}
section > aside > dl{position: relative;display: block; height: 74px; margin-bottom: 17px;}
section > aside > dl dt{background:url(http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png) no-repeat;width:50px;height:50px;line-height:50px;color:#fff;text-align:center;position: absolute;left:20px;}
section > aside > dl dd:first-of-type{position:absolute;left:88px;top:-1px;font-weight:bold;text-decoration:underline; }
section > aside > dl dd:last-of-type{position:absolute;left:87px;top:16px;width:330px;}
section > article{float:right;width:720px;}
section > article p,section > article img{margin-bottom:15px;width:100%;}
</style>
</head>
<body>
<section>
<aside>
<h1>Recent <samp>Course</samp></h1>
<dl>
<dt>1</dt>
<dd>Title 1</dd>
<dd>test sadfjklsda hello asdlkfj afjds aasdfasdfasdfasdfasdfasasdfasdfasdfasdfasdfasdfasdfas dfasdfasdfasdfasdfasdfasdfasdfsdf asdf 234234</dd>
</dl>
<dl>
<dt>2</dt>
<dd>Title 2</dd>
<dd>test sadfjklsda hello asdlkfj afjds <br>asdfkjlasfldj1123</dd>
</dl>
<dl>
<dt>3</dt>
<dd>Title 3</dd>
<dd>test sadfjklsda hello asdlkfj afjds <br>asdfkjlasfldj1123</dd>
</dl>
<dl>
<dt>4</dt>
<dd>Title 4</dd>
<dd>test sadfjklsda hello asdlkfj afjds <br>asdfkjlasfldj1123</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://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>
请老师指出不足之处,谢谢
并且我还有问题就是如果第二个dd的内容多了高度就会不自适应,请问如果让dd高度自适应?谢谢
正在回答
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.big{background-color:red;height:400px;}
.son1{float:left;width:40%;}
.son1 div{background-color:yellow;margin-top:20px;}
.son2{float:right;background-color:green;width:40%;}
</style>
</head>
<body>
<div class="big">
<div class="son1">
<div>12345555555555</div>
<div>12345555555555</div>
<div>12345555555555</div>
<div>12345555555555</div>
</div>
<div class="son2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, consequatur porro consequuntur ad maiores obcaecati similique aliquam velit quasi, odio, sequi excepturi, dolorem fugit saepe iusto reprehenderit nam dicta. Qui!</div>
</div>
</body>
</html>
我写了demo,看看是不是你要的效果,左侧的div就没有设置高度。
不知道你为什么对不设置高度这么执着
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础,却不知道如何进阶?本路径带你通过系统学习,完成从“会做网页”到“做出好的动态网页”的蜕变,迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星