HTML --块

时间 2019-11-20

标签 html 栏目 HTML 繁體版

原文原文链接

HTML块级元素css

HTML<div>元素html

<div>元素是块级元素，它的做用是给文档布局，它可将文档分割成独立的、不一样的部分。相似于IOS中的view。若是使用id或者class来标记<div>，相似于给view加tag值，这样会使<div>标签更加有效。布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <div style="color:#00FF00">
      <h4>This is a header</h4>
      <p>This is a paragraph.</p>
</div>
</body>
</html>

HTML<span>元素spa

<span>元素是内联元素，与CSS一块儿使用时，它用于为文本设置样式属性。<span> 标签被用来组合文档中的行内元素。code

<div>例子htm

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
    <!-- 定义div样式、颜色、大小等-->
    <style type="text/css">
        div#container{background-color:#EEEEEE;width: 500px}
        div#header{background-color: #99bbbb;}
        div#menu{background-color: #ffff99;height: 200px;width: 150px;float: left;}
        div#content{background-color: #EEEEEE;height: 200px;width: 350px;float: left;}
        div#footer{background-color: #99bbbb;clear: both;;text-align: center;}
        h1 {margin-bottom:0;}
        li {list-style:none;}
    </style>
</head >
<body >
    <div id="container">
        <div id="header">
            <h1>Web Page</h1>
        </div>
        <div id="menu">
            <h2>Menu</h2>
            <ul>
                <li>Objective-C</li>
                <li>Java</li>
                <li>PHP</li>
            </ul>
        </div>
        <div id="content">
            这是内容部分
        </div>
        <div id="footer">
            Copyright readygo.com
        </div>
    </div>
</body>
</html>