腾讯前端十日训练营day2

原创于 2017-04-16 18:46:34 发布 · 536 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #诗歌

本文通过HTML实现了一首古诗《少年游·离多最是》的展示，并配以恰当的样式和图片，展示了如何使用box-shadow、border-radius等属性增强页面视觉效果。

Day 2 作业

作业内容:

用HTML写一首诗并配上图片，需要满足诗的格式。可以结合学习的html知识对页面进行加工。

所用知识点

视觉方面：

box-shadow

border-radius

background-color

排版方面：

text-align;center

<pre>标签

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>The second day's work</title>
		<style type="text/css">
			body{background-color: antiquewhite;}
			#div{width: 60%;
				margin: 3cm auto;
				padding: 2cm;
				background-color:bisque;
				text-align: center;
				box-shadow: 0 0 2px 2px gray;
				font-size: larger;
				border-radius: 4px;}
		</style>
	</head>
	<body>
		<div id="div">
<pre>少年游·离多最是

		晏几道

离多最是，东西流水，终解两相逢。
浅情终似，行云无定，犹到梦魂中。
可怜人意，薄于云水，佳会更难重。
细想从来，断肠多处，不与今番同。
</pre>		
</div>
	</body>
</html>