第五周作业

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第五周作业相关的知识,希望对你有一定的参考价值。

    我之前并没有接触过有关网页开发的有关知识,所以对于网页开发所用到的语言,感觉又多又复杂,但是在上课听老师讲的有关html和div+css以及javascript的有关知识后,心情豁然开朗,明白了这几种语言之间对于网页开发的联系。并且上课看老师在电脑上演示,感觉这几种语言都挺简单的,并没有什么复杂的规则。所以,在听完课后,我回来试着琢磨琢磨,编写了一个简易的小网页。

技术分享

在编写网页的过程中,其实并没有想象的那么简单,我感觉最难的就是网页的布局上,由于对于各语言标签的不了解,所以一开始写的时候,对于居中对齐、水平居中、垂直居中这类的并不熟悉。除此之外,我觉得对于表格的灵活应用在布局方面也是非常重要的。对于,初次接触网页编程的我来说,一开始的时候,搞得我头都大了,但是一点一点的琢磨,多多查找资料,所遇到的问题总会解决的。

在我编写的小小网页中,插入了音乐,并且还运用了javascript使文字右移,如上图的“Travelling and Enjoyment!”,通过这次的编程使我对于浮动有了更深入的了解,同时明确了如何在html中嵌入javascript。

以下为源代码:

<html>
<meta charset="utf-8" />
<body>
<div style="background-color:#87CEEB;width:1277px;height:50px;position:relative;">
<img src="QQ截图20160405165849.png" style="width:50px;height:50px;float:left;">
<a style="vertical-align:middle;line-height:50px;text-decoration:none;" href="张韶涵 - 亲爱的那不是爱情.mp3">Play Sound</a>
<form style="width:300px;height:25px;vertical-align:middle;line-height:50px;float:right;">
目的地
<input type="text" >
<a href="">登陆</a>
<a href="">|注册</a>
</form>
</div>
<h1 id="hh" style="position:absolute;">
Travelling and Enjoyment!
</h1>
<script type="text/javascript" language="javascript">   
var hh=document.getElementById("hh");
setInterval(ff,1000);
var l=0;
function ff(){
l+=10;
hh.style.right+=(l+"px");};
</script>

<div align="center";style="width:1200;height:600;clear:both;position:relative;">
<div style="float:left;width:900px;height:600px;">
<img id="img1"; style="width:900px;height:600px;" src="1.jpg">
<script language="javascript">
var n=1;
function cc(){
if(n=4} n=1;
document.all.img1.src="n+"jpg"";
n+=1;
};
setInteval(cc,1000);
</script>
</div>
<div style="float:right;width:300px;height:600px;">
<div style="float:right;width:300px;height:200px;">
<ul type="square" >
  <a style="text-decoration:none" href=""><li style="vertical-align:middle;line-height:200px;float:left;";>旅游圣地</li></a>
 </ul>
</div>
<div style="float:right;width:300px;height:200px;">
<ul type="square" >
 <a style="text-decoration:none"href=""> <li style="vertical-align:middle;line-height:200px;float:left;";>旅游攻略</li></a>
  </ul>
</div>
<div style="float:right;width:300px;height:200px;">
<ul type="square" >
  <a style="text-decoration:none" href=""><li style="vertical-align:middle;line-height:200px;float:left;";>大众点评</li></a>
  </ul>
</div>
</div>
</div>
</body>
</html>

 

以上是关于第五周作业的主要内容,如果未能解决你的问题,请参考以下文章

软件项目管理第五周作业

使用Check Style 进行代码审查——第五周作业

第五周作业

第五周作业1

现代软件工程第五周作业

第五周作业