css制作网站实例Word文档下载推荐.docx
- 文档编号:15340160
- 上传时间:2022-10-29
- 格式:DOCX
- 页数:36
- 大小:222.70KB
css制作网站实例Word文档下载推荐.docx
《css制作网站实例Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《css制作网站实例Word文档下载推荐.docx(36页珍藏版)》请在冰豆网上搜索。
第五步:
网页主要框架之外的附加结构的布局与表现;
第六步:
页面内的基本文本的样式(css)设置;
第七步:
网站头部图标与logo部分的设计;
第八步:
页脚信息(版权等)的表现设置;
第九步:
导航条的制作(较难);
第十步:
解决ie浏览器的显示bug;
第一步:
规划网站,本教程将以图示为例构建网站
1.规划网站,本教程将以下图为例构建网站。
其基本布局见下图:
主要由五个部分构成:
1.MainNavigation导航条,具有按钮特效。
Width:
760pxHeight:
50px
2.Header网站头部图标,包含网站的logo和站名。
150px
3.Content网站的主要内容。
480pxHeight:
Changesdependingoncontent
4.Sidebar边框,一些附加信息。
280pxHeight:
Changesdependingon
5.Footer网站底栏,包含版权信息等。
66px
·
第二步:
创建html模板及文件目录等1.创建html模板。
代码如下:
<
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
html>
head>
metahttp-equiv="
Content-type"
content="
text/html;
charset=UTF-8"
/>
title>
CompanyName-PageName<
/title>
Content-Language"
en-us"
imagetoolbar"
no"
metaname="
MSSmartTagsPreventParsing"
true"
description"
Description"
keywords"
Keywords"
author"
EnlightenDesigns"
styletype="
text/css"
media="
all"
@import"
css/master.css"
;
/style>
/head>
body>
/body>
/html>
将其保存为index.html,并创建文件夹css,images,网站结构如下:
2.创建网站的大框,即建立一个宽760px的盒子,它将包含网站的所有元素。
在html文件的<
和<
之间写入
divid="
page-container"
Helloworld.
/div>
Helloworld.
创建css文件,命名为master.css,保存在/css/文件夹下。
写入:
#page-container{
width:
760px;
background:
red;
}
#page-container{
}
控制html的id为page-container的盒子的宽为760px,背景为红色。
表现如下:
现在为了让盒子居中,写入margin:
auto;
,使css文件为:
margin:
现在你可以看到盒子和浏览器的顶端有8px宽的空隙。
这是由于浏览器的默认的填充和边界造成的。
消除这个空隙,就需要在css文件中写入:
html,body{
0;
padding:
html,body{
第三步:
将网站分为五个div,网页基本布局的基础:
1.将“第一步”提到的五个部分都放入盒子中,在html文件中写入:
main-nav"
MainNav<
header"
Header<
sidebar-a"
SidebarA<
content"
Content<
footer"
Footer<
2.为了将五个部分区分开来,我们将这五个部分用不同的背景颜色标示出来,在css文件写入:
#main-nav{
height:
50px;
#header{
blue;
150px;
#sidebar-a{
darkgreen;
#content{
green;
#footer{
orange;
66px;
#main-nav{
#header{
#sidebar-a{
#content{
#footer{
第四步:
网页布局与div浮动等:
1.浮动,首先让边框浮动到主要内容的右边。
用css控制浮动:
float:
rightright;
280px;
right;
2.往主要内容的盒子中写入一些文字。
在html文件中写入:
Loremipsumdolorsitamet,consectetueradipiscingelit.Nullamgravidaenimutrisus.
Praesentsapienpurus,ultricesa,variusac,suscipitut,enim.Maecenasinlectus.
Donecinsapieninnibhrutrumgravida.Sedutmauris.Fuscemalesuadaenimvitaelacus
euismodvulputate.Nullamrhoncusmaurisacmetus.Maecenasvulputatealiquamodio.
Duisscelerisquejustoapede.Namauguelorem,semperat,portaeget,placerateget,
purus.Suspendissemattisnuncvestibulumligula.Inhach
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- css 制作 网站 实例
![提示](https://static.bdocx.com/images/bang_tan.gif)