老师，帮忙看下2-5练习

来源：2-5 编程练习

技术为王2383098363

2019-07-25 14:24:13

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>IMOOC</title>
    <link rel="stylesheet" type="text/css" href="section.css">
</head>
<body>
    <section>
        <aside>
            <h2>Recent <span>Course</span></h2>
            <dl>
                <dt>Hyper TextMarkup 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,add interpreted programming language.</dd>
            </dl>
            <dl>
                <dt>AngularJS</dt>
                <dd>
                    <span>4</span>
                    <img src="http://climg.mukewang.com/582e61290001787900500051.png">
                </dd>
                <dd>ngularJS is an open-sourse web application framework mainly maintained by Google and by a community of individuals and...</dd>
            </dl>
            
        </aside>
        <article>
            <h2>Welcome to <span>Massive Open Online Course!</span></h2>
            <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>

*{padding: 0;margin: 0;}

section{
	width: 1400px
}
section h2{
	font-family: Arial;
	font-size: 28px;
	font-weight: normal;
	line-height: 28px;
}
section>aside>h2>span,section>article>h2>span{
	color: #959595;
}
section aside{
	float: left;
	margin: 40px;
}
section aside dl{
	/*display: block;*/
	width: 490px;
	height: 110px;
	position: relative;
}
section aside dt{
	font-size: 16px;
	line-height: 16px;
	font-weight: bold;
	position: absolute;
	top: 20px;
	left: 90px;
	text-decoration: underline;
}
section aside dd img:first-of-type{
	position: absolute;
	top: 20px;
	left: 20px;
}
section aside dd span{
	position: absolute;
	display: block;
	font-size: 24px;
	line-height: 24px;
	color: #fff;
	top: 33px;
	left: 38px;
	z-index: 2;

}
section aside dd:last-of-type{
	position: absolute;
	font-size: 15px;
	top: 44px;
	left: 90px;
}

section article{
	float: right;
	margin-top: 40px;
	margin-right: 20px;
	width:790px;
}
section article p{
	font-size: 15px;
	margin-top: 20px;
	margin-bottom:  20px;
}
section article img{
	width: 100%;
	height: 250px;
}

写回答

1回答