韩俊强的博客

iOS/Swift/Objective-C/H5 (官方付费群)iOS开发者QQ群:①群:446310206 ②群:426087546

HTML5中 HTML列表/块/布局 韩俊强的博客

从简单到复杂HTML5详解:每日更新关注:http://weibo.com/hanjunqiang  新浪微博!

1.HTML列表


1.有序

2.无序


3.有序star属性

4.有序无序列表


代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
    <ul>
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ul>
    <ol>
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ol>

    <!--无需列表-->
   <ul type="square">
       <li>iOS</li>
       <li>android</li>
       <li>html5</li>
       <li>swift</li>
   </ul>
<!--有序列表-->
   <ol start="10">
       <li>iOS</li>
       <li>android</li>
       <li>html5</li>
       <li>swift</li>
   </ol>
<!--嵌套列表(无序ul/有序ol)-->

    <ul>
        <li>宠物</li>
            <ol>
                <li>猫</li>
                <li>狗</li>
            </ol>
        <li>植物</li>
            <ol>
                <li>仙人掌</li>
                <li>棕榈</li>
            </ol>
    </ul>

    <br/> <br/>

    <ol>
        <li>宠物</li>
        <ol>
            <li>猫</li>
            <li>狗</li>
        </ol>
        <li>植物</li>
        <ol>
            <li>仙人掌</li>
            <li>棕榈</li>
        </ol>
    </ol>

    <dl>
        <dt>helloword</dt>
             <dd>大家好啊打印helloword</dd>
        <dt>helloword</dt>
        <dd>大家好啊打印helloword</dd>
    </dl>
</body>
</html>
每日更新关注:http://weibo.com/hanjunqiang  新浪微博!

2.块



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块元素</title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
    <style type="text/css">
        span{
            color: blue;
        }
    </style>
</head>
<body>
     <!-- 块 -->
     <p>大家好!</p>
     <h1>大家好啊</h1>
     <b>这是一个加重标签</b>
     <a>这是一个超链接标签</a>
     <div id="divid">
         <p>helloword</p>
         <a>惦记我</a>
     </div>
     <div id="divspan">
         <p><span>这是一个测试效果</span>span是什么样式</p>
     </div>
</body>
</html>
效果如下:

span标签下作用看效果图!

每日更新关注:http://weibo.com/hanjunqiang  新浪微博!

3.布局

1.div布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div布局</title>
    <style type="text/css">
        body{
            margin: 0px;
        }
        #container{
            width: 100%;
            height: 950px;
            background-color: antiquewhite;
        }
        #header{
            width: 100%;
            height: 10%;
            background-color: aquamarine;
        }
        #conten_menu{
            width: 30%;
            height: 80%;
            background-color: azure;
            float:left ;
        }
        #content_body{
            width: 70%;
            height: 80%;
            background-color: chartreuse;
            float: left;
        }
        #footer{
            width: 100%;
            height: 10%;
            background-color: darkgoldenrod;
            clear: left;
        }
    </style>
</head>
<body>
      <div id="container">
           <div id="header">头部</div>
           <div id="conten_menu">内容菜单</div>
           <div id="content_body">内容主题</div>
           <div id="footer">底部</div>
      </div>
</body>
</html>

效果如下:


2.table布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table布局</title>
</head>
<body marginheight="0px" marginwidth="0px">
      <table width="100%" height="950" style="background-color: darkgoldenrod">
          <tr>
              <td colspan="3" width="100%" height="10%" style="background-color: burlywood">这是头部</td>
          </tr>
          <tr>
              <td width="20%" height="80%" style="background-color: aqua">
                  <ul>
                      <li>iOS</li>
                      <li>android</li>
                      <li>swift</li>
                      <li>html5</li>
                  </ul>
              </td>
              <td width="60%" height="80%" style="background-color: chartreuse">内容主题</td>
              <td width="20%" height="80%" style="background-color: crimson">右菜单</td>
          </tr>
          <tr>
              <td width="100%" height="10%" colspan="3" style="background-color: blue">这是底部</td>
          </tr>
      </table>
</body>
</html>
效果如下:



每日更新关注:http://weibo.com/hanjunqiang  新浪微博!

iOS开发者交流QQ群: 446310206 



阅读更多

扫码向博主提问

去开通我的Chat快问

qq_31810357

博客专家

移动App开发,移动安全
  • 擅长领域:
  • iOS
  • 移动开发
  • 云安全
  • Js
  • Html
版权声明:本文为博主原创文章,未经博主允许不得转载。联系博主:手机端加!!! iOS开发者交流群:①群:446310206 ②群:426087546 https://blog.csdn.net/qq_31810357/article/details/52388587
个人分类: HTML5
所属专栏: HTML5从简单到复杂
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