第一个页面
https://www.suxiaowu.online/home.html
这是页面网址
源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="images/title.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/buttons.css"/>
<link rel="stylesheet" type="text/css" href="css/indexx.css"/>
<title>你还好吗</title>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="" class="container">
<div id="" class="row">
<div id="buttonsbox"class="col-lg-12 col-xs-12 col-sm-12 col-md-12 btn-group btn-group-lg " role="group" aria-label="..." >
<a href="index.html/" class="col-lg-3 col-xs-12 col-sm-6 col-md-3 button button-glow button-rounded button-raised button-primary">首页</a>
<a href="http://free.3v.do/gbook/index.asp?username=3213785220qq" class="col-lg-3 col-xs-12 col-sm-6 col-md-3 button button-glow button-rounded button-raised button-primary">留言板</a>
<a href="https://user.qzone.qq.com/1691690327?source=aiostar" class="col-lg-3 col-xs-12 col-sm-6 col-md-3 button button-glow button-rounded button-raised button-primary">QQ</a>
<a href="#" id="li4" class="col-lg-3 col-xs-12 col-sm-6 col-md-3 button button-glow button-rounded button-raised button-primary">微信</a>
</div>
</div>
<div id="div2" class="clearfix row">
<img id="img1" class="img1 img-thumbnail col-lg-6" src="images/335841-102.jpg">
<img id="img2" class="img2 img-thumbnail col-lg-6" src="images/335840-102.jpg">
</div>
<div id="geduan">
<div id="left">
<audio src="music/起风了.mp3" autoplay="autoplay" id="music">
当前浏览器不支持audio
</audio>
</div>
<div id="right">
</div>
</div>
<div id="bbbbb" class="row">
<a id='aaa' class="col-md-push-1 col-lg-2 col-xs-12 col-sm-12 col-md-2 button button-uppercase button-primary" href="http://sighttp.qq.com/msgrd?v=1&uin=1691690327" target="_blank">联系我们</a>
<a id='aaa' class="col-md-push-1 col-lg-2 col-xs-12 col-sm-12 col-md-2 button button-uppercase button-primary" href="https://weibo.com/u/3206816941" target="_blank">微博</a>
<a id='aaa' class="col-md-push-1 col-lg-2 col-xs-12 col-sm-12 col-md-2 button button-uppercase button-primary" href="https://music.163.com/#/user/home?id=115999455" target="_blank">网易云</a>
<a id='aaa' class="col-md-push-1 col-lg-2 col-xs-12 col-sm-12 col-md-2 button button-uppercase button-primary" href="http://www.sdcit.cn/" target="_blank">学校主页</a>
<a id='aaa' class="col-md-push-1 col-lg-2 col-xs-12 col-sm-12 col-md-2 button button-uppercase button-primary" href="http://jw.sdcit.cn/jwglxt/xtgl/login_slogin.html?language=zh_CN&_t=1544700919577" target="_blank">教务系统</a>
</div>
<div id="box1" class="row">
<div id="weixinblock" class="col-lg-5 col-lg-offset-4 center-block"><img class="img-rounded img-responsive" src="images/weixin.jpg" ></div>
<div id="close" class="row">
<button type="button" class="btn btn-danger col-xs-2 col-sm-2 col-lg-2 col-md-2" id="danger">关闭</button>
</div>
</div>
</div>
</body>
</html>
这是HTML代码，用了bootstrap3构架。
http://www.bootcss.com/ //bootstrap主页
bootstrap强大的栅格系统使得页面布局相当方便，页面也变得相当整洁。
各种样式的button更是省去了改写按钮样式的时间。
个人不喜欢用列表，所以很少写ul li。整个页面全部用的
作为盒子。
页面写的相当简单，后来也没去完善，特别是那几张图片，特别的大，如果网速慢的话可能很久都加载不出来。
ico也是随便找了张图做的。
页面写的相当简单，后来也没去完善，特别是那几张图片，特别的大，如果网速慢的话可能很久都加载不出来。
ico也是随便找了张图做的。
关于ico
http://www.bitbug.net/
这个网址就是在线制作ico图标的网址
这个相当方便，百度ico就能找的到。
可以选择生成图标的尺寸。
但是这个只支持图片小于500k的图片。
如果图片大于500k，可以去 http://cn.faviconico.org/
这个网址可以支持小于5M的图片生成ico。
audio
给页面添加audio的时候我加了autoplay，测试的时候用的Google，当时忘了Google用autoplay的时候会出问题。 - -！换了火狐就好了。
css
css样式特别简单，就是加了一个页面背景图和透明效果。
JavaScript
写这个时候没用jQuery，是用原生js写的，也非常简单，只有一个透明度的渐变和点击切换图片效果。
图片切换用的方法是直接改变它的src的值，所以页面第一次加载点击效果会非常慢。
oImg.onclick = function(){
if(i % 3 == 0){
oImg.src = "images/335842-102.jpg";
}else if(i % 3 == 1){
oImg.src = "images/335850-102.jpg";
}else if(i % 3 == 2){
oImg.src = "images/335841-102.jpg";
}
简单，粗暴。
447
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
