1.结构清晰: nav、header 、main、footer,并且和container的关系一般是: nav:导航栏 ,header:页头,main:主要内容,footer:页脚。 这些都是命名都是html语义化的常见名称,让人一目了然就知道这个标签是做什么的,关于怎么命名麻烦出门左转搜索 html 属性命名原则; 并且和第2点要介绍的container的关系是如下的,语义化...
header:头部,用于页头部分。 nav:导航,主导航。 main:主要区域,内容主体。 content/container:内容,内容容器。 sidebar:侧边栏。 footer:底部,用于页脚部分。 2、功能区块 left center right:左中右。 main-left:左侧主要布局。 main-right:右侧主要布局。 logo:网站 LOGO 标志。 search:搜索输入框。 loginbar:登...
假设你的 HTML 结构是：<body><header>Header Content</header><main>Main Content</main><footer>Sti...
.footer { display: flex; background-color: pink; .btn-box { width: 100%; } } } </style> 实现要点: 1、header、bottom高度不变、main高度动态: flex: 1; overflow-y: scroll; 2、main布局目前用了scroll-view,但是scroll-view不支持flex: 因此:display: flex;justify-content: center;居中没有效果...
方法/步骤 1 新建一个html页面。如图：2 在html页面上新建三个div标签，分别为这三个div添加class为:header、main、footer。添加效果如图：相应代码：<div class="header"></div><div class="main"></div><div class="footer"></div> 3 创建style标签用于设置css样式。在title标签下创建一个style标签，...
四个部分:header, nav, main, footer, 再加一个广告部分,五个部分 二,做整体布局 1. 创建一个站点文件夹,再加上子文件夹 2. 先初步输入代码,4部分4< div >,广告后面加 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
header,footer{width:100%;height:100px;background:black;}main{width:1200px;height:600px;background:red;margin:0auto;} 代码语言:javascript 复制 单列布局是最为基础和简单的一种,实现方法并不局限于以上两种,大家可自由发挥,找到更多的方法来实现。1 ...
对于第一种,先通过对header,content,footer统一设置width:1000px;或者max-width:1000px(这两者的区别是当屏幕小于1000px时,前者会出现滚动条,后者则不会,显示出实际宽度);然后设置margin:auto实现居中即可得到。 .header{ margin:0auto; max-width:960px; ...
一、HTML5新特性 HTML5是HTML的最新版本，它引入了许多新元素和属性，以及更强大的API，提供了更好的语义化、多媒体支持和应用开发能力。以下是HTML5的一些重要新特性：语义化元素：HTML5引入了一系列的语义化元素，如<article>、<aside>、<details>、<figcaption>、<figure>、<footer>、<header>、<main>、<mark...
/* Header */内容区/* End Header */ Id 的命名 1)页面结构 容器: container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体佈局宽度：wrapper左右中：left right center (2)导航 导航：nav主导航：mainnav子导航：subnav顶导航：topnav边导航：...