要是10步就可以学会用CSS基本建设网站 CSS建网站

2021-03-11 19:57 jianzhan
第1步:整体规划网站,本实例教程将以图示为例搭建网站
1.整体规划网站,本实例教程将下列图为例搭建网站。
其基础合理布局见下图:

关键由5个一部分组成:

1.Main Navigation 导航栏条,具备按钮殊效。 Width: 760px Height: 50px
2.Header 网站头顶部标志,包括网站的logo和站名。 Width: 760px Height: 150px
3.Content 网站的关键內容。 Width: 480px Height: Changes depending on content
4.Sidebar 边框,1些额外信息内容。 Width: 280px Height: Changes depending on
5.Footer 网站底栏,包括版权信息内容等。 Width: 760px Height: 66px 
第2步:建立html模版及文档文件目录等 1.建立html模版。编码以下:

拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF⑻" />
<title>CompanyName - PageName</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Enlighten Designs" />
<style type="text/css" media="all">@import "css/master.css";</style>
</head>
<body>
</body>
</html>

将其储存为index.html,并建立文档夹css,images,网站构造以下:
 

2.建立网站的大框,即创建1个宽760px的盒子,它将包括网站的全部元素。
在html文档的<body>和</body>之间写入
 
<div id="page-container">
Hello world.
</div>
建立css文档,取名为master.css,储存在/css/文档夹下。写入:
 
#page-container {
width: 760px;
background: red;
}
操纵html的id为page-container的盒子的宽为760px,情况为鲜红色。主要表现以下:

如今以便让盒子垂直居中,写入margin: auto;,使css文档为:
 
#page-container {
width: 760px;
margin: auto;
background: red;
}
如今你能够看到盒子和访问器的顶端有8px宽的间隙。这是因为访问器的默认设置的填充和界限导致的。清除这个间隙,就必须在css文档中写入:
 
html, body {
margin: 0;
padding: 0;
}
第3步:将网站分成5个div,网页页面基础合理布局的基本:
 
1.将“第1步”提到的5个一部分都放入盒子中,在html文档中写入:
 
拷贝编码
编码以下:

<div id="page-container">
<div id="main-nav">Main Nav</div>
<div id="header">Header</div>
<div id="sidebar-a">Sidebar A</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>

主要表现以下:

2.以便将5个一部分区别起来,大家将这5个一部分用不一样的情况色调标识出来,在css文档写入:
 
拷贝编码
编码以下:

#main-nav {
background: red;
height: 50px;
}
#header {
background: blue;
height: 150px;
}
#sidebar-a {
background: darkgreen;
}
#content {
background: green;
}
#footer {
background: orange;
height: 66px;
}

主要表现以下:

第4步:网页页面合理布局与div波动等:
1.波动,最先让边框波动到关键內容的右侧。用css操纵波动:
 
#sidebar-a {
float: right;
width: 280px;
background: darkgreen;
}
主要表现以下:

2.往关键內容的盒子中写入1些文本。在html文档中写入:
 
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
主要表现以下:

可是你能够看到关键內容的盒子占有了全部page-container的宽度,大家必须将#content的右侧界设为280px。以使其不和边框产生矛盾。
css编码以下:
 
#content {
margin-right: 280px;
background: green;
}
另外往边框里写入1些文本。在html文档中写入:
 
拷贝编码
编码以下:

<div id="sidebar-a">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>

主要表现以下:

这也并不是大家要想的,网站的底框跑到边框的下边去了。这是因为大家将边框向右波动,因为是波动,因此能够了解为它坐落于全部盒子之上的另外一层。因而,底框和內容盒子对齐了。
因而大家往css中写入:
 
#footer {
clear: both;
background: orange;
height: 66px;
}
主要表现以下:

第5步:网页页面关键架构以外的额外构造的合理布局与主要表现:
第5步关键详细介绍除网页页面关键架构以外的额外构造的主要表现(Layout),包含下列內容:
1.主导航栏条;
2.题目(heading),包含网站名和內容题目;
3.內容;
4.页脚信息内容,包含版权,验证,副导航栏条(可选)。
添加这些构造时,以便不破坏原来架构,大家必须在css文档"body"标识(TAG)下添加:
 
.hidden {
display: none;
}
".hidden"即大家添加的类(class),这个类可使网页页面就任意属于hidden类的元素(element)无法显示。这些会在稍后应用,如今请临时忘掉它。
如今大家添加题目(heading):
先返回HTML的编码,<h1>到<h6>是大家常见的html题目编码。 例如大家1般用<h1>网站名</h1>,<h2>网站副题目</h2>,<h3>內容主 题目</h3>等。大家往html文档的Header层(Div)添加:
 
