HTML5 页面布局【结合案例】

新布局的意义

语义化
HTML5 可以让很多更语义化的结构化代码标签代替大量无意义的 div 标签

1. 这种语义化的特性提升了网页的质量和语义

2. 减少了以前用于CSS 调用的class 和 id 属性

对搜索引擎的友好新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好

额外补充点：新巩固

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>HTML5 页面布局</title><link rel="stylesheet" href="./css/index.css">
</head>
<body><header><div class="container"><a href="./index.html"><img src="./images/logo.png" alt="logo"></a><nav><a class='Home active' href="#">Home</a><a class='Course' href="#">Course</a><a class='Actual' href="#">Actual</a><a class='Plan' href="#">Plan</a><a class='FAQ' href="#">FAQ</a><a class='Notes' href="#">Notes</a></nav></div>  </header><section class="banner"><ul><li class="left"><a href="#"><img src="./images/banner/banner1.jpg" alt="1"></a></li><li class="active"><a href="#"><img src="./images/banner/banner2.jpg" alt="2"></a></li><li class="right"><a href="#"><img src="./images/banner/banner3.jpg" alt="3"></a></li></ul></section><section class="main"><aside><!-- <samp> 标签表示一段用户应该对其没有什么其他解释的文本字符。要从正常的上下文抽取这些字符时，通常要用到这个标签 --><h1>Recent  <samp>Course</samp></h1><dl><dt>Hyper Text Markup Language</dt><dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.</dd><dd><img src="./images/Course/05_05.png" alt="1"></dd></dl><dl><dt>Cascading Style Sheets</dt><dd>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.</dd><dd><img src="./images/Course/06_04.png" alt="2"></dd></dl><dl><dt>JavaScript</dt><dd>JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd><dd><img src="./images/Course/09_07.png" alt="3"></dd></dl><dl><dt>AngularJS</dt><dd>AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and...</dd><dd><img src="./images/Course/02_09.png" alt="4"></dd></dl></aside><article><h1>Welcome to <samp>Massive Open Online Course!</samp></h1><p>We provide the latest knowledge to help you cope with the changing world!</p><img src="./images/article.jpg" alt="11"><p>We hope that all the students who love the Internet can be more convenient access to learning resources, using the Internet thinking to change our learning.</p><p>Focus on IT skills education MOOC, consistent with the development trend of the Internet down to earth's MOOC. We are free, we only teach useful, we concentrate on education.</p></article></section><footer><div class="container"><p>Copyright © 2016 imooc.com All Rights Reserved.</p><span><img src="./images/icon/qq.png" alt="1"><img src="./images/icon/sina.png" alt="2"><img src="./images/icon/weichat.png" alt="3"></span></div></footer>
</body>
</html>

style.css

