3.html实现网页布局

2024-05-11 17:13:09

html实现网页布局

1.HTML头部元素
2.HTML 区块
3.HTML 布局
- 演示代码:
4.十二分法

1.HTML头部元素

①<title>：网页标题信息，会显示在搜索引擎结果页面中
②<style>：定义样式文件引用地址，也可以在<style> 元素中直接添加样式来渲染 HTML 文档

③<meta>：元数据元素meta用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据

④<link>：定义文档与外部资源之间的关系。通常用于链接到样式表:

⑤<script>:用于加载脚本文件，如： JavaScript。<script>标签既可包含脚本语句，也可以通过 "src" 属性指向外部脚本文件。

2.HTML 区块

(1)区块元素：

在浏览器显示时，通常会以新行来开始（和结束）如：<h1>, <p>, <ul>, <table>等

(2)内联元素：

在显示时通常不会以新行开始，如:<b>, <td>, <a>, <img>等

(3)<div> 元素
区块元素，可用于组合其他 HTML 元素的容器
没有特定的含义,浏览器会在其前后显示折行
与 CSS 一同使用，可用于对大的内容块设置样式属性
另一个常见的用途是文档布局

(4)<span> 元素
内联元素，可用作文本的容器
没有特定的含义
与 CSS 一同使用，可用于对文本设置样式属性

3.HTML 布局

使用<div>进行页面布局
实现一个下图所示的布局：

演示代码:

<!DOCTYPE html>
<html><head><title>HTML布局</title></head><body><!-- 设置整个背景颜色和大小 --><div id = "all" style = "background-color:white; height:900px;width:1920px"><!-- 设置标题栏 --><div id = "header" style = "background-color:blue;height:100px;width:1920px;">标题栏</div><!-- 设置左侧导航栏 --><div id = "left" style = "background-color:red;height:800px;width:300px;float:left">左侧导航栏</div><!-- 设置正文 --><div id = "content" style = "height:700px;width:1620px;float:left">正文内容</div><!-- 设置底部 --><div id = "foot" style = "background-color:green;height:100px;width:1620px;float:left">底部信息</div></div></body>
</html>

4.十二分法

我们将页面12等分，选取任意1列或几列即可获得该页面的
1/12、1/6、1/4、1/3、1/2、1/1
从而实现对页面中各种区块元素的任意排列组合

3.html实现网页布局相关推荐

DivCSS网页布局中CSS无效的十个常见原因
在学习DivCSS网页布局的知识,可是W3C validation有时难以操作,但用它你可以查看由版面设计引起的差错.验证程序抛出大量差错和警告,说明你的XHTML尚未完善,可能无法在不同浏览器上保持 ...
黑客内参告诉你一个：设计师用div+css 必须知道的网页布局类型
今天我在黑客内参受到了很多的留言,很多小伙伴在表示想要建立一个属于自己的站点,让我觉得现在建站是大部分人都比较感兴趣的一个技术吧! 碰巧今天整理以前的笔记发现了一本之前遗留下来的建站笔记,现在我就手打 ...
《Div+CSS 3.0网页布局案例精粹》扫描版[PDF]
电驴资源下面是用户共享的文件列表,安装电驴后,您可以点击这些文件名进行下载 [Div.CSS.3.0网页布局案例精粹].王大远.扫描版.rar详情 53.7MB 全选 53.7MB 下载地址(拷贝到 ...
css元素与浏览器边框,别具光芒CSS属性、浏览器兼容与网页布局
别具光芒CSS属性.浏览器兼容与网页布局语音编辑锁定讨论上传视频上传视频 <别具光芒CSS属性.浏览器兼容与网页布局>是2008年人民邮电出版社出版的图书.该书结合大量范例与实 ...
【疯狂积累CSS】2：利用@media screen实现网页布局的自适应
如果文档宽度小于 300 像素则修改背景颜色(background-color): @media screen and (max-width: 300px) {body {background-col ...
flex 单独一行_Flex网页布局一CSS弹性伸缩盒子语法教程
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...
网页布局设计的标准尺寸
许多的网页设计在进行网页布局设计时,进行界面网页的宽度尺寸设计都比较迷茫,800*600尺寸及1024*768尺寸的分辨率下,网页应该设计为多少像素才合适呢?太宽就会出现水平滚动条了网页设计标准尺寸 ...
css网页布局中文字排版的属性和用法
前段时间,学习了几个大的网站的图文混排的方法.今天总结下, css网页布局中文字排版的相关属性以及用法 .包括:设定字体.颜色.大小.段落空白,首字下沉.首行缩进.中文字的截断.固定宽度词内折行(wo ...
Float构建三栏DIV CSS网页布局
你对用float构建三栏DIV CSS网页布局的用法是否熟悉,这里和大家分享一下,用绝对定位的方法从CSS中得到固定宽度的布局并不困难:但是得到液态布局就有点困难了,因此现在都开始抛弃基于表格的布局技 ...
计算机网页div怎么划分,《网页布局与实现（DIV+CSS）》
编辑推荐:<高职高专计算机教学改革新体系规划教材>特色: ·反映产业技术升级,符合职业教育规律和高端技能型人才成长规律,根据计算机类专业建设和教育教学改革而设计. ·对接职业标准和岗位要求 ...

最新文章

热门文章