<div id="header">
<h1>Enlighten Designs</h1>
</div>
更新1下网页页面,你便可以看到极大的题目,和题目周边的空白,这是由于<h1>>标识的默认设置尺寸和边距(margin)导致的,先要清除这些空白,必须添加:
 
h1 {
margin: 0;
padding: 0;
}
接下来是导航栏条:
操纵导航栏条主要表现的css编码相对性较为繁杂,大家将在第9步或是第10步中详尽详细介绍。如今html文档添加导航栏编码:
 
拷贝编码
编码以下:

<div id="main-nav">
<ul>
<li id="about"><a href="http://css.jorux.com/wp-admin/post.php#" >About</a></li>
<li id="services"><a href="http://css.jorux.com/wp-admin/post.php#" >Services</a></li>
<li id="portfolio"><a href="http://css.jorux.com/wp-admin/post.php#" >Portfolio</a></li>
<li id="contact"><a href="http://css.jorux.com/wp-admin/post.php#" >Contact Us</a></li>
</ul>
</div>

(注:原实例教程应用了dl和dt,jorux在这应用了更常见的ul和li标识)
现阶段导航栏条的主要表现较为不尽人意,可是要在之后的实例教程中详细介绍其独特主要表现,故必须临时掩藏导航栏条,因而添加:
 
拷贝编码
编码以下:

<div id="main-nav">
<dl class="hidden">
<dt id="about"><a href="http://css.jorux.com/wp-admin/post.php#" >About</a></dt>
<dt id="services"><a href="http://css.jorux.com/wp-admin/post.php#" >Services</a></dt>
<dt id="portfolio"><a href="http://css.jorux.com/wp-admin/post.php#" >Portfolio</a></dt>
<dt id="contact"><a href="http://css.jorux.com/wp-admin/post.php#" >Contact Us</a></dt>
</dl>
</div>
[code]
大家跳1步,先到页脚:
页脚包含两一部分:左侧的版权,验证和右侧的副导航栏条。
大家先要让副导航栏条向右波动,就像以前解决Sidebar和Content关联的1样,必须添加1个新的层(div):
[code]
<div id="footer">
<div id="altnav">
<a href="http://css.jorux.com/wp-admin/post.php#" >About</a> -
<a href="http://css.jorux.com/wp-admin/post.php#" >Services</a> -
<a href="http://css.jorux.com/wp-admin/post.php#" >Portfolio</a> -
<a href="http://css.jorux.com/wp-admin/post.php#" >Contact Us</a> -
<a href="http://css.jorux.com/wp-admin/post.php#" >Terms of Trade</a>
</div>
</div>

基础理论上,大家能够操纵源文档上的随意元素的波动,但因为IE访问器的BUG,被波动层必须最先出現在源文档上,也便是说大家把副题目放在版权和验证的前面:
 
拷贝编码
编码以下:

<div id="footer">
<div id="altnav">
<a href="http://css.jorux.com/wp-admin/post.php#" >About</a> -
<a href="http://css.jorux.com/wp-admin/post.php#" >Services</a> -
<a href="http://css.jorux.com/wp-admin/post.php#" >Portfolio</a> -
<a href="http://css.jorux.com/wp-admin/post.php#" >Contact Us</a> -
<a href="http://css.jorux.com/wp-admin/post.php#" >Terms of Trade</a>
</div>
Copyright &copy; Enlighten Designs
Powered by <a href="http://www.enlightenhosting.com/" >Enlighten Hosting</a> and
<a href="http://www.vadmin.co.nz/" >Vadmin 3.0 CMS</a></div>

更新你的网页页面,你将看到以下所示:

最终大家返回內容一部分:用<h2<>主要表现內容题目–"About","Contact us";用<p>主要表现段落;用</br>断行。
 
拷贝编码
编码以下:

<div id="content">
<h2>About</h2>
<p><strong>Enlighten Designs</strong> is an Internet solutions provider that specialises in
front and back end development. To view some of the web sites we have created view our
portfolio.</p>
<p>We are currently undergoing a 'face lift', so if you have any questions or would
like more information about the services we provide please feel free to contact us.</p>
<h2>Contact Us</h2>
<p>Phone: (07) 853 6060
Fax: (07) 853 6060
Email: <a href="mailto:info@enlighten.co.nz" >info@enlighten.co.nz</a>
P.O Box: 14159, Hamilton, New Zealand</p>
<p><a href="http://css.jorux.com/wp-admin/post.php#" >More contact information…</a></p>
</div>

