欢迎来到天天文库
浏览记录
ID：10662683
大小：119.50 KB
页数：16页
时间：2018-07-07
《用css建设网站的实例》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。
1、用CSS建设网站的实例>>edu.5151doc.教育资源库本教程主要参考CreatingaCSSLayoutfromscratch，由Jorux翻译，以意译为主，其间加入了不少Jorux的个人观点，省略了一些多余的说明，请读者明鉴。目录：第一步：规划网站，本教程将以图示为例构建网站；[进入]第二步：创建html模板及文件目录等；[进入]第三步：将网站分为五个div，网页基本布局的基础；[进入]第四步：网页布局与div浮动等；[进入]第五步：网页主要框架之外的附加结构的布局与表现；[进入]第六步：页面内的基本文本的样式(css)设置；[
2、进入]第七步：网站头部图标与logo部分的设计；[进入]第八步：页脚信息(版权等)的表现设置；[进入]第九步：导航条的制作(较难)；[进入]第十步：解决ie浏览器的显示bug；[进入]第一步：规划网站，本教程将以图示为例构建网站1.规划网站，本教程将以下图为例构建网站。其基本布局见下图：主要由五个部分构成：1.MainNavigation导航条，具有按钮特效。L1.0Transitional//EN"".l1/DTD/xhtml1-transitional.dtd"><html><head><metahttp-equi
3、v="Content-type"content="text/html;charset=UTF-8"/><title>panyName-PageName</title><metahttp-equiv="Content-Language"content="en-us"/><metahttp-equiv="imagetoolbar"content="no"/><metaname="MSSmartTagsPreventParsing"content="true"/><metaname="description
4、"content="Description"/><metaname="keyetaname="author"content="EnlightenDesigns"/><styletype="text/css"media="all">import"css/master.css";</style></head><body></body></html><!DOCTYPEhtmlPUBLIC"-//L1.0Transitional//EN"".l1/DTD/xhtml1-transitional.d
5、td"><html><head><metahttp-equiv="Content-type"content="text/html;charset=UTF-8"/><title>panyName-PageName</title><metahttp-equiv="Content-Language"content="en-us"/><metahttp-equiv="imagetoolbar"content="no"/><metaname="MSSmartTagsPreventParsing"co
6、ntent="true"/><metaname="description"content="Description"/><metaname="keyetaname="author"content="EnlightenDesigns"/><styletype="text/css"media="all">import"css/master.css";</style>12345678910...下一页>>[这篇文章来自..，]</head><body></body></html>将其
7、保存为index.html,并创建文件夹css，images，网站结构如下：2.创建网站的大框，即建立一个宽760px的盒子，它将包含网站的所有元素。在html文件的<body>和</body>之间写入<divid="page-container">Helloaster.css,保存在/css/文件夹下。写入：#page-container{l的id为page-container的盒子的宽为760px，背景为红色。表现如下：现在为了让盒子居中，写入margin:auto;，使css文件为：#page-container
8、{argin:auto;background:red;}#page-container{argin:auto;background:red;}现在你可以看到盒子和浏览器的顶端有8px宽的空隙。这是由于浏览器
此文档下载收益归作者所有
