网页大作业——个人网页

最新推荐文章于 2024-03-28 10:43:42 发布

云炬网络平台

最新推荐文章于 2024-03-28 10:43:42 发布

阅读量985

点赞数 1

文章标签：课程设计 html javascript

本文链接：https://blog.csdn.net/m0_73546099/article/details/128692234

版权

一、学号姓名专业

学号：2019051614023

专业：计算机科学与技术(3+4)

姓名：

二、WEB大作业的首页地址和平时作业链接地址等

WEB大作业的远程首页地址：http://dy2292041387.dev.dxdc.net/grwz/index.html
平时实验作业链接地址：http://dy2292041387.dev.dxdc.net/h0/index.html
大作业在本地虚拟机上的文件夹结构
服务器文档根目录d:\www

School.html
About me.html
CQNU.html
Family.html
Index.html
图片
视频
yy
grwz
课程设计工程项目功能介绍
功能说明：
此网页为我的个人网页。首页主要展现的是个人的介绍、职业生涯规划、兴趣爱好。
生活主页主要展现的是高中学校、家乡、以及重庆师范大学的介绍。
家人主页主要展现的是我的爸爸、妈妈、二哥的介绍，和我想对他们说的话。最后还有我对他们的一些期望和愿望。
学校主页主要展现的是高中的学校以及高中的班级介绍
操作说明：
首先打开网页的是我的个人主页上面有菜单栏，点击他们就可以链接到另外的网页当中。左上方放置的是我的个人证件照，靠下里面有我的相关介绍以及联系方式，靠左边的中间是我的个人视频（内容是去重大游玩的一天）。右边是我的个人小相册，鼠标一一进去就有放大的效果，使其看得更明显（我的的证件照也有相同的效果）。右上角有一个音乐插件，点击它就可以进行播放，最下面的就是我对自己的一个全面介绍以及对专业的介绍，以及我对专业的一个展望，最下面是页脚，是有关我的一些信息，版权所有，有意者请联系。
生活主页中也有主页一样的菜单栏，点击即可进入另外的网页。下面是有关我的高中母校、家乡、重庆以及重庆师范大学的介绍以及特色。其中关于重庆、重庆师范大学的风景照，用鼠标移进去便有放大的效果，最下面的页脚也是一些商业广告。
家人页面中最上面也有相同的菜单栏。页面最左边的一排是我的家人的全家福，最前面的一张是我爷爷奶奶家的，后面那一张是关于我外公外婆家的，而且分别附有对他们的简单介绍。右边的最上面是关于爷爷奶奶家的详细介绍，以及我的有感而发，对爷爷的详细描述，下面就是我爸爸、妈妈、妹妹的信息的简单介绍，并且附有他们的照片，且鼠标一移进去便有放大的效果，再下面的内容就是我对外公外婆家的一些描述，以及对我们这一家人的描述，最后，我做了一个总结，对家人的祝福。
朋友页面也有相同的菜单栏，点击即可进入其他网站。第一照片首先是对我高中朋友的一个介绍，并附有文字说明；其次是对大学室友的照片以及对她们的一些描述；最后是关于我和姐姐们的照片，并附有文字讲述了关于我们小时候的趣事以及如今现在生活的概况。最下面的页脚也是对于我的一些商业广告。
优点：
就是比较简单
缺点：很垃圾，像没学过一样
界面效果图粘贴和文字简要说明
主页页面

自我介绍页面

家庭页面

CQNU界面

School页面介绍

1、index.html文件功能说明：

这是我的主页。此页面运用了导航条，可以点此链接进入到另一个页面。主要包括了我的自我介绍、性格、兴趣、还有对未来的期望。进入页面会有我的地个人视频，还有音乐。

2、home.html文件功能说明：

这是我的家庭页面。里面会有关于我爷爷奶奶、外公外婆、我的家人的详细介绍。每一张图片都有放大的效果，并且可以翻转。

3、live.html文件功能说明：

这是我的生活页面。里面有关于我从小到大的生活地方的介绍。每一张图片移进去都会有延时效果展示。

4、friends.html文件功能说明：

这是我的朋友界面。里面有关于我初中、高中、大学的的朋友介绍，以及我的姐姐们的介绍及趣事。分成了三个板块。并且上面的图片可以放大且有翻转效果，并设置了延时效果。鼠标移进字体会有变色的效果。

个人网站项目各文件代码粘贴
index.html文件代码粘贴：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>index</title>

<style type="text/css">

body {

background-image:url(%E5%9B%BE%E7%89%87/let-there-be-sun.png);

font-family: "Quicksand Bold";

}

#div1{

width: 1500px;

height: 1260px;

background-color:rgba(255,255,255,0.25);

