接上一篇“HTML01随笔”

1.使用样式：
    内联样式：标签中使用style属性
    内部样式：<head>使用<style type="text/css">...</style>
    外部样式：使用<link rel="stylesheet" type="text/css" href="styles.css">
    
2.表格table：
    占据2列单元格：<td colspan="2"></td>
    占据2行单元格：<td rowspan="2"></td>
    边框border、单元格边距cellpadding、单元格间距cellspacing

3.无序列表：
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>
    
4.有序列表：
    <ol>
        <li>coffee</li>
        <li>tea</li>
        <li>milk</li>
    </ol>

5.自定义列表：<dl>标签开始，列表项<dt>开始，列表项定义<dd>开始
    <dl>
        <dt>coffee</dt>
        <dd>-black hot drink</dd>
        <dt>milk</dt>
        <dd>-white cold drink</dd>
    </dl>

6.块级元素、内联元素
    div：块级元素，其他元素的容器。float对于div布局有重要意义。
    span：内联元素，文本的容器
    
    块级：div    h1    ul    table    p
    内联：img    a    td    b
    
7.HTML布局：
    使用<div>元素
    使用table：table不是布局工具，不建议使用

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>DIV布局--float属性</title>

</head>

<body>

<div id="container" style="width:500px">

<div id="header" style="">

<h1 style="margin-bottom:0;text-align:center;">主要的网页标题</h1></div>

<div id="menu" style="height:200px;width:100px;float:left;">

<b>菜单</b><br>

HTML<br>

CSS<br>

JavaScript</div>

<div id="content" style="height:200px;width:400px;float:left;">

内容在这里</div>

<div id="footer" style="clear:both;text-align:center;">

版权 © runoob.com</div>

</div>

</body>

</html>

布局效果如图所示

HTML02--引用样式、表格、列表、div布局的更多相关文章

  1. CSS样式表——列表与布局

    列表方块:针对<ol></ol>和<ul></ul> 属性style="list-style:none"               ...

  2. Bootstrap -- 表格样式、表单布局

    Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...

  3. DIV+CSS列表式布局（同意图片的应用）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展示和字段转义处理

    在我们一般开发的系统界面里面,列表页面是一个非常重要的综合展示界面,包括有条件查询.列表展示和分页处理,以及对每项列表内容可能进行的转义处理,本篇随笔介绍基于Vue +Element基础上实现表格列表 ...

  5. PHP全栈开发（四）: HTML 学习（2. div 布局）

    无序列表,有序列表,自定义列表 无序列表是ul表示,每个元素用li表示 有序列表是ol表示,每个元素用li表示 <ul> <li>首页</li><li> ...

  6. DIV布局之道二：DIV块的嵌套，DIV盒子模型

    本文讲解DIV块布局的第二种使用方式:嵌套.“DIV嵌套”在有些文献中也被称为“盒子模型”,说的通俗一点就是嵌套(一个大的DIV块内部又包含一个或多个DIV块). 请看如下代码: CSS部分: CSS ...

  7. TP引用样式表和js文件及验证码

    TP引用样式表和js文件及验证码 引入样式表和js文件 <script src="__PUBLIC__/bootstrap/js/jquery-1.11.2.min.js"& ...

  8. table布局与div布局

      DIV与TABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据的.让TABLE做该做的事,并不是说页面里不出现TABL ...

  9. HTML和CSS 入门系列（一）：超链接、选择器、颜色、盒模式、DIV布局、图片

    一.超链接 二.CSS选择器 CSS的全称叫做: Cascading Style Sheets 级联样式表的缩写. 2.1 类型选择器 2.2 派生选择器 2.3 伪类选择器 <style &g ...

随机推荐

  1. 获取地址栏的URL: PHP JS

    1. PHP 获取上一页的URL 在php中可以通过内置的变量的属性来获取上一页的URL: $_SERVER['HTTP_REFERER']. 但是在IE中如果跳转是通过js函数如: window.l ...

  2. git忽略某个文件

    data/config/config.ini.php

  3. Java 设计模式系列（六）适配器模式

    Java 设计模式系列(六)适配器模式 适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够在一起工作. 适配器模式的结构: 类的适配器模式 对象 ...

  4. windows 如何创建.gitignore 文件 / .ssh 文件夹？解决windows必须键入文件名提示

    windows不允许.gitignore之类的文件,也不允许.ssh命名的文件夹名.会提示必须输入文件名. 要解决这个问题我以前一直是通过bash使用linux命令创建的.最近发现了一个更简便的方法与 ...

  5. openssl生成ssl证书（转）

    原文:http://blog.sina.com.cn/s/blog_4fd50c390101891c.html x509证书一般会用到三类文,key,csr,crt. Key 是私用密钥openssl ...

  6. HDU1863 畅通工程 2017-04-12 19:25 59人阅读 评论(0) 收藏

    畅通工程 Time Limit : 1000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Submissi ...

  7. HRBUST1313 火影忍者之～静音 2017-03-06 16:11 39人阅读 评论(0) 收藏

    火影忍者之-静音 传说中的火之国一年一度的公务员选拔又开始了!木叶忍者村此次也要从中选拔出5人来,作为即将上任的新火影纲手的小弟-,可是报考公务员的人数实在是太--多啦!所以纲手的贴身随从-静音小姐, ...

  8. php CI框架输出空行问题排查

    今天在使用 curl 命令行工具调试一个功能时,发现输出的内容总是会在最开始莫名其妙的多一行空行: 项目框架是 php 的 CodeIgniter,感觉这种问题在网上不好查找,因为可以确定这个是业务出 ...

  9. redis修改端口号

    为redis分配一个8888端口,操作步骤如下: 1.$REDIS_HOME/redis.conf重新复制一份,重命名为redis8888.conf. 2.打开redis8888.conf配置文件,找 ...

  10. CentOS6.5中使用 iperf 检测主机间网络带宽

    安装方式 # yum install http://dl.fedoraproject.org/pub/epel/6/i386/epel-release-6-8.noarch.rpm# yum inst ...