10步CSS教程

发布 2021-04-27 07:46:28 阅读 7676

css教程:十步学会用css建站。

规划**。首先需要规划**,本教程将以下图为例构建**。

其基本布局见下图:

主要由五个部分构成:

1 main n**igation 导航条,具有按钮特效。

width: 760px height: 50px

2 header **头部图标,包含**的logo和站名。

width: 760px height: 150px

3 content **的主要内容。

width: 480px height: changes depending on content

4 sidebar 边框,一些附加信息。

width: 280px height: changes depending on

5 footer **底栏,包含版权信息等。

width: 760px height: 66px

1.创建html模板及文件目录等。

**如下:将其保存为并创建文件夹css,images,**结构如下:

2.创建**的大框:

建立一个宽760px的盒子,它将包含**的所有元素。

在html文件的和之间写入。

创建css文件,命名为保存在/css/文件夹下。写入:

控制html的id为page-container的盒子的宽为760px,背景为红色,表现如下。

现在为了让盒子居中,写入margin: auto;,使css文件为:

现在你可以看到盒子和浏览器的顶端有8px宽的空隙。这是由于浏览器的默认的填充和边界造成的。消除这个空隙,就需要在css文件中写入:

将**分为五个div

1.将“第一步”提到的五个部分都放入盒子中,在html文件中写入:

表现如下:2.为了将五个部分区分开来,我们将这五个部分用不同的背景颜色标示出来,在css文件写入:

表现如下:网页布局与div浮动等。

1.浮动:首先让边框浮动到主要内容的右边。用css控制浮动。

表现如下:2.往主要内容的盒子中写入一些文字。在html文件中写入:

表现如下:但是你可以看到主要内容的盒子占据了整个page-container的宽度,我们需要将#content的右边界设为280px。以使其不和边框发生冲突。

css**如下:

同时往边框里写入一些文字。在html文件中写入:

表现如下:这也不是我们想要的,**的底框跑到边框的下边去了。这是由于我们将边框向右浮动,由于是浮动,所以可以理解为它位于整个盒子之上的另一层。因此,底框和内容盒子对齐了。

因此我们往css中写入:

表现如下:网页主要框架之外的附加结构的布局与表现。

除网页主要框架之外的附加结构的表现(layout),包括以下内容:

1. 主导航条;

2. 标题(heading),包括**名和内容标题;

3. 内容;

4. 页脚信息,包括版权,认证,副导航条(可选)。

加入这些结构时,为了不破坏原有框架,我们需要在css文件"body"标签(tag)下加入:

.hidden"即我们加入的类(class),这个类可以使页面上任意属于hidden类的元素(element)不显示。这些会在稍后使用,现在请暂时忘记它。

现在我们加入标题(heading):

先回到html的**,,,等。我们往 html文件的header层(div)加入:

刷新一下页面,你就可以看到巨大的标题,和标题周围的空白,这是因为>标签的默认大小和边距(margin)造成的,先要消除这些空白,需要加入:

接下来是导航条:

控制导航条表现的css**相对比较复杂,我们将在第九步或是第十步中详细介绍。现在html文件加入导航**:

注:原教程使用了dl和dt,jorux在这使用了更常用的ul和li标签)

VB教程 10

在上一节,我们制作了一个 style 为 0 的列表程序,现在我们来制作一个 style 为 1 的列表程序。虽然仅仅是 style 的改变,但整个程序发生了完全的变化。本节中的程序更为科学,而且只需改动几行 同样适合上一节的程序。在编制本节程序前,我们有必要对 for next 循环结构语句做个了...

招商营销10步

渠道政策主要包括总 商渠道政策,地区 商渠道政策,二批商 政策,终端零售商政策以及首批进货政策,淡季打款政策,招商政策等。不同行业,不同层级,不同时间,不同区域,不同规模的渠道,对于渠道政策关注焦点完全不同,渠道政策差异也十分巨大。如耐用消费品渠道政策与快速消费品渠道政策差别就很大,不仅如此,产业利...

教程 10 表单标签

checked,是设定此一栏为预设选取值。3.复选表单 利用type checkbox 就会产生复选表单,复选表单通常是好几个选项一起摆出来供使用者点选,一次可以同时选好几个,故为复选表单。其有下列可设定之属性 name 名称 是设定此一栏的名称,程序中常会用到。value 内容 是设定此一栏的内容...