margin-right: auto;

margin-left: auto;

color: #000;

font-family: "Quicksand Bold";

font-size: 9px;

font-weight: bolder;

}

#div2{

width: 1400px;

height: 100px;

margin-right: auto;

margin-left: auto;

font-family: "Quicksand Bold";

font-size: 80px;

padding-top: 20px;

padding-left: 20px;

}

#div3 {

margin-top: 150px;

width: 1400px;

height: 200px;

}

#div4{

width: 250px;

height: 100px;

margin-top: 250px;

float: left;

font-size: 50px;

}

.hello {

font-family: "Quicksand Bold";

font-size: 50px;

text-align: center;

display: block;

color: #000;

font-weight: bolder;

}

.songwentao {

font-family: "幼圆";

font-size: 100px;

text-align: center;

display: block;

}

.div5-8 {

float: left;

height: 100px;

width: 250px;

margin-top: 250px;

font-size: 50px;

}

#div9{

width: 1500px;

height: 200px;

margin-top: 40px;

font-size: 16px;

text-align: center;

display: block;

margin-right: auto;

margin-left: auto;

}

a:link{

color: #000;

text-decoration: none;

width: 250px;

height: 100px;

}

a:hover{

color: #000;

text-decoration: none;

width: 250px;

height: 100px;

}

a:visited{

color:#000;

text-decoration:none;}

</style>

</head>

<body>

<audio autoplay="autoplay" loop="">

<source src="yy/Disco Fries _ Raquel Castro - U Make Me (Natan Chaim & Asketa Remix)20200103220536.mp3" type="audio/mpeg">

</audio>

<div id="div1">

<div id="div2">   Welcome to my homepage

<div id="div3">

<p class="hello"> Hello! I'm</p>

<p class="songwentao">jackeylove1111</p>

</div>

<div id="div4"><a href="index.html">Home</a></div>

<div class="div5-8"><a href="About me.html">About me</a></div>

<div class="div5-8">     <a href="Family.html">Family</a></div>

<div class="div5-8">    <a href="CQNU.html">CQNU</a></div>

<div class="div5-8">   <a href="School.html">School</a></div>

</div>

</body>

</html>

2、About me.html文件代码粘贴

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>About me</title>

body {

background-image:url(%E5%9B%BE%E7%89%87/palm-leaf.png);

font-family: "Quicksand Bold";

}

#div1 {

background-color: rgba(204,204,204,0.5);

height: 1500px;

width: 1260px;

margin-right: auto;

margin-left: auto;

border-radius: 10px 10px;

}

.daohang {

height: 50px;

width: 1260px;

background-color: #FFF;

margin-right: auto;

margin-left: auto;

}

.div2-6 {

font-family: "Quicksand Bold";

color: #000;

float: right;

width: 140px;

margin-top: 10px;

font-size: 24px;

font-weight: bolder;

text-align: center;

display: block;

height: 30px;

}

.gerenjieshao{

margin-top: 20px;

width: 450px;

height: 1400px;

margin-left: 20px;

text-align: center;

display: block;

background-color: rgba(255,255,255,0.5);

float: left;

border-radius: 10px 10px;

}

.大字 {

font-family: "Quicksand Book";

font-size: 36px;

color: #000;

}

#grjj{

width: 450px;

margin-top: 10px;

height: 50px;

font-size: 36px;

font-weight: bolder;

font-family: "Quicksand Bold";

float: left;

text-align: center;

display: block;

border-bottom-width: 1px;

border-bottom-style: dashed;

border-bottom-color: #000;

}

#grjj1{

width: 420px;

margin-top: 10px;

height: 550px;

font-size: 16px;

margin-right: 10px;

margin-left: 10px;

background-color: #FFF;

text-align: left;

display: block;

float: left;

padding-left: 10px;

border-radius: 10px 10px;

line-height: 20px;

}

#wangyeyoubianbufen{

width: 700px;

height: 1300px;

float: right;

margin-top: 20px;

margin-right: 20px;

background-color: rgba(242,242,242,0.5);

border-radius: 10px 10px;

}

.youbianbufenbiaoti {

font-family: "Quicksand Book";

font-size: 36px;

font-weight: bolder;

text-align: left;

display: block;

height: 50px;

width: 660px;

margin-top: 20px;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #000;

margin-right: 10px;

margin-left: 10px;

}

.youbianneirong{

background-color: #FFF;

width: 650px;

height: 200px;

margin-right: 10px;

margin-left: 10px;

margin-top: 10px;

border-radius: 10px 10px;

padding-top: 10px;

padding-left: 10px;

line-height: 30px;

}

