搭建一个简单的静态网页
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学习,等学有所成会继续分享我的学习经验哦