HTML中布局

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8" />
  5         <title></title>
  6         <link rel="stylesheet" type="text/css" href="css/style.css"/>
  7         <style type="text/css">
  8             h2{text-align: center;color: red;}
  9
 10         </style>
 11     </head>
 12     <body>
 13
 14         <h2>布局1</h2>
 15         <div style="background-color: black;">
 16                     <div class="box1">
 17                     <header class="box1-1">header</header>
 18                     <menu class="box1-2">menu</menu>
 19                     <div class="box1-3">siderbar</div>
 20                     <div class="box1-4">content</div>
 21                     <div class="box1-5">news</div>
 22                     <div class="box1-6">service</div>
 23                     <div class="box1-7">tip</div>
 24                     <div class="box1-8">footer</div>
 25                 </div></div>
 26         <h2>布局2</h2>
 27         <div style="background-color: darkslategray;">
 28                     <div class="box2">
 29                     <div class="box2-1">head</div>
 30                     <div class="box2-2">menu</div>
 31
 32                     <div class="box22">
 33                         <div class="box2-3">sidebar</div>
 34                         <div class="box2-4">activity</div>
 35                         <div class="box2-5">banner</div>
 36                         <div class="box2-6">photo</div>
 37                         <div class="box2-7">service</div>
 38                     </div>
 39                     <div class="box2-8">footer</div>
 40                 </div></div>
 41         <h2>布局3</h2>
 42         <div style="background-color: black;">
 43             <div class="box3">
 44                 <div class="box3-1">head</div>
 45                 <div class="box3-2">menu</div>
 46                 <div class="box3-3">scrool</div>
 47                 <div class="box3-4">content</div>
 48                 <div class="box3-5">photo</div>
 49                 <div class="box3-6">introduc</div>
 50                 <div class="box3-7">friendlink</div>
 51                 <div class="box3-8">footer</div>
 52             </div>
 53         </div>
 54         <h2>布局4</h2>
 55         <div style="background-color: darkslategray;">
 56             <div class="box4">
 57                 <div class="box4-1">head</div>
 58                 <div class="box44">
 59                     <div class="box4-2">content</div>
 60                     <div class="box4-3">service</div>
 61                 </div>
 62                 <div class="box4-4">sidebar</div>
 63                 <div class="box4-5">joinus</div>
 64                 <div class="box4-6">footer</div>
 65             </div>
 66         </div>
 67         <h2>布局5</h2>
 68         <div style="background-color: black;">
 69             <div class="box5">
 70                 <div class="box55">
 71                     <div class="box56">
 72                                     <div class="box5-1">nav</div>
 73                                     <div class="box5-2">list</div>
 74                                 </div>
 75                                 <div class="box5-3">main</div>
 76
 77                                 <div class="box57">
 78                                     <div class="box5-4">news</div>
 79                                     <div class="box5-5">guild</div>
 80                                     <div class="box5-6">service</div>
 81                                 </div></div>
 82                 <div class="box5-7">footer</div>
 83             </div>
 84         </div>
 85         <h2>布局6</h2>
 86         <div style="background-color: darkslategray;">
 87             <div class="box6">
 88                 <div class="box6-1">head</div>
 89                 <div class="box6-2">sidebar</div>
 90
 91                 <div class="box67">
 92                     <div class="box6-3">content</div>
 93                     <div class="box6-4">news</div>
 94                 </div>
 95
 96                 <div class="box6-5">service</div>
 97                 <div class="box6-6">guild</div>
 98                 <div class="box6-7">regsiter</div>
 99                 <div class="box6-8">footer</div>