.youbianbiaotizuo {

font-family: "Quicksand Book";

font-size: 36px;

font-weight: bolder;

text-align: right;

display: block;

height: 50px;

width: 660px;

margin-top: 20px;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #000;

margin-right: 10px;

margin-left: 10px;

}

#tu1 {

float: right;

border: 1px solid #000;

margin-right: 20px;

}

.tu{

border-radius:20px 20px;}

#sp{

width:430px;

height:300px;

margin-top:20px;

background-color:#FFF;

float:left;

margin-left:10px;

margin-right:10px;

}

.hy{

width:430px;

height:200px;

float:left;

margin-top:10px;

margin-left:10px;}

a:link{

color: #000;

text-decoration: none;

width: 140px;

height: 30px;

}

a:hover{

color: #000;

text-decoration: none;

width: 140px;

height: 30px;

}

a:visited{

color:#000;

text-decoration:none;}

</style>

</html>

<body>

</audio>

<div class="daohang"><div class="div2-6"><a href="School.html">School</a></div>

<div class="div2-6"><a href="Family.html">Family</a></div>

<div class="div2-6"><a href="About me.html">About me</a></div>

<p>住址：重庆市大渡口区</p>

<p>家乡：重庆市垫江县</p>

<p>学校：重庆市师范大学</p>

<p><img src="图片/weixin.jpg" width="25" height="26" />：tthaoshengjunqiao</p>

</div>

</div>

</div>

<p>我觉得我就是一个懂得及时行乐得人，就是在对一些生活中得琐事，我就不想去管他，应为我觉得这是没有必要的，不做也不会对我造成什么影响，干脆就不做了，反正我觉得，人就应该活在当下，享受当下，没有必要为了未来的事情去担忧，思考的太多了，脑子会受不了的。车到山前必有路，现在何必但有这么多。</p>

</div>

<p>在进入大学真的进入这个计算机专业方面的学习之前，我都对计算机有着很大的兴趣，而且对于现在这个时代来说计算机专业也是非常好的，但是真的进入到专业的学习之后我发现并不简单，就拿现在所学的python来说吧，从网上看到过许多人都说python已经是最简单的编程语言了，但这个学期下来，我发现还是很难，就觉得我可能不太适合吧。但还是尽自己最大的努力去学习吧，如果学的好的话可能会选择在计算机行业中发展下去，如果学不好就只能去想起他的办法了。</p>

</div>

<p>我的兴趣爱好有很多，但是就几个算是比较大的吧，就是打游戏啊，什么LOL CSGO NBA2K之类的，虽然都打得比较菜。<br />

还有看日漫，就比如火影忍者假面骑士之类的，都是比较正经的动漫，记得初三的时候火影忍者完结了，还有点难受。假面骑士还没有入坑多久，看了差不多平成的5部吧。<br />

还有就是机车，有生之年一点要去曼岛tt看一次比赛。<br />

最后就是篮球了，火箭总冠军，大胡子FMVP。</p>

</div>

</div>

</body>

3、live.html文件代码粘贴

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Family</title>

<style type="text/css">

body {

background-image: url(%E5%9B%BE%E7%89%87/sun-pattern.png);

font-family: "Quicksand Bold";

}

#div1 {

height: 1360px;

width: 1260px;

margin-right: auto;

margin-left: auto;

}

.div2-6 {

font-family: "Quicksand Bold";

color: #000;

float: right;

width: 140px;

margin-top: 10px;

font-size: 24px;

font-weight: bolder;

text-align: right;

display: block;

height: 30px;

}

#fmqt {

width: 220px;

height: 200px;

margin-right: auto;

margin-left: auto;

padding-top:10px;

display:block;

text-align:center;

}

#div11{

width: 1260px;

height: 100px;

margin-top: 200px;

font-size: 16px;

text-align: center;

display: block;

margin-right: auto;

margin-left: auto;

}

#jia{

width: 1260px;

height: 350px;

float: right;

margin-top: 50px;

font-size: 24px;

border: 1px solid #000;

line-height: 40px;

}

a:link{

color: #000;

text-decoration: none;

width: 140px;

height: 30px;

}

a:hover{

color: #000;

text-decoration: none;

width: 140px;

height: 30px;

}

a:visited{

color:#000;

text-decoration:none;}

#div7{

width: 1260px;

height: 850px;

margin-top: 50px;

float: right;

}

#fq{

width: 600px;

height: 800px;

margin-top: 20px;

margin-left: 10px;

background-color: rgba(255,255,255,1);

border-radius: 20px 20px;

border: 1px solid #000;

float: left;

}

#fmqnr{

width: 500px;

margin-top: 10px;

height: 500px;

margin-left: auto;

margin-right: auto;

font-size: 18px;

line-height: 30px;

}

