登录  /  注册
博主信息
博文 32
粉丝 0
评论 0
访问量 23230
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
实战——页面编辑,html5 新标签——2018年8月26日19点41分
Nevermore的博客
原创
727人浏览过

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>后台管理首页</title>
	<link rel="stylesheet" type="text/css" href="static/css/style.css">
	<style type="text/css">

	</style>
</head>
<body>
<header role="header">
  <div>
     <h1>后台管理系统</h1>
     <nav>
        <ul>
          <li>欢迎用户:</li>
          <li><a href="">修改密码</a></li>
          <li><a href="" onclick="logout()">退出登入</a></li>
        </ul>
     </nav>
   <div>
</header>

<main role="main"> 
    <article role="content">
        <iframe src="frist.html" name="main"></iframe>
        <footer role="copyright" >
         <p><a href="">lw</a>©版权所有</p>
         </footer>
     </article>


    <aside role="menu">
         <nav>
         	<ul>
         		<li><a href="setting.html" target="main">系统设置</a></li>
         		<li><a href="user.html" target="main">用户管理</a></li>
         		<li><a href="artical.html" target="main">文档管理</a></li>
         		<li><a href="category.html" target="main">分类管理</a></li>
         		<li><a href="product.html" target="main">产品管理</a></li>
         	</ul>
         </nav>
    </aside>
</main>
</body>
</html>

运行实例 »

实例

*{
	margin: 0;
	padding:0;
 }


li{list-style-type:none;}
a{text-decoration-line: none;color: #0D5F3E;}
a:hover {color:brown;text-decoration-line: underline; }
body{background: #efefef;}



header{width: 100%;
	   background: linear-gradient(lightblue, #efefef);
       overflow: hidden;
       border-bottom: 1px solid gray;
       }
header h1{margin-left: 402.5px;font-weight: lighter;}
header ul{float:right;
         display: inline;
         margin-right: 30px;
         }
header ul li{float: left; 
             padding-left: 10px;

             }

main {width: 1000px;
	  height:800px;
	  overflow: hidden;
	  margin:0 auto;
	  padding-left: 200px;
	   } 
main article {width: 100%; 
	          min-height: 800px; 
	          float: left;
	          }
main aside {float: left;
	        background:linear-gradient(to left,lightblue, #efefef);
	        width: 200px;
	        min-height: 650px;
            margin-left: -100%;
            position: relative;
            left: -200px;    
            border-right: 1px solid gray;

            }
main aside nav ul  li  {font-size: 25px;line-height: 120px } 
main article iframe {min-width: 100%;min-height: 650px;border:none;margin: auto;}
main article p{text-align: center;}

运行实例 »

点击 "运行实例" 按钮查看在线实例

点击 "运行实例" 按钮查看在线实例

QQ图片20180826194234.png

QQ图片20180826194943.jpg

html5新增的语义化的布局标签

注:布局标签默认都是块级元素: display: block;

1.<header>头部页眉

2.<footer>页脚

3.<main>主体,每个页面仅限一个

4.<article>文档

5.<aside>边栏

6.<nav>导航

7.<section>区块

8.<div>自定义区块,可放javascript或其它


导航用: <ul><li><a>


属性

1.role="角色" : 该标签的功能或用途,如 role="banner"

2.


***********************************************************************


导航:

<nav role="navigation">

  <ul>

    <li><a href="">导航1</a></li>

    <li><a href="">导航1</a></li>

    <li><a href="">导航1</a></li>

  </ul>

</nav>


***********************************************************************


头部:通常包括h1~h6标题,

<header role="top">

  <h1>标题</h1>

  <nav>....</nav>

</header>


***********************************************************************


文档:

<article role="article" id="art">

  <h2>文章标题</h2>

  <p>段落</p>

</article>


<article>标签中可以包含各种类型的标签,就是一个容器,可以是文章,小工具,电影...

<article>可以包括一个或多个<section>,也可以有<header><footer><nav>...


***********************************************************************


<main role="main">

  ...

</main>


<main>一个页面仅允许出现一次,表示主体内容,不允许放在其它标签内

<main>内部可以是任何标签


***********************************************************************


批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学