HTML5 初级布局
<style type="text/css"> body{max-width:1000px; border:4px solid #999; margin:10px auto; text-align:center; font-family:"微软雅黑"; min-height:864px;} ul{list-style:none; overflow:hidden} #mainHeard{background:#CCC;color:#09F; padding:20px 0;} #mainHeard nav{background:#E1E1E1;color:#09F} #mainHeard nav ul{width:600px; margin:auto; list-style:none; overflow:hidden} #mainHeard nav ul li{width:150px; float:left;} #pieceConter{width:690px; padding-bottom:20px; background:pink; color:#666; float:left;} #pieceConter .pieceConterChildren{width:600px; margin:10px 45px; background:#FFF; color:#C63} #pieceConter .pieceConterChildren header{background:#F60;color:#FFF} #pieceConter .pieceConterChildren aside{width:390px; float:left; border:2px solid #060;} #pieceConter .pieceConterChildren p{width:190px; float:left; margin-left:12px; border:2px solid #060;} #pieceConter .pieceConterChildren footer{clear:left;background:#09F;color:#FFF; margin-top:100px;} #sidebar{width:300px; margin-left:10px; float:left; background:#09F;} #sidebar nav{background:#0CF} #sidebar a{color:#FFF;} </style> <body> <h2>body</h2> <header id="mainHeard"> <h2>Header</h2> <nav> <h3>Nav</h3> <ul> <li>HTML5</li> <li>CSS3</li> <li>Javascript</li> <li>Jquery</li> </ul> </nav> </header> <section id="pieceConter"> <h2>Section</h2> <article class="pieceConterChildren"> <h2>Article</h2> <header><h2>Article Header</h2></header> <aside><h2>Article Aside</h2></aside> <p>P 元素content........</p> <footer><h2>Article Footer</h2></footer> </article> <article class="pieceConterChildren"> <h2>Article</h2> <header><h2>Article Header</h2></header> <aside><h2>Article Aside</h2></aside> <p>P 元素content........</p> <footer><h2>Article Footer</h2></footer> </article> </section> <section id="sidebar"> <h2>Section</h2> <nav> <h2>Section Nav</h2> <ul> <li><a href="2012/04">April 2012</a></li> <li><a href="2012/03">March 2012</a></li> <li><a href="2012/02">February 2012</a></li> <li><a href="2012/01">January 2012</a></li> </ul> </nav> </section> <footer style="width:1000px;height:60px; background:#666; line-height:60px;color:#FFF; float:left">footer</footer>
相关推荐
5. **Flexbox布局**:Flexbox是一种现代的布局模式,用于处理一维布局,如行或列。它简化了元素的对齐和分布,尤其适合复杂布局和响应式设计。 6. **Grid布局**:CSS Grid则用于二维布局,它使得创建复杂的网格布局...
本初级教程将带你深入理解HTML5的基础,并探索其在网页设计开发中的应用。 首先,我们要了解HTML5的基本结构。HTML5引入了更清晰的文档类型声明`<!DOCTYPE html>`,简化了文档的开头。此外,它强化了语义化标签,如...
### HTML5初级技巧详解 随着Web技术的飞速发展,HTML5已经成为网页设计与开发领域不可或缺的一部分。HTML5不仅简化了许多传统标记语言的复杂性,还引入了一系列新特性以提高网页的表现力和交互性。本文将详细介绍...
### DIV+CSS布局初级教程知识点概述 #### 一、DIV+CSS布局简介 - **定义**:DIV+CSS布局是一种网页布局方式,其中“DIV”指的是HTML中的`<div>`标签,用来定义文档中的独立区域;而“CSS”即Cascading Style ...
### HTML5框架初级学习 #### 知识点详解 **一、HTML5技术基础** HTML5,即超文本标记语言的第五版,是用于构建网页和应用程序的基础标准。相较于其前身,HTML5提供了更多的功能,使得开发者能够创建更加动态、...
5. **网格系统**:网格布局是将页面分割成多个等宽或不等宽的列,常用于创建复杂的布局结构。例如,Bootstrap的12列网格系统就是一个常见的例子。 6. **响应式设计**:响应式布局是确保网页在不同设备上(手机、...
资源中包含html+CSS+div的布局练习,其中包括固定布局、流式布局、浮动布局、定位布局等布局方式的练习Demo,另外还对CSS中的一些特殊的属性进行了练习,包括position、float、display等属性,对每一个属性和布局的...
【标题】"Web前端初级---模拟题-5套.zip"所涵盖的知识点主要集中在Web前端开发的初级阶段,包括HTML、CSS、JavaScript等基础技术,以及网页布局、响应式设计和基本交互效果的实现。这个压缩包可能包含了五套完整的...
在本项目示例中,"Accp初级程序员Html5开心网开发总结项目示例"是一个旨在帮助初学者理解和应用HTML5技术的实践项目。这个项目的主要目标是通过使用HTML5和CSS来创建一个类似开心网的网页应用,展示网页设计与开发的...
本初级教程旨在为初学者提供一个全面的入门指南,帮助理解HTML的基本语法和结构。 一、HTML简介 HTML是由Tim Berners-Lee在1990年创建的,它是一种标记语言,主要用于描述网页的内容和结构。HTML文件由一系列的元素...
这份"web前端开发教材初级源代码.rar"压缩包提供了一套初级学习资源,旨在帮助初学者掌握基本的前端开发技能。下面我们将深入探讨这些模块及其在实际开发中的应用。 01. HTML基础 HTML(HyperText Markup Language...
这个"网页设计必备——html初级教程"包含两个CHM文件:HTML入门与提高.CHM和HTML基础教程.chm,它们将帮助初学者理解并掌握HTML的基本概念和语法。 HTML入门与提高.CHM可能涵盖以下内容: 1. HTML简介:解释HTML的...
HTML(HyperText Markup ...通过这个HTML初级教程,读者将能够从零开始,逐步掌握HTML的基本用法,为更深入的Web开发打下坚实基础。无论是创建个人网站还是开发复杂的动态应用,理解并熟练运用HTML都是必不可少的步骤。
HTML5是现代网页的标准,而CSS3则是用于美化网页布局和视觉效果的关键工具。 一、HTML5详解 1. HTML5新特性:HTML5引入了许多新的元素和属性,如`<header>`、`<footer>`、`<article>`、`<section>`等,使文档结构...
以下是一些关于HTML初级语法的知识点,以及与之相关的概念: 1. **HTML标签**:HTML标签是HTML中的基本组成部分,它们告诉浏览器如何呈现网页内容。例如,`<h1>`用于定义一级标题,`<p>`用于创建段落,`<img>`用于...
【标题】"Web前端开发初级样题一理+实.zip" 涵盖了Web前端开发的初级理论和实践知识,是针对“1+x WEB前端开发初级考试”的备考资料。这个压缩包很可能是为了帮助初学者或者准备参加该级别认证考试的人员进行系统性...
这个“html初级教程实例”针对的是初学者,提供了大约100个简单的实例,旨在帮助学习者快速掌握HTML的基本用法。 在HTML中,每一个元素都是通过标签来定义的。例如,`<html>`标签是整个HTML文档的根元素,`<head>`...