博客列表 >2018/3/15(文本元素)

2018/3/15(文本元素)

梁凯达的博客
梁凯达的博客原创
2018年03月16日 16:55:07960浏览

2018/3/15:第一节课作业:

感悟:js部分感觉比较困难,很多东西怎么调用的并不是特别清晰,html部分完成得比较简单。

作业完成效果截图:

QW944N@]ZW)H4~X}ISH1K[1.png

代码部分整理:

实例

实例
<!DOCTYPE html>

<html>

<head>

<meta charset="{CHARSET}">

<meta charset="utf-8">

<title>海贼王介绍</title>

</head>

<style type="text/css">

body{

margin: 0;

padding: 0;

}

.main{

width: 550px;

height: 400px;

margin: 100px auto;

background:url(7504312_114017_6476.jpg);

background-repeat: no-repeat;

background-size: 590px 450px;

padding: 15px;

border-radius: 20px;

}

.main>h2{

color: brown;

text-align: center;

}

.main>h4{

color: crimson;

}

.main>span{

display: block;

line-height: 1.5em;

text-indent: 2em;

}

</style>

<body>

<div class="main">

<h2  onmouseover="colorchange(this)"onmouseout="oldcolor(this)">关于海贼王</h2>

<h4>海贼王是一部怎样的漫画?</h4>

<span>

《航海王》是日本漫画家尾田荣一郎作画的少年漫画作品,在《周刊少年Jump》1997年34号开始连载。改编的电视动画《航海王》于1999年10月20日起在富士电视台首播。

2012年5月11日,《航海王》获得第41回日本漫画家协会赏[1]  。截至2015年6月15日,《航海王》以日本本土累计发行了3亿2086万6000本,被吉尼斯世界纪录官方认证为“世界上发行量最高的单一作者创作的系列漫画”[2]  。2017年7月21日,日本纪念日协会通过认证,将每年的7月22日设立为“ONE PIECE纪念日”.

</span>

</div>

</body>

</html>

<script type="text/javascript">

function colorchange(element){

element.style.fontSize='24px'

element.style.color='#1874CD'

}

function oldcolor(element){

element.style.fontSize='20px'

element.style.color='#63BBFF'

}

</script>
运行实例 »
点击 "运行实例" 按钮查看在线实例
运行实例 »

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

---

手抄部分整理:

webwxgetmsgimg (2).jpgwebwxgetmsgimg.jpg

上一条:1-1作业下一条:第一次作业
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议