#mq{

width: 600px;

height: 800px;

margin-top: 20px;

margin-left: 10px;

background-color: rgba(255,255,255,1);

border-radius: 20px 20px;

border: 1px solid #000;

float: right;

margin-right: 10px;

}

#eg{

width:1260px;

height:300px;

margin-left:auto;

margin-right:auto;

background-color:#FFF;

border-radius:20px 20px;

border:1px solid #000;

}

#egt{

width:270px;

height:270px;

border-radius:20px 20px;

float:left;

margin-left:50px;

margin-top:10px;

}

#egnr{

width: 800px;

height: 270px;

float: right;

margin-right: 50px;

margin-top: 10px;

line-height: 35px;

font-size: 18px;

padding-left: 50px;

border-left-width: 1px;

border-left-style: solid;

border-left-color: #000;

}

</style>

</html>

<body>

<audio autoplay="autoplay" loop="">

<source src="yy/Machine Gun Kelly _ X Ambassadors _ Bebe Rexha - Home20200103220536.mp3"type="audio/mpeg">

</audio>

<div id="div1">

<div class="div2-6"><a href="School.html">School</a></div>

<div class="div2-6"><a href="CQNU.html">CQNU</a></div>

<div class="div2-6"><a href="Family.html">Family</a></div>

<div class="div2-6"><a href="About me.html">About me</a></div>

<div class="div2-6"><a href="index.html">Home</a></div>

<div id="jia">家是什么？<br />

家是一付重担，家是一份责任；家是彼此的真诚相待，家更是能够白头偕老的慢慢旅程。<br />

家是我们人生的驿站，是我们生活的乐园，也是我们避风的港湾。它更是一条逼你拼命挣钱的鞭子，让你为它拉车、犁地。<br />

家”，是我心中一盏永不熄灭的灯。每当夜幕降临，在外奔波了一天的人们，肩负着事业的重压，拖着疲惫的身躯迈进了家门，第一个最需要的感觉，就是点灯。

见到那属于自己的灯光，无论它是昏暗的油灯，飘忽的蜡烛，还是那明亮的电灯，都能给人一种安全、愉快、温馨的感觉。

望着家人亲切的笑脸，闻着饭菜香味扑鼻，这才是人生最美好的。正如七仙女的一句格言：“到底人间欢乐多”。</div>

<div id="div7">

<div id="fq">

<div id="fmqt"><img src="图片/fq.jpg" width="200" height="180" /></div>

<div id="fmqnr">  首先呢，我要介绍的是我们家的一家之主－－爸爸。爸爸是一个脾气很好很好的人，从来不对别人发火。可以说，爸爸的忍耐度是无限的。脾气不好的我，从来都是十分崇拜爸爸的。有时候把我觉得我的父亲也不是很容易的把，能把我养这么大，还能有这么好的脾气，在我的印象中，我就没有什么事是好事，反正每次我父亲来就是接受各种的批评的，但是呢，我的父亲哈，还是伟大啊，见过大场面的人啊，每次被说教完啊，回来也没有对我发脾气，就只是劝一下我叫我不要惹事，有的时候还会带我出去下馆子，当然主要是叫上他的朋友啊出去喝酒来解心中的郁闷。除了这些好的之外就还有很多的缺点，烟瘾大得很，反正一直说要戒烟，但是只是口头上的戒烟而已，每天还是该抽抽的，有的时候甚至还要让我去帮他买烟，就很离谱。当然呢，作为他唯一的儿子，我也希望他的身体可以好好的，毕竟呢，他也越来越老了，是该我这个唯一的儿子去让他享福的时候了。</div>

</div>

<div id="mq">

<div id="fmqt"><img src="图片/mq.jpg" width="200" height="180" /></div>

<div id="fmqnr">  我们赋予它太多的诠释，也赋予它太多的内涵。母爱是天涯游子的最终归宿，是润泽儿女心灵的一眼清泉，它伴随儿女的一饮一啜，丝丝缕缕，绵绵不绝，于是，在儿女的笑声泪影中便融入了母爱的缠绵。母亲如一根蜡烛，我们就是蜡炉下的读书人；母亲如一棵大树，我们就是树下的小苗；母亲如一张书桌，我们就是桌子上读书的那个人……我的母亲呢。相比于我的父亲来说，就没有那么的好说话了，就是她的脾气哈，比较的火爆，反正我除了事情，都不敢给她说，被他知道了，就是一顿骂，这也是我之后的事情只能叫我爸的原因把，虽然她就是对我的脾气很火爆，但是我也知道，对我脾气这么大其实也是希望我可以早一点的醒事，即便到了现在，我还是一如既往的犯错，但她也早就不是以前的母亲了，我在长大，她却在变老，上一次去找她一起吃饭的时候还给我说又该去烫头发了，叫我多去看看她，我知道，我的母亲正在快速的变老中了，自己也该懂懂事儿了。不能在像一起拿那样做事不计后果了。所以母亲也要身体好好的，看着你的儿子成长吧!</div>

