zoukankan      html  css  js  c++  java

  • Html 网页布局（一）


    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="decsription" content="一列布局变混合布局" />
    6. <title>一列布局混合布局</title>
    7. <style type="text/css">
    8. body {
    9. 	margin: 0;
    10. 	padding: 0; /*清楚默认样式*/
    11. }

    13. .top {
    14. 	height: 100px;
    15. 	background: blue;
    16. }
    17. .nav{height:100px;1000px;background:#f60;margin:0 auto;}
    18. .main {
    19. 	 800px;
    20. 	height: 600px;
    21. 	background: #ccc;
    22. 	margin: 0 auto;
    23. }
    24. .left{200px;height:600px;background:yellow;float:left;}
    25. .right{600px;height:600px;background:#369;float:right;}
    26. .sub_l{400px;height:600px;background:#218;float:left;}
    27. .sub_r{200px;height:600px;background:green;float:right;}
    28. .sub_r_up{200px;height:200px;background:#765;}
    29. .sub_r_down{200px;height:300px;background:red;}
    30. .bottom {
    31. 	 800px;
    32. 	height: 100px;
    33. 	background: #b0b;
    34. 	margin: 0 auto;
    35. }
    36. </style>
    37. </head>
    38. <body>
    39. 	<div class="top">
    40. 		<div class="nav"></div>
    41. 	</div>
    42. 	<div class="main">
    43. 		<div class="left"></div>
    44. 		<div class="right">
    45. 			<div class="sub_l"></div>
    46. 			<div class="sub_r">
    47. 				<div class="sub_r_up"></div>
    48. 				<div class="sub_r_down"></div>
    49. 			</div>
    50. 		</div>
    51. 	</div>
    52. 	<div class="bottom"></div>
    53. </body>
    54. </html>
    我生活的地方，我为何要生活。
  • 相关阅读:
    《互联网时代》第三集·能量
    《互联网时代》第二集·浪潮
    java 基础类库之 SysFun
    java 基础类库之 SQLFun
    java 基础类库之 FormatFun
    Java 之 JDBC
    WepE
    MySql学习笔记
    Oracle学习笔记——点滴汇总
    Linux学习笔记——基于鸟哥的Linux私房菜
  • 原文地址：https://www.cnblogs.com/hsd1727728211/p/5330565.html
Copyright © 2011-2022 走看看