web-css-练习-一个简单的小网页

最新推荐文章于 2024-08-02 18:01:26 发布

哥兜兜里有泡泡糖

最新推荐文章于 2024-08-02 18:01:26 发布

阅读量2k

点赞数 8

分类专栏：其他文章标签： web css 练习网页

本文链接：https://blog.csdn.net/weixin_44512194/article/details/97621677

版权

其他专栏收录该内容

105 篇文章 5 订阅

订阅专栏

编写一个关于花泽香菜的网页介绍。

第一步：先将花泽香菜的有关内容写进去，包括一个标题，一张图片，三个段落：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>花泽香菜</title>
	<head>
	<body>
		<h1>花泽香菜，著名日本声优、演员、歌手</h1>
		<img src="hua.jpg"/>
		<p>简介： 1989年2月25日出生于日本东京都，日本声优、演员、歌手，血型为	AB型，双鱼座，所属事务所为大泽事务所 。 </p>
		<p>经历： 原本是儿童演员出身，2006年正式开始声优工作 ，在随后的几年之内经由对《化物语》的千石抚子、《Angel Beats!》的立华奏等角色的演绎而积累了人气，并在2012年以歌手身份出道 。2015年5月3日，在日本武道馆举办个人演唱会，成为第八位在武道馆举办个人演唱会的声优 。8月，出席第八届厦门国际动漫节，成为其首次在中国大陆的活动。2018年7月13日，参与配音的TV动画《Happy Sugar Life》开播。9月26日，参与配音的TV动画《食戟之灵：餐之皿》的光碟套装发售。</p>
		<p>代表作品： 代表作品有《青之驱魔师》杜山诗惠美《小鸠》花户小鸠、《化物语》千石抚子、《Angel Beats!》立华奏、《命运石之门》 椎名真由理、《无头骑士异闻录》园原杏里、《我的妹妹不可能那么可爱》五更琉璃(黑猫)、《黑岩射手》黑衣麻陶/黑岩射手、《言叶之庭》雪野百香里、《心理测量者》常守朱、《出包王女》结城美柑(第一至第四季)、《伪恋》小野寺小咲、《目隐都市的演绎者》MARY / 小樱茉莉等。</p>
	</body>
</html>

接着给标题，图片，段落进行优化：

<style type = "text/css">

	/*用 css 给网页进行美化   */

/*给标题进行美化 */
	h1{
		background-color: Lightgreen;  /*设置段落背景色  浅绿  */
		color: white;       /*设置文字颜色  白色 */
		text-align: center;  /*设置文字对齐方式  居中  */
		padding: 10px;
		}
		/* 设置图片 */
	img {
			width: 200px;   
			height: 200px;
			float: left;    /*设置向左悬浮,就是文字会围着图片分布  */
			margin: 7px;   /*设置文字与图片之间的间隔  */
		}
		
		/*对段落进行美化 */
		p{
			font-size: 20px;  /*设置文字大小 */
			line-height: 1.5;  /*设置行间距   */
			text-indent: 2em;  /*设置开头缩进 两个 */
		}
		/*对整体进行美化 */
		body{
			margin: 0px;   /*设置文字与图片之间的间隔  */
			background-color: #BBFFBB;
		}
</style>

下面是完整的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>花泽香菜</title>
<style type = "text/css">
/*
	用css给网页进行美化
*/
/*给标题进行美化 */
	h1{
		background-color: Lightgreen;  /*设置段落背景色  浅绿  */
		color: white;       /*设置文字颜色  白色 */
		text-align: center;  /*设置文字对齐方式  居中  */
		padding: 10px;
		}
		/* 设置图片 */
	img {
			width: 200px;   
			height: 200px;
			float: left;    /*设置向左悬浮,就是文字会围着图片分布  */
			margin: 7px;   /*设置文字与图片之间的间隔  */
		}
		
		/*对段落进行美化 */
		p{
			font-size: 20px;  /*设置文字大小 */
			line-height: 1.5;  /*设置行间距   */
			text-indent: 2em;  /*设置开头缩进 两个 */
		}
		/*对整体进行美化 */
		body{
			margin: 0px;   /*设置文字与图片之间的间隔  */
			background-color: #BBFFBB;
		}
</style>
<head>
<body>
<h1>花泽香菜，著名日本声优、演员、歌手</h1>
<img src="hua.jpg"/>
<p>简介： 1989年2月25日出生于日本东京都，日本声优、演员、歌手，血型为AB型，双鱼座，所属事务所为大泽事务所 。 </p>
<p>经历： 原本是儿童演员出身，2006年正式开始声优工作 ，在随后的几年之内经由对《化物语》的千石抚子、《Angel Beats!》的立华奏等角色的演绎而积累了人气，并在2012年以歌手身份出道 。2015年5月3日，在日本武道馆举办个人演唱会，成为第八位在武道馆举办个人演唱会的声优 。8月，出席第八届厦门国际动漫节，成为其首次在中国大陆的活动。2018年7月13日，参与配音的TV动画《Happy Sugar Life》开播。9月26日，参与配音的TV动画《食戟之灵：餐之皿》的光碟套装发售。</p>
<p>代表作品： 代表作品有《青之驱魔师》杜山诗惠美《小鸠》花户小鸠、《化物语》千石抚子、《Angel Beats!》立华奏、《命运石之门》 椎名真由理、《无头骑士异闻录》园原杏里、《我的妹妹不可能那么可爱》五更琉璃(黑猫)、《黑岩射手》黑衣麻陶/黑岩射手、《言叶之庭》雪野百香里、《心理测量者》常守朱、《出包王女》结城美柑(第一至第四季)、《伪恋》小野寺小咲、《目隐都市的演绎者》MARY / 小樱茉莉等。</p>
</body>
</html>