12博

最新动态

当前位置 :12博 > 关于我们 >

html网页设计课程报告论文div css布局

作者: admin 时间: 2019-07-09 13:29 点击: 54次

“银家是奥崽俚”主页的设计 一、 系统功能说明
系统包含主要版块有: 1. 个人中心 这里是对用户资料的一个说明,主要运用到了一些基本的 html 知识。 2. 日记 该板块主要是给别人写一些日志的,在这里我们要设置一些按钮及文本域等 知识,让用户写的一些东西能保存下来,还能及时的的在网页上面显示。 3. 相册 该处主要是展示一些相片,和上传一些相片 4. 留言板 该处,主要是展示一些别人给用户的留言

二、 界面设计
logo 导航 日记 相册

个 人 资 料

音乐

留言板

版权所有

三、 编码 1. 页面 Div 布局
<div id=container> <div id=logo> </div> <div id=navigator> </div> <div id=info> </div> <div id=main> <div id=blog> </div> <div id=music> </div> <div id=pic> </div>

<div id=message> </div> </div> <div id=footer> </div> <div>

2. 页面布局 CSS 设计
(<style> body{text-align:center;} #container{ width:980px; magin:0 auto; } #logo{ width:100%; height:90px; background-color:blue; } #navigator{ padding:5px 0; width:100%; height:30px; background-color:black; } #navigator ul li{float:left;} #navigator ul li a{ width:160px; font-size:20px; display:block; color:white } a:hover{background-color:blue;color:white;} #main{width:100%; } #info{ float:left; width:20%; height:300px; background-color:white; } #mid{float:left;} #blog{float:left; width:50%;

height:150px; background-color:yellow; } #pic{float:left; width:50%; height:150px; background-color:red; } #music{ float:left; width:40%; height:150px; background-color:red; } #message{ float:left; width:40%; height:150px; background-color:white; } #footer{ width:100%; height:100px; background-color:black; color:white; }

3. 导航条设计
导航功能简单说明:导航条里面主要包含五个部分,首页,个人中心,日记,相 册,留言板他们主要是让页面更人性化,更具层次感!使用用户更快的找到自己 想找到的东西,相当于一个导向灯!而且为了使用户使用时有更好的体验,我们 将其设置成等大小的块块,手标放上去会发生颜色的变化! 具体代码: <div id=navigator> <ul> <li><a href=# id=n1>首页</a> <li><a href=# id=n2>个人中心</a> <li><a href=# id=n3>日记</a> <li><a href=# id=n4>相册</a> <li><a href=# id=n5>留言板</a> </ul> </div>

4. 其他内容添加
<div id=main> <div id=info> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src=11.jpg><p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;姓名:忽忽<p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性别:偏男 <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年龄:你猜<p> </div> <div id=mid> <div id=blog> <p><font size=5 color=green>日记</font></p> <li><a href=d.html;>今天天气真好啊!</a> <li><a href=e.html;>&nbsp;我们去钓鱼吧</a> </div> <div id=pic> <p><font size=5 color=red>相册</font></p> <img src=111.jpg> </div> </div> <div id=right> <div id=music> <p><font size=5 color=blue>音乐</font></p> <embed src=我好想你.mp3 width=390 height=80 loop=true> </div> <div id=message> <p><font size=5 color=yellow>留言板</font></p> 今天天气真不错! </div> </div> </div> <div id=footer> <p>&nbsp;</p> <p>&copy;版权所有,请勿抄袭!</p> </div> </div>

四、 页面效果截图

五、 总结
本学期的网业设计课程, 开展了动态思维训练教学活动,对于我们学生来 说,可以激发学习兴趣。作为网页设计的初学者,我对网页设计非常感兴趣, 一心想设计出一个美观、实用、内容丰富的个人网页。在这样的压力和动力下, 通过自己动手、动脑,通过网络资源,在老师的指导,在不断发现问题和解决问 题的过程中学到了很多知识, 也增强了我的创作能力和动手能力, 在网页设计过程 中,从构思到设计、完善、维护,整个过程我都全身心投入,使我真正学到了 网页设计的知识。 在本次网页设计中,我不仅学到了很多关于网页设计方面的知识,也从中学会 了关于网络、编程等方面的知识。今次的对网页设计的学习,有收获也有遗憾、 不足的地方,但我想,我已经迈入了网页设计的大门,只要我再认真努力的 去学习,去提高,凭借我对网页设计的热情和执着,我将来设计出的网页会更加专 业,更完善。也希望老师在今后的日子里多指导。


html网页设计课程报告论文div css布局

12博