快捷搜索:

HTML5与CSS3实战(三)HTML5网页诞生

回首殊效,为什么absolute

我们回首下之前的几个殊效,无论是导航上随着走的背景,照样爆炸的图片,到昨天做的快速导航殊效,他们全是采纳绝对定位!

然后来看看我们顿时要做的新闻列表:

留意他点击翻页后全部新闻列表是有翻腾殊效的,我刚刚看了下新闻dom布局与样式,不错,他也是绝对定位的!

我们这里着实可以简单阐发下缘故原由:

由于绝对定位的元素离开了文档流,我们对他们的操作(动画)只会影响相关元素,而不会导致全部页面的回流,从而前进页面机能。

以是具有繁杂殊效的dom布局,最好照样应用绝对定位。

新闻列表

好了,我们继承本日的义务,我们先应用本地数据库导入必然数据,在完成新闻列表的殊效,说干就干,先本地数据库,这里就只输入标题就好了。

PS:我原先想采纳本地数据库的,却发明连ff都不支持,以是算了吧,我们自己出效果就好了。。。。

我们先来看看他的dom布局:

li>

div>a target="_blank" href="http://www.zhinengshe.com/news/26.html">[看护布告]关于2月2日公开课案例bug修复a>span>2013-03-24span>br>

a href="#">a>span>span>div>

em>em>li>

他这个实现我们可以看一看,他点击翻页后,着实是将新数据添补到下面的a标签和span里面,然后对div进行向上平移,li overflow:hidden,

也因此jquery殊效实现的,我这里就不模拟了,看看自己可以怎么实现呢?

根基样式与布局

>html xmlns="http://www.w3.org/1999/xhtml">

head>title>title>

style type="text/css">body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input { border: 0 none; margin: 0; padding: 0; }

