Blogger Information
Blog 49
fans 0
comment 1
visits 46756
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
网站前端开发破冰之旅--2018-03-15 00:45
失去过去的博客
Original
681 people have browsed it

实例

实例
<!DOCTYPE html>
<html>

	<head>
	   
		<meta charset="utf-8"><!--字符编码-->
		
		<title></title>
                <!--样式-->
		<style type="text/css">
			* {
				margin: 0;/*外边距*/
				padding: 0;/*内边距*/
				font-size: 25px;/*文字大小*/
				color: #ccc;/*颜色*/
				text-align: center/*文字居中*/;
			}
			
			h1 {
				font-family: "微软雅黑";/*文字类型*/
				font-size: 40px;/*文字大小*/
				color: brown;/*字体颜色*/
			}
			
			p {
				text-indent: 2em;/*首行缩进2字符*/
				text-align: left;/*文本左对齐*/
				width: 800px;/*宽度*/
				margin: 0 auto;/*外边距 块元素水平居中*/
				padding: 120px 30px;/*外边距*/
				margin-top: 20px;/*上外边距*/
				color: cornflowerblue;/*字体颜色*/
				border-radius: 20px;/*边框圆角弧度*/
				/*背景图片*/
				background: url();
				background-repeat: no-repeat;/*图片不重复*/
				background-size: 860px 538px;/*css3 背景尺寸*/
				box-shadow: 8px 8px 6px #CCCCCC;/*盒子阴影*/
			}
		</style>
	</head>

	<body>
                <!--js鼠标事件: onmouseover 鼠标移入 onmouseout 鼠标移出
                    this 关键字
                
                
                 -->
		<h1 onmouseover="change(this)" onmouseout="old(this)">乌镇东栅:何须诗与画</h1>
		<hr>
		<p>曾经从南方回来的朋友口中我略知过乌镇的美,曾经在文字的只言片语中我阅读过乌镇的美,曾经由图片和画卷里我想象过乌镇的美,但当有这么一天,我踩着初春的薄暮,怀着期待的心情真正走进乌镇的时候,便真一下被她的美给惊到了。 在将雨未落的天色里,一排排粉墙黛瓦的民居倚水而立,高的低的,鳞次栉比,古朴而自然。房子下的河,又瘦又长,淌着满满两岸的绿,恰似一条亮亮的腰带,束着近处远处黑顶的屋子,穿过几座小巧的石桥,绕进了更远一点的薄薄雾气中。“静女其姝”,突然就有这样的字眼从我心里冒出来,这就是乌镇?这可不就是乌镇,只是比我梦里的水乡更秀了些,野了些。

		</p>

	</body>

</html>
<script type="text/javascript">
        //创建函数 获取元素 改变元素样式
	function change(element) {
		element.style.fontSize = '60px';
		element.style.color = 'blue';

	}

	function old(element) {
		element.style.fontSize = '40px';
		element.style.color = 'brown';

	}
</script>
1.jpg2.jpg
运行实例 »
点击 "运行实例" 按钮查看在线实例

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ截图20180327165523.jpg1.jpg2.jpg

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post