更新网页页面能够看到在Content层中又出現1些空白,这是因为<h2><p>标识的默认设置边距(margin)导致的,我 们务必清除这些恼人的空白,当又不想把网页页面中全部的<h2><p>标识地边距都设为0,这就必须应用css的子挑选器 ("child css selector"),在html的文档构造中,大家想操纵的<h2><p>标识(child)是属于#content层 (parent)的,因而在css文档中写入:
 [/code]
#content h2 {
margin: 0;
padding: 0;
}
#content p {
margin: 0;
padding: 0;
}
[/code]
这样大家就告知访问器,仅仅是归属于于content层的<h2><p>标识的margin和padding的值为0!
 
第6步:网页页面内的基础文字的款式(css)设定:
你是否厌烦了那些大红大绿的情况,如今是去掉它们的情况下了,只保存导航栏条的鲜红色情况。简直难为您竟然能坚持不懈学习培训本实例教程到此,很好,再过几步,你就可以很好掌握css操纵全部网页页面版面(Layout)的工作能力。
–言归正传–
先设定全局性的文字款式:
 
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
background: #ffffff;
}
1般大家把body标识放在css文档的顶端,自然你如果执意要把它放在尾部,访问器不容易和你计较。font-family内的次序决策字体样式显示信息优 先级,比如假如所属测算机沒有Arial字体样式,访问器就会指向Helvetica字体样式,先后类推;color指字体样式色调;background指情况颜 色。
假如你全是按本实例教程的实际操作,应当能看到下图:

你能够看到內容(content)的各块(block)之间的空隙很小了,而根据最开始的设计方案,內容题目(即<h2>)和文章正文之间的空隙大约是15px,每一个段落的间隔也大约是15px,因此在css中写入:
 
拷贝编码
编码以下:

#content h2 {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
#content p {
margin: 0;
padding: 0;
padding-bottom: 15px;
}

随后必须让content层的4周都空出25px的空隙,这原本是件很简易的事,基础理论上大家只需在#content的css文档中添加 padding: 25px;就可以了,可是IE给大家到了"1课",它的固有BUG压根不可以按大家的想像主要表现。处理这个难题有两种方法。第1种方法是差别访问器写入两种编码 (HACK IE),但由于空隙(padding,在Dreamweaver中又叫填充)应用很经常,因此大家用另外一种方法。
大家往必须填充的层中添加padding层,它的作用仅限于显示信息空隙:
 
拷贝编码
编码以下:

<div id="sidebar-a">
<div class="padding">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
</div>

一样的,再往html文档的content层中添加padding层。
因为padding层的作用仅是生产制造间隙,因此不必设定它的宽度,只需在css中加上:
 
拷贝编码
编码以下:

#sidebar-a {
float: right;
width: 280px;
}
#sidebar-a .padding {
padding: 25px;
}
#content {
margin-right: 280px;
}
#content .padding {
padding: 25px;
}

就像大家以前用的方式1样,大家只挑选了类(class)为padding,且父类(parent)为#content或#sidebar-a的元素(element)。
接下来设定行距,content和sidebar-a的行距必须加宽,但在css中是沒有行距(leading)这类特性(attribute)的,可是有行高(line-height)特性,因而往css中写入:
 
拷贝编码
编码以下:

#sidebar-a {
float: right;
width: 280px;
line-height: 18px;
}
#content {
margin-right: 280px;
line-height: 18px;
}

如今能够看到题目"about"和"contact us"显得非常突兀,这是由于大家应用的字体样式其实不是1种网页页面字体样式,大家必须将其更换为下列照片,并将其储放于/images/headings/文档夹中:
 


更换方式为,在html文档的<h2>标识中写入:
 
<h2><img src="images/headings/about.gif" _fcksavedurl=""images/headings/about.gif"" width="54" height="14" />
 
第7步:网站头顶部标志与logo一部分的设计方案:
为完成设计方案时的网页页面头顶部实际效果,大家必须下列两幅图:
/images/headers/about.jpg

/images/general/logo_enlighten.gif

最先大家给#header层加上情况图案设计:
 
