搭建一个简单的静态网页
1、 致初学者：
许多人想学习网页搭建，在这里分享一些自己学习过程中的一些经验。首先，学习资源方面建议一整套系统性的来学习，包括HTML、CSS、JS三大块，在这三个学完之后，尝试写一个简单的静态网页，巩固练习，熟悉网页的框架，其余的一些动态效果：如轮播图、导航菜单等可以在日常的学习中积累。三个初步学习完后，作为javaWeb的敲门砖.
2、HTML
用HTML写的是整个网页的总体架构，其中最关键部分就是对网页进行分块，根据分块再来写每一个块内具体的内容。标签方面80%甚至以上都用的是div块级标签，后接class属性方面进行css样式书写，接id方面js书写。需要注意的是块级元素和行内元素，这两个分清后，再对静态网页的进行分块书写一般就不会出问题。
下图是HTML搭建的一个网页的总体架构，与上述总结可以结合来看
3、CSS样式
CSS样式是对网页进行样式的设计，大体架构写好后，需要对其中的各个块进行设计。最常用的就是CSS定位，定位中可以通过float进行布局，但是不建议使用浮动，position定位完全可以解决一切的定位需要，确定好父子关系，正确使用relative和abslolute。进行样式设计时，明确好是哪一个class，或者元素，一般而言，可以多加class名称，以便于对相同类型的样式进行设计，简化代码。在进行设计时，需要先清除一些默认的网页布局。
下面部分代码是CSS样式的一些实际应用，可以与上述结合来思考
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a:link,a:visited{
text-decoration: none;
color: #333333;
}
body{
font-family: "微软雅黑";
color: #14191e;
}
.page{
width: 1024px;
height: 645px;
/*上下外边距30px，左右自动居中*/
margin: 30px auto;
overflow: hidden;
position: relative;
}
.slide{
width: 1024px;
height: 645px;
position:relative;
}
.img{
width: 1024px;
height: 645px;
background: no-repeat;
position: absolute;
display: none;
}
.active{
display:block;
}
.img1{
background-image: url("../img/001.jpg");
}
.img2{
background-image: url("../img/002.jpg");
}
.img3{
background-image: url("../img/003.jpg");
}
.button {
width: 50px;
height: 50px;
background: url("../img/004.png") no-repeat center center;
position: absolute;
left: 200px;
top: 50%;
margin-top: -25px;
}
.button1{
transform: rotate(180deg);
}
.button2{
left: auto;
right: 2px;
}
.button:hover{
background-color: #333333;
opacity: 0.8;
}
4、JS
JS也就是JavaScript是对网页进行效果的设计，通过JS的书写，是网页变得有条理，对网页上的按钮等添加点击，鼠标滑入、滑出等效果。在进行JS书写时，最重要的就是函数的封装，通过封装使得代码变得层次清晰，方便调用，JS通过DOM事件与HTML相连接，通过var声明变量（建议多声明全局变量，方便调用）。
可结合下述具体代码来理解
//封装一个获取id的方法
function byId(id) {
return typeof(id) === "string"?document.getElementById(id):id;
}
//全局变量的声明，方便各种函数的调用
var page = byId("page"),
timer = null,
index = 0,
slide = byId("slide"),
img = slide.getElementsByTagName("div"),
len = img.length,
dots = byId("dots").getElementsByTagName("span"),
pre = byId("pre"),
next = byId("next"),
menu = byId("menu-content"),
menuItems = menu.getElementsByClassName("menu-item")
subMenu = byId("sub-menu"),
inner = subMenu.getElementsByClassName("inner");
function slideImge() {
page.onmouseover = function (ev) { //清除计时器
if(timer) clearInterval(timer);
}
page.onmouseout = function (ev) { //离开自动变换图片
timer = setInterval(function () {
index++;
if(index >= len) index = 0;
changeImg();
},3000);
}
page.onmouseout();
//点击圆点切换图片
for(var i=0; i<len; i++){
dots[i].id = i;
dots[i].onclick = function (ev) {
index = this.id;
changeImg();
}
}
//点击上下按钮切换
pre.onclick = function (ev) {
index--;
if(index < 0){
index = len;
}
changeImg();
}
next.onclick = function () {
index++;
if(index >= len){
index = 0;
}
changeImg();
}
function changeImg(){ //轮播图片的方法
//遍历slide下所有的div，隐藏图片，遍历dots下span，清除active类
for(var j=0; j<len; j++){
img[j].style.display = "none";
dots[j].className = "";
img[index].style.display = "block";
dots[index].className = "active";
}
}
// 导航菜单，遍历主菜单，添加类似于id的data-index自定义属性
for (var m=0; m<menuItems.length; m++){
menuItems[m].setAttribute("data-index",m);
menuItems[m].onmouseover = function () {
subMenu.className = "sub-menu";
var idx = this.getAttribute("data-index");
for (var n=0; n<menuItems.length; n++){
inner[n].style.display = "none";
menuItems[i].style.background = "";
}
inner[idx].style.display = "block";
menuItems[idx].style.background = "rgba(0,0,0,0,0.2)";
}
}
menu.onmouseout = function (ev) {
subMenu.className = "sub-menu hide";
}
subMenu.onmouseover = function (ev) {
this.className = "sub-menu";
}
subMenu.onmouseout = function (ev) {
this.className = "sub-menu hide";
}
}
slideImge()
下面就是上述三个结合起来的初步网页了
总结：用了大概1周左右巩固熟悉了其中的代码块，下一步进行JavaWeb学习，等学有所成会继续分享我的学习经验哦
