css教程十步学会用css建站

ID：14319688

大小：489.00 KB

页数：29页

时间：2018-07-27

资源描述：

《css教程十步学会用css建站》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、CSS教程：十步学会用css建站　　规划网站　　首先需要规划网站，本教程将以下图为例构建网站。图1　　其基本布局见下图：图2　　主要由五个部分构成：　　1. MainNavigation导航条，具有按钮特效。　　Width:760pxHeight:50px　　2. Header网站头部图标，包含网站的logo和站名。　　Width:760pxHeight:150px　　3. Content网站的主要内容。　　Width:480pxHeight:Changesdependingoncontent　　4. Sidebar边框，一些附加信息。

2、　　Width:280pxHeight:Changesdependingon　　5. Footer网站底栏，包含版权信息等。　　Width:760pxHeight:66px1.创建html模板及文件目录等　　代码如下：　　　　　　　　

3、ype"content="text/html;charset=UTF-8"/>　　CompanyName-PageName　　　　　　　　

4、tion"/>　　　　　　@import"css/master.css";　　　　　　　　　　将其保存为index.html,并创建文件夹css，images，网站结构如下：图3　　2.创建网站的大框：　　建立一个宽760px的盒子，

5、它将包含网站的所有元素。　　在html文件的和之间写入　　　　Helloworld.　　

　　创建css文件，命名为master.css,保存在/css/文件夹下。写入：　　#page-container{　　width:760px;　　background:red;　　}　　控制html的id为page-container的盒子的宽为760px，背景为红色,表现如下。图4　　现在为了让盒子居中，写入margin:auto;，使css文件为：　　#pag

6、e-container{　　width:760px;　　margin:auto;　　background:red;　　}　　现在你可以看到盒子和浏览器的顶端有8px宽的空隙。这是由于浏览器的默认的填充和边界造成的。消除这个空隙，就需要在css文件中写入：　　html,body{　　margin:0;　　padding:0;　　}　　将网站分为五个div　　1.将"第一步"提到的五个部分都放入盒子中，在html文件中写入：　　　　MainNav

7、　　Header

css教程十步学会用css建站

css教程十步学会用css建站

相关文章

相关标签