body { background: url("images/bodyBg.jpg") no-repeat scroll center top #000000; font-family: '新宋体' , '宋体' ,Verdana; font-size: 12px; color: #EEEEEE; }

ul, ol { list-style-type: none; }select, input, img { outline: medium none;vertical-align: middle; }

a { text-decoration: none;outline: medium none; color: White; }

.box { border: 1px solid white; display: inline-block; width: 324px; height: 220px; border-radius: 6px; box-shadow: 0 0 4px white; margin: 50px 100px;}.box h3 { color: #63B1FF; font-weight:bold; padding: 8px 12px; font-size: 14px;text-shadow: 1px 1px 1px #000000;display: inline-block; }

.box h3 span{ color: #93989D; font-weight:bold; padding: 5px 10px; }.box .h a{ background: url("images/znsComBg.png") no-repeat scroll 0 0 transparent; width: 12px; height: 18px; float: right; margin: 10px 10px 0 0 ; }

.box .h .pre{ background-position: -513px -29px;}.box .h .next{ background-position: -526px -29px;}

.box .c { background: #DEE1E7 url("images/news_bg.png"); color: Black; padding: 10px; line-height: 24px; height: 168px; border-radius: 0 0 6px 6px;}

.box .c a { color: #474747; }.box .c a:hover { color: Black; text-decoration: underline;}

.box .list span { float: right;}

style>

script src="js/jquery-1.7.1.js" type="text/javascript">script>script type="text/javascript">

$(document).ready(function () {

});

script>

head>body>

div id="news" class="box">div class="h">

h3>新闻中间span>News centerspan>h3>

a class="next" title="下一页" href="javascript:;">a>a class="pre" title="上一页" href="javascript:;">a>div>

div class="c">ul class="list">

li>a target="_blank" href="http://www.zhinengshe.com/news/26.html">[看护布告]关于2月2日公开课案例bug修复a>span>2013-03-24span> li>

li>a target="_blank" href="http://bbs.zhinengshe.com/thread-430-1-1.html">3月16日 第二次YY公开课已供给下载a>span>2013-03-24span> li>

li>a target="_blank" href="http://www.zhinengshe.com/news/26.html">智能社 第二次YY公开课a>span>2013-03-24span> li>

li>a target="_blank" href="http://www.zhinengshe.com/news/26.html">智能社燕徙新址a> span>2013-03-24span> li>

li>a target="_blank" href="http://www.zhinengshe.com/news/26.html">不会JavaScript能混前端么?a>span>2013-03-24span> li>

li>a target="_blank" href="http://www.zhinengshe.com/news/26.html">[2月3日YY公开课视频已供给下载a>span>2013-03-24span> li>

li>a target="_blank" href="http://www.zhinengshe.com/news/26.html">论坛开放约请注册了哦a>span>2013-03-24span> li>

ul>div>

div>

body>html>

原网站都是采纳背景图的要领,我这里用了一点css3的器械给形成了这种布局,我们来看看我们这个dom布局:

他全部布局是很清晰的,此中class h零丁出来了,是为了有可能会呈现的选项卡相关。现在我们来看看分页的效果若何实现呢?

颠末测试,我发明他们那种做法是有事理的,以是我抉择仿照之。。。。。以是代码改变了下下:

效果实现

>html xmlns="http://www.w3.org/1999/xhtml">

head>title>title>

style type="text/css">body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input { border: 0 none; margin: 0; padding: 0; }

body { background: url("images/bodyBg.jpg") no-repeat scroll center top #000000; font-family: '新宋体' , '宋体' ,Verdana; font-size: 12px; color: #EEEEEE; }

ul, ol { list-style-type: none; }select, input, img { outline: medium none;vertical-align: middle; }

a { text-decoration: none;outline: medium none; color: White; }

.box { border: 1px solid white; display: inline-block; width: 324px; height: 220px; border-radius: 6px; box-shadow: 0 0 4px white; margin: 50px 100px;}.box h3 { color: #63B1FF; font-weight:bold; padding: 8px 12px; font-size: 14px;text-shadow: 1px 1px 1px #000000;display: inline-block; }

.box h3 span{ color: #93989D; font-weight:bold; padding: 5px 10px; }.box .h a{ background: url("images/znsComBg.png") no-repeat scroll 0 0 transparent; width: 12px; height: 18px; float: right; margin: 10px 10px 0 0 ; }

.box .h .pre{ background-position: -513px -29px;}.box .h .next{ background-position: -526px -29px;}

.box .c { background: #DEE1E7 url("images/news_bg.png"); color: Black; padding: 10px; line-height: 24px; height: 168px; border-radius: 0 0 6px 6px;}

.box .c a { color: #474747; }.box .c a:hover { color: Black; text-decoration: underline;}

.box .list { position: absolute; width: 306px; }.box .list span { float: right;}

.box .list li { position: relative;height: 24px; line-height: 24px; overflow: hidden;z-index: 10; }

.box .list li div{ top: 0; position: absolute; z-index: 2; width: 100%; transition: top 0.3s linear;}

style>

script src="js/jquery-1.7.1.js" type="text/javascript">script>script type="text/javascript">

$(document).ready(function () {var next = $('#next');

var pre = $('#pre');

var next_data = ['[看护布告]关于2月2日公开课案例bug修复001',

'js视频下载第四波来啦','JS课程2013年开班信息',

'新的JS课程页面更新','JS视频教程免费第四波 迎接不雅看~',

'js视频下载第三波来啦','2月3日YY公开课视频已供给下载'

];next.click(function () {

//此处代码有点恶心。。。$('.list li div').each(function (i) {

var el = $(this);setTimeout(function () {

el.append($('br/>a href="javascript:;">' + next_data[i] + 'a>span>2013-03-24span>'));el.css('top', '-24px');

}, 150 * i);});

});pre.click(function () {

//此处代码有点恶心。。。$('.list li div').each(function (i) {

var el = $(this);setTimeout(function () {

el.css('top', '0');}, 150 * i);

});});

});

script>

head>body>

div id="news" class="box">div class="h">

h3>新闻中间span>News centerspan>h3>

a class="next" id="next" title="下一页" href="javascript:;">a>a class="pre" id="pre" title="上一页" href="javascript:;">a>div>

div class="c">ul class="list">

li>div>

a target="_blank" href="http://www.zhinengshe.com/news/26.html">[看护布告]关于2月2日公开课案例bug修复a>span>2013-03-24span>

div>li>

li>div>

a target="_blank" href="http://bbs.zhinengshe.com/thread-430-1-1.html">3月16日 第二次YY公开课已供给下载a>span>2013-03-24span>

div>li>

li>div>

a target="_blank" href="http://www.zhinengshe.com/news/26.html">智能社 第二次YY公开课a>span>2013-03-24span>

div>li>

li>div>

a target="_blank" href="http://www.zhinengshe.com/news/26.html">智能社燕徙新址a> span>2013-03-24span>div>

li>li>

div>a target="_blank" href="http://www.zhinengshe.com/news/26.html">不会JavaScript能混前端么?a>

span>2013-03-24span>div>

li>li>

div>a target="_blank" href="http://www.zhinengshe.com/news/26.html">[2月3日YY公开课视频已供给下载a>

span>2013-03-24span>div>

li>li>

div>a target="_blank" href="http://www.zhinengshe.com/news/26.html">论坛开放约请注册了哦a>

span>2013-03-24span>div>

li>ul>

div>div>

body>

html>

这个殊效效果基础与原版同等了,由于此中li是绝对结构,以是动画亦不会引起页面重排,以是效率上应该不会有太大年夜影响,值得一提的是,这里采纳css引起的动画哦。

整体结构

颠末这两天进修,主要完成了导航殊效,图片flash殊效,快速导航殊效以及本日的新闻列表翻页殊效。

其它功能便暂时搁浅了,我这里来整体结构,将他们揉到一路看看什么效果!

完备页面代码

>

html xmlns="http://www.w3.org/1999/xhtml">head>

title>title>style type="text/css">

body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input { border: 0 none; margin: 0; padding: 0; }body { background: url("images/bodyBg.jpg") no-repeat scroll center top #000000; font-family: '新宋体' , '宋体' ,Verdana; font-size: 12px; color: #EEEEEE; overflow-y: scroll; overflow-x: hidden;}

ul, ol { list-style-type: none; }select, input, img { outline: medium none; vertical-align: middle; }

a { text-decoration: none; outline: medium none; color: White; }

/*导航相关 begin*/.nav_c { width: 1000px; margin: 40px auto 0; }

.logo { float: left; margin-top: -20px; }.nav { width: 720px; background: url("images/navBg.png") no-repeat; height: 77px; padding-left: 40px; position: relative; z-index: 10; right: 0; margin-left: 265px; }

.nav div { position: absolute; background: url("images/navA_hover.png") no-repeat; width: 116px; height: 78px; text-indent: -9999px; top: -2px; z-index: -10; }.nav ul { }

.nav ul li { display: inline-block; line-height: 60px; height: 77px; width: 106px; text-align: center; margin: 0 2px; }.nav ul li a { font-size: 14px; color: White; text-shadow: 1px 1px 1px #000000; font-family: Verdana; }

.nav ul li a:hover { color: #63B1FF; text-shadow: 1px 1px 1px #000000; }.nav ul li span { background: none repeat scroll 0 0 #FFFFFF; box-shadow: 1px 1px 0 #000000; height: 14px; margin: 24px -8px 0 0; overflow: hidden; vertical-align: top; width: 1px; float: right; }

/*导航相关 end*/

/*header begin*/.header { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3); height: 26px; line-height: 26px; box-shadow: 1px 2px 10px #000000; }

.header .main{ width: 990px; margin: 0 auto;}.header h3 { font-size: 12px; font-weight: normal; color: #CDCDCD; float: left;width: 700px; }

.header .tool_bar{float: right;}.header .tool_bar a{color: White; color: #CDCDCD;}

/*header end*/

/*flash img begin*/#flash { background: url("images/slideBg.png") no-repeat; width: 1010px; height: 385px; position: relative; margin: 10px auto; }

.outer { background: url("pic/1.png") no-repeat; width: 840px; height: 306px; position: relative; transition: background-image 10s linear; border-radius: 10px; top: 32px; left: 84px; }.outer div { background: url("pic/1.png"); width: 134px; height: 153px; position: absolute; transition: transform 0.5s linear; text-indent: -9999px; }

.bt { display: inline-block; background: url("images/znsComBg.png") no-repeat scroll 0 0 transparent; width: 41px; height: 42px; text-indent: -9999px; position: absolute; opacity: 0.5; transition: opacity 1s linear; }

#pre { background-position: -274px -43px; top: 160px; left: 20px; }#next { background-position: -315px -43px; top: 160px; right: 20px; }

#pre:hover { background-position: -273px 0; opacity: 1; }#next:hover { background-position: -314px 0; opacity: 1; }

#pager{ position: absolute; bottom: 14px; right: 100px; }#pager a{ display: inline-block;width: 24px; height: 24px; background: url("images/znsComBg.png") no-repeat scroll 0 0 transparent; opacity: 0.5; transition: opacity 1s linear; background-position: -143px -1px; text-indent: -9999px; } #pager .sec { opacity: 1; background-position: -119px -1px;}

#pager a:hover { opacity: 1; background-position: -119px -1px; }

/*flash img end*/

/*快速导航 begin*/.fast_nav{ width: 72px; height: 72px;position: fixed; top: 50px; right: 30px; transition: right 0.2s linear, top 0.2s linear;}

#fast_nav_close { width: 24px; height: 24px; border-radius: 14px; border: 1px solid white; position: absolute; right: -8px; top: -8px; z-index: 700; display: none; }#fast_nav_close div { background: white; border-radius: 4px; text-indent: -9999px; width: 0; height: 0; border: 1px solid white; transform: rotate(45deg); cursor: pointer; }

#fast_nav_close .nav_x {width: 13px; height: 1px;margin: 11px auto;}#fast_nav_close .nav_y {height: 13px;width: 1px; margin: -20px auto;}

#fast_nav_bt { background: url("images/fast_nav.png") no-repeat; width: 72px; height: 72px; text-indent: -9999px; position: absolute;cursor: pointer; z-index: 500;}

.fast_nav .list { width: 0; height: 0; position: absolute; background: url("images/fast_nav_open.png") no-repeat; display: none; }.fast_navh3{font-family: "Microsoft YaHei"; font-size: 18px; text-shadow:0 0 2px white; font-weight: normal;}

.fast_nav .list li{ line-height: 22px; overflow: hidden; min-width: 260px; }#fast_nav01 { right: 303px; top: 188px; background-position: 0 0; height: 0; z-index: 400; }

#fast_nav02 { background-position: -303px 0; z-index: 399; }#fast_nav03 { background-position: 0 -186px; z-index: 377; }

#fast_nav04 { background-position: -303px -186px; z-index: 388; }

#fast_nav01ul{ margin-left: 54px;}#fast_nav02ul{ margin-left: 54px;}

#fast_nav03ul{ margin-left: 54px; margin-top: 30px;}#fast_nav04ul{ margin-left: 54px; margin-top: 30px;}

#fast_nav01h3{ margin: 26px 0 26px 66px;}

#fast_nav02h3{ margin: 26px 0 26px 150px}#fast_nav03h3{ margin: 26px 0 0 76px;}

#fast_nav04h3{ margin: 26px 86px 0 0; text-align: right; }

.fast_navh3{ display: none; }.fast_navul{ display: none; }

div.open { width: 606px; height: 376px; }

div.openh3 { display: block; }div.openul { display: block; }

div.open.list { width: 303px; height: 188px; }div.open#fast_nav_bt { left: 267px; top: 152px; }

/*快速导航 end*/

/*新闻列表 begin*/

.box { border: 1px solid white; display: inline-block; width: 324px; height: 220px; border-radius: 6px; box-shadow: 0 0 4px white; margin: 10px auto;}.box h3 { color: #63B1FF; font-weight:bold; padding: 8px 12px; font-size: 14px;text-shadow: 1px 1px 1px #000000;display: inline-block; }

.box h3 span{ color: #93989D; font-weight:bold; padding: 5px 10px; }.box .h a{ background: url("images/znsComBg.png") no-repeat scroll 0 0 transparent; width: 12px; height: 18px; float: right; margin: 10px 10px 0 0 ; }

.box .h .pre{ background-position: -513px -29px;}.box .h .next{ background-position: -526px -29px;}

.box .c { background: #DEE1E7 url("images/news_bg.png"); color: Black; padding: 10px; line-height: 24px; height: 168px; border-radius: 0 0 6px 6px;}

.box .c a { color: #474747; }.box .c a:hover { color: Black; text-decoration: underline;}

.box .list { position: absolute; width: 306px; }.box .list span { float: right;}

.box .list li { position: relative;height: 24px; line-height: 24px; overflow: hidden;z-index: 10; }

.box .list li div{ top: 0; position: absolute; z-index: 2; width: 100%; transition: top 0.3s linear;}/*新闻列表 end*/

.main { width: 1000px; margin: 10px auto 0;}

#main_r { float: right; width: 640px; }#main_r li{ display: inline-block; text-align: center; margin: 0 12px;}

#main_r a { width: 100px; height: 100px; display: block; background: url("images/znsComBg.png") no-repeat scroll 0 0 transparent; float: none; margin: 0 auto; }#main_r .js { background-position: -111px -369px; }

#main_r .html { background-position: 0 -367px; }#main_r .css { background-position: -220px -366px; }

style>

script src="js/jquery-1.7.1.js" type="text/javascript">script>script type="text/javascript">

$(document).ready(function () {

//导航相关var div_hover = $('#nav_div');

var nav = $('#nav');$('#nav ul').delegate('li', 'mouseenter', function (e) {

var el = $(this),elel_left = el.offset().left,

div_left = div_hover.offset().left;time_step = 100;

var l = el_left - nav.offset().left;div_hover.stop().animate({ left: l + 'px' }, time_step, function () {

if (el_left > div_left) {div_hover.animate({ left: (l - 20) + 'px' }, time_step).animate({ left: l + 'px' }, time_step);

} else {div_hover.animate({ left: (l + 20) + 'px' }, time_step).animate({ left: l + 'px' }, time_step);

}});

});

//flash图片相关var index = 1;

var timer = null;$('#outer div').each(function (i) {

var el = $(this);var y = i > 5 ? 153 : 0,

x = i > 5 ? i - 6 : i;el.css({ 'left': (x * 134) + 'px', 'top': y + 'px', 'background-position': (-1 * x * 134) + 'px ' + (-1 * y) + 'px' });

var s = '';});

function setFlash() {if (timer) clearTimeout(timer);

$('#outer').css('background-image', 'url("pic/' + index + '.png")');$('#pager a').removeClass('sec');

$('#pager .p' + index).addClass('sec');$('#outer div').each(function (i) {

var el = $(this);var step = 200;

var x = 0, y = 0;var regx = Math.round(Math.random() * 80);

var regy = Math.round(Math.random() * 80);var r1 = Math.random() > 0.5 ? 1 : -1;

var r2 = Math.random() > 0.5 ? 1 : -1;if (i3) {

x = -1 * step;y = -1 * step;

} else if (i6) {x = step;

y = -1 * step;} else if (i9) {

x = -1 * step;y = step;

} else {x = step;

y = step;}

x += r1 * Math.random() * step;y += r2 * Math.random() * step;

el.css('transform', 'translate(' + x + 'px, ' + y + 'px)skew(' + regx + 'deg, ' + regy + 'deg)');//el.css('transform', 'rotate(360deg)');

setTimeout(function () {el.css('transform', '');

el.css('background-image', 'url("pic/' + index + '.png")');}, 500);

});}

$('#pre').click(function () {if (index == 1) index = 5; else index--;

setFlash();});

$('#next').click(function () {if (index == 5) index = 1; else index++;

setFlash();});

$('#pager').delegate('a', 'click', function () {var el = $(this);

var num = el.html();index = num;

setFlash();});

var func = function () {if (index == 5) index = 1; else index++;

setFlash();timer = setTimeout(func, 3000);

}func();

//快速导航

var step = 250;//width: 606px; height: 376px;

// transition: width 1s linear, height 1s linear;$('#fast_nav_bt').click(function () {

click_fast();});

$('#fast_nav_close').click(function () {click_fast();

});

function click_fast() {if ($('#fast_nav').hasClass('open')) {

close_nav3();} else {

var r = (parseInt($(window).width()) / 2 - 303) + 'px';$('#fast_nav').css({ right: r, top: '100px' });

open_fast();}

}

function open_fast() {$('#fast_nav').addClass('open');

setTimeout(open_nav1, step)}

function open_nav1() {

$('#fast_nav01').css('width', '303px');$('#fast_nav01').show();

$('#fast_nav01').animate({ height: '188px', top: '0' }, step, open_nav2);}

function open_nav2() {$('#fast_nav02').css({ 'left': '0', 'top': '0' }).show();

$('#fast_nav02').animate({ left: '303px' }, step, open_nav4);}

function open_nav3() {$('#fast_nav03').css({ 'left': '303px', 'top': '188px' }).show();

$('#fast_nav03').animate({ left: '0' }, step);$('#fast_nav_close').show();

}function open_nav4() {

$('#fast_nav04').css({ 'left': '303px', 'top': '0' }).show();

$('#fast_nav04').animate({ top: '188px' }, step, open_nav3);}

//function close_fast() {

//$('#fast_nav_bt').animate({ left: '0', top: '0' }, step, close_nav3);//}

function close_nav3() {$('#fast_nav_close').hide();

$('#fast_nav03').stop().animate({ left: '188px' }, step, close_nav4);}

function close_nav4() {$('#fast_nav03').hide();

$('#fast_nav04').animate({ top: '0' }, step, close_nav2);}

function close_nav2() {$('#fast_nav04').hide();

$('#fast_nav02').animate({ left: '0' }, step, close_nav1);}

function close_nav1() {$('#fast_nav02').hide();

$('#fast_nav01').animate({ top: '188px', height: '0' }, step, function () {$('#fast_nav01').css('width', '0');

$('#fast_nav').removeClass('open');$('#fast_nav').css({ right: '30px', top: '50px' });

//close_fast();}).hide();

}

//新闻列表var next = $('#list_next');

var pre = $('#list_pre');

var next_data = ['[看护布告]关于2月2日公开课案例bug修复001',

'js视频下载第四波来啦','JS课程2013年开班信息',

'新的JS课程页面更新','JS视频教程免费第四波 迎接不雅看~',

'js视频下载第三波来啦','2月3日YY公开课视频已供给下载'

];next.click(function () {

//此处代码有点恶心。。。$('.list li div').each(function (i) {

var el = $(this);setTimeout(function () {

el.append($('br/>a href="javascript:;">' + next_data[i] + 'a>span>2013-03-24span>'));el.css('top', '-24px');

}, 150 * i);});

});pre.click(function () {

//此处代码有点恶心。。。$('.list li div').each(function (i) {

var el = $(this);setTimeout(function () {

el.css('top', '0');}, 150 * i);

});});

});//ready

script>

head>

body>header class="header">

div class="main">h3>

智能社是一家专注于web前端开拓技巧的专业培训机构,现推出“HTML5”、“JavaScript”和“HTML+CSS”三套课程h3>div class="tool_bar">

a href="javascript:;">登岸a> | a href="javascript:;">关于我们a>div>div>

header>div class="nav_c">

h1 class="logo">a href="http://www.zhinengshe.com/">

img alt="智能社——前端培训专家" src="images/logo.png">a>h1>

nav class="nav" id="nav">div id="nav_div">

hoverdiv>ul>

li>a href="javascript:;">首页a>span>span>li>li>a href="javascript:;">JS课程a>span>span>li>

li>a href="javascript:;">HTML5课程a>span>span>li>li>a href="javascript:;">视频课程a>span>span>li>

li>a href="javascript:;">课程案例a>span>span>li>li>a href="javascript:;">联系要领a>li>

ul>nav>

div>div id="flash">

a id="pre" href="javascript:;" class="bt">prea> a id="next" href="javascript:;"class="bt">nexta>

div id="pager">a class="p1" href="javascript:;">1a> a class="p2" href="javascript:;">2a>

a class="p3" href="javascript:;">3a> a class="p4" href="javascript:;">4a>a class="p5" href="javascript:;">5a>

div>div class="outer" id="outer">

div>1div>

div>2div>

div>3div>

div>4div>

div>5div>

div>6div>

div>7div>

div>8div>

div>9div>

div>10div>

div>11div>

div>12div>

div>div>

div id="fast_nav" class="fast_nav">div id="fast_nav_bt">

fast_navdiv>

div id="fast_nav_close">div class="nav_x">

xdiv>

div class="nav_y">y

div>div>

div id="fast_nav01" class="list">h3 class="fastCom_title_l">

近期开班信息h3>ul>

li>JS周末班 2012年10月13日开班 [已开班]li>li>JS整日制 2012年10月19日开班 ahref="contact.html">[咨询]a>li>li>HTML5周末班 2012年10月21日开班 a href="contact.html">[咨询]a>li>li>

JS周末班 2012年11月17日开班 a href="contact.html">[咨询]a>li>ul>div>

div id="fast_nav02" class="list">h3 class="fastCom_title_r">

最新留言h3>ul>

li>a href="message.html">师长教师 这个留言板分页 鼠标移动上去 就...a>li>li>a href="message.html">看到16集里说会开远程教授教化,不知道是不...a>li>li>a href="message.html">这个站做的真的很牛逼呀,貌似后台都是...a>li>li>

a href="message.html">现在有没有能加上的Q群啊blue老湿a>li>ul>div>

div id="fast_nav03" class="list">ul>

li>a href="js02_desc.html#zns_zt_content">JS课程包括哪些内容?a>li>li>a href="html5_01_desc.html#zns_zt_content">HTML5课程包括哪些内容?a>li>li>a href="js02_desc.html#zns_zt_content">课程收费是若干?a>li>li>

a href="contact.html">我想去进修,若何报名呢?a>li>ul>h3 class="fastCom_title_l">

常见问题h3>div>

div id="fast_nav04" class="list">ul>

li>a href="http://www.zhinengshe.com/news/4.html">积分系统上线a>li>li>a href="http://www.zhinengshe.com/news/1.html">约请码系统开始公测a>li>li>a href="http://zhinengshe.com/video.html">视频教程,已更新到第31集a>li>li>

a href="http://zhinengshe.com/contact.html">智能社联系要领a>li>ul>h3 class="fastCom_title_r">

综合其他h3>div>

div>div class="main">

div id="news" class="box">div class="h">

h3>新闻中间span>News centerspan>h3>

a class="next" id="list_next" title="下一页" href="javascript:;">a>a class="pre"id="list_pre" title="上一页" href="javascript:;">a>

div>div class="c">

ul class="list">li>

div>a target="_blank" href="http://www.zhinengshe.com/news/26.html">[看护布告]关于2月2日公开课案例bug修复a>

span>2013-03-24span>div>

li>li>

div>a target="_blank" href="http://bbs.zhinengshe.com/thread-430-1-1.html">3月16日 第二次YY公开课已供给下载a>

span>2013-03-24span>div>

li>li>

div>a target="_blank" href="http://www.zhinengshe.com/news/26.html">智能社 第二次YY公开课a>

span>2013-03-24span>div>

li>li>

div>a target="_blank" href="http://www.zhinengshe.com/news/26.html">智能社燕徙新址a> span>2013-03-24span>

div>li>

li>div>

a target="_blank" href="http://www.zhinengshe.com/news/26.html">不会JavaScript能混前端么?a>span>2013-03-24span>

div>li>

li>div>

a target="_blank" href="http://www.zhinengshe.com/news/26.html">[2月3日YY公开课视频已供给下载a>span>2013-03-24span>

div>li>

li>div>

a target="_blank" href="http://www.zhinengshe.com/news/26.html">论坛开放约请注册了哦a>span>2013-03-24span>

div>li>

ul>div>

div>div id="main_r" class="box">

div class="h">h3>

热门课程span>Hot coursespan>h3>div>

div class="c">ul>

li>a href="javascript:;" class="js">a>div>

精晓JavaScript 2.0课程div>div>

(得当具备XHTML+CSS根基的同伙)div>li>

li>a href="javascript:;" class="html">a>div>

精晓JavaScript 2.0课程div>div>

(得当具备XHTML+CSS根基的同伙)div>li>

li>a href="javascript:;" class="css">a>div>

精晓JavaScript 2.0课程div>div>

(得当具备XHTML+CSS根基的同伙)div>li>

ul>div>

div>div>

body>html>

终极实现结构。

结语

至此首页功能基础停止,此次美其名曰HTML5+CSS3的网站设计,然则做到后面发明又和日常平凡干的工作差不多了。。。。

此事令人利诱啊,要真正走上HTML5+CSS3的蹊径看来还有很长一段路要走!!!

这次不够

1 功能不全,原先盘算把全部网站都实现了的,但中心耽搁了一天,加之其它缘故原由这里就只实现80%的首页效果此系列便暂时停止吧

2 效果不够,这里做的器械只能以粗制滥造形容!!!里面的代码整个没有优化,有些地方可以用更优雅的实现,但这里也没有去思虑,完全机器式的事情停止了!!!

而且与原网站比拟而言,我这个首页便是渣渣。。。。。

3 机能不好,毫无疑问,以上的机能会有问题,由于有很多的动画,以是卡。。。。

后期计划

这次停止就算了,后面会在事情中万万实实的钻研下HTML5和CSS3,盼望今后写的器械能更有代价!!!

着末我供给阶段性下载地址吧,盼望各位与我一路钻研:

文件下载:

html5css3.zip

您可能还会对下面的文章感兴趣: