编程笔记 html5cssjs 045 网页布局

编程笔记 html5&css&js 045 网页布局

  • 一、网页布局
  • 二、头部区域
  • 三、菜单导航区域
  • 三、内容区域
  • 四、不相等的列
  • 五、底部区域
  • 六、box-sizing
    • box-sizing 属性可以被用来调整这些表现:
    • 属性值
      • content-box
      • border-box
  • 六、响应式网页布局
  • 小结

网页布局有很多种方式,一般分为以下几个部分:头部区域、菜单导航区域、内容区域、底部区域。

一、网页布局

网页布局有很多种方式,一般分为以下几个部分:头部区域、菜单导航区域、内容区域、底部区域。
在这里插入图片描述

二、头部区域

头部区域位于整个网页的顶部,一般用于设置网页的标题或者网页的 logo:

.header {background-color: #F1F1F1;text-align: center;padding: 20px;
}

三、菜单导航区域

菜单导航条包含了一些链接,可以引导用户浏览其他页面:

/* 导航条 */
.topnav {overflow: hidden;background-color: #333;
}/* 导航链接 */
.topnav a {float: left;display: block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none;
}/* 链接 - 修改颜色 */
.topnav a:hover {background-color: #ddd;color: black;
}

三、内容区域

内容区域一般有三种形式:
1 列:一般用于移动端
2 列:一般用于平板设备
3 列:一般用于 PC 桌面设备
创建一个 3 列布局,在小的屏幕上将会变成 1 列布局(响应式):

/* 创建三个相等的列 */
.column {float: left;width: 33.33%;
}/* 列后清除浮动 */
.row:after {content: "";display: table;clear: both;
}/* 响应式布局 - 小于 600 px 时改为上下布局 */
@media screen and (max-width: 600px) {.column {width: 100%;}
}

要设置两列可以设置 width 为 50%。创建 4 列可以设置为 25%。

四、不相等的列

不相等的列一般是在中间部分设置内容区域,这块也是最大最主要的,左右两次侧可以作为一些导航等相关内容,这三列加起来的宽度是 100%。

.column {float: left;
}
/* 左右侧栏的宽度 */
.column.side {width: 25%;
}
/* 中间列宽度 */
.column.middle {width: 50%;
}
/* 响应式布局 - 宽度小于600px时设置上下布局 */
@media screen and (max-width: 600px) {.column.side, .column.middle {width: 100%;}
}

五、底部区域

底部区域在网页的最下方,一般包含版权信息和联系方式等。

.footer {background-color: #F1F1F1;text-align: center;padding: 10px;
}

六、box-sizing

CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。
在 CSS 盒子模型的默认定义里,你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ,绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时,这个特点尤其烦人。

box-sizing 属性可以被用来调整这些表现:

content-box 是默认值。如果你设置一个元素的宽为 100px,那么这个元素的内容区会有 100px 宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器:你想要设置的边框和内边距的值是包含在 width 内的。也就是说,如果你将一个元素的 width 设为 100px,那么这 100px 会包含它的 border 和 padding,内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下,这使得我们更容易地设定一个元素的宽高。
译者注: border-box不包含margin
备注: 对于新的 web 站点,你可能希望首先将 box-sizing 设置为 border-box,如下所示:

* {box-sizing: border-box;
}

这使得处理元素大小的工作变得容易得多,并且通常消除了在布局内容时可能遇到的许多陷阱。然而,在某些情况下,你应谨慎使用这个属性。例如:你正在编写一个将由其他人使用的共享组件库,如果他们网站的其余部分没有设置此值,他们可能会发现很难使用你的组件库。

box-sizing 属性被指定为下面列表中的关键字。

属性值

content-box

默认值,标准盒子模型。width 与 height 只包括内容的宽和高,不包括边框border),内边距(padding),外边距(margin)。注意:内边距、边框和外边距都在这个盒子的外部。比如说,.box {width: 350px; border: 10px solid black;} 在浏览器中的渲染的实际宽度将是 370px。
尺寸计算公式:
width = 内容的宽度
height = 内容的高度
宽度和高度的计算值都不包含内容的边框(border)和内边距(padding)。

