HTML中的内联框架及进阶设计

今天将为大家带HTML的内联框架,以及网页进阶设计,在想对网页做出更进一步的完善时,我们可以使用JavaScript对网页设计出更多的样式以及使用响应式设计来设计出更加出众的网页外观。

一、HTML框架—iframe

1、Iframe是一种可以在网页内联其他网页的元素

2、Iframe语法为:(其中URL指向不同的网页)

3、Iframe以height和width属性来定义长度和宽度,示例:

HTML中的内联框架及进阶设计


运行结果:

HTML中的内联框架及进阶设计

4、在iframe中可以用frameborder属性来定义是否显示边框,设置属性为“0”的时候移除iframe的边框,示例:


HTML中的内联框架及进阶设计

运行结果:

HTML中的内联框架及进阶设计


二、HTML javaScript

1、JavaScript是面向Web的编程语言,获得了所有网页浏览器的支持,是目前使用最广泛的脚本编程语言之一,也是网页设计和Web应用必须掌握的基本工具。

2、在HTML中是用


运行结果:

HTML中的内联框架及进阶设计

点击前

HTML中的内联框架及进阶设计

点击后


Javascrip可以修改样式,示例:

我的第一段 JavaScript

JavaScript 可以更改 HTML 元素的样式。

运行结果:

HTML中的内联框架及进阶设计

点击前

HTML中的内联框架及进阶设计

点击后

三、HTML文件路径

1、文件路径描述了网站文件夹结构中某个文件的位置。

2、文件路径会在连接外部文件时被用到:

l 网页

l 图像

l 样式表

l JavaScript

3、绝对文件路径是指向一个因特网文件的完整URL,示例:

flower

运行结果:

HTML中的内联框架及进阶设计


4、相对路径指向了对于当前页面的文件。

HTML中的内联框架及进阶设计

四、HTML响应式设计

1、RWD指的是响应式Web设计(Responsive Web Design)。

2、RWD 能够以可变尺寸传递网页。

3、RWD 对于平板和移动设备是必需的。

创建响应式设计的一个方法,实在急来创建它,示例:

Welcome to the New world

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.

运行结果:

HTML中的内联框架及进阶设计

4、另一个创建响应式设计的方法,是使用现成的 CSS 框架—Bootstrap。

5、Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。

6、Bootstrap 帮助您开发在任何尺寸都外观出众的站点:显示器、笔记本电脑、平板电脑或手机,示例:

href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

Welcome to the New world

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.

运行结果:

HTML中的内联框架及进阶设计

学完这一节对网页的进阶设计内容,是不是觉得对网页设计有了更多的认识呢?

展开阅读全文

页面更新:2024-04-06

标签:进阶   内联   框架   边框   示例   出众   平板   路径   样式   属性   外观   元素   尺寸   网页   文件   科技

1 2 3 4 5

上滑加载更多 ↓
推荐阅读:
友情链接:
更多:

本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828  

© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号

Top