100             </div>
101         </div>
102         <h2>布局7</h2>
103         <div style="background-color: black;">
104             <div class="box7">
105                 <div class="box7-1">head</div>
106                 <div class="box7-2">title</div>
107                 <div class="box7-3">title</div>
108                 <div class="box7-4">title</div>
109                 <div class="box7-5">content</div>
110                 <div class="box7-6">content</div>
111                 <div class="box7-7">content</div>
112                 <div class="box7-8">footer</div>
113             </div>
114         </div>
115         <h2>布局8</h2>
116         <div style="background-color: darkslategray;">
117             <div class="box8">
118                 <div class="box8-1">head</div>
119                 <div class="box8-2">menu</div>
120
121             <div class="box88">
122                 <div class="box89">
123                             <div class="box8-3">hot</div>
124                             <div class="box8-4">status</div>
125                             <div class="box8-5">friendlink</div>
126                 </div>
127
128                             <div class="box810">
129                                 <div class="box8-6">news</div>
130                                 <div class="box8-7">loginba</div>
131                                 <div class="box8-8">service</div>
132                                 <div class="box8-9">joinus</div>
133                                 <div class="box8-10">production</div>
134                             </div>
135             </div>
136                 <div class="box8-11">footer</div>
137             </div>
138         </div>
139
140     </body>
141 </html>

