我在CSDN同步更新 喜好白色代码背景的同学可去看

我半年前学习过前端了，现在已经忘了差不多了。从Head Frist Html开始看书，了解一下Css以及JavaScript;也买了几本书来看。但因为时间问题，也没有认真去打一个项目去巩固一下基础，都是打一百多行的代码来实现一下小Demo。并且也没系统的学习一下JavaScript和Jquery。随着时间的过去，自己学得后端知识越多，对前端忘得越厉害，时常性去复习一下，也是有必要的。

现在前端也出现了挺多框架来加快后端程序员的开发，例如* EasyUi,Bootstrap,AdminLTE* 等等，但其中也是换汤不换药，其中的所调用的类以及函数或多或少都有前面技术的影子，并且其中的案例大多数模板化。所以先将之前的技术学好，再拿到这些开源的框架去开发，日后可以修改源代码来满足自己的需求。面对复杂的网页界面以及需求分析也不会感到太大的压力。以各大网站的模板来照着打，更深的理解前端的知识，会更加结构化去解析问题。写一个随笔来记录一下自己遇到的问题以及心得。

login.jsp

index.js index.css

main.js main.css

效果图：

lol官网.png

Html主要要点及心得：

在构建网页布局的时候想清楚组件的布局

组件的大小，位置，继承关系 是必须要考虑的因素

而在打Demo的过程中，我发现官网的的例子都有一定的特点 例如：在下面的html结构中，

1、location-size用于定义组件的位置、大小、padding以及margin；

2、title-css用于定义标题的大小以及css 让背景变得更加美观

3、title用于定义主标题以及副标题

4、#tilte_id 使组件易于与后台的数据进行交互来更新其中的li

5、#tilte_id>li 设置对应的Css样式以及JS,如果用鼠标移动到对应li上会使下面的内容也变化

6、context用于定义内容的大小以及位置

7、context_id 使组件易于与后台的数据进行交互来更新其中的li

8、#context_id>li 设置对应的Css样式以及JS。

9、如果有其他内容加入可以修改li来增加功能

Css主要要点：

熟练掌握各种Css的表达式以及效果

在实现头部导航栏的中，需要将导航栏放在在背景图片之前需要将

x > .other 代表x中所有other类

x > p 代表x中所有p的元素

.x .other 代表x以及子元素中所有other类

#x > p 代表id为x中所有p的元素

position: absolute;/*大多数用于初期定义组件的情况*/

position: relative;/*用于在大组件定义子组件的情况*/

margin: 0 auto;/*居中显示*/

z-index: 10;/*如果多个组件在同一位置 0 代表底层 越高代表离用户越近*/

float:left;/*列表水平显示*/

box-sizing: border-box;/*并排放置元素*/

background:linear-gradient(rgba(0,0,0,1), rgba(0, 0, 0, 0));/*渐变色 black-> apparent*/

li:hover/*鼠标移动到li上*/

图片以及图标的显示

看了样例，加载图片以及Icon都是一次直接加载比较大的图片，而图片中有许多小图标，通过background-position: -216px -99px; width: 22px;height: 26px;来进行分割和显示

/*各个icon 布局*/

.right-nav-i1,.right-nav-i2,.right-nav-i3,.right-nav-i4,.right-nav-i5,right-nav-i6{

width: 22px;

height: 26px;

display: inline-block;

vertical-align: middle;

background-image: url(//game.gtimg.cn/images/lol/v3/comm-spr.png);

background-size: 393px 200px;

background-repeat: no-repeat;

}

.right-nav-i1{

background-position: -216px -99px;

}

右边的导航栏

.right-nav{

right: 0;

margin: 0;

padding: 0;

width: 70px;

height: auto;

box-sizing: border-box;

/* 来源于W3school

fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

absolute:生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

relative:生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

inherit:规定应该从父元素继承 position 属性的值。*/

position: fixed;

overflow: hidden;

bottom: 18%;/*离底部最低位置*/

background-color: #fff;

border-radius: 9px 0 0 9px;

z-index: 199;

}

Jquery主要要点

轮播图的实现

//主界面轮播 start

var index = 0;

var time = 3000;

var timer = null;

var length = $('.prome-title-list').children.length;//有多少张图片

var width = 820;//1张图片长度 一共有5张

auto();//无脑自动循环

//轮播图下面的标题被 鼠标移入

$('.prome-title-list span').hover(function () {

//暂停轮播效果

clearInterval(timer);

//获得标题的index

index = $(this).index();

//将这个标题添加一个select的类 其他标题移除这个select类

$(this).addClass("span_select").siblings().removeClass("span_select");

//根据下标将 轮播画面 移动到 该图片的位置上

$(".prome-item-list").animate({left: -index * width}, 300);

}, function () {

//鼠标移出

auto(timer);

});

function auto() {

timer = setInterval(function () {

//3s切换下个图片以及标题

nextPicture();

nextTile();

}, time);

}

function nextPicture() {

index++;

if (index >= 5) {

/*$(".prome-item-list").animate({left:-(index)*width},300);*/

index = 0;

$(".prome-item-list").animate({left: 0}, 0);

}

$('.prome-item-list').animate({left: -index * width}, 300);

}

function nextTile() {

$('.prome-title-list span').eq(index).addClass("span_select").siblings().removeClass("span_select");

}

function prePicture() {

index--;

if (index < 0) {

index = length;

$(".prome-item-list").animate({left: -(index) * width}, 0);

}

$('.prome-item-list').animate({left: -index * width}, 500);

}

//主界面轮播 end

鼠标移动出现子面板

//鼠标移到标题 则下面的面板提示会滑出

$(".head-nav-ul").mouseover(function () {

$('.head-nav-sub').slideDown(130);

});

//鼠标在滑出出的面板中 不会回退

$(".head-nav-sub").mouseover(function () {

$('.head-nav-sub').show();

});

//鼠标移出的面板 面板消失

$('.head-nav-sub').mouseout(function () {

$('.head-nav-sub').hide();

})