网页设计html入门,HTML5+CSS3制作网页实例：HTML5入门

步骤3 – CSS

CSS代码和页面风格。

CSS第1部分

*{

/* Universal reset: */

margin:0;

padding:0;

}

header,footer,

article,section,

hgroup,nav,

figure{

/* Giving a display value to the HTML5 rendered elements: */

display:block;

}

body{

/* Setting the default text color, size, page background and a font stack: */

font-size:0.825em;

color:#fcfcfc;

background-color:#355664;

font-family:Microsoft YaHei,Arial, Helvetica, sans-serif;

}

/* Hyperlink Styles: */

a, a:visited {

color:#FFF;

text-decoration:none;

outline:none;

}

a:hover{

text-decoration:underline;

}

a img{

border:none;

}

/* Headings: */

h1,h2,h3{

font-family:"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;

text-shadow:0 1px 1px black;

}

h1{

/* The logo text */

font-size:3.5em;

padding:0.5em 0 0;

text-transform:uppercase;

}

h3{

/* The slogan text */

font-family:forte,"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;

font-size:2em;

font-weight:normal;

margin:0 0 1em;

}

h2{

font-size:2.2em;

font-weight:normal;

letter-spacing:0.01em;

text-transform:uppercase;

}

p{

line-height:1.5em;

padding-bottom:1em;

}

.line{

/* The dividing line: */

height:1px;

background-color:#24404c;

border-bottom:1px solid #416371;

margin:1em 0;

overflow:hidden;

}

article .line{

/* The dividing line inside of the article is darker: */

background-color:#15242a;

border-bottom-color:#204656;

margin:1.3em 0;

}

footer .line{

margin:2em 0;

}

nav{

background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8;

padding:0 5px;

position:absolute;

right:0;

top:4em;

border:1px solid #FCFCFC;

-moz-box-shadow:0 1px 1px #333333;

-webkit-box-shadow:0 1px 1px #333333;

box-shadow:0 1px 1px #333333;

}

/* The clearfix hack to clear the floats: */

.clear:after{

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

/* The navigation styling: */

nav ul li{

display:inline;

}

nav ul li a,

nav ul li a:visited{

color:#565656;

display:block;

float:left;

font-size:1.25em;

font-weight:bold;

margin:5px 2px;

padding:7px 10px 4px;

text-shadow:0 1px 1px white;

text-transform:uppercase;

}

nav ul li a:hover{

text-decoration:none;

background-color: #C90;

}

nav, article, nav ul li a,figure{

/* Applying CSS3 rounded corners: */

-moz-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

}

水平线,文章,和导航按钮,后者组织为一个无序列表内的导航标签。底部我们分配的圆角边框属性四个不同类型的元素,可以节省大量的代码。

css第2部分

/* Article styles: */

#page{

width:960px;

margin:0 auto;

position:relative;

}

article{

background-color:#213E4A;

margin:3em 0;

padding:20px;

text-shadow:0 2px 0 black;

}

figure{

border:3px solid #142830;

float:right;

height:300px;

margin-left:15px;

overflow:hidden;

width:500px;

}

figure:hover{

-moz-box-shadow:0 0 2px #4D7788;

-webkit-box-shadow:0 0 2px #4D7788;

box-shadow:0 0 2px #4D7788;

}

/*figure img{

margin-left:-60px;

}

Footer styling: */

footer{

margin-bottom:30px;

text-align:center;

font-size:0.825em;

}

footer p{

margin-bottom:-2.5em;

position:relative;

}

footer a,footer a:visited{

color:#cccccc;

background-color:#213e4a;

display:block;

padding:2px 4px;

z-index:100;

position:relative;

}

footer a:hover{

text-decoration:none;

background-color:#142830;

}

footer a.by{

float:left;

}

footer a.up{

float:right;

}

在代码的第二部分中,我们将更详细的样式应用于元素。页面部分的宽度,图的标签和样式链接里面的页脚。

现在让我们继续下一个步骤。

步骤4 jQuery

我们将创建一个平滑滚动的效果,如一次导航链接被点击还有底部的返回顶部,使用scrollTo jQuery插件(包含在页面)。要完成这个功能,我们只需要遍历导航栏中的链接(链接在页脚)和分配一个onclick事件将引发美元.srollTo()函数,这是定义的插件。

$(document).ready(function(){

/* This code is executed after the DOM has been completely loaded */

$('nav a,footer a.up').click(function(e){

// If a link has been clicked, scroll the page to the link's hash target:

$.scrollTo( this.hash || 0, 1500);

e.preventDefault();

});

});

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/3336.html