前端学习自学笔记：day10

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

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

第十天的笔记:HTML AND CSS:

响应式设计:自行创建:可以灵活的调控页面元素.

例:

.city { 定义city类的css样式

float: left; 元素向左边移动

margin: 5px; 外边距为5px

padding: 15px;内边距为15px

width: 300px; 宽为300px

height: 300px;高为300px

border: 1px solid black; 边框属性为1px 黑色线条

}

以下是对于city类的引用

W3School Demo

Resize this responsive page!

London

London is the capital city of England.

It is the most populous city in the United Kingdom,

with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital and most populous city of France.

Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area,

and the most populous metropolitan area in the world.

使用Bootstrap设计

例:

设置字符编码为utf-8

href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">关联Bootstrap框架

container固定宽度并支持响应式布局的容器

jumbotron增大标题的大小,添加更多的外边距

W3School Demo

Resize this responsive page!

container固定宽度并支持响应式布局的容器

进行bootstrap进行12栏栅格布局

盒子占屏幕的4栏范围

London

London is the capital city of England.

It is the most populous city in the United Kingdom,

with a metropolitan area of over 13 million inhabitants.

盒子占屏幕的4栏范围

Paris

Paris is the capital and most populous city of France.

盒子占屏幕的4栏范围

Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area,

and the most populous metropolitan area in the world.

HTML框架:

-复习:垂直框架:例: cols:垂直方向切割屏幕

水平框架:例: rows:水平方向切割屏幕

框架结构标签:定义如何将窗口分割为框架,rows/cols属性规定了每行或者每列占据屏幕的面积

必须要把框架标签被包围.

框架标签:定义了放置每个框架的html文档.

例:

注意:如果不想让用户拖动框架的边框大小来调整,可以添加noresize="noresize".

例:

标签:为不支持框架的浏览器添加提示信息:

例:

你的浏览器不支持框架

注意:不能将 标签与 标签同时使用！不过，假如你添加包含一段文

本的 标签，就必须将这段文字嵌套于 标签内。

混合框架:一个页面同时含有行和列都分割的框架,下面的例子是先将把行分割,然后再其中一个已经分割行的再进行列分割

例:

导航框架:导航框架包含一个将第二个框架作为目标的链接列表.例子假设有三个页面,

例:

导航窗口:其中标签的target属性的必须为showframe.

被链接窗口:默认显示1.html,同时名字为showframe

daohang.html:

1

其中target的属性必须和框架标签中被链接窗口的名字显示2保持一致才可以正确显示3

下一节:HTML框架:更多实例:内联框架.

-复习:标签:

图片标签链接到其他网页的图片:例:

图片标签替代文本,例:

调整图像大小:例:

使用缩略图替代图像:例:缩小图:22.jpg 原始图:33.jpg

1.html:

谢谢大家观看~