</div>

<div id="eg">

<div id="egt"><img src="图片/eg.jpg" width="250" height="250" /></div>

<div id="egnr">  这个人就是我的二哥，我跟他的关系非常的好，可能应为我们两个性格的关系吧。虽然他是我的哥哥，但我觉得我们更像朋友，在我知道我的父母应为一些特殊的原因离婚后，他也是非常的担心我，从成都回来陪我玩，疏导我的心情，即便到了现在也是想着让我父亲和母亲能够复合，即便难度很大，他也没有放弃。同时他自己也是非常的流弊，在他高考前夕的时候，他面临这两个选择，一个是高考，还有一个是去帮他伯伯的忙，他选择了后者，放弃了考大学这条路，但是把我舅舅气得不行，但从现在得角度来看，二哥当时得选择也没有错，发展得很好。在今年的六月份得二哥也结婚了，还是非常分帅气的。最后就想祝我们的罗老板生意兴隆，然后早点让我当上舅舅。</div>

</div>

</body>

CQNU.html文件代码粘贴

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

body {

background-image:url(%E5%9B%BE%E7%89%87/leaves.png);

font-family: "Quicksand Bold";

}

#div1 {

height: 2300px;

width: 1260px;

margin-right: auto;

margin-left: auto;

}

.tu {

float: left;

padding-right: 10px;

padding-left: 10px;

}

.div2-6 {

font-family: "Quicksand Bold";

color: #000;

float: right;

width: 140px;

margin-top: 10px;

font-size: 24px;

font-weight: bolder;

text-align: right;

display: block;

height: 30px;

}

#div7 {

font-family: "Quicksand Bold";

color: #000;

height: 100px;

width: 1260px;

margin-top: 100px;

font-size: 74px;

font-weight: bolder;

padding-top: 20px;

text-align: center;

display: block;

border-bottom-width: 2px;

border-bottom-style: solid;

border-bottom-color: #000000;

float: left;

text-shadow:3px 3px #ccc;

}

#div8{

font-family: "幼圆";

color: #000;

float: right;

width: 1260px;

padding-top: 10px;

font-size: 16px;

margin-top: 50px;

border-radius: 10px 10px;

line-height: 45px;

background-color:rgba(255,255,255,0.75)

}

#div9 {

font-family: "Quicksand Bold";

color: #000;

float: left;

height: 100px;

width: 1260px;

margin-top: 100px;

font-size: 74px;

font-weight: bolder;

padding-top: 20px;

text-align: center;

display: block;

border-bottom-width: 2px;

border-bottom-style: solid;

border-bottom-color: #000;

text-shadow:3px 3px #ccc;

}

#div10{

font-family: "幼圆";

color: #000;

float: left;

width: 1260px;

padding-top: 10px;

font-size: 16px;

margin-top: 50px;

border-radius: 10px 10px;

line-height: 45px;

background-color: rgba(255,255,255,0.75);

}

#div11{

width: 1260px;

height: 50px;

text-align: center;

display: block;

margin-right: auto;

margin-left: auto;

margin-top: 100px;

font-size: 16px;

}

#div12{font-family: "Quicksand Bold";

color: #000;

height: 100px;

width: 1260px;

margin-top: 100px;

font-size: 74px;

font-weight: bolder;

padding-top: 20px;

text-align: center;

display: block;

border-bottom-width: 2px;

border-bottom-style: solid;

border-bottom-color: #000000;

float: left;

text-shadow:3px 3px #ccc;

}

#div13{

width: 1260px;

height: 600px;

margin-top: 50px;

border-radius: 20px 20px;

float: right;

}

.tu {

margin-top: 10px;

margin-right: 80px;

margin-left: 10px;

margin-bottom: 20px;

border: 2px double #000;

padding-top: 10px;

padding-right: 10px;

padding-bottom: 10px;

padding-left: 10px;

}

a:link{

color: #000;

text-decoration: none;

width: 140px;

height: 30px;

}

a:hover{

color: #000;

text-decoration: none;

width: 140px;

height: 30px;

}

a:visited{

color:#000;

text-decoration:none;}

</style>

</html>

<body>

</audio>

<div class="div2-6"><a href="School.html">School</a></div>

<div class="div2-6"><a href="Family.html">Family</a></div>

<div class="div2-6"><a href="About me.html">About me</a></div>

