页面常见的布局方式（图解）

最新推荐文章于 2024-07-24 16:08:38 发布
最新推荐文章于 2024-07-24 16:08:38 发布
阅读量1.6k 收藏 2
点赞数 1
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45135068/article/details/107720525
版权
  1. 通栏布局

案例：京东页面
在这里插入图片描述

  1. 版心布局

版心：宽度炒股页面的一半，在g页面的中心部分， 版心一般存放页面内容

在这里插入图片描述
注意：头部（即粉色区域）嵌套了一个跟下边三个板块同宽的盒子，这样就能使内容在版心中显示

  1. 分栏布局

在这里插入图片描述

曾吹雨
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5的内容模型及页面结构图
北溟南风起
03-02 3454
目录 HTML5内容模型 内容模型列表 页面结构图 HTML5内容模型 内容模型列表 HTML5中引入的标记元素，根据内容类型，划分为7大类： 内联 Embedded 流 Flow 标题 Heading 交互 Interactive 元数据 Metadata 短语 Phrasing 区段 Sectioning 具体的 内容类型 简介 列举 元数据 Me...
页面结构图示例图_定义示例站点的页面结构
culi3118的博客
08-31 2552
页面结构图示例图The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition, written by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. Copies are sold in stores worldwide, ...
CSS制作网页详细步骤图解
06-22
CSS制作网页详细步骤图解 CSS制作网页详细步骤图解
常见的几种页面布局方式
DavidLog的博客
04-26 2万+
1.固定布局（最基本的布局） 固定布局 *{ margin: 0; padding: 0; } html,body{ width:100% ; height: 100%; } .fixedlayout{ width:800px ; background:gray; padding:10px; margin:100px auto ; overflow: h
熟悉页面架构和布局，对Web标准和标签语义化有深入理解，到底应该说点啥
古语静水流深
02-20 6032
最近看到网上的很多公司要求面试者，熟悉页面架构和布局，对Web标准和标签语义化有深入理解，对这样的要求，很多面试者不知道，到底应该说些什么。其实这个问题对很多面试者，我觉得更多的是对于语言的表达。前提是，你要对这些最基础的计算机知识有一定的理解。说白了，就是对前端的基础知识要有。 1.Web标准 Web标准是由一系列标准组合而成。一个网页主要由三部分组成：结构层、表现层和行为层。对应的标准也分
网页设计基础——网页布局结构
Geek_HotZe的博客
07-27 1万+
几大常用网页布局结构 作为网页设计初学者，掌握几个页面布局结构将会让网页变得更加美观，并且大大提升设计效率。 一、 国子型（大型网站常用类型） 如图所示，我们可以看出，国子型页面结构主要分为五个部分。 头部: 该部分包括网站的标题以及横幅广告条； 左侧: 该部分包括一些导航等信息； 右侧: 该部分包括菜单或者导航的组件； 中部: 该部分为页面的主要内容； 底部: 该部分包括一...
前端常见的布局方案大全
weixin_30867015的博客
09-05 923
一、静态布局(Static Layout) 1. 布局概念 最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。 2. 优点 采用的是css2之前的写法,不存在浏览器兼容性。布局简单。 3. 缺点 但是移动端不可以使用pc端的页面,两个页面的布局不一致,移动端需要自己另外设计一个布...
图解CSS中position属性的定位用法
09-24
在CSS中，`position`属性是一个至关重要的概念，它决定了元素在页面布局中的位置和行为。本篇文章将详细解析`position`属性的定位用法，尤其是相对定位和绝对定位。 首先，`position`属性的默认值是`static`。这...
ecshop模板如何修改详细图解
01-03
其中，DWT文件负责整体页面布局的设计，而LBI文件则主要用来定义局部模块。 2. **主题目录**：所有的模板文件都存放在`themes`目录下。该目录下包含了多个子目录，每个子目录对应一个不同的模板主题。例如，一个名...
TabControl用法图解（VS2010）
07-08
### TabControl用法详解——基于Visual Studio 2010 TabControl 控件是Windows应用程序设计中常用的一个元素，尤其在创建具有多个面板...这不仅提高了用户界面的交互性和功能性，还为开发者提供了灵活的布局管理方式。
PS图解教程
11-28
Photoshop，简称“PS”，是由Adobe公司开发的一款图像处理软件，具有...通过这个“PS图解教程”，学习者可以逐步掌握PS的各项功能，并运用到实际工作中，无论是进行简单的图像修饰还是复杂的创意设计，都能游刃有余。
常见的布局方式
weixin_55643605的博客
10-20 2377
页面中为了更好的展示数据，需要对页面元素进行布局，常见的布局方式有以下三种： 一.默认布局： 它是默认布局方式，按照代码书写顺序及标签类型从上到下，从左到右依次显示。（适用于页面元素的微调） <title>默认布局</title> <style> div{ width: 200px; height: 200px; /* 行内块元素 */ .
常见的网页布局结构
qq_73599840的博客
11-19 1万+
整理了一些适合网页设计初学者的网页布局结构，掌握几个页面布局结构将会让网页变得更加美观，并且大大提升设计效率。
常见的布局方法有哪些
Annifan6666的博客
12-29 3919
页面布局常用的方法有浮动、定位、flex、grid网格布局、栅格系统布局 浮动： 优点：兼容性好。 缺点：浮动会脱离标准文档流，因此要清除浮动。我们解决好这个问题即可。 绝对定位 优点：快捷。 缺点：导致子元素也脱离了标准文档流，可实用性差。 flex 布局（CSS3中出现的） 优点：解决上面两个方法的不足，flex布局比较完美。移动端基本用 flex布局。 网格布局（grid） CSS3中引入的布局，很好用。代码量简化了很多。 利用网格布局实现
DIV+CSS搭建（淘宝首页）布局图
热门推荐
小柒的前端之旅
03-19 3万+
制作网页时，构建页面布局图很重要。布局前的结构划分避免造成混乱。 下面的代码只有DIV+CSS的网页结构布局。没有将最终的淘宝静态页面的代码放上去，只有布局图和最终页面的比较图。 搭建的布局图与最终效果的一个比较： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...
网页的基本结构
maimang1001的专栏
02-24 3852
网页的基本结构： doctype ：出现在网页源代码中的第一项是 doctype 声明。 它为Web浏览器（或其他用户代理）提供了有关书写页面的标记语言类型的信息，这可能会或可能不会影响浏览器呈现内容的方式。 html ：紧随 doctype 之后的是 html 元素——这是文档树的根元素，后面的所有内容都是该根元素的子孙元素。html 标签标记的整个网页内容，网页可以被视为可以包含任意数量分支的文档树。每个分支以一定的规则包含相应的项目。 head ：head 元素包含描述文档本身的元数据信息，或.
【HTML】iframe
最新发布
小秀的博客
07-24 348
标签是 HTML 中的⼀个元素，⽤于在当前 HTML ⽂档中嵌⼊另⼀个 HTML ⽂档。它可以在⼀个 HTML ⻚⾯中嵌⼊另⼀个 HTML ⻚⾯或其他类型的⽂档，⽐如 PDF ⽂件或视频⽂件。其中 src 属性指定要嵌⼊的⽂档的 URL，可以是⼀个 HTML ⻚⾯、⼀个 PDF ⽂件或⼀个视频⽂件等等。通过设置 width 和 height 属性可以指定。
《Illustrated WPF》：图解Windows Presentation Foundation
这本书以其独特的图解方式和简洁的语言，深入浅出地介绍了WPF的相关概念和技术，旨在帮助读者直观地理解和掌握WPF。Daniel Solis 同样是《Illustrated C# 图解教程》的作者，他在技术解释方面有着独到的风格。在本书...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值