下面是html代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name ="viewport" content="width = device-width,initial-scale=1">
<title>index01</title>
<link href="style01.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="heading">第一</div>
<div class="container">
<div class="left">第二</div>
<div class="main">第三</div>
<div class="right">第四</div>
</div>
<div class="footing">第五</div>
</body>
</html>
下面是css3代码
*{
margin:0px
padding: 0px
}
.heading,
.container,
.footing{
margin: 10px auto
}
.heading{
height: 100px
background-color: red
}
.left,
.right,
.main{
height: 300px
background-color: yellow
}
.footing{
height: 100px
background-color: gray
}
<!--media="only screen and (max-width:640px)" 这句话的意思是:只要当渲染屏幕的宽度不大于640px的时候才会使用这个样式表-->
@media screen and (min-width: 960px){
.heading,
.container,
.footing{
width:960px
}
.left,
.main,
.right{
float: left
height: 500px
}
.left,
.right{
width:200px
}
.main{
margin: 0px 5px
width:550px
}
.container{
height: 500px
}
}
@media screen and (min-width: 600px) and (max-width: 960px){
.heading,
.container,
.footing{
width: 600px
}
.left,
.main{
float: left
height:400px
}
.right{
display: none
}
.left{
width: 160px
}
.main{
width: 435px
margin-left: 5px
}
.container{
height: 400px
}
}
@media screen and (max-width: 600px){
.heading,
.container,
.footing{
width: 400px
}
.left,
.right{
width: 400px
height: 100px
}
.main{
margin-top: 10px
width:400px
height:200px
}
.right{
margin-top: 10px
}
.container{
height: 420px
}
}
这样就可以实现简单的响应式布局！如果你想要了解的话，可以到华清远见学习一下。我就是在那里学习的。
<header>标签
<header>标签定义文档的页眉（介绍信息）
用法：
<header><h1>windyauang的Dreamweaver专栏</h1></header>
<nav>标签
<nav>标签定义导航链接的部分
用法：
<nav>
<ul>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四</a></li>
</ul>
</nav>
<section>标签
<section>标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分
用法： <section>
<h1>标题一</h1>
<p>文章段落内容</p>
</section>
<article>标签
<article>标签定义外部的内容。 外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自blog的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。总之，可以理解为article所表示的就是文章内容。
用法：<article>
<a href="#">文章内链接</a><br />
文章内容文章内容文章内容
</article>
<aside>标签
<aside>标签定义article以外的内容。aside的内容应该与article的内容相关，如上图所示，它类似于布局中的辅助侧边栏。
用法： <aside>
<h4>小标题</h4>
段落内容段落内容
</aside>
<footer>标签
<footer>标签定义section或document的页脚。在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息，也就是类似于版权信息的东西。
用法： <footer>
页脚文字，版权信息等
</footer>
整体的Html5代码应该如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<header><h1><a href="#">windyauang的Dreamweaver专栏-Html5布局示范文档</a></h1></header>
<nav>
<ul>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四</a></li></ul>
</nav>
<section>
<header>内容标题</header>
<article>文章内容</article>
<footer>文章版权内容</footer>
</section><aside>相关内容</aside>
<footer>页脚、页面版权内容</footer>
</body>
1、在电脑桌面空白处单击右键，新建一个记事本并打开
2、在新建文件中输入如下代码。 html语言都是以<html><head><title><body>等标签开始，以</html></head></title></body>标签作为结束。
3、接下来要在<title></title>标签中间输入标题（如个人网页）在<body></body>中输入“自己做的第一个网页，厉害吧！”完成后点击保存。并将记事本后缀名.txt改为.html格式
4、将记事本重命名为.html格式后，出现如下格式。
5、双击打开此文件就会出现浏览器网页效果了。
扩展资料：
前端和后端的区别：
1、展示方式
前端指的是用户可见的界面，网站前端页面也就是网页的页面开发，比如网页上的特效、布局、图片、视频，音频等内容。前端的工作内容就是将美工设计的效果图的设计成浏览器可以运行的网页，并配合后端做网页的数据显示和交互等可视方面的工作内容。
后端是指用户看不见的东西，通常是与前端工程师进行数据交互及网站数据的保存和读取，相对来说后端涉及到的逻辑代码比前端要多，后端考虑的是底层业务逻辑的实现，平台的稳定性与性能等。
2、所用技术
前端开发用到的技术包括但不限于html5、css3、javascript、jquery、Bootstrap、Node.js 、Webpack、AngularJs、ReactJs、VueJs等技术。
后端开发以java为例，主要用到的包括但不限于Struts、spring、springmvc、Hibernate Http协议、Servlet、Tomcat服务器等技术。
3、工作职责
前端工程师主要的工作职责分为三大部分，分别是传统的Web前端开发，移动端开发和大数据呈现端开发。
后端工程师的主要职责也集中在三大部分，分别是平台设计、接口设计和功能实现。
4、知识结构
在知识结构方面，前端开发涉及到的内容包括Html、CSS、JavaScript、Android开发（采用Java或者kotlin）、iOS开发（采用OC或者Swift）、各种小程序开发技术（类Html），随着前端开发任务的不断拓展，前端开发后端化也是一个较为明显的趋势。
后端开发的重点在于算法设计、数据结构、性能优化等方面，在具体的功能实现部分可以采用Java、Python或者PHP等编程语言来实现。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）