border-box

width 和 height 属性包括内容,内边距和边框,但不包括外边距。这是当文档处于 Quirks 模式 时 Internet Explorer 使用的盒模型。注意,填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为 350px 的盒子。内容框不能为负,并且被分配到 0,使得不可能使用 border-box 使元素消失。
尺寸计算公式:
width = border + padding + 内容的宽度
height = border + padding + 内容的高度

六、响应式网页布局

响应式页面,页面的布局会根据屏幕的大小来调整。

<!DOCTYPE html>
<html lang="zh-cn"><head><title>网页布局 编程笔记 html5&css&js</title><meta charset="utf-8" /><style>* {box-sizing: border-box;}body {font-family: Arial;padding: 10px;background: #f1f1f1;}/* 头部标题 */.header {padding: 30px;text-align: center;background: white;}.header h1 {font-size: 50px;}/* 导航条 */.topnav {overflow: hidden;background-color: #333;}/* 导航条链接 */.topnav a {float: left;display: block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none;}/* 链接颜色修改 */.topnav a:hover {background-color: #ddd;color: black;}/* 创建两列 *//* Left column */.leftcolumn {float: left;width: 75%;}/* 右侧栏 */.rightcolumn {float: left;width: 25%;background-color: #f1f1f1;padding-left: 20px;}/* 图像部分 */.fakeimg {background-color: #aaa;width: 100%;padding: 20px;}/* 文章卡片效果 */.card {background-color: white;padding: 20px;margin-top: 20px;}/* 列后面清除浮动 */.row:after {content: "";display: table;clear: both;}/* 底部 */.footer {padding: 20px;text-align: center;background: #ddd;margin-top: 20px;}/* 响应式布局 - 屏幕尺寸小于 800px 时,两列布局改为上下布局 */@media screen and (max-width: 800px) {.leftcolumn,.rightcolumn {width: 100%;padding: 0;}}/* 响应式布局 -屏幕尺寸小于 400px 时,导航等布局改为上下布局 */@media screen and (max-width: 400px) {.topnav a {float: none;width: 100%;}}</style></head><body><div class="header"><h1>明月看潮生的网页</h1><p>重置浏览器大小查看效果。</p></div><div class="topnav"><a href="#">链接1</a><a href="#">链接2</a><a href="#">链接3</a><a href="#" style="float: right">链接4</a></div><div class="row"><div class="leftcolumn"><div class="card"><h2>文章标题</h2><h5>2019 年 4 月 17日</h5><div class="fakeimg" style="height: 200px">图片</div><p>一些文本...</p><p>少年软件工程师。不再是一个启蒙用过程,直接向着目标前进!</p></div><div class="card"><h2>文章标题</h2><h5>2019 年 4 月 17日</h5><div class="fakeimg" style="height: 200px">图片</div><p>一些文本...</p><p>少年软件工程师。不再是一个启蒙用过程,直接向着目标前进!</p></div></div><div class="rightcolumn"><div class="card"><h2>关于我</h2><div class="fakeimg" style="height: 100px">图片</div><p>关于我的一些信息..</p></div><div class="card"><h3>热门文章</h3><div class="fakeimg"><p>图片</p></div><div class="fakeimg"><p>图片</p></div><div class="fakeimg"><p>图片</p></div></div><div class="card"><h3>关注我</h3><p>一些文本...</p></div></div></div><div class="footer"><h2>底部区域</h2></div></body>
</html>

小结

网页布局是设计网页必做之事,需要熟练掌握。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/411453.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Chatopera 云服务支持大语言模型对话(LLM),定制您的聊天机器人

2024 年&#xff0c;Chatopera 云服务继续不断完善&#xff0c;为开发者提供最好的定制聊天机器人的工具。在过去的一年&#xff0c;用户们反映最多的建议是 Chatopera 云服务内置大语言模型的对话&#xff0c;今天 Chatopera 云服务完成了产品升级&#xff0c;满足了这个诉求。…

Android Studi安卓读写NDEF智能海报源码

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?id615391857885&spma1z10.5-c.w4002-21818769070.11.1f60789ey1EsPH <?xml version"1.0" encoding"utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmln…

七陌API对接实战:外呼接口及通话记录推送

通过白码低代码开发平台对接七陌外呼接口&#xff0c;实现选择客户进行外呼&#xff0c;并保存通话记录的功能。 外呼接口实现&#xff1a; 官方接口文档&#xff1a;http://developer.7moor.com/v2docs/dialout/ 1、对接数据查询 向七陌商务索取到七陌用户中心账号密码&a…

Servlet 预览pdf

一、背景 上篇文章介绍了图片的预览&#xff0c;这篇我们介绍下 pdf 文件的预览&#xff0c;pdf 预览在实际开发中用的还是比较多的&#xff0c;比如很多文件协议、合同都是用pdf 格式&#xff0c;协议预览就需要我们做 pdf 预览了。 二、实操 其实在上篇文章最后已经说了常用…

django后台手机号加密存储

需求&#xff1a; 1 &#xff1a;员工在填写用户的手机号时&#xff0c;直接填写&#xff0c;在django后台中输入 2&#xff1a;当员工在后台确认要存储到数据库时&#xff0c;后台将会把手机号进行加密存储&#xff0c;当数据库被黑之后&#xff0c;手机号字段为加密字符 3&am…

新能源汽车智慧充电桩解决方案:智慧化综合管理与数字化高效运营

一、方案概述 TSINGSEE青犀&触角云新能源汽车智慧充电桩解决方案基于管理运营平台&#xff0c;覆盖业务与应用、数据传输与梳理、多端开发、搭建等模块&#xff0c;融合AI、5G、Wi-Fi 、移动支付等技术&#xff0c;实现充电基础设施由数字化向智能化演进&#xff0c;通过构…

day4:多点通信与域套接字

思维导图 使用tftp实现简单文件的上传 #include <head.h> #define SER_PORT 69 #define SER_IP "192.168.125.223" int link_file() {int sfdsocket(AF_INET,SOCK_DGRAM,0);if(sfd-1){perror("socket error");return -1;}return sfd; } int filedow…

多级树形结构查询 - 递归

表结构 CREATE TABLE pms_category (cat_id BIGINT(20) NOT NULL AUTO_INCREMENT COMMENT 分类id,name CHAR(50) NULL DEFAULT NULL COMMENT 分类名称 COLLATE utf8mb4_general_ci,parent_cid BIGINT(20) NULL DEFAULT NULL COMMENT 父分类id,cat_level INT(11) NULL DEFAULT …

【架构】docker实现3主3从架构配置【案例1/4】

一&#xff0c;集群规划及准备工作 架构实现&#xff1a;Redis3主3从 二&#xff0c;搭建命令 第一步&#xff0c;创建6台服务&#xff1a; docker run -d --name redis-node-1 --net host --privilegedtrue -v /data/redis/share/redis-node-1:/data redis:6.0.8 --clust…

VSCode编写 C/C++ 程序

VSCode 全称 Visual Studio Code&#xff0c;是微软出的一款轻量级代码编辑器&#xff0c;免费、开源而且功能强大。它支持几乎所有主流的程序语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性&#xff0c;支持插件扩展&#xff0c;并…

深度学习记录--梯度检验

数值逼近 为了对梯度进行检验&#xff0c;需要计算近似误差值来接近梯度 对于单边误差和双边误差公式&#xff0c;其中双边误差与真实梯度相差更小&#xff0c;故一般采用双边误差公式 双边误差 公式&#xff1a; 梯度检验(gradient checking) 对于成本函数&#xff0c;求出…

canvas绘制美队盾牌

查看专栏目录 canvas示例教程100专栏&#xff0c;提供canvas的基础知识&#xff0c;高级动画&#xff0c;相关应用扩展等信息。canvas作为html的一部分&#xff0c;是图像图标地图可视化的一个重要的基础&#xff0c;学好了canvas&#xff0c;在其他的一些应用上将会起到非常重…