1.HTML代码
1 <header>头</header>2 <nav>导航栏</nav>3 <main>4 <article>左</article>5 <asIDe>右</asIDe>6 </main>7 <footer>底部</footer>
2.基本效果图:浏览器怎么改变大小,基本的排版都不会改变
3.CSS基本的排版,样式
1 <style> 2 *{ 3 margin: 0; 4 padding: 0; 5 } 6 header{ 7 wIDth: 100%; 8 height: 100px; 9 background-color: red;10 }11 nav{12 wIDth: 100%;13 height: 30px;14 background-color: green;15 }16 main{17 display: block;18 wIDth: 100%;19 height: 500px;20 background-color: chocolate;21 }22 main > article{23 display: block;24 wIDth: 80%;25 height: 100%;26 background-color: darkblue;27 float: left;28 }29 main > asIDe{30 display: block;31 wIDth: 20%;32 height: 100%;33 background-color: firebrick;34 float: right;35 }36 footer{37 wIDth: 100%;38 height: 80px;39 background-color: hotpink;40 }41 </style>
4.解决ie8以下版本的兼容性问题
1 <!--<script> 2 /** 3 * 解决ie8及以下版本兼容问题 4 * 手动创建语义化标签 5 * 默认创建的都是行级元素 6 * 需要使用设置为块级元素: display: block; 7 */ 8 document.createElement("header"); 9 10 </script>-->11 <!--第二种方式 导入第三方插件-->12 <!--<script src="http://cdn.bootCSS.com/HTML5shiv/3.7.2/HTML5shiv.min.Js"></script>-->13 <!--<script src="../Js/HTML5shiv.min.Js"></script>-->总结
以上是内存溢出为你收集整理的h5-语义化标签的兼容性问题全部内容,希望文章能够帮你解决h5-语义化标签的兼容性问题所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)