div+css的新手入门教程

 时间:2026-02-16 12:54:15

1、首先我们需要新建一个html页面,如下图所示

div+css的新手入门教程

2、分析了解里边的代码,这是一个最基本的html格式,第一个红框是网站的编码,第二个红框是网站的标题,第三个则是网站的主体内容。

div+css的新手入门教程

3、了解DIV的结构如下:

│body {} /*这是一个HTML元素,具体我就不说明了*/

└#Container {} /*页面层容器*/

├#Header {} /*页面头部*/

├#PageBody {} /*页面主体*/

│ ├#Sidebar {} /*侧边栏*/

│ └#MainBody {} /*主体内容*/

└#Footer {} /*页面底部*/

4、将div跟CSS之间构建联系

<link href="css.css" rel="stylesheet" type="text/css" />

div+css的新手入门教程

5、在<body></body>标签对中写入DIV的基本结构,代码如下:

<div id="container">[color=#aaaaaa]<!--页面层容器-->[/color]  <div id="Header">[color=#aaaaaa]<!--页面头部-->[/color]  </div>  <div id="PageBody">[color=#aaaaaa]<!--页面主体-->[/color]    <div id="Sidebar">[color=#aaaaaa]<!--侧边栏-->[/color]    </div>    <div id="MainBody">[color=#aaaaaa]<!--主体内容-->[/color]    </div>  </div>  <div id="Footer">[color=#aaaaaa]<!--页面底部-->[/color]  </div></div>

div+css的新手入门教程

6、接下来打开css.css文件,写入CSS信息,代码如下:

/*基本信息*/

body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}

/*页面层容器*/

#container {width:100%}

/*页面头部*/

#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}

/*页面主体*/

#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}

/*页面底部*/

#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}

div+css的新手入门教程

7、接下来,预览一下一个div+css页面就写好了,其余的就是多了解一些div和css的代码,逐渐的完善一下,就可以写出所有的网页了!

div+css的新手入门教程

8、想要了解更多相关内容,可以关注我们并且给我留言,可以在线给你指导发资料哦!

  • 如何使用C#编写代码获取他人网页内容
  • Dreamweaver如何加入注释
  • 建设个人网站基本步骤
  • 如何实现CSS外边距的叠加重合
  • 怎么让两个div在同一行
  • 热门搜索
    知识社区 c1能开什么样的货车 公共知识 都有什么奥特曼 凡士林的作用 枳壳的作用 关于海洋的知识 核桃分心木的功效与作用 内关的准确位置图和作用 枸杞子的作用与功效