#header {
height: 150px;
background: #db6d16
url(../images/headers/about.jpg);
}
大家应用的情况特性为1些简写的特性名,用其能要求情况的色调,图案设计,图案设计的部位,是不是反复和怎样反复。之因此把情况色设为桔黄色,是由于当客户 使访问器屏蔽照片时,网站的头顶部不容易变的1片空白。应当留意到照片的相对路径是相对css的储放部位而言的,而并不是html文档,因而有"../"。
接着更换掉<h1></h1>标识里的"Enlighten Designs":
 
<div id="header">
<h1><img src="images/general/logo_enlighten.gif" _fcksavedurl=""images/general/logo_enlighten.gif""
width="236" height="36" />
留意:仔细的你将会会发现大家应用了padding-right而并不是margin-right,这是由于IE的怪问题很多,它会在不确定的地区没法 正确显示信息margin-right/left特性,因此应用了padding(空隙,Dreamweaver中又被称为填充)特性。
Jorux提醒:期待大伙儿在之后的css撰写全过程中,尽可能应用padding特性,以防导致访问器调节不便。
 
第8步:页脚信息内容(版权等)的主要表现设定:
最先必须操纵页脚的文字显示信息:
 
拷贝编码
编码以下:

#footer {
clear: both;
height: 66px;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #c9c9c9;
}

接着大家必须设定存在连接的文字的显示信息,在这大家沒有更改文字的色调(依然为#c9c9c9),而只是让下划线消退:
 
#footer a {
color: #c9c9c9;
text-decoration: none;
}
可是大家想让那些存在连接的文字,在电脑鼠标悬停在其上方时变色为#db6d16:
 
#footer a:hover {
color: #db6d16;
}
随后大家想给页脚再加灰色的上边框,在footer层的4周设定1些空隙,并加大文字的行距:
 
拷贝编码
编码以下:

#footer {
clear: both;
height: 66px;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #c9c9c9;
border-top: 1px solid #efefef;
padding: 13px 25px;
line-height: 18px;
}

最终大家必须做的便是让副导航栏层(#altnav)向右波动,必须指出的是,波动层是务必设定宽度(width)才可以一切正常波动的,因此大家把#altnav的宽度设定为350px,略宽于文字的长度(以便让副题目的文本显示信息彻底),随后让文字向右对齐:
 
#footer #altnav {
width: 350px;
float: right;
text-align: right;
}
假如你依照以上方式,将获得以下图所示的页脚款式:

第9步:导航栏条的制做(较难):
Jorux注:导航栏条之因此放在第9步讲,是由于导航栏条制做是本实例教程中最难的一部分,当然也是技术性含量最高的地区.导航栏条的制做可易可难,但这里详细介绍的相对性较难,您能坚持不懈到这1步早已很不容易,假如你只是有个导航栏条就考虑的话,请参看第8步的副导航栏条的制做。
先去掉导航栏条的鲜红色情况,也有便是移除html文档中main-nav层的"class="hidden"",使导航栏条的內容显示信息出来。大家完成导 航条照片的转换的方式是纯css编码的,不包括任何js或是flash,因而大家所用的照片是4幅各自由3个小图组成而成的照片,以下所示,并将这4幅图 储存于/images/nav/文档夹中:
 

大家完成导航栏条的动态性实际效果以下图所示:

在网页页面显示信息的只是图中红框标明的一部分,假如把每幅图分成上,中,下3一部分的话,未产生姿势时显示信息上部,当光标悬停时,显示信息的是中部,被挑选时则显示信息下部。
接下来进到css编码一部分,先往css文档中写入:
 
/* Main Navigation */
#main-nav { height: 50px; }
#main-nav ul { list-style:none; margin: 0; padding: 0; }
留意:/* Main Navigation */为提升css文档可读性的表明,不容易危害主要表现。
#main-nav的height特性界定了main-nav层的高宽比;"#main-nav ul" 则界定main-nav层中目录的特性,在这里先界定其margin和padding为0。
依据先前的设计方案,导航栏条应当和左侧有1定的间距,这就必须设定main-nav层的左侧距(padding-left)为11px,但因为IE5和Mac访问器的BUG,必须添加下列编码:
 
/* IE5 Mac Hack */
#main-nav { padding-left: 11px; }
/*/
#main-nav { padding-left: 11px; overflow: hidden; }
/* End Hack */
如今你能够看到导航栏目录距左侧有11px的间距,可是目录新项目是竖排的,将<li>,即目录新项目向左对齐就可以使其从左到右横向排序:
 
