前端学习自学笔记: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:

谢谢大家观看~

本文来自企鹅号 - 极客AND编程媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏韦弦的偶尔分享

微信小程序分享图片的简易canvas工具类

如有需要请自取:GitHub微信小程序保存图片分享的 canvas 简易自用工具类

1982
来自专栏技术墨客

React——Fragments特性 转

在我们使用React开发组件的时候,每个React组件都必须返回一个根元素。例如下面这样:

951
来自专栏24K纯开源

Qt Style Sheet实践(一):按钮及关联菜单

导读      正如web前端开发中CSS(Cascade Style Sheet)的作用一样,Qt开发中也可以使用修改版的QSS将逻辑业务和用户界面进行隔离。...

4105
来自专栏抠抠空间

Bootstrap框架

Bootstrap介绍 Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。 它是为实现快速开发Web应用程序而设计的...

5676
来自专栏编程

java基础知识,font属性css写法,代码详解!

CSS属性值 字体与文本 网页设计中有很多的文字要去处理,标题、段落、文章、列表以及表单中的文本。这一篇章我们讨论一下HTML中的字体与文本 字体 首先要有一...

1998
来自专栏林德熙的博客

win10 uwp 进度条 WaveProgressControl

昨天看到了有个大神做出好看的进度条样式,于是我就去抄袭他的代码,但是发现看不懂,于是本文主要翻译就是大神说这个控件如何做。

870
来自专栏从零开始学 Web 前端

html学习笔记(一)

单标签 <! Doctype html> 双标签 <html> </html> <head></head> <title></title>

6565
来自专栏GIS讲堂

CSS+JS实现tab标签切换

循环将所有的内容标签隐藏,并将tab标题栏的active样式清除,完了之后设置选中标签的内容显示,并给tab标题栏添加active样式。

5623
来自专栏守候书阁

canvas入门实战--邀请卡生成与下载

写了很多的javascript和css3的文章,是时候写一篇canvas的了。canvas是html5提供的一个新的功能!至于作用,就是一个画布。然后画笔就是j...

1153
来自专栏娱乐心理测试

轻松生成小程序分享海报

小程序分享到朋友圈只能使用小程序码海报来实现,生成小程序码的方式有两种,一种是使用后端方式,一种是使用小程序自带的canvas生成;后端的方式开发难度大,由于生...

5253

扫码关注云+社区

领取腾讯云代金券