生活相册课程设计报告
学 院： 信息科学与工程学院
专 业： 计算机科学与技术（软件外包方向）
班 级： 计软1306
学 号： 20131214153
学生姓名： 徐翔
指导教师： 李崇威
课程名称： web客户端编程技术
设计名称： 我的博客
一、设计内容及要求
（1）运用HTML、CSS和JavaScript技术完成一个相对完整的网站，至少完成5个页面
（2）使用HTML标记，CSS样式及JavaScript技术，完成的网页没有错误
首页设置导航栏，命名为index.html
（3）利用CSS技术对网站进行布局，网站风格统一，灵活运用JavaScript使网页生动
（4）要经过至少两种主流浏览器的测试，最终检查时要配置Web服务器发布出来访问
设计结束后上交报告（纸质和电子版）、源代码
二、设计思路
全部包括七个网页，
首页:介绍了我的进本信息，和网站的基本信息。
关于我：详细介绍了我的各种信息奥。
慢生活：介绍了我的一些生活理念。
谁言碎语：类似说说一样是我的一些语录。
模板分享：介绍了 我自己的一些小网站。（百度云分享）。
学无止境：推介了一些图书。
留言板：没有发布，还无法实现。
三、设计结果及分析
1、主页：
（1）背景和头像
（2）文章推荐
（3）一些好的网站的链接
（4）天气显示（百度的代码）
（5）登录
2、关于我：
（1）主要的个人生活简介
（2）主要的身份简介
（3）网页简单介绍（很多的是虚拟的）
3、慢生活：
（1）一些程序员的文章推荐。
（2）个人小日记的推荐和网上的文件的链接
（3）点击排行链接（信息来自网络）
3、碎言碎语：
（1）惹人平时的心情记录
（2）右侧的是心情发表的时间
（3）左侧是时间
学无止境：
最新技术的一个更新
右侧是技术分享的一个分类链接
左侧是技术的详细信息
四、总结
首先是复习了以前学过的css、html知识，又把js的只是更进一步的理解掌握，为了达到更好的效果，又学了好多html5和css3的知识。
刚开始做了好几次都有重新做，因为结构又有新的问题，通过这车让我更明白先设计好再开始编写代码，磨刀不误砍柴工
页面的布局不是动画越多越好，在最合适的地方使用合适的演示，事半功倍。
五、 附录（源代码）
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>个人博客</title>
<meta name="keywords" content="徐翔的个人博客" />
<meta name="description" content="" />
<link href="css/base.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<style type="text/css">
#loginA
{
position:fixed;
width:100%;
height:100%;
top:-0px;
left:0px;
z-index:100;
background:rgba(100,100,100,0.5);
}
#loginB
{
position:relative;
width:300px;
height:300px;
border-radius:150px;
margin:0px auto;
top:30%;
background:rgba(13,19,26,0.7);
}
#loginC
{
position:relative;
width:300px;
height:300px;
left:60px;
top:80px;
font-size:20px;
color:#959544;
/* background:#00cc00;*/
}
#you
{
position:absolute;
width:140px;
height:50px;
left:90px;
top:10px;
font-size:30px;
color:#959544;
}
#btn
{
width:140px;
height:30px;
border-radius:20px;
background:rgba(33,119,199,0.5);
}
#btn:hover
{
background:rgba(253,233,87,0.5);
}
</style>
<script type="text/javascript">
load=function()
{
var ElementById("btn");
var ElementById("name");
var ElementById("age");
var i=1;
lick=function()
{
if(name.value=="")
{
alert("姓名不得为空");
name.focus();
i=0;
}
if(age.value==""||isNaN(age.value))
{
alert("年龄不合法");
age.focus();
i=0;
}
var ElementById("b");
var ElementById("g");
// if(!b.selected&&!b.selected)
// {
//// alert("性别必须选择");
// i=0;
// }
if(i==1)
{
var ElementById("loginA");
kk.style.display="none";
}
}
}
</script>
</head>
<body>
<header>
<div id="logo"><a href="/"></a></div>
<nav class="topnav" id="topnav"><a href="index.html"><span>首页</span><span class="en">Protal</span></a><a href="about.html"><span>关于我</span><span class="en">About</span></a><a href="newlist.html"><span>慢生活</span><span class="en">Life</span></a><a href="moodlist.html"><span>碎言碎语</span><span class="en">Doing</span></a><a href="photo.html"><span>我的相册</span><span class
="en">Share</span></a><a href="knowledge.html"><span>学无止境</span><span class="en">Learn</span></a><a href="book.html"><span></span><span class="en">Gustbook</span></a></nav>
</nav>
</header>
<div id="loginA">
<div id="loginB" class="">
<div id="you" class="">
游客登记
</div>
<div id="loginC" class="">
<lable>name: <br><input type="text" id="name" /></lable><br>
<lable>age: <br><input type="text" id="age" /></lable><br><br>
男<input type="radio" id="b" name="sex" />
女<input type="radio" id="g" name="sex" /><br><br>
<input type="button" value="l o g i n" id="btn"/>
</div>
</div>
</div>
<div class="banner">
<section class="box">
<ul class="texts">
<p>打了死结的青春，捆死一颗苍白绝望的灵魂。</p>
<p>为自己掘一个坟墓来葬心，红尘一梦，不再追寻。</p>
<p>加了锁的青春，不会再因谁而推开心门。</p>
</ul>
<div class="avatar"><a href="#"><span>徐翔</span></a> </div>
</section>
</div>
<div class="template">
<div class="box">
<h3>
<p><span>个人博客</span>生活在于分享</p>
</h3>
</div>
</div>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论