<div id="div7">重庆市师范大学</div>

<div id="div8"><img src="图片/t01953ff6ad87d2dcaf.png" width="302" height="304" class="tu" />  文脉深厚，教泽流长。重庆师范大学创办于1954年，是重庆市人民政府举办的全日制综合性普通本科院校，是西部教师教育事业的重要基地之一，办学历史源于1906年官立川东师范学堂。<br />

作为新中国最早创办的高等师范院校之一，学校始终秉承“立教无类，以文化人”的办学理念，恪守“厚德、笃学、砺志、创新”的校训精神，立足西部、扎根重庆、服务全国，建立起学前教育、小学教育、中等教育、高等教育、继续教育、职业技术教育、特殊教育和海外华文教育师资培养培训的完备教师教育体系。构建起师范教育和非师范教育“两轮驱动”，基础教育、职业教育和汉语国际教育“三驾马车”，文化传承与创新、决策咨询与公共服务、科技攻关与应用转化“三大板块”的特色办学格局。 <br />

师道尊严，彬彬济济。学校现有17个二级学院，1个独立二级学院，在校学生3万余人，其中全日制本科生25000余人、研究生4000余人、留学生570余人。在职教职工2000余人，其中正高职称和博士1000余人，博士生导师和硕士生导师800余位。有国际系统与控制科学院院士、国家“万人计划”人选、“新世纪百千万人才工程”国家级人选、国家级有突出贡献的中青年专家、全国杰出专业技术人才、全国文化名家暨“四个一批”理论人才、教育部科技委数理学部委员、“中国青年科技奖”获得者、享受国务院政府特殊津贴专家、“海外杰青”获得者、中国科学院“百人计划”人选等国家级专门人才26人。有教育部重点人才工程人选、重庆市重点人才工程人选210余人次。 <br />

</div><div id="div9">核心理念</div>

</strong>自强不息　语出《易经•乾》：“天行健，君子以自强不息。”寓意自我砥砺，坚持不懈，奋斗不止。我校自创立至今，虽几经更迭，多历沉浮，然秉持从教为师之天职，不等不靠，锐意进取，深受社会好评。<br />

躬行师道　《论语•为政》：“道之以德，齐之以礼，有耻且格。”朱熹《朱子语类》又云：“道之以德，是躬行其实以为民先。”既强调严格要求自己，三省吾身，检点提炼，也重于践行，以身作则，为楷为模。<span lang="EN-US" xml:lang="EN-US">50</span>余年来，我校始终高举教师教育大旗，在曲折中抱定坚持，在改革中臻于完善。<br />

“自强不息，躬行师道”既是我校历史经验之总和，亦是我校未来发展之期冀。<span lang="EN-US" xml:lang="EN-US"> </span></p>

</div>

</div>

</body>

五、School网页代码复制<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>School</title>

<style>

body{

background-image: url(%E5%9B%BE%E7%89%87/blue-snow.png);

}

#div1{

width:1260px;

height:2000px;

margin-left:auto;

margin-right:auto;}

#daohang{

width:1260px;

height:50px;

margin-left:auto;

margin-right:auto;}

.daohang1 {

font-family: "Quicksand Bold";

color: #000;

float: right;

width: 140px;

margin-top: 10px;

font-size: 24px;

font-weight: bolder;

text-align: right;

display: block;

height: 30px;

}

#div94bt {

font-family: "Quicksand Bold";

color: #000;

height: 100px;

width: 1000px;

float:left;

margin-top: 50px;

font-size: 74px;

font-weight: bolder;

border-bottom-width: 2px;

border-bottom-style: solid;

border-bottom-color: #000000;

text-shadow:3px 3px #ccc;

}

a:link{

color: #000;

text-decoration: none;

width: 140px;

height: 30px;

}

a:hover{

color: #000;

text-decoration: none;

width: 140px;

height: 30px;

}

a:visited{

color:#000;

text-decoration:none;}

#swxxnr {

float: left;

height: 450px;

width: 1200px;

margin-top: 20px;

border:1px solid #000;

border-radius:20px 20px;

background-color:rgba(255,255,255,0.75);

}

#swxxtu{

width: 550px;

height: 400px;

margin-top: 10px;

float: left;

padding-top: 10px;

padding-left: 10px;

border-right-width: 1px;

border-right-style: solid;

border-right-color: #000;

}

#swxxjs{

width: 600px;

height: 400px;

float: right;

margin-right: 10px;

font-size: 24px;

line-height: 30px;

padding-left: 10px;

margin-top: 10px;

padding-right: 10px;

}

#banji{

width: 1260px;

height: 450px;

float: left;

margin-top: 20px;

border: 1px solid #000;

}

#bjmc{