css：

  1  *{margin: 0;padding: 0;}
  2             .box1,.box2,.box3,.box4,.box5,.box6,.box7,.box8{text-align: center;font-size: 30px;}
  3
  4
  5             /*布局1*/
  6             .box1{width: 960px;height: 880px;margin: 0 auto; }
  7             .box1-1{height: 100px; background-color: red;}
  8             .box1-2{height: 50px; background-color: darkgrey; margin: 0;padding: 0;}
  9             .box1-3{height: 350px;width: 320px; background-color: darksalmon;float: left;}
 10             .box1-4{height: 350px;width: 640px;background-color: cornflowerblue;float:right;}
 11             .box1-5{width: 320px;height: 300px; background-color: blanchedalmond;float: left;}
 12             .box1-6{width: 320px;height: 300px; background-color: beige;float: left;}
 13             .box1-7{width: 320px;height: 300px;background-color: red;float: right;}
 14             .box1-8{height:80px;background-color: yellow;clear: both;}
 15
 16              /*布局2*/
 17             .box2{width: 960px;height: 1040px; margin: 0 auto;}
 18             .box2-1{height: 100px;width: 960px; background-color: red; }
 19             .box2-2{height: 80px; background-color: #FFEBCD;}
 20             .box22{height: 800px;}
 21             .box2-3{width: 160px;height: 800px; background-color: deepskyblue;float: left;}
 22             .box2-4{width: 480px;height: 400px;background-color: blueviolet;float: left;}
 23             .box2-5{width: 320px;height: 400px;background-color: darkorange;float:right;}
 24             .box2-6{width: 800px;height: 200px;background-color: yellow;float: right;}
 25             .box2-7{width: 800px;height: 200px; background-color: darkgray;float: right;}
 26             .box2-8{height: 60px;width: 960px; background-color: darkolivegreen;}
 27
 28              /*布局3*/
 29             .box3{width: 960px;height: 1030px; margin: 0 auto;}
 30             .box3-1{height: 100px; background-color: red;}
 31             .box3-2{height: 80px; background-color: hotpink;}
 32             .box3-3{height: 300px;background-color: #6495ED;}
 33             .box3-4{width: 320px;height: 380px; background-color: #E9967A;float: left;}
 34             .box3-5{width: 240px; height: 380px; background-color: darkkhaki; float: left;}
 35             .box3-6{width: 400px;height: 380px; background-color: lightyellow;float: right;}
 36             .box3-7{width: 960px;height: 90px; background-color: brown; clear: both;}
 37             .box3-8{width: 960px;height: 80px; background-color: darkgoldenrod;clear: both;}
 38
 39              /*布局4*/
 40             .box4{width:960px;height: 890px;margin: 0 auto;}
 41             .box4-1{height: 100px;background-color: red;}
 42             .box44{width: 640px;height: 500px;float: left;}
 43             .box4-2{width: 640px; height: 200px; background-color: #FFEBCD;}
 44             .box4-3{width: 640px;height: 300px;background-color: #A9A9A9;}
 45             .box4-4{width: 320px;height: 500px;background-color: #00BFFF;float: right;}
 46             .box4-5{height: 90px;background-color: lightblue;clear: both;}
 47             .box4-6{height:200px; background-color:green;clear: both;}
 48
 49              /*布局5*/
 50             .box5{width: 960px;height: 800px;margin: 0 auto;}
 51             .box55{width: 960px;height: 720px;}
 52             .box56{width: 160px;height: 720px; float: left;}
 53             .box5-1{width: 160px; height: 120px; background-color: red;}
 54             .box5-2{width: 160px; height: 600px; background-color: dodgerblue;}
 55             .box5-3{width: 480px;height: 720px;background-color: #FF8C00; float: left;}
 56             .box57{width: 320px;height: 720px;float: right;}
 57             .box5-4{height: 120px;width: 320px; background-color: #008000;}
 58             .box5-5{height: 300px;width: 320px;background-color: #B8860B;}
 59             .box5-6{width: 320px;height: 300px; background-color: #8A2BE2;}
 60             .box5-7{height:80px;background-color:red;clear: both;}
 61
 62              /*布局6*/
 63             .box6{width: 960px;height: 680px;margin: 0 auto; }
 64             .box6-1{height: 100px; background-color: red;}
 65             .box6-2{width: 320px; height: 260px; background-color: #FFEBCD;float: left;}
 66             .box67{width: 480px;height: 260px;float: left;}
 67             .box6-3{height: 130px;width: 480px; background-color: blue;}
 68             .box6-4{height: 130px;width: 480px;background-color: green;}
 69             .box6-5{width: 160px;height: 260px; background-color: darkgoldenrod;float: right;}
 70             .box6-6{width: 560px;height: 220px; background-color: gold;float: left;}
 71             .box6-7{width: 400px;height: 220px;background-color: #8A2BE2;float: right;}
 72             .box6-8{height:100px;background-color: #FFEBCD;clear: both;}
 73
 74              /*布局7*/
 75             .box7{width: 960px;height:650px;margin: 0 auto;}
 76             .box7-1{height: 100px; background-color: #556B2F;}
 77             .box7-2{width: 320px; height:120px; background-color: #A52A2A;float: left;}
 78             .box7-3{width: 320px; height: 120px;background-color: #E9967A;float: left;}
 79             .box7-4{width: 320px; height: 120px;background-color: #F5F5DC;float:right;}
 80             .box7-5{width: 320px;height: 350px; background-color: #6495ED;float: left;}
 81             .box7-6{width: 320px;height: 350px; background-color: burlywood;float: left;}
 82             .box7-7{width: 320px;height: 350px;background-color: darkorange;float: right;}
 83             .box7-8{height:80px;background-color: #BDB76B;clear: both;}
 84
 85              /*布局8*/
 86             .box8{width: 960px;height:770px;margin: 0 auto;}
 87             .box8-1{height: 100px; background-color: red;}
 88             .box8-2{height:50px; background-color: #A9A9A9;}
 89             .box88{width: 960px; height: 520px;}
 90             .box89{width: 320px;height: 520px;float: left;}
 91             .box8-3{width: 320px; height: 180px;background-color: #E9967A;}
 92             .box8-4{width: 320px; height: 160px;background-color: #008000;}
 93             .box8-5{width: 320px;height: 180px; background-color: coral;}
 94             .box810{width: 640px;height: 520px;float: right;}
 95             .box8-6{width: 480px;height: 185px; background-color: #FFEBCD;float: left;}
 96             .box8-7{width: 160px;height: 185px;background-color: #F5F5DC;float: left;}
 97             .box8-8{width: 400px;height: 175px; background-color: darksalmon;float: left;}
 98             .box8-9{width: 240px;height: 175px; background-color: blueviolet;float: left;}
 99             .box8-10{width: 640px;height: 160px; background-color: #B8860B;float: right;}
100             .box8-11{height:100px;background-color: #BDB76B;clear: both;}

原文地址：https://www.cnblogs.com/chen-wei123/p/12573255.html

时间： 2024-10-05 14:44:55

HTML中布局的相关文章

自定义layout中布局文件的属性

以前一直都是用ndroid自带的属性,突然发现自定义xml属性也是非常重要,于是总结了一下. 在values文件夹下新建的attr.xml文件,该文件为自定义属性. //attr.xml <?xml version="1.0" encoding="utf-8"?> <resources>   <

Android中布局的一些常识

一般我们都会在xml文件中去定义要在程序中使用的一些控件,最新的ADT会为每一个activity同时生成两个xml文件,一个是activity_main.xml,另一个就是fragment_main.xml.刚开始我不懂两者的区别,就在fragment_main.xml中定义在activity中使用的控件,Eclipse不会报错.如果不添加控件的一些事件如点击,应用程序就可以正常运行.但如果添加了控件的事件处理,运行时应用程序就会崩溃. 通过查看Logcat,系统提示空指针异常,但我怎么也查不

Android 开发中布局加载的原理

Android 加载的优先级是怎么样的? 我现在不了解他是如何加载的额> 我现在遇到的问题是我的app 主要是面向 720 和 480 的手机但是有一些 320 的手机安装的时候直接崩溃你的意思是 android 内部加载的布局文件的话 Android 加载内部机制: 第一: 加载指定布局的的 layout 例如 : Layout-hdpi 第二: 如果没有 layout-720 就去加载 layout! 这样就解决了 APP 中的error: java.lang.Unsup

关于负margin在页面中布局的应用

本文转载自:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html. 今天再写一个布局的时候用到一个margin-top是负值的情况,本来不是要用负值,但突然发现负值也能达到我要的效果,随后百度了一下,才发现了大牛的好文章,转载至此,算是学习一个经验,进行记录,同样也给分享给没看到的同学. 以下是正文负数给人总是一种消极.否定.拒绝之感,不过有时利用负margin可以达到奇妙的效果,今天就表一表负值在页面布局中的应用.这里说的

Android中布局文件中使用onClick属性

安卓开发中,布局文件中的控件有一个属性,是onClick,例如: <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="onButtonClick" android:text="Button" /> 在相

Android中布局优化总结

1.<include> <merge> <viewStub>标签 2.FrameLayout>RelationLayout>LinearLayout 3.LinearLayout中少用layout_weight参数 4.布局中减少Layout层次嵌套和不必要节点,代码中减少不必要的infalte(e.g. 局部变量->全局变量) 5.用TextView代替TextView+ImageView的组合(实用drawableTop属性等) 6.首次不需要显示

认识CSS中布局之文档流、浮动、定位以及叠放次序

前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流普通流又被称为文档流或者标准流,普通流是指网页内标签元素正常情况下会按照自上而下,自左向右按顺序排列.即块级元素独占一行,多个块级元素存在会自上而下顺序排列,多个行内元素会共占一行,自左向右排列. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 &l

Android中布局文件的创建

在 Android应用程序中,界面是通过布局文件设定的.布局文件采用XML格式,每个应用程序默认包含一个主界面布局文件,该文件位于项目的 res/layout 目录中.接下来创建一个“布局”程序,此时会看到一个界面设计面板,如图1所示. 图1 布局文件从图1中可以看出,布局文件窗口中有两个选项卡,分别是 Graphical Layout.activity_main.xml.其中 Graphical Layout是布局文件的图形化视图,在该视图中可以通过鼠标将 Palette 窗口中的控件直接拖

Android中布局的特点

常用布局:[线性布局]:1.有两个布局方向:水平或者竖直:2.在竖直布局下:左对齐.右对齐.水平居中生效:3.在水平布局下:顶部对齐.底部对齐.竖直居中生效. 总结:[在相应布局的方向对其进行移动的话是不会生效的.]4.权重:按照[剩余]的屏幕的大小进行比例分配. [相对布局]:带align(对齐)的都是对齐.1.没有权重.方向!默认是左上角2.可以相对于父元素上下左右对齐,[layout_alignParentXXX] 相对于父元素,水平居中,竖直居中.水平竖直同时居中.[layo

Android 中布局的优化措施都有哪些？

1.尽可能减少布局的嵌套层级可以使用 sdk 提供的 hierarchyviewer 工具分析视图树,帮助我们发现没有用到的布局.2.不用设置不必要的背景,避免过度绘制比如父控件设置了背景色,子控件完全将父控件给覆盖的情况下,那么父控件就没有必要设置背景.3.使用<include>标签复用相同的布局代码4.使用<merge>标签减少视图层次结构该标签主要有两种用法:1) 因为所有的 Activity 视图的根节点都是 FrameLayout , 因此如果