程序博客网 > 电脑数据恢复专家

html列表、块

来源：互联网 发布：电脑数据恢复专家 编辑：程序博客网 时间：2024/06/06 03:03

无序列表

标签：<ul、>、<li>

属性：disc、circle、square


有序列表

标签：<ol>、<li>

属性：A、a、l、start


嵌套列表

标签：<ul>、<ol>、<li>


自定义列表

标签：<dl>、<dt>、<dd>


html块元素

块元素在显示的时候会以新的一行开始

如：h1、p、ul


html内联元素

内联元素一般不会以新行开始

如：b、a、img


html <div>元素

div元素也被称为块元素，组合html元素的容器


html <span>元素

span元素是内联元素，可以作为文本的容器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>布局</title>
  6.     <style type="text/css">
  7.         body{
  9.             margin: 0px;
  11.         }
  12.         #background{
  13.             background-color: antiquewhite;
  14.             width: 100%;
  15.             height: 1000px;
  16.         }
  17.         #head{
  18.             background-color: coral;
  19.             width: 100%;
  20.             height: 20%;
  22.         }
  23.         #left{
  24.             background-color: aqua;
  25.             width: 30%;
  26.             height: 50%;
  27.             float: left;
  28.         }
  29.         #center{
  30.             background-color: bisque;
  31.             width: 40%;
  32.             height: 50%;
  33.             float: left;
  34.         }
  35.         #right{
  36.             background-color: cyan;
  37.             width: 30%;
  38.             height: 50%;
  39.             float: left;
  40.         }
  41.         #bottom{
  42.             background-color: brown;
  43.             width: 100%;
  44.             height: 20%;
  45.             clear: both;
  46.         }
  47.         #footer{background-color: grey;
  49.             width: 100%;
  50.             height: 10%;
  51.             clear: both;
  52.         }
  53.     </style>
  54. </head>
  55. <body>
  56.     <div id="background">
  57.         <div id="head">
  58.             <p>android开发教程之view组件添加边框示例</p>
  59.         </div>
  60.         <div id="left">
  61.             <table height="100%" width="100%" style="background-color: cornsilk">
  62.                 <tr>
  63.                     <td colspan="3" width="100%" height="20%" style="background-color: gold">这是头部</td>
  64.                 </tr>
  65.                 <tr>
  66.                     <td width="30%" height="50%" style="background-color: yellow">
  67.                         <ol type="a">
  68.                             <li>第一条</li>
  69.                             <li>第二条</li>
  70.                             <li>第三条</li>
  71.                             <li>第四条</li>
  72.                         </ol>
  73.                     </td>
  74.                     <td width="40%" height="50%" style="background-color: red">这是中间</td>
  75.                     <td width="30%" height="50%" style="background-color: greenyellow">这是右边</td>
  76.                 </tr>
  77.                 <tr>
  78.                     <td colspan="2" width="50%" height="20%" style="background-color: aquamarine">这是左边</td>
  79.                     <td width="50%" height="20%">这是右边</td>
  80.                 </tr>
  81.                 <tr>
  82.                     <td colspan="3" style="background-color: burlywood">这是下面</td>
  83.                 </tr>
  84.             </table>
  85.         </div>
  86.         <div id="center">
  88.             <table height="100%" width="100%" style="background-color: cornsilk">
  89.                 <tr>
  90.                     <td colspan="3" width="100%" height="20%" style="background-color: gold">这是头部</td>
  91.                 </tr>
  92.                 <tr>
  93.                     <td width="30%" height="50%" style="background-color: yellow">
  94.                         <ol type="a">
  95.                             <li>第一条</li>
  96.                             <li>第二条</li>
  97.                             <li>第三条</li>
  98.                             <li>第四条</li>
  99.                         </ol>
  100.                     </td>
  101.                     <td width="40%" height="50%" style="background-color: red">这是中间</td>
  102.                     <td width="30%" height="50%" style="background-color: greenyellow">这是右边</td>
  103.                 </tr>
  104.                 <tr>
  105.                     <td colspan="2" width="50%" height="20%" style="background-color: aquamarine">这是左边</td>
  106.                     <td width="50%" height="20%">这是右边</td>
  107.                 </tr>
  108.                 <tr>
  109.                     <td colspan="3" style="background-color: burlywood">这是下面</td>
  110.                 </tr>
  111.             </table>
  114.         </div>
  115.         <div id="right">
  116.             <table height="100%" width="100%" style="background-color: cornsilk">
  117.                 <tr>
  118.                     <td colspan="3" width="100%" height="20%" style="background-color: gold">这是头部</td>
  119.                 </tr>
  120.                 <tr>
  121.                     <td width="30%" height="50%" style="background-color: yellow">
  122.                         <ol type="a">
  123.                             <li>第一条</li>
  124.                             <li>第二条</li>
  125.                             <li>第三条</li>
  126.                             <li>第四条</li>
  127.                         </ol>
  128.                     </td>
  129.                     <td width="40%" height="50%" style="background-color: red">这是中间</td>
  130.                     <td width="30%" height="50%" style="background-color: greenyellow">这是右边</td>
  131.                 </tr>
  132.                 <tr>
  133.                     <td colspan="2" width="50%" height="20%" style="background-color: aquamarine">这是左边</td>
  134.                     <td width="50%" height="20%">这是右边</td>
  135.                 </tr>
  136.                 <tr>
  137.                     <td colspan="3" style="background-color: burlywood">这是下面</td>
  138.                 </tr>
  139.             </table>
  140.         </div>
  141.         <div id="bottom">
  142.             <p>
  143.                 需要注意的是我给TextureView的父容器RelativeLayout设置了Drawable,并设置了Padding。
  144.             </p>
  145.         </div>
  146.         <div id="footer">
  147.             <p>关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿</p>
  148.         </div>
  149.     </div>
  150. </body>



0 0
电脑数据恢复专家 电脑数据恢复专家
原创粉丝点击
热门IT博客
javascript获取当前月javascript获取当前月
amd rx470 linux驱动amd rx470 linux驱动
mac如何打开caa
手机时时彩看号软件
23种设计模式java
连战夫人面相知乎
cr什么意思网络用语
上传数据到ncbi
ios编程培训入门
java什么叫实例
网络直销的特点
拼多多与淘宝
淘宝进货的口子在哪儿
c语言 观察者模式
韩国超人气网络模特
做淘宝进销存的软件
视频声音变声软件
centos hadoop ssh
淘宝同步库存软件
mac解压rar软件
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 刺激战场服 赤焰战场 安乐战场 异星战场 绝地战场 无限战场 未来战场 战场女武神 魔兽战场 战场原黑仪 赤焰战场2 荣耀战场 年轻的战场 终结战场 战场图片 战场 真实的战场 战场原 真实战场 太平洋战场 中国战场 全球无限战场 刺激战场亚服 刺激战场灵敏度 国际服刺激战场 刺激战场轻量 刺激战场轻量版 刺激战场国际版 刺激战场国际 刺激战场图片 刺激战场国际版下载 虚拟战场空间2 东方战场全集 刺激战场新版本 刺激战场亚服下载 刺激战场名字 刺激战场画质助手 网游之进化战场 刺激战场国际服体验服 刺激战场2019无敌锁头挂免费版 亚服刺激战场

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里