width: 100px;

height: 250px;

float: left;

margin-left: 20px;

margin-top: 80px;

font-family: "幼圆";

font-size: 36px;

line-height: 40px;

text-align: center;

display: block;

font-weight: bolder;

}

#bjtp{

width: 400px;

height: 300px;

float: left;

margin-left: 50px;

margin-top: 50px;

}

#kong{

width: 100px;

height: 420px;

float: left;

margin-top: 15px;

border-right-width: 1px;

border-right-style: solid;

border-right-color: #000;

}

#bjnr{

width: 500px;

height: 300px;

margin-left: 50px;

float: left;

margin-top: 50px;

font-size: 16px;

line-height: 25px;

}

#qs{

width: 1260px;

height: 150px;

float: left;

margin-top: 50px;

text-align: center;

display: block;

font-family: "Quicksand Book";

font-size: 50px;

font-weight: bolder;

color: #000;

text-shadow: 3px 3px #ccc;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #000;

}

#qsnr{

width: 1260px;

height: 400px;

margin-top: 50px;

float: left;

}

#bz{

width:1260px;

height:50px;

margin-right:auto;

margin-left:auto;

display:block;

text-align:center;}

.tu{

border-radius:20px 20px;}

</style>

</head>

<body>

</audio>

<div id="daohang"><div class="daohang1"><a href="School.html">School</a></div>

<div class="daohang1"><a href="Family.html">Family</a></div>

<div class="daohang1"><a href="About me.html">About me</a></div>

</div>

<div id="div94bt">重庆市渝中职教中心</div>

<p> 重庆市渝中职业教育中心坐落在风景秀丽的渝中半岛浮图关公园，占地面积<span lang="EN-US" xml:lang="EN-US">45575.34</span>亩，建筑面积<span lang="EN-US" xml:lang="EN-US">57485.17</span>万平方米，是一所集人文气息、现代气息于一体的园林式校园，是重庆市渝中区人民政府主办、渝中区教育主管的公办中等职业学校。学校办学历史悠久，由邓小平、贺龙于<span lang="EN-US" xml:lang="EN-US">1952</span>年亲自创建，并任命了首任校长。如今，学校已是教育部授牌的国家中等职业教育改革示范学校、国家级重点中等职业学校，先后被命名为全国教育系统先进集体、全国职业指导工作先进学校、全国语言文字工作先进集体、全国红十字模范校、重庆市职业教育先进单位、重庆市文明单位，获得参加全国职业院校技能大赛十年突出成就奖。</p>

</div>

九<br />

级<br />

拾<br />

班</div>

<div id="bjnr">  19级10班。一个在今朝下夜夜生辉的<a data-id="link-to-so" href="http://www.so.com/s?q=%E9%9B%86%E4%BD%93&ie=utf-8&src=internal_wenda_recommend_textn" text="详情页文字内链_点击实体词" target="_blank">集体</a>，我们昂扬向上，我们风雨同舟，34颗<a data-id="link-to-so" href="http://www.so.com/s?q=%E6%B0%B8%E6%81%92%E7%9A%84%E5%BF%83&ie=utf-8&src=internal_wenda_recommend_textn" text="详情页文字内链_点击实体词" target="_blank">永恒的心</a>，团结在一起，迸发出最美的心跳声，我们的拼搏，我们的努力，注定会在校园里留下一段<a data-id="link-to-so" href="http://www.so.com/s?q=%E4%B8%8D%E5%8F%98%E7%9A%84%E4%BC%A0%E8%AF%B4&ie=utf-8&src=internal_wenda_recommend_textn" text="详情页文字内链_点击实体词" target="_blank">不变的传说</a>。<br />

   这是一个团结向上的班集体。每一颗青春的心都朝气蓬勃斗志昂扬！在这里，34颗心<a data-id="link-to-so" href="http://www.so.com/s?q=%E5%9C%A8%E4%BA%BA%E6%B5%B7&ie=utf-8&src=internal_wenda_recommend_textn" text="详情页文字内链_点击实体词" target="_blank">在人海</a>中凝聚，春夏秋冬，我们体味着自然地轮回，春华秋实，我们收获凝聚的精彩，本着诚信，自信，拼搏，成功，的宗旨，我们一起体验着<a data-id="link-to-so" href="http://www.so.com/s?q=%E9%AB%98%E4%B8%AD%E7%94%9F%E6%B4%BB&ie=utf-8&src=internal_wenda_recommend_textn" text="详情页文字内链_点击实体词" target="_blank">高中生活</a>的欢欢苦涩，共同享受这班机亲如一家的幸福与温暖。 <br />

   同学们<a data-id="link-to-so" href="http://www.so.com/s?q=%E5%9C%A8%E4%B8%80%E8%B5%B7&ie=utf-8&src=internal_wenda_recommend_textn" text="详情页文字内链_点击实体词" target="_blank">在一起</a>学习、生活，互相帮助，互相激励，每一位同学都积极向上，许多同学都为班级体争夺荣誉。大家生活在同一片蓝天下，追求着不同的梦想，但都拥有一颗同样<a data-id="link-to-so" href="http://www.so.com/s?q=%E7%82%BD%E7%83%AD%E7%9A%84%E5%BF%83&ie=utf-8&src=internal_wenda_recommend_textn" text="详情页文字内链_点击实体词" target="_blank">炽热的心</a>。相信，只要向着目标不断冲刺，<a data-id="link-to-so" href="http://www.so.com/s?q=%E6%9C%AA%E6%9D%A5%E7%9A%84%E5%A4%A9%E7%A9%BA&ie=utf-8&src=internal_wenda_recommend_textn" text="详情页文字内链_点击实体词" target="_blank">未来的天空</a>必将被点亮！ </div>

