前端学习自学笔记: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是唯一的。

谢谢大家观看~

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180117A03BPV00?refer=cp_1026

同媒体快讯

相关快讯

扫码关注云+社区