您的位置：首页 > Web前端 > HTML5

HTML5学习（一）之页面布局

2016-08-24 10:56 537 查看 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>day1</title>
<style>
/**所有的H5的结构标签本质上来说就是一个div标签，只不过有意义而已*/
/*	*{
border: 1px solid red;
}*/
/*页面头部 header*/
header{
height: 150px;
background: #ABCDEF;
}

nav{
height: 30px;
background: #ff9900;
margin-top: 100px;
}
nav ul li {
width: 100px;
height: 30px;
float: left;
line-height: 30px;
}
div{ margin-top: 10px;
height: 1000px;
}
section{
height: 1000px;
width: 70%;
background: #ABCDEF;
float: left;
}
article{
background: #ff9900;
width: 30x;
margin:0 auto;
text-align: center;
}
aside{
height: 700px;
width: 28%;
background: #ABCDEF;
float: right;
}
footer{
height: 100px;
background: #ABCDEF;
clear: both;  /**清楚上面的DIV浮动的问题**/
margin-top: 10px;
}
</style>
</head>
<body>
<!--头标签-->
<header>
<p>这是一个Header的部分</p>
<nav>
<ul>
<li>首页</li>
<li>论坛</li>
<li>商城</li>
</ul>
</nav>
</header>

<div>
<!--页面的主题区域--->
<section>
<p>这是一个section的部分</p>
<article>
<h2>你是我的眼</h2>
<p>让我不知如何是好</p>
<p>你真的很好</p>
<p>加油GOGOGO!</p>
</article>
<hr />
<!--
作者：mxr_it@163.com
时间：2016-08-21
描述：hr线
-->
<article>
<h2>你是我的眼</h2>
<p>让我不知如何是好</p>
<p>你真的很好</p>
<p>加油GOGOGO!</p>
</article>
<hr />
<!--定义一组媒体内容以及它们的标题-->
<figure>
<figcaption>UFO</figcaption>
<p>UFO不明飞行物</p>
</figure>
<hr />
<figure>
<dt>DDS</dt>
<dd>大屌丝</dd>
</figure>
<hr />
<!--对话框标签-->
<dialog>
<dt>我帅吗？</dt>
<dd>我真的好帅啊！</dd>
<dt>我帅吗？</dt>
<dd>我真的好帅啊！</dd>
</dialog>
<hr />
<menu><!--命令菜单--->
<li>点击</li>
<li>右键</li>
</menu>
<span oncontextmenu="candan">右键单击我试试</span>
<menu type="context" id="candan">
<menuitem label="菜单一" onclick="alert('1')" icon="https://www.baidu.com/img/bd_logo1.png"></menuitem>
</menu>
<hr />
<!--温度条-->
<meter min="0" max="20" value="4" low="3" high="5"></meter>
<!--进度条-->
<progress max="100" id="pro" value="0"></progress>
<script>
var pro =document.getElementById('pro');
setInterval(function(){
pro.value += 1;
},200);
</script>
<hr />
<details><!--详细说明--->
<dd>这是什么啊？</dd><!--问题--->
<dt>这是HTML5</dt><!--描述--->
</details>
<hr />
<!--注释标签  rp为了解决浏览器兼容的问题 -->
<ruby>跨<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>
<hr />
<!--标签重点-->
女人系统是<mark>水电费</mark>水电费收到了吗
</section>
<!--页面旁边-->
<aside>
<p>这是一个aside的部</p>
<hgroup><!--h便签的父标签 定义标题组--->
<h3>女生宿舍被盗</h3>
<h3>女生宿舍被盗</h3>
<h3>女生宿舍被盗</h3>
</hgroup>
</aside>
</div>
<!--尾标题-->
<footer>
<p>这是一个footer的部分</p>
<hr/>
<!--
作者：mxr_it@163.com
时间：2016-08-21
描述：小的标签
-->
<small>法律条纹</small>
<small>联系我们</small>
<small>法律条纹</small>
</footer>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航