首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

html5网页结构布局标签

html4布局 ? html5布局 ? ? 对于HTML5来讲,在网页结构上标签定义与使用更加语义化,让搜索引擎以及工程师更加迅速理解当前网页的整个重心所在!...列举常用HTML5结构组合 header nav section article figure figcaption aside footer 一般首页结构,如图所示 当然也可以是下面的结构 ?...但看似相似,并不是真的相似,这些标签是为了布局而生的,自然有它们更精确的语义定位,或者说他们更将强调Html的语义。   DIV     这个标签一直是我们见得最多、用得最多的标签。    ...它本身无任何语义,用作布局以及样式化标签。   Section     与div相似,但它有更进一步的语义。     section用作一段有专题性的内容,一般在它里面会带有标题。

2.5K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    网页布局基础

    浮动(Floats) 绝对定位(Absolute positioning) 言下之意就是网页布局和元素的定位都离不开这三种机制。...倡导的是结构、样式、行为分离 3.盒模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。...在HTML页面声明 ,浏览器就会选择标准 w3c 盒子模型来呈现内容了。...5.浮动布局 CSS中规定的第二种定位机制,使用浮动布局能够实现块级元素的横向排版,即横向多列布局。...10.绝对定位布局 绝对定位布局就是使用position属性实现的网页布局,是CSS中规定的第三种定位机制。它除了能实现横向多列布局以外,还可以实现许多复杂的定位,例如: 带有遮罩层效果的提示框 ?

    1.8K20

    前端学习笔记之CSS网页布局 CSS网页布局

    CSS网页布局 阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1、什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如word...,nodpad++等等 而网页布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的 #2、网页布局/排版的三种方式 2.1、标准流 2.2、浮动流 2.3、定位流 二 标准流 标准流的排版方式...> 1.5 浮动流排版练习 #注意:在企业开发中,如何对网页进行布局 #1、垂直方向的布局用标准流布局,水平方向用浮动流布局 #2、从上至下布局 #3、从外向内布局 #4、水平方向可以先划分为一左一右再对左边后者右边进一步布局...> 2.1 绝对定位的注意点 #1、绝对定位的元素是脱离标准流的,所以绝对定位的元素不区分块级元素/行内元素/行内块级元素 #2、如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点...> 固定定位应用场景 网页对联广告 网页头部通栏(穿透效果) ?

    4.8K20

    CSS 7:网页布局(传统布局,flex布局布局套路)

    传统布局 一栏、两栏、三栏布局 一栏布局 特点:页面内容居中,宽度固定 实现方式: 定宽 + 水平居中 width: 1000px; //或 max-width: 1000px; margin-left...圣杯布局和双飞翼布局 是老的布局方式,2012年以前流行,现在已不流行,但是面试可能会考察到,所以记录一下 why it?...如果用flex实现三栏布局,且main在dom次序最上面,那么只需要contain使用flex布局,mainflex:1;order:2两边固定宽度即可 使用flex写几个简单布局 ?...做布局的时候,要分清布局块和内容块!布局块DIV只用来布局,内容快DIV只用来添加网页内容。bootstrop就用栅格系统做布局块,内容块是自己设计的独立元素。 例子:简单的头部导航布局 ?...阮一峰的flex布局实例教程: https://cloud.tencent.com/developer/article/1095848 PC网页转成响应式的手机布局 在需要修改的地方加上媒体查询,然后修改相关

    4K41

    网页布局之flex布局的使用

    1.引言 Flex布局方案很早都提出来了,然后可以简便、完整、响应式地实现各种页面布局。随着浏览器的发展,目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。....2.网页布局方案 在网页设计过程中,水平垂直居中是很常用的,但是传统的方案使用起来分厂费劲,下面来看flex如何实现 * { margin: 0;...padding: 0; } html { width: 100%; height: 100%; }...如此看来这样水平垂直居中是不是很方便的实现了, 3.什么是flex布局? 意为"弹性盒模型",用来为盒状模型提供最大的灵活性。Webkit 内核的浏览器,必须加上-webkit前缀。...align-self 4.总结 css3中的flex布局是很方便布局的,虽然是个新东西,但是浏览器的发展,对其的支持也较好,建议在以后的设计中多去使用,一方面是潮流,另一方面,也是推动技术发展

    95750

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券