HTML HTML 布局 (stage1-24)

最新推荐文章于 2022-07-31 00:18:58 发布
最新推荐文章于 2022-07-31 00:18:58 发布
阅读量336 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38628915/article/details/79013502
版权

基础篇-HTML 布局

1.网站布局

大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。
大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

 提示:虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的,即表格不是布局工具。
2.HTML 布局 - 使用<div> 元素

div 元素是用于分组 HTML 元素的块级元素。
下面的例子使用五个 div 元素来创建多列布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页布局</title>
</head>
<body>

<div id="1" style="width:500px">
    <div id="2" style="background-color: #ffa500">
        <h1 style="margin-bottom:0">这是主要的网页标题</h1>
    </div>

    <div id="3" style="background-color:#ffd700;width:100px;height:200px;float:left;" >
        <b>菜单</b><br>
        HTML<br>
        css<br>
        javascript<br>
    </div>

    <div id="4" style="background-color: #EEEEEE;height:200px;width:400px;float:left;">这里是内容</div>

    <div id="5" style="background-color:#ffa500;clear:both;text-align:center;">版权：@baidu.com</div>

</div>

</body>
</html>

运行结果：
这里写图片描述

3.HTML 布局 - 使用表格

使用 HTML <table> 标签是创建布局的一种简单的方式。
大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
lamp 即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！
下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用table进行网页布局</title>
</head>
<body>

<table width="500" border="0">
    <tr>
        <!--第1行第1列-->
        <td colspan="2" style="background-color: #ffa500;">
            <h1>这是主要的标题</h1>
        </td>
    </tr>

    <tr>
        <!--第2行第1列-->
        <td style="background-color: bisque;width=100px;vertical-align:top;">
            <b>菜单</b><br/>
            html<br/>
            css<br/>
            javascript<br/>
        </td>
        <!--第2行第2列-->
        <td style="background-color: beige;width:400px;height:200px;vertical-align:top;">这里是内容</td>
    </tr>

    <tr>
        <!--第3行第1列-->
        <td colspan="2" style="background-color: aquamarine;text-align:center;">版权：@baidu.com</td>
    </tr>
</table>
</body>
</html>

运行结果：
这里写图片描述

4.HTML 布局 - 有用的提示

Tip: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。
Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（可以使用这些预先构建好的网站布局，并优化它们）。

今天就到这里~~