</div>

<p>something intersting</p>

</div>

</div>

</body>

</html>

七、网页制作基础课程从理论到实践的学习总结

经过这一个学期的学习，我学到了很多，也收获到了很多。刚进入大学零基础的我，什么都不懂，但却让我真正地意识到了计算机科学与技术这个专业到底是怎么样子的。因为《网页制作基础》这门课程，原本想要转专业的我打消了念头，戴老师让我们知道了计算机专业在未来的前景到底有多大，让我也有更大的兴趣去学习计算机，老师说，不管是什么专业，不是偏要一定喜欢或者是兴趣，喜欢和兴趣是可以培养出来的。所以，跟着戴老师的脚步，我学完了这一个学期，可能是因为高中的习惯并没有养成好，以至于没有坚持到老师说的重述方法，以至于学完时感觉收获并不是很多，但通过大作业的完成，让我总结出了以下几点：

首先就是代码要与实际运用相结合。光看懂了代码并没有什么好大的作用，只有自己在不断的调试中理解每一个属性到底是干嘛的，才能够深刻的理解到、学习到，才是真正地掌握了这门课的知识，光是敲敲代码，而不去用脑子去想，去理解，只能告诉你一句，完全行不通。所以在做大作业时，我通读了《网页制作基础》整本书，把每一个知识点都抄写在另外的纸上，以便更能容易记住。

其次就是需要网页的的颜色搭配非常的重要。由于颜色搭配的不协调，我换了一次又一次，一遍又一遍。知道了在做一件大的工程时，需要提前去构思做一个怎样的网页，要做就需要做一个主题的，而不是各个主题相结合，会给人一种颜色差距过大，或者是颜色的冲击能力太大。被戴老师说了几句，我不断地去改正，做出各个颜色协调一致。网页既不能太过于冷色，应该注重于颜色的暖调，给人一种正能量的感觉。在不停的修改过程中会有一些小的反感，因为不停地改，可能会有些厌倦，但回头想想，有时候也不正是这样吗？需要满足客户的需求，效果可能就需要去不停地修改，直到客户能够满意，而现在的第一次大作业也让我深刻的明白了这个道理。

最后就是深刻的意识到了自己的不足。通过这一个学期的学习，看了学长学姐的网页非常的羡慕，能够做出多种动态效果，让我很佩服。而自己对js代码的不熟悉，导致没有一些动态效果出现在网页之中，也在深刻的反省自己是否真正得学习到这门课的精髓，让我意识到在以后的学习当中，我们需要跟随着戴老师的重述学习方法，一遍又一遍的去理解，这次虽然没有做出自己想要的那种动态效果，但我觉得这只是一个开始，在以后的课程学习中，我会吸取这次的教训，为自己下一个更好的作品而去努力。

学习的道路是无止境的，更何况是在多遍世界里的计算机，即使大学四年过去了，但在工作中也需要去不断地成长，不断地去学习，争取在这个行业中发光发热。

云炬网络平台

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
网页大作业——个人网页

一、学号姓名专业学号：2019051614023专业：计算机科学与技术(3+4)姓名：二、WEB大作业的首页地址和平时作业链接地址等1、index.html文件功能说明：这是我的主页。此页面运用了导航条，可以点此链接进入到另一个页面。主要包括了我的自我介绍、性格、兴趣、还有对未来的期望。进入页面会有我的地个人视频，还有音乐。2、home.html文件功能说明：这是我的家庭页面。里面会有关于我爷爷奶奶、外公外婆、我的家人的详细介绍。每一张图片都有放大的效果，并且可以翻转。3、live.html文件功能说明：
复制链接

扫一扫