前端学习自学笔记：day09

今天是第九天的笔记,主要是HTML和CSS的,希望大家支持~

在此之前先为大家显示下前端工程师的路线图:

第九天的笔记:HTML AND CSS:

-复习：HTML类：

定义类选择器：.cc{

color="";

}

类选择器引用：

-复习：块级元素：

:可以用作其他HTML元素的容器，同个类可以设置

多个块级元素。

例：

-复习元素：行内元素，可以作为文本的容器，同个类可以设置多个行

内元素。

例：cccccc

HTML布局：

多列显示内容：解析：

样式标签

#header {定义头部的CSS样式

background-color:black; 定义背景元素为黑色

color:white; 定义字体为白色

text-align:center; 文字显示在正中间

padding:5px; 内边距为5px ：盒子的范围扩大5px

}

#nav {

line-height:30px; 标签间的间隙加宽30px

background-color:#eeeeee; 定义背景颜色浅灰色

height:300px; 定义盒子的高为300px

width:100px; 定义盒子的宽为100px

float:left; 元素向左浮动，把盒子显示在网页的左侧 重要

padding:5px; 内边距为5px ：盒子的范围扩大5px

}

#section {

width:350px; 定义盒子的宽为350px

float:left; 元素向左浮动，由于网站左侧已经有内容，所以紧挨着左侧盒子 重要

padding:10px; 内边距为10px ：盒子的范围扩大10px

}

#footer {

background-color:black; 定义背景元素为黑色

color:white; 定义字体为白色

clear:both; 盒子的两侧都不能出现元素，由于已经有左侧的元素，所以盒子位置为最下，刚好

成为了页面的底部。 重要

text-align:center; 文字居中显示

padding:5px;内边距为5px ：盒子的范围扩大5px

}

以下是css样式的引用。

City Gallery

London

London

London

Standing

Copyright ? W3Schools.com

使用HTML5进行网站布局。

标签：定义文档或者节的页首：例：

标签：定义导航链接的容器（可以通过浮动属性（float）使其

成为网站的侧栏）：例：

标签：定义文档中的节：例：

了解：标签：定义独立的自包含文章：例：

了解：标签：定义内容之外的内容（侧栏）：例：

标签：定义页脚：例：

了解：标签：定义额外的细节：例：

了解：标签:定义derails标签的细节：例：

使用HTML5的 , ,

, 以及 来创建多列布局：

header { 定义header的css样式

background-color:black; 背景颜色为黑色

color:white;文字为白色

text-align:center; 文本居中

padding:5px;内边距扩大5px，元素的范围扩大5px

}

nav { 定义nav的css样式

line-height:30px; 文字间隔为30px

background-color:#eeeeee; 背景颜色为浅灰色

height:300px; 元素的高为300px

width:100px; 元素的宽为100px

float:left; 元素向左浮动，位于网页的左侧，作为网页的侧栏

padding:5px; 内边距扩大5px，元素的范围扩大5px

}

section { 定义section的css样式

width:350px; 元素的宽为350px

float:left; 元素向左浮动，由于网页的左侧已经有元素，所以紧靠在nav元素旁边。成为显示正文内容的元素

padding:10px; 内边距扩大10px，元素的范围扩大10px

}

footer {

background-color:black; 背景颜色为黑色

color:white; 文字为白色

clear:both; 定义了元素左右都不能出现元素，由于左侧已经有元素，所以footer元素位于页面的底部。成为页脚

text-align:center; 文本居中

padding:5px;内边距扩大5px，元素的范围扩大5px

}

以下是对于css样式的引用

City Gallery

London

London

London is the ion inhabitants.

Romans, who named it Londinium.

Copyright W3Schools.com

使用表格的HTML布局;使用 元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式：

.lamp { 定义lamp类选择器

width:100%; 宽为100%

border:1px solid #d4d4d4; 显示固体边框1px，并且颜色为浅灰色

}

th, td { 定义lamp类，th、td元素选择器

padding:10px; 全部内边距扩大5px，元素的范围扩大5px

}

th { 定义lamp类，th元素选择器

width:40px; 全部宽为40px；

}

以下是对于css样式的引用

Note

The table element was not designed to be a layout tool.

使用id链接到元素：

1.被链接的元素设置id：

xxxxxxxx

2.标签指定连接的id:本页面：

链接到p

链接其他页面：链接到p

注意：id是唯一的。

谢谢大家观看~