请老师检查一下,谢谢!

来源:2-5 编程练习

Cloud_轩

2020-11-26 10:27:03

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码,切记添加代码注释(请勿截图)

结构部分

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>IMOOC</title>

<link rel="stylesheet" href="main.css" type="text/css" />

</head>

<body><!-- 存放给用户看的内容  -->

<section>

<aside>

<h1>Rcent <samp>Course</samp></h1>

<dl>

<dt>Hyper Text Markup Language</dt>

<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png" /><p>1</p></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><img src="http://climg.mukewang.com/582e61290001787900500051.png" /><p>2</p></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><img src="http://climg.mukewang.com/582e61290001787900500051.png" /><p>3</p></dd>

<dd>JavaScript is a high-level,dynamic,untyped,and

interpreted programming language.

</dd>

</dl>

<dl>

<dt>AngularJS</dt>

<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png" /><p>4</p></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 leaming 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>


CSS部分

*{

margin: 0;

padding: 0;

font-family: "Arial";

}

section{

width: 1200px;

height: 473px;

margin: 34px auto 0;

}

section h1{

font-size: 30px;

font-weight: lighter;

margin-bottom: 23px;

}

section h1 > samp{

font-size: 30px;

color: #7c7c7c;

}

section > aside{

float: left;

width: 450px;

}

section > aside > dl{

position: relative;

display: block;

height: 74px;

margin-bottom: 17px;

}

section > aside > dl > dt{

position: absolute;

top: -1px;

left: 70px;

font-size: 16px;

font-weight: bold;

line-height: 16px;

text-decoration: underline;

}

section > aside > dl > dd:first-of-type{

position: absolute;

left: 0;

}

section > aside > dl > dd:first-of-type > p{

position: absolute;

left: 25px;

top: 27.5px;

font-family: "Arial";

font-size: 25px;

color: #fff;

margin: -16px 0 0 -7px;

}

section > aside > dl > dd:last-of-type{

position: absolute;

top: 20px;

left: 68px;

font-size: 15px;

}

section > article{

float: right;

width: 720px;

}

section > article > p,

section > article > img{margin-bottom: 18px;}

section > article > img{

width: 720px;

height: 200px;

}


写回答

1回答

好帮手慕鹤

2020-11-26

同学你好,效果实现了哦,继续加油!
祝学习愉快!

0

0 学习 · 40143 问题

查看课程