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>
相關文章
相關標籤/搜索