#main-nav li { float: left; }
以便使目录新项目的规格和容下它的层维持1致,并运用波动特性使目录新项目的文字掩藏,写入:
 
拷贝编码
编码以下:

#main-nav li a {
display: block;
height: 0px !important;
height /**/:50px; /* IE 5/Win hack */
padding: 50px 0 0 0;
overflow: hidden;
background-repeat: no-repeat;
}

接着,要完成当光标悬停于目录新项目上时,显示信息情况照片的中部,因而必须将情况照片向上挪动50px,写入:
 
#main-nav li a:hover {
background-position: 0 ⑸0px;
}
给各个目录新项目设定宽度和情况照片的相对路径:

拷贝编码
编码以下:

#main-nav li#about,
#main-nav li#about a { width: 71px; background-image: url(../images/nav/about.gif); }
#main-nav li#services,
#main-nav li#services a { width: 84px; background-image: url(../images/nav/services.gif); }
#main-nav li#portfolio,
#main-nav li#portfolio a { width: 95px; background-image: url(../images/nav/portfolio.gif); }
#main-nav li#contact,
#main-nav li#contact a { width: 106px; background-image: url(../images/nav/contact.gif); }

最终大家要做的便是,当目录新项目被选时,显示信息情况照片的下部。为此大家必须提升1些css编码对原来的css主要表现作1些改动:
 
拷贝编码
编码以下:

body.about li#about,
body.about li#about a,
body.services li#services,
body.services li#services a,
body.portfolio li#portfolio,
body.portfolio li#portfolio a,
body.contact li#contact,
body.contact li#contact a {
background-position: 0 ⑴00px;
}

以上看似巨大的css挑选器能够鉴别body标识的类(class),如html中为:
 
<body class="about">
以上css挑选器就让li#about,li#about a,的情况向上挪动100px,使其显示信息情况照片的下部。
假如大家期待网站头顶部情况照片也依据body标识的类开展转换,就需改动css的#header为:
 
body.about #header {
height: 150px;
background: #db6d16
url(../images/headers/about.jpg);
}
至此就进行了"About"网页页面的制做,依此类推,改动html中body的类为services/portfolio/contact制做相应html文档并各自储存。
在css文档中加上各个网页页面相应的头顶部情况照片相对路径(如services网页页面的头顶部情况照片为services.jpg,在css中加上以下编码):
body.services #header {
height: 150px;
background: #db6d16
url(../images/headers/services.jpg);
}
随后用非常连接将这些网页页面联接起来,就构成了1个小网站了。
 
第10步:处理IE访问器的显示信息BUG:
要再次此实例教程必须IE的之前的版本号开展检测,你能够在这里免费下载到。绝绝大多数我国客户应用的是IE6.0,因而您基本上不必须看下去了。
IE中关键出难题的是IE5和IE5.5,如其不可以鉴别css中margin值为auto,要完成层的正中间对齐,需添加:

拷贝编码
编码以下:

body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
text-align: center;
}

可是这样设定以后,网站的content层的文字也变为正中间对齐了,大家必须让其向左对齐,添加:
 
#page-container {
width: 760px;
margin: auto;
text-align: left;}
有关页脚的BUG,将版权內容添加新的#copyright层中,在html中添加:
 
拷贝编码
编码以下:

<div id="copyright">
Copyright © Enlighten Designs
Powered by <a xhref="http://www.enlightenhosting.com/" mce_href="http://www.enlightenhosting.com/">Enlighten Hosting</a> and
<a xhref="http://www.vadmin.co.nz/" mce_href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a>
</div>

在css文档中添加,并将#footer的padding-top: 13px;移除:
 
拷贝编码
编码以下:

#footer #altnav {
clear: both;
width: 350px;
float: right;
text-align: right;
padding-top: 13px;
}
#footer #copyright {
padding-top: 13px;
}

最终要处理的BUG是当光标在导航栏条的被选目录新项目连接上悬停时(如在about的网页页面,body的类为about,但大家将光标移到导航栏条的about照片上时),情况照片消退了,这就必须添加:
 
拷贝编码
编码以下:

body.about li#about,
body.about li#about a,
body.about li#about a:hover,
body.services li#services,
body.services li#services a,
body.services li#services a:hover,
body.portfolio li#portfolio,
body.portfolio li#portfolio a,
body.portfolio li#portfolio a:hover,
body.contact li#contact,
body.contact li#contact a,
body.contact li#contact a:hover {
background-position: 0 ⑴00px;
}