Mac-fang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML HTML 样式- CSS (stage1-19)
MAC--芳
01-05 335
基础篇-HTML 样式- CSS 1.CSS CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式. 2.如何使用CSS CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的. CSS 可以通过以下方式添加到HTML中: 内联样式- 在HTML元素中使用”style” 属性 内部样式表 -在HTML文档头部 区域使
HTML HTML区块 (stage1-23)
MAC--芳
01-09 287
基础篇-HTML区块 1.HTML 和 HTML 可以通过 和 将元素组合起来。 2.HTML 区块元素 大多数 HTML 元素被定义为块级元素或内联元素。 块级元素在浏览器显示时，通常会以新行来开始（和结束）。 实例: , , , 3.HTML 内联元素 内联元素在显示时通常不会以新行开始。 实例: , , , 4.HTML 元素 HTML 元素
HTML HTML 属性 (stage1-12)
MAC--芳
12-28 452
基础篇-HTML 属性 属性是 HTML 元素提供的附加信息。 1.HTML 属性 HTML 元素可以设置属性 属性可以在元素中添加附加信息 属性一般描述于开始标签 属性总是以名称/值对的形式出现，比如：name=”value” 2.属性实例 HTML 链接由 标签定义。 链接的地址在 href 属性中指定： 实例 a href="http://www.runoo
HTML HTML 基础 (stage1-10)
MAC--芳
12-28 306
基础篇-HTML 基础 1.HTML 标题 HTML 标题（Heading）是通过 - 标签来定义的. 实例： h1>这是一个标题h1> h2>这是一个标题h2> h3>这是一个标题h3> 2.HTML 段落 HTML 段落是通过标签 来定义的. 实例: p>这是一个段落。p> p>这是另外一个段落。p> 3.HTML 链接 HTML 链接是通过标签
HTML HTML 元素 (stage1-11)
MAC--芳
12-28 246
基础篇-HTML 元素 HTML 文档由 HTML 元素定义。 1.HTML 元素 开始标签 元素内容 结束标签 这是一个段落 这是一个链接 这是一个换行 开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。 2.HTML 元素语法 HTML
stage1-ag3
03-18
总的来说，"stage1-ag3"可能是一个初学者的HTML练习，也可能是专业开发者的一个早期项目阶段，涵盖了HTML的基本概念，可能涉及HTML5的新特性，以及简单的CSS和JavaScript应用。通过解压并分析"stage1-ag3-main"文件...
stage1-bg17-
03-12
如果"stage1-bg17--main"是一个HTML文件，那么开发者可能在其中定义了特定阶段的布局和内容，包括可能的图片、文本、链接等。随着项目的发展，不同的阶段（如stage2、stage3等）可能会引入更复杂的功能和改进的设计...
stage1-bg5
03-16
总的来说，"stage1-bg5"是一个HTML学习的初级阶段，涵盖了基本的HTML结构、元素和模板概念，以及可能涉及的基础CSS知识。通过实践和练习，你可以逐步掌握创建静态网页的能力，为后续更高级的前端开发技能打下坚实的...
stage1-bg23
03-19
综上所述，"stage1-bg23"是一个HTML项目阶段，可能涉及背景图像的设计与应用，以及主要HTML文件的编写，涵盖网页结构、样式、响应式布局等多个方面。理解并熟练掌握这些知识点对于创建功能完备且具有良好用户体验的...
stage1-ag6
03-18
"stage1-ag6"可能是一个项目或者课程的阶段名称，其中包含与HTML相关的学习材料或练习。 在"stage1-ag6-main"这个文件中，我们可以推测它可能包含了项目的第一阶段——AG6的主要代码文件。AG6可能是项目组的代号...
HTML HTML的基础知识 (stage1-5)
MAC--芳
12-28 428
今天介绍一下HTML的基础知识 1.HTML 实例 html> head> meta charset="utf-8"> title>菜鸟教程(runoob.com)title> head> body> h1>我的第一个标题h1> p>我的第一个段落p> body> html> 2.实例解析 !DOCTYPE html 声明为 HTML5 文档 html 元素 是 HTML
HTML HTML 链接 (stage1-17)
MAC--芳
01-04 891
基础篇-HTML 链接 1.HTML 链接 HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。 实例: html> head> meta charset="utf-8"> title>案例1title> head> body> p> a href="https://www.baidu.c
HTML HTML 教程 (HTML5 标准) (stage1-8)
MAC--芳
12-28 318
基础篇-HTML 教程 (HTML5 标准) 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 在本文档中，将学习如何使用 HTML 来创建站点。 HTML 很容易学习！相信我们能很快学会它！ 1.HTML 实例 注意：
scalemode属性 html,flash中的Stage属性...
weixin_33474104的博客
06-04 342
Stage 类是一个顶级类，不必使用构造函数即可访问其方法、属性和处理函数。Stage.align用法Stage.align = "值"属性；指示 SWF 文件在播放器或浏览器中的当前对齐方式。下表列出了 align 属性的值。此处未列出的值会将 SWF 文件居中放置在播放器或浏览器区域内。"T":顶部,中间"B":底部,中间"L":中间 ,左侧"R":中间,右侧"TL":顶部,左侧"TR":顶部...
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
热门推荐
HTML网页设计
07-31 6万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
html页面分为24列格栅,栅格 - Pure | Pure中文站 | Purecss学习网
weixin_39739234的博客
06-03 1048
学习Pure栅格系统Pure栅格系统使用简单且功能强悍。几个简单的概念需要知道：栅格class 与 单元格classPure栅格系统有两种class组成：栅格 class(pure-g) 和 单元格 (pure-u 或 pure-u-*)。栅格类似Excel的表格，由单元格组成。单元格的宽度是分数单元格用不同的class名表示宽度。比如 pure-u-1-2 表示宽1/2即50%， 同样 pure...
html判断在某个区间,JS 如何判断一个数字在某一个区间内
weixin_28933179的博客
06-24 1692
var range = [350,450,550,650,850,1000,1100,1250,1500];var reward = [30,40,50,100,200,240,300,400];function binarySearch(arr,findVal,leftIndex,rightIndex){if(leftIndex > rightIndex){var find = leftI...
html+css :时间轴布局
04-17 295
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>time line</title> <style type="text/css"&gt...
微信小程序设计淘宝客导购小程序 pangolin_tbk 2.0.8安装更新一体包源代码+部署教程完美运行版.7z
最新发布
08-11
经导师精心指导并认可、获 98 分的毕业设计项目！【项目资源】：微信小程序。【项目说明】：聚焦计算机相关专业毕设及实战操练，可作课程设计与期末大作业，含全部源码，能直用于毕设，经严格调试，运行有保障！【项目服务】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目！【项目资源】：微信小程序。【项目说明】：聚焦计算机相关专业毕设及实战操练，可作课程设计与期末大作业，含全部源码，能直用于毕设，经严格调试，运行有保障！【项目服务】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目！【项目资源】：微信小程序。【项目说明】：聚焦计算机相关专业毕设及实战操练，可作课程设计与期末大作业，含全部源码，能直用于毕设，经严格调试，运行有保障！【项目服务】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目！【项目资源】：微信小程序。【项目说明】：聚焦计算机相关专业毕设及实战操练，可作课程设计与期末大作业，含全部源码，能直用于毕设，经严格调试，运行有保障！【项目服务】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。
javafx 使用html
09-12
JavaFX 可以与 HTML 进行集成，使得在 JavaFX 应用程序中显示 HTML 内容成为可能。你可以使用 WebView 控件来实现这一功能。WebView 是一个支持加载和显示 HTML 页面的控件，它内部使用了 JavaFX 内嵌的 WebKit 引擎。 要在 JavaFX 应用程序中使用 WebView，你需要遵循以下步骤： 1. 导入 JavaFX 相关的库。 2. 创建一个 WebView 对象。 3. 创建一个 WebEngine 对象，并将其关联到 WebView 上。 4. 使用 WebEngine 的 load() 方法加载指定的 HTML 页面。 下面是一个简单的示例代码，展示了如何在 JavaFX 应用程序中使用 WebView 加载并显示一个 HTML 页面： ```java import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.layout.StackPane; import javafx.scene.web.WebEngine; import javafx.scene.web.WebView; import javafx.stage.Stage; public class JavaFXHTMLDemo extends Application { @Override public void start(Stage primaryStage) { // 创建 WebView 对象 WebView webView = new WebView(); // 创建 WebEngine 对象，并将其关联到 WebView 上 WebEngine webEngine = webView.getEngine(); // 加载 HTML 页面 webEngine.load("https://www.example.com"); // 创建根布局并添加 WebView StackPane root = new StackPane(); root.getChildren().add(webView); // 创建场景并设置根布局 Scene scene = new Scene(root, 800, 600); // 设置主舞台的场景，并显示应用程序 primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } } ``` 在这个示例中，我们创建了一个 WebView 对象，并将其放置在一个 StackPane 布局中。然后，我们创建了一个 WebEngine 对象，并使用其 load() 方法加载指定的 HTML 页面（在这里是 https://www.example.com）。最后，我们创建了一个场景并将根布局设置为场景的内容，然后显示主舞台。 运行这个示例，你将会看到一个 JavaFX 窗口显示了 https://www.example.com 的内容。你可以根据需要加载任何有效的 HTML 页面来替换 URL。同时，你可以使用 WebView 的其他方法和事件来控制和与加载的 HTML 页面进行交互。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值