新手web前端只第一个网站
在这个信息爆炸的时代，相信每个人都无时无刻不陶醉在互联网的海洋之中，生活中与我们接触最多的就是各种千奇百怪的网站了把！当你看到各种网站上眼花缭乱的效果的时候，有木有被震撼？有木有想亲手做一下呢？
俗话说好奇心害死猫啊。博主就是这样入了前端的坑，不知不觉已一十又五天；
没错zhen博主入坑了，博主并不是计算机专业的aaa!博主是一只名副其实的电气狗，从单片机开始走到了前端！好了好了废话少说直接进入正题！
博主在学习了十五天之后呢，注备开始仿造一些网站了！博主还在念书，无疑学校官网是比较熟悉的！于是今天就给小伙伴们带来了这样一片文章！--新手web前端第一个网站！博主相信，小伙伴们在做出第一个网站的时候肯定是异常兴奋的！那种成就感是无与伦比的！
进入正题
1，开发环境：window7
2，开发工具：vscode
3，涉及知识点：html ,css ,js 这里js用的比较少只有两个运动！css中的div、span用的超级多！博主主要用这两个来进行布局的233，div嵌套用的超级多，小伙伴们bu要被绕晕了哦！
4.本人在开发的时候也参考了其他博主的一些文章！
废话少说直接贴代码
第一部分HTML部分（包含js部分）
INTU.html
<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
meta
http-equiv=
"Content-Type"
content=
"text/html; charset=gb2312"
/>
<
link
rel=
"stylesheet"
type=
"text/css"
href=
"css/common.css"
>
<
link
rel=
"stylesheet"
type=
"text/css"
href=
"css/index.css"
>
<
title
>辽宁工程技术大学-首页
</
title
>
<
script
type=
"text/javascript"
src=
"move.js"
>
<
/
script
>
</
head
>
<
style
>
<
/
style
>
<
script
language =
javascript
>
var
curIndex=
0;
//时间间隔 单位毫秒
var
timeInterval=
1500;
辽ICP备07008350号
var
arr=
new
Array();
arr[
0]=
"image/1.jpg";
arr[
1]=
"image/2.jpg";
arr[
2]=
"image/3.jpg";
arr[
3]=
"image/4.jpg";
arr[
4]=
"image/5.jpg";
arr[
5]=
"image/6.jpg";
arr[
6]=
"image/7.jpg";
setInterval(
changeImg,
timeInterval);
//设置定时器，1500毫秒执行一次
function
changeImg()
{
var
obj=
document.
getElementById(
"qiehuan");
//获取id属性
if (
curIndex==
arr.
length-
1)
//判断是否是数组中最后一个元素
{
curIndex=
0;
}
else
{
curIndex+=
1;
}
obj.
src=
arr[
curIndex];
//设置值
}
<
/
script
>
<
script
language =
javascript
>
var
cursmallIndex=
0;
//时间间隔 单位毫秒
var
timeIntervalsmall=
1500;
var
brr=
new
Array();
brr[
0]=
"image/a.jpg";
brr[
1]=
"image/b.jpg";
brr[
2]=
"image/c.jpg";
setInterval(
changeImgsmall,
timeIntervalsmall);
//设置定时器，1500毫秒执行一次
function
changeImgsmall()
{
var
objsmall=
document.
getElementById(
"qiehuansmall");
//获取id属性
if (
cursmallIndex==
brr.
length-
1)
//判断是否是数组中最后一个元素
{
cursmallIndex=
0;
}
else
{
cursmallIndex+=
1;
}
objsmall.
src=
brr[
cursmallIndex];
//设置值
}
<
/
script
>
<
body
onload=
randomPic();
>
<
div
id=
"wrapper"
>
<
div
id=
"top"
>
<
div
id=
"logo"
>
<
p
><
a
href=
"/index.asp"
><
img
src=
"image/logo.png"
alt=
"logo"
/></
a
></
p
>
</
div
>
<
div
id=
"top1"
>
<!--/English 设为首页 加入收藏 兼容Firefox IE-->
<
script
language=
"javascript"
type=
"text/javascript"
>
function
addCookie() {
// 加入收藏
if (
document.
all) {
window.
external.
addFavorite(
'http://202.199.224.2/index.asp',
'辽宁工程技术大学');
}
else
if (
window.
sidebar) {
window.
sidebar.
addPanel(
'辽宁工程技术大学',
'http://202.199.224.2/index.asp',
"");
}
}
function
setHomepage() {
// 设为首页
if (
document.
all) {
document.
body.
style.
behavior =
'url(#default#homepage)';
document.
body.
setHomePage(
'http://202.199.224.2/index.asp');
}
else
if (
window.
sidebar) {
if (
window.
netscape) {
try {
netscape.
security.
PrivilegeManager.
enablePrivilege(
"UniversalXPConnect");
}
catch (
e) {
alert(
"该操作被浏览器拒绝，假如想启用该功能，请在地址栏内输入 about:config,然后将项 signed.applets.codebase_principal_support 值该为true");
}
}
var
prefs =
Components.
classes[
'@mozilla.org/preferences-service;1'].
getService(
Components.
interfaces.
nsIPrefBranch);
prefs.
setCharPref(
'browser.startup.homepage',
'http://202.199.224.2/index.asp');
}
}
<
/
script
>
<
p
><
a
href=
"http://202.199.224.4"
>English
</
a
><
a
href=
"javascript:void(0)"
onclick=
"setHomepage()"
class=
"mail"
>设为首页
</
a
><
a
href=
"javascript:void(0)"
onclick=
"addCookie()"
class=
"mail"
>加入收藏
</
a
>
</
p
>
</
div
>
<
div
class=
"clearfloat"
></
div
>
</
div
>
<
div
class=
"current"
><
a
href=
"http://news.lntu.edu.cn/content/?24717.html"
>
<
img
src=
"image/menu_bg.GIF"
width=
"978"
height=
"50"
border=
"0"
/>
</
a
>
</
div
>
<
div
id=
"menu"
>
<
a
href=
"index.asp"
class=
"current"
>首 页
</
a
><
a
href=
"overview.asp"
>学校概况
</
a
><
a
href=
"Organization.asp"
>组织机构
</
a
><
a
href=
"departments.asp"
>院系设置
</
a
><
a
href=
"http://202.199.224.1/rsc"
>师资队伍
</
a
><
a
href=
"train.asp"
>人才培养
</
a
><
a
href=
"http://xkc.lntu.edu.cn/"
>学科建设
</
a
><
a
href=
"http://202.199.224.76/"
>科学研究
</
a
><
a
href=
"http://202.199.224.144/"
>国际交流
</
a
><
a
href=
"http://202.199.224.162/"
class=
"current"
>招生就业
</
a
>
</
div
>
<
div
id=
"div2"
>
<
img
src=
"image/1.jpg"
border =
0
width=
"848",
height=
"215"
id=
"qiehuan"
/>
<
div
id=
"submenu"
>
<
img
src=
"image/submenu1.png"
width=
"132"
height=
"215"
alt=
"子菜单"
usemap=
#map1
/>
<
map
name=
"map1"
>
<
area
shape=
"rect"
target=
"_blank"
coords=
"0,0,132,75"
href=
"http://oa.lntu.edu.cn/
"
>
<
area
shape=
"rect"
target=
"_blank"
coords=
"0,75,132,143"
href=
"http://mail.lntu.edu.cn/"
>
<
area
shape=
"rect"
target=
"_blank"
coords=
"0,143,132,214"
href=
"mail1.asp"
>
</
map
>
</
div
>
<
div
id=
"div3"
>
<
h1
><
span
id=
"span1"
><
a
href=
"http://news.lntu.edu.cn"
>工大新闻
</
a
></
span
>
<
span
id=
"span2"
><
a
href=
"http://news.lntu.edu.cn"
>更多 》
</
a
></
span
>
<
span
id=
"span3"
><
a
href=
"post1.asp?c=1"
>工大公告
</
a
></
span
>
<
span
id=
"span4"
><
a
href=
"post1.asp?c=1"
>更多 》
</
a
></
span
></
h1
>
</
div
>
<
div
id=
"div5"
>
<
div
id=
"div6"
>
<
img
src=
"image/a.jpg"
border =
0
width=
"94",
height=
"145"
id=
"qiehuansmall"
/>
<
div
id=
"div7"
>
<
ul
>
<
a
href=
"http://news.lntu.edu.cn/content/?25370.html"
><
li
>我校学生在“青年之声”VR视频制作大赛中获得佳绩
</
li
></
a
>
<
a
href=
"http://news.lntu.edu.cn/content/?25349.html"
><
li
>我校学生在全国研究所公共管理案例大赛中获奖"
</
li
></
a
>
<
a
href=
"http://news.lntu.edu.cn/content/?25346.html"
><
li
>校党委中心组学习习近平总书记在北京大学师生座谈会上
</
li
></
a
>
<
a
href=
"http://news.lntu.edu.cn/content/?25338.html"
><
li
class=
"kaimu"
>我校第二次团代会暨第二次学代会胜利闭幕
</
li
></
a
>
<
a
href=
"http://news.lntu.edu.cn/content/?25332.html"
><
li
class=
"kaimu"
>我校第二次团代会暨第二次学代会隆重开幕
</
li
></
a
>
<
a
href=
"http://news.lntu.edu.cn/content/?25326.html"
><
li
>我校召开纪念五四运动99周年座谈会
</
li
></
a
>
<
a
href=
"http://news.lntu.edu.cn/content/?25324.html"
><
li
>我校在全国和辽宁省共青团工作表彰中荣获多项荣誉
</
li
></
a
>
</
ul
>
</
div
>
<
div
id=
"div8"
>
<
img
src=
"image/pic2.jpg"
border=
0;
width=
"93px";
height=
"143px;"
>
</
div
>
<
div
id=
"div9"
>
<
ul
id=
"ula"
>
<
li
><
a
href=
"http://10.21.24.25/details.jsp?itemid=2004"
>欢迎报考辽宁工程技术大学2018年博士研究生
</
a
><
span
>02-11
</
span
></
li
>
<
li
><
a
href=
"post_detail1.asp?id=294"
>关于新校园网使用问题的紧急通知
</
a
>
<
span
>01-03
</
span
></
li
>
<
li
><
a
href=
"post_detail1.asp?id=293"
>新校园网建设割接通知
</
a
><
span
>01-02
</
span
></
li
>
<
li
><
a
href=
"post_detail1.asp?id=292"
>辽宁工程技术大学2017年公开招聘体检人员递补通知
</
a
><
span
>12-29
</
span
></
li
>
<
li
><
a
href=
"post_detail1.asp?id=291"
>2017年度CASC奖学金评选结果公示
</
a
><
span
>12-28
</
span
></
li
>
<
li
><
a
href=
"post_detail1.asp?id=290"
>辽宁工程技术大学2017年公开招聘人才体检通知
</
a
><
span
>12-25
</
span
></
li
>
<
li
><
a
href=
"post_detail1.asp?id=288"
>案例大赛参赛指导学术报告
</
a
><
span
>12-20
</
span
></
li
>
</
ul
>
</
div
>
</
div
>
</
div
>
<
div
id=
"div10"
>
<
tr
>
<
td
>
<
hr
style:
"width:100%;text-align:center;vertical-align:middle"/
>
</
td
>
<
td
>
<
p
id=
"link_p"
>
<
br
>
<
a
href=
"http://news.lntu.edu.cn/"
>工大新闻
</
a
>
<
span
>|
</
span
>
<
a
href=
"http://202.199.224.121/"
>教务在线
</
a
>
<
span
>|
</
span
>
<
a
href=
"http://202.199.224.25/"
>研究生院
</
a
>
<
span
>|
</
span
>
<
a
href=
"http://lib.lntu.edu.cn"
>图书馆
</
a
>
<
span
>|
</
span
>
<
a
href=
"http://202.199.224.141/"
>工大党建
</
a
>
<
span
>|
</
span
>
<
a
href=
"http://202.199.224.2/newzhaoping/index.html"
>人才招聘
</
a
>
<
span
>|
</
span
>
<
a
href=
"http://wgzx.lntu.edu.cn/"
>网络服务
</
a
>
<
span
>|
</
span
>
<
a
href=
"http://202.199.224.145/"
>有线电视台
</
a
>
<
span
>|
</
span
>
<
a
href=
"http://xuebao.lntu.edu.cn"
>学报投稿
</
a
>
<
span
>|
</
span
>
<
a
href=
"http://www.lntu.edu.cn"
>太阳石之光
</
a
>
<
span
>|
</
span
>
<
a
href=
"http://202.199.224.2/"
>校诗词网
</
a
>
<
span
>|
</
span
>
<
a
href=
"http://202.199.224.22:8002/"
>教育基金
</
a
>
<
span
>|
</
span
>
<
a
href=
"http://202.199.224.2/"
>校友会
</
a
>
<
span
>|
</
span
>
<
a
href=
"http://www.lntu.edu.cn/post_detail1.asp?id=262"
>信息公开
</
a
>
<
span
>|
</
span
>
<
a
href=
"http://www.lntu.edu.cn/龙湾校园成果展/index.html"
>龙湾校园成果展
</
a
>
</
p
><
form
>
<
select
name=
"link1"
id=
"link1"
style=
"float:right;"
onchange=
"MM_jumpMenu('parent',this,0);"
>
<
option
selected=
"selected"
value=
"0"
>友情链接
</
option
>
<
option
value=
"http://www.tsinghua.edu.cn"
>清华大学
</
option
>
<
option
value=
"http://www.lib.pku.edu.cn"
>北京大学
</
option
>
<
option
value=
"http://www.sjtu.edu.cn"
>上海交通大学
</
option
>
<
option
value=
"http://cjc.sysu.edu.cn"
>中山大学
</
option
>
<
option
value=
"http://www.hust.edu.cn"
>华中科技大学
</
option
>
</
select
>
<
script
type=
"text/javascript"
>
function
MM_jumpMenu(
targ,
selObj,
restore) {
//本窗口打开
//eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+" ' ");
//alert(selObj.options[selObj.selectedIndex].value)
//新窗口打开
window.
open(
selObj.
options[
selObj.
selectedIndex].
value);
if (
restore)
selObj.
selectedIndex=
0
}
<
/
script
>
</
form
>
<
br
>
<
br
>
<
p
><
span
class=
"span1"
>中国·阜新·辽宁工程技术大学 版权所有
</
span
><
span
>2006
</
span
><
span
>by www.lntu.edu.cn All rights reserved.
</
span
><
span
>E-mail:
<
a
href=
"mailto:[email protected]"
>[email protected]
</
a
></
span
>
<
span
>辽ICP备07008350号
</
span
></
p
><
p
><
span
class=
"span1"
>阜新校区:辽宁省阜新市中华路47号
</
span
><
span
>邮 编:123000
</
span
><
span
>电话:0418-3351111
</
span
><
span
>葫芦岛校区:辽宁省葫芦岛市龙湾南大街188号
</
span
><
span
>邮 编:125105
</
span
><
span
>电话:0429-5310147
</
span
></
p
>
<
p
>
</
p
>
</
td
>
</
tr
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html>
第二部分 css部分！
第二部分：css部分
@
charset "gb2312";
/* CSS Document */
*{
padding:
0px;
margin:
0px;
}
img{
border:
none;}
body{
background-color:
#666666;
text-align:
center;
font-size:
12px;
font-family:
Arial,
Helvetica,
sans-serif;
color:
#666666;
line-height:
20px;
}
a{
text-decoration:
none;
}
a:hover{
text-decoration:
underline;
}
ul,li{
list-style:
none
}
#wrapper{
width:
978px;
margin:
0
auto;
text-align:
left;
background-color:
#FFF;
}
#top{
padding-top:
20px;
margin-bottom:
20px;
margin-right:
8px;
}
#logo{
margin-left:
10px;
display:
inline;
}
#top1{
width:
238px;
float:
right;
margin-right:
7px;
margin:
-60px;
/*display:inline;*/
}
#top1 p{
padding:
10px
0
0
0;
}
#top1 p a{
color:
#6e6f6c;
text-decoration:
none;
margin-left:
7px;
}
#top1 p a:hover{
text-decoration:
underline;}
#top1 p span{
margin-left:
7px;}
#menu a{
color:
#31312a;
font-weight:
bold;
padding:
14px
24px
14px
24px;
display:
block;
float:
left;
text-decoration:
none;
background:
rgba(
201,
206,
202,
0.562);
}
#menu a.current,#menu a:hover{
color:
#dc2b0e;}
#div2 {
width:
978px;
height:
215px;
}
#submenu{
float:
right;
width:
130px;
height:
215px;
}
#submenu img{
display:
block;
float:
left;
padding:
0px;
}
#div3 {
background:
rgba(
255,
255,
255,
0.788);
width:
978px;
height:
31px;
margin:
0;
padding:
0;
width:
980px;
}
#div3 h1 a {
font-size:
20px;
font-weight:
bold;
color:
#cf2914;}
#div3 h1 #span1{
margin:
0;
padding:
0;}
#span2{
margin-left:
400px;}
#span3{
margin-right:
250px;}
#span4{
margin:
0;
padding:
0;}
#div5 {
width:
980px;
height:
195px;
background:
#FFF;
}
#div6{
margin-left:
20px;
margin-bottom:
20px;
padding-bottom:
20px;
padding-top:
20px;
padding-left:
20px;
width:
980px;
}
#div7{
margin-left:
20px;
margin-bottom:
20px;
padding-bottom:
0px;
margin-right:
550px;
padding-top:
0px;
padding-left:
0;
float:
right;
width:
980;
height:
145;
}
#div7 ul li {
color:
black;
}
#div7 ul .kaimu {
color:
red;
}
#div8 {
float:
right;
margin-top:
-160px;
width:
500px;
}
#div9 {
float:
right;
width:
380px;
margin-top:
-160px;
}
#div9 ul li {
color:
black;
}
#ul1a{
color:
black;
}
#div9 ul li a{
color:
black;}
#div9 ul li span {
float:
right;
margin-right:
50px;}
#div10{
width:
978px;
height:
150px;
background:
white;}
#div10 a {
color:
lightgrey;}
#div10 option {
color:
lightgrey;}
#div10 #link1 {
color:
lightgrey;}
#div10 p span {
color:
lightgrey;}
OK！到这里呢，就是全部的代码！js部分不是太多，因为只有两个运动效果哦！
接下来，博主截下运行结果图，小伙伴们参考！
这里博主说下js效果把，，大图小图都是自动切换的！OK到了这里呢，基本上结束了！
最后，博主总结一下本次开发的比较重点的内容：
top1:js自动切换图片效果，用到了定时器！我们先来贴下代码把！
<
script
language =
javascript
>
var
curIndex=
0;
//时间间隔 单位毫秒
var
timeInterval=
1500;
辽ICP备07008350号
var
arr=
new
Array();
arr[
0]=
"image/1.jpg";
arr[
1]=
"image/2.jpg";
arr[
2]=
"image/3.jpg";
arr[
3]=
"image/4.jpg";
arr[
4]=
"image/5.jpg";
arr[
5]=
"image/6.jpg";
arr[
6]=
"image/7.jpg";
setInterval(
changeImg,
timeInterval);
//设置定时器，1500毫秒执行一次
function
changeImg()
{
var
obj=
document.
getElementById(
"qiehuan");
//获取id属性
if (
curIndex==
arr.
length-
1)
//判断是否是数组中最后一个元素
{
curIndex=
0;
}
else
{
curIndex+=
1;
}
obj.
src=
arr[
curIndex];
//设置值
}
<
/
script
>
这里博主参考了另外一位博主的做法，超级简单，就是利用数组作为媒介！代码里注释的非常清楚，博主在这里就不废话了！
top2:
这里重点说下div+css+span布局！
首先我们来说下div 与span的区别！首先直观的感受二者都可以形成一定的区域，继而对这个区域进行操作，编辑各种属性等等！那么他们的区别在哪里呢？我们不妨借用下空间的概念，可以这样理解下。span的世界都是二纬的，是平面的，什么意思呢就是比如你写一大串span，比如你要在同一方向的平面内添加大量东西！这个歌时候就可以用SPAN 了，倘若采用DIV无疑会麻烦的多！他们都是在一个范围之内的，也就是可以互相碰触到！
对于div就不同了div可以理解成三纬的空间的概念！不同的DIV是互相隔离的，是不通的！即使两个DIV相互紧挨着，他们之中的元素也是无法碰触在一起，简单的说就像是元气护罩一样！隔离开来！彼此都是独立的个体！博主这里用了非常多的div嵌套以及span去布局页面！
还有div的嵌套就像是头套娃娃一样，大的套小的。最前面的几个DIV还是设置大点比较好。因为你不知道后边会发生什么！之后在进行细致的修改就OK！
OK！本次分享就到这里了，感谢大家的浏览收藏！博主是萌新，欢迎大家批评指正！