/* 重置样式 通配符*/
*{font-family: Arial;font-size:14px;margin: 0;padding: 0;border: none
}
ul li {list-style: none
}
a{text-decoration: none
}
/* 头部 */
header{position: relative;height: 80px;background-color: #000000;
}
header:after{position: absolute;bottom:0;left: 0;width: 100%;height: 7px;content: '';background-color: #d6d6d6;
}
header > .container{position: relative;z-index: 1;width:1260px;margin: 0 auto}
header > .container > a{display: block;float: left;margin:5px 25px
}
header > .container > nav{float: right;
}
header > .container > nav > a{display: block;float: left;text-align: center;font-size: 24px;color: #ffffff;width:100px;height: 73px;line-height: 73px;}
header > .container > nav > a.Home {background-color: #433b90}
header > .container > nav > a.Course {background-color: #017fcb}
header > .container > nav > a.Actual {background-color: #78b917}
header > .container > nav > a.Plan {background-color: #feb800}
header > .container > nav > a.FAQ {background-color: #f27c01}
header > .container > nav > a.Notes {background-color: #d40112}
header > .container > nav > a:hover,
header > .container > nav > a.active{padding-bottom: 7px
}
/* Banner */
.banner{position: relative;background-color: #eaeaea;
}
.banner:after{position: absolute;bottom: 0;left: 0;width: 100%;height: 6px;content: '';background-color: #d6d6d6;
}
.banner > ul{position: relative;width: 1260px;height: 538px;margin: 0 auto;padding-top: 10px;}
.banner > ul > li{position: absolute;width: 610px;height: 300px;overflow: hidden;
}
.banner > ul > li.active{z-index: 2;top: 37px;left: 0;right: 0;width: 960px;height: 460px;margin: auto;border: 1px solid #ffffff;box-shadow: 20px 20px 22px rgba(0, 0, 0, .2)
}
.banner > ul > li.left{z-index: 1;top: 0;bottom: 0;left: 0;margin: auto;box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .35)
}
.banner > ul > li.right{z-index: 1;top: 0;bottom: 0;right: 0;margin: auto;box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .35)
}
.banner > ul > li > a > img{position: absolute;left: -30%;height: 100%;
}
/* main */
.main{position: relative;width: 1200px;height: 500px;margin: 37px auto 0 auto}
.main > aside{float: left;width: 450px;
}
.main > aside > h1{font-size: 30px;font-weight: lighter;margin-bottom: 23px;
}
/* <samp> 标签表示一段用户应该对其没有什么其他解释的文本字符。
要从正常的上下文抽取这些字符时，通常要用到这个标签。*/
.main > aside > h1 >samp{font-size: 30px;color: #7c7c7c;
}
.main > aside > dl{position: relative;display: block;margin-bottom: 23px;height: 74px;
}
.main > aside > dl > dt{position: absolute;top: -1px;left: 92px;font-size: 16px;font-weight: bold;line-height: 16px;text-decoration: underline;
}
.main > aside > dl > dd:first-of-type{position: absolute;left: 0;
}
.main > aside > dl > dd:first-of-type{position: absolute;top: 20px;left: 92px;
}
.main > article{float: right;width: 700px;overflow: hidden;
}
.main > article > h1{font-size: 30px;font-weight: lighter;margin-bottom: 23px;
}
.main > article > h1 >samp{font-size: 30px;color: #7c7c7c;
}
.main > article > p,
.main > article > img{margin-bottom: 20px
}
footer{position: relative;background-color: #000000;
}
footer:before{position: absolute;z-index: -1;top: -6px;left: 0;width: 100%;height: 7px;content: '';background-color: #d6d6d6;
}
footer > .container{width: 1200px;margin: 0 auto;height: 63px;
}
footer > .container > p{float:left;line-height: 63px;color: #ffffff;font-size: 14px;
}
footer > .container > span{float: right;margin: 14px 30px}

效果图：

HTML5 页面布局【结合案例】相关推荐

html5 移动页面,html5入门到精通，移动设备的html5页面布局
移动设备的html5页面布局我们结合移动设备(手机和平板电脑)的特性,介绍HTML5中新增的语义化标签元素,以及在移动Web浏览器下Web页面布局的知识及例子. HTML5标准添加的新元素当中,用于 ...
html5页面整体布局,HTML5页面布局网页的基本结构
这篇HTML5页面布局我们来学习组成HTML5网页的基本结构都包含了哪些内容,首先先来看下源代码. 欢迎关注头条号/自学编程 hello world 以上就是一个HTML5网页的最基本结构. 下面我们 ...
移动设备HTML5页面布局
在HTML5标准添加的新元素中,用于常见页面结构的包括header footer footer nav aside aside article section hgroup . 下面简单介绍一下这个 ...
HTML5页面布局基础
声明:本人的所有博客皆为个人笔记,作为个人知识索引使用,因此在叙述上存在逻辑不通顺.跨度大等问题,希望理解.分享出来仅供大家学习翻阅,若有错误希望指出,感谢! 区块标签(sections) 区块标签和 ...
【Web】CSS（No.32）Css页面布局经典案例（二）《云道商城首页》
需要素材点击图片联系我或私信.评论效果图 html源码: <!DOCTYPE html> <html lang="en"> <head>< ...
【Web】CSS（No.34）Css页面布局经典案例（四）《米柚官网》
需要素材点击图片联系我或私信.评论效果图: html源码: <!DOCTYPE html> <html lang="en"><head>< ...
html5 移动端单页面布局
序移动端的web网页使用的是响应式设计,但一般我们看到的网站页面都是跳转刷新得到的,比如通过点击一个menu后进入到另一个页面今天来说下是移动端的单页面的布局.单页面就是一切操作和布局都 ...
html5响应式布案例,HTML5响应式布局案例
在本案例中,网页的界面布局将会根据当前浏览器的大小进行变化,做出响应.主要使用CSS的@media来进行设计.实现效果类似一淘网,一淘网使用的就是响应式布局.案例代码如下: (1)HTML代码如下: ...
一步一步构建手机WebApp开发——页面布局篇
继上一篇:一步一步构建手机WebApp开发--环境搭建篇过后,我相信很多朋友都想看看实战案例,这一次的教程是页面布局篇,先上图: 如上图所示,此篇教程便是教初学者如何快速布局这样的页面.废话少说,直接 ...
04-前端技术_盒子模型与页面布局
目录三,盒子模型与页面布局 1,网页布局介绍 1.1 固定布局 1.2 流式布局(Liquid Layout) 1.3 栅格化布局 1.4 自适应布局(Adaptive Layout) 1.5 响应 ...

HTML5 页面布局【结合案例】

新布局的意义

style.css

效果图：

HTML5 页面布局【结合案例】相关推荐

最新文章

热门文章