H5学习之标签类型、浮动

标签类型：

<html>
<head>
    <meta charset="UTF-8">
    <title>标签类型</title>
    <style>
        span{
            color: red;
            /*display: none; 可以隐藏标签*/
            /*visibility: hidden; 也可以隐藏标签 但标签的位置仍然被占据着*/
        }
        strong,i,b,a{
            /*display 属性规定元素应该生成的框的类型*/
            /*display: block;把行元素变为块元素*/
            width: 100px;
            height: 200px;
            color: red;
        /*这类元素会占据尽可能少的空间，并且会一个紧贴一个
        从左往右 从上往下排列，它们不受width、height样式的影响
        即这些样式对它们无效的 在窗口变化时，它们的大小不变
        但会自动换行 它们叫行元素（标签）*/
        }
        img,div,section,p,h1,header,aside{
            display: inline;
            /*width: 400px;
            height: 200px;*/
            border: 1px solid blue;
            color: palegreen;
            max-width: 800px;
        /*这类标签会独占一行，哪怕它们根本用不了右侧的空间
          它们受width、height控制 在窗口变化时，不设定宽和高时
          它们会跟着变窄或变宽 除非设置了width max-width min-width
          它们纵向上也会尽可能少的占用空间 它们叫做块元素（标签）*/
        }
        /*display:inline 即行元素
          display:block 即块元素
          display:inline-block 即行内块元素*/

        /*除了行标签、块标签之外，还有一个标签很特殊
          它兼有两者的特点 即在行内，也会受到width和height的控制
          这类标签叫做行内块元素（标签） img */

        /*还有一些元素不在这些类别中，或是很难分类 如script link title td等*/
    </style>
<body>
    <img src="lry.jpg" alt="">
    <span>HTML5</span>
    <strong>从广义上说</strong>
    <i>前端开发技术的总称</i>
    <b>包含</b>
    <a href="#">HTML</a>
    <a href="#">CSS</a>
    <a href="#">JavaScript</a>的最新内容。
    HTML5是移动互联网时代的产物。
    <div>HTML</div>
    <p>从广义上说是</p>
    <section>前端开发技术的总称</section>
    <h1>包含</h1>
    <header>
        <a href="#">HTML</a>
        <a href="#">CSS</a>
        <a href="#">JavaScript</a>的最新内容。
    </header>
    <aside>
        HTML5是移动互联网时代的产物。
    </aside>
</body>
</html>

浮动:

<html>
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        body{
            margin: 0;
        }
        ul{
            margin: 10px;
            padding-left: 0;
        }
        li{
            /*浮动之后标签占据的空间最小化 块元素会让出右侧的空间（float:left） 还可以向右浮动 
            右浮动时 顺序保持不变的话 可以在外面加一个nav标签 将右浮动应用到nav上
            
            浮动与inline-block不同 inline-block会带来小块空白
            除非将标签全部紧贴在一起 或者说是在父标签设置font-size为0
            子元素在设置font-size的一个大小
            
            浮动标签会影响后续标签 所以有时要清除浮动*/
            
            /*display: inline-block;*/
            float: left;
            list-style: none;
            background-color: #eee;
            padding: 6px 15px;
            margin-right: 5px;
            border-radius: 5px;
        }
        /*nav{
            float: right;
        }*/

        /*清除浮动的常用技巧*/
        .clearfix{
            clear: both;
        }
        /*ul:after{
            content: '';
            display: block;
            clear: both;
        }*/
    </style>
<body>
    <!--<nav>-->
        <ul>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
            <li>PHP</li>
            <li>Java</li>
            <li>.NET</li>
            <li>NodeJs</li>
        </ul>
        <div class="clearfix"></div>
    <!--</nav>-->
    <h1>标题</h1>
    <h2>小标题</h2>
</body>
</html>

浮动练习：

<html>
<head>
    <meta charset="UTF-8">
    <title>浮动练习</title>
    <style>
        body{
            margin: 0;
        }
        footer{
            width: 100%;
            height: 60px;
            box-shadow: 0 0 2px #333;
            position: fixed;
            bottom: 0;
        }
        section{
            height: 60px;
            width: 25%;
            float: left;
            text-align: center;
            border-right: 1px solid #999;
            font-size: 40px;
            box-sizing: border-box;
        }
        section:hover{
            /*设置文字阴影*/
            text-shadow: 0 0 2px #333;
        }
    </style>
<body>
    页面内容。。。
    <footer>
        <section>&spades;</section>
        <section>&clubs;</section>
        <section>&hearts;</section>
        <section>&diams;</section>
    </footer>
</body>
</html>

发送评论编辑评论

发送评论 编辑评论

推荐文章

发送评论编辑评论