`
peizhyi
  • 浏览: 30529 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html5与css3学习实践--网页主体的位置划分标签

 
阅读更多

网页中的body是主体内容,按照html5的标准,可以按照<header><footer><section>来进行布局上的划分

一个基本的结构可以是这样:

 

    <body>
        <header>
            <h1>Body Title</h1>
        </header>
        <section id="left">
        </section>
        <section id="right">
        </section>
        <footer>
            <p>Copy Right.</p>
        </footer>
    </body>

<header>表示头部区域;

<footer>表示尾部区域;

<section>表示头尾之外的区块。

这几个标签都是从位置角度对某个页面元素进行划分,可以互相嵌套使用,只要符合位置上的关系就好。

分享到:
评论

相关推荐

    制作一个简单HTML传统端午节日网页(HTML+CSS)

    通过以上知识点的学习与实践,可以有效地提高网页设计的能力。无论是对于学生完成课程作业还是专业设计师开发项目都是非常有益的。掌握了HTML、CSS和JavaScript的基础知识后,再结合高效的编辑工具和优秀的布局技巧...

    前端HTML5+CSS+JavaScript学习笔记.docx

    在学习前端开发时,理解并熟练掌握HTML5、CSS和JavaScript这三者的结合至关重要,它们共同构成了网页的静态结构、视觉样式和动态行为。不断练习和实践,才能更好地运用这些知识创建出美观、交互性强的网页。

    HTML期末学生大作业-拯救宠物网页作业html+css

    通过使用`&lt;div&gt;`标签来划分页面的不同部分,并利用CSS来定义这些部分的外观和布局,从而实现页面的响应式设计和良好的视觉效果。 - **页面构成**:整个网站通常会包括首页、导航栏、主体内容区以及页脚等部分。 - **...

    教育类网站 html+css静态页面.zip

    【教育类网站 html+css静态...综上所述,"趣学网"这个项目涵盖了基本的HTML和CSS知识,是学习网页设计和布局的实用示例。通过分析和实践这个项目,新手可以掌握网页制作的基本技能,并逐步提升到更高级的前端开发领域。

    W3C网页标准、div+css教程、xhtml+css介绍

    在学习和实践中,可以参考codefans.net等网站获取更多资源和教程,深入了解W3C网页标准、Div+CSS以及XHTML+CSS的应用技巧,不断提升前端开发技能。通过熟练掌握这些技术,你可以创建符合现代标准、用户体验优秀的...

    html css js网页设计.docx

    - **页面分区**:合理划分页面的不同部分,如顶部导航栏、主体内容区域以及底部页脚等。 #### 三、添加样式(CSS) - **样式设置**:利用CSS对网页的颜色、字体、布局等方面进行美化。 - **样式表类型**:可以选择...

    大学生化妆品网页设计模板代码 化妆美妆网页作业成品 学校美妆官网网页制作模板 学生简单html网站设计成品

    #### 三、HTML5与CSS3的应用 - **HTML5**:提供了更多的语义化标签,如`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;article&gt;`、`&lt;footer&gt;`等,有助于提高网页的可读性和搜索引擎优化(SEO)。 - **CSS3**:引入了新的布局模型、动画效果...

    HTML5前端期末大作业 HTML+CSS+JavaScript防锤子手机商城官网 web前端网页设计实例 企业网站制作

    - **网页主体结构**: 通过`&lt;div id="cz_page"&gt;` 定义了网页的主要容器,并进一步划分出顶部导航栏、主体内容区域等。 - **顶部导航栏**: 通过`&lt;div class="cz_top"&gt;` 和其内部的`&lt;h1&gt;`、`&lt;ul&gt;`等元素构建了导航栏的...

    新浪网页制作标准sina html css web xhtml

    3. Web标准:这包括一系列指导原则和最佳实践,旨在提高网页的互操作性、可访问性和持久性。遵循Web标准意味着使用正确的文档类型声明、符合规范的代码、正确嵌套的元素,以及确保所有内容都可以通过非视觉方式(如...

    网页设计作业,期末网站与网页设计作业源代码,HTML+CSS

    网页设计是IT领域中至关重要的一环,特别是在互联网的快速发展下,网页设计的创新与技术进步对用户体验产生了深远影响。这个“网页设计作业”是针对HTML和CSS的学习成果展示,主要是一个静态的个人旅行博客,涵盖了...

    html-标签查询1

    在网页布局中,`&lt;div&gt;`(division)标签常作为容器,通过CSS(Cascading Style Sheets)控制样式,实现网页的区块划分。`&lt;img&gt;`标签用于插入图像,`&lt;a&gt;`标签创建超链接,让页面之间可以相互跳转。`&lt;form&gt;`标签用于...

    160个div+css网页模板

    每个模板可能包括头部、导航栏、主体内容、侧边栏、页脚等不同部分,且每个部分可能都有对应的`div`元素,通过CSS定义其位置、尺寸、颜色、字体等视觉特性。 使用这些模板,初学者可以学习到如何使用`div`来组织...

    HTML学生作业网页 传统端午节节日 学生节日网页设计作业源码(HTML+CSS+JS)

    - **页面布局**:首页采用了丰富的CSS布局技术,比如使用`&lt;div&gt;`标签来进行区块划分,同时利用CSS属性来设置元素的位置、大小和颜色。 - **色彩搭配**:选择了鲜艳的色彩来营造节日氛围,使用CSS中的颜色属性来设置...

    HTML CSS JS游戏网页设计作业「响应式高端游戏资讯bootstrap网站」

    **HTML5与CSS3基础知识** - **HTML5**: 被广泛应用于现代网页开发中的一种标记语言。它引入了许多新的元素和属性,帮助开发者更容易地创建复杂的网页应用。例如,在此项目中使用的`&lt;video&gt;`和`&lt;audio&gt;`标签用于...

    div+css网页框架

    CSS则负责定义网页元素的外观、布局和结构,使设计者能够将样式与内容分离,从而更方便地管理和调整页面样式。 1. **Div的使用** - **定义和用途**:Div是一个通用的容器元素,可以包含任何其他HTML元素,用于对...

    常用的css模板css

    `&lt;div&gt;`标签是一个通用容器,可将网页内容划分为多个区域,并通过CSS控制这些区域的样式和位置。这种布局方式相比传统的表格布局更灵活,有利于实现响应式设计,适应不同设备的屏幕尺寸。 3. **HTML与CSS的关系**:...

    web课程设计网页制作、基于HTML+CSS大学校园班级网页设计

    ### 知识点一:HTML5与CSS3在网页设计中的应用 - **HTML5**:作为当前网页设计的基础语言之一,HTML5提供了更丰富的标签和功能,支持多媒体元素的直接嵌入,如音频(`&lt;audio&gt;`)和视频(`&lt;video&gt;`),无需额外插件...

    web课程设计网页规划与设计:鲜花网站设计——基于HTML+CSS+JavaScript制作网上鲜花网页设计(5页)

    - **应用:** CSS3用于美化网页界面,实现更复杂的视觉效果。 - **示例:** 利用Flexbox或Grid布局技术来实现响应式设计,确保网站在不同设备上的显示效果一致。例如,设置`.container { display: flex; }`可以使容器...

    幻彩水果CSS网页模板

    在"幻彩水果"模板中,`&lt;div&gt;`元素被用来划分网页的不同区域,如头部、主体、侧边栏和底部,然后通过CSS设置这些区域的宽度、高度、对齐方式以及背景图像等,实现灵活多变的网页布局。 4. **响应式设计**:虽然描述...

    【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码H434.zip

    【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码H434.zip这个压缩包文件包含了一个完整的前端网页项目,主要用于学习和实践Web开发技术,特别是HTML、CSS和JavaScript这三种核心技术...

Global site tag (gtag.js) - Google Analytics