html学习（3）

最新推荐文章于 2023-10-04 11:55:04 发布

胖哥哥飘过

最新推荐文章于 2023-10-04 11:55:04 发布

阅读量235

点赞数

分类专栏：前端文章标签： android html

本文链接：https://blog.csdn.net/pgg_cold/article/details/81283047

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.css盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>

    <style>
        body{
            margin: 0;
        }
        .box{
            width: 400px;
            height: 200px;
            background-color: gold;

            border: 10px #000 dashed;
            padding: 40px;
            margin: 0;

        }
    </style>
</head>
<body>
<div class="box">
    启动方式：在一个新栈中创建该Activity的实例，
    并让多个应用共享该栈中的该Activity实例。
    一旦该模式的Activity实例已经存在于摸一个栈中，
    任何应用再激活该Activity时，
    都会重用该栈中的实例（
    会调用实例的onNewIntent（））
    。其效果相当于多个应用共享一个应用，
    不管谁激活该Activity都会进入同一个应用中。
</div>
</body>
</html>

2.浮动：float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>

    <style type="text/css">
        .con,.con2{
            width: 300px;
            border: 1px solid #333333;
            margin: 100px auto;
            font-size: 0;
        }
        .con a{
            width: 50px;
            height: 50px;
            font-size: 20px;
            display: inline-block;
            text-align: center;
            line-height: 50px;
            text-decoration: none;
            margin: 10px 10px;
            background-color: gold;
        }

        /*浮动无法撑开父容器
          1.在父元素中添加overflow属性
          2.在最后一个子元素中加一个空的div <div style="clear: both"></div> 过时方法
          3.clearfix:after 最常使用*/
        .con2{
            /*overflow: hidden;*/
        }

        .con2 a{
            width: 50px;
            height: 50px;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
            text-decoration: none;
            margin: 10px 10px;
            float: left;
            background-color: gold;
        }

        /*一步解决清除浮动和margintop塌陷问题*/
        .clearfix:after,.clearfix:before{
            content: "";
            display: table;
        }

        .clearfix:after{
            clear: both;
        }

        /*兼容IE*/
        .clearfix{
            zoom: 1;
        }
        .con span{
            font-size: 16px;
            background-color: gold;
            /*display: inline-block;*/
            float: left;
        }

    </style>
</head>
<body>

<div class="con">
    <a href="">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <a href="">5</a>
    <a href="">6</a>
    <a href="">7</a>
    <a href="">8</a>
</div>

<div class="con2 clearfix">
    <a href="">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <a href="">5</a>
    <a href="">6</a>
    <a href="">7</a>
    <a href="">8</a>
</div>

<div class="con clearfix">
    <span>span元素</span>
    <span>span元素</span>
    <span>span元素</span>
    <span>span元素</span>
    <span>span元素</span>
    <span>span元素</span>
    <span>span元素</span>
    <span>span元素</span>
</div>
</body>
</html>

3.定位：

（1）相对定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style type="text/css">
        .con{
            width: 400px;
            height: 400px;
            border:1px solid #333333 ;
            margin: 100px auto 0;
        }

        .con div{
            width: 200px;
            height: 100px;
            margin: 20px;
            background: gold;
            text-align: center;
            line-height: 100px;
            font-size: 40px;
        }

        body .box01{
            position: relative;
            left: 50px;
            top: 50px;
            background-color: green;
        }
    </style>
</head>
<body>
<!--相对，绝对，固定-->
<div class="con">
    <div class="box01">1</div>
    <div class="box02">2</div>
    <div class="box03">3</div>
</div>
</body>
</html>

（2）绝对定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style type="text/css">
        .con{
            width: 400px;
            height: 400px;
            border:1px solid #333333 ;
            margin: 100px auto 0;
            position: relative;
        }

        .con div{
            width: 200px;
            height: 100px;
            margin: 20px;
            background: gold;
            text-align: center;
            line-height: 100px;
            font-size: 40px;
        }

        body .box01{
            position: absolute;
            left: -50px;
            top: 50px;
            background-color: green;
        }
    </style>
</head>
<body>
<!--相对，绝对，固定-->
<div class="con">
    <div class="box01">1</div>
    <div class="box02">2</div>
    <div class="box03">3</div>
</div>
</body>
</html>

（3）固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style type="text/css">
        .con{
            width: 400px;
            height: 400px;
            border:1px solid #333333 ;
            margin: 100px auto 0;
            position: relative;
        }

        .con div{
            width: 200px;
            height: 100px;
            margin: 20px;
            background: gold;
            text-align: center;
            line-height: 100px;
            font-size: 40px;
        }

        body .box01{
            position: fixed;
            left: 0px;
            top: 0px;
            background-color: green;
        }
    </style>
</head>
<body>
<!--相对，绝对，固定-->
<div class="con">
    <div class="box01">1</div>
    <div class="box02">2</div>
    <div class="box03">3</div>
</div>
</body>
</html>

（4）定位层级使用z-index设置

4.布局实例：

（1）标题栏：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局实例</title>

    <style type="text/css">
        .menu{
            list-style: none;
            background-color: #55a8ea;
            padding: 0;
            width: 960px;
            height: 40px;
            margin: 50px auto 0;
            position: relative;
        }

        .menu li{
            float: left;
            width: 100px;
            line-height: 40px;
            text-align: center;
        }

        .menu li a{
            font-size: 14px;
            font-family: "Microsoft Yahei";
            color: white;
            text-decoration: none;
        }
        /*当前页*/
        .menu .active{
            background-color: orange;
        }
        .menu li:hover{
            background-color: orange;
        }

        .menu .new{
            width: 33px;
            height: 20px;
            position: absolute;
            left: 433px;
            top: -9px;
            background: url("images/block04.jpg") no-repeat;
        }

        .menu .new:hover{
            background: url("images/block03.jpg") no-repeat;
        }
    </style>
</head>
<body>
<ul class="menu">
    <li class="active"><a href="">首页</a></li>
    <li><a href="">网站建设</a></li>
    <li><a href="">网站建设</a></li>
    <li><a href="">网站建设</a></li>
    <li><a href="">网站建设</a></li>
    <li><a href="">网站建设</a></li>
    <li class="new"> </li>
</ul>
</body>
</html>

（2）新闻列表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻列表</title>
    <style type="text/css">
        .news_list_con{
            width: 600px;
            height:290px;
            border: 1px solid #f0f0f0;
            margin: 100px auto 0;
        }

        .news_list_con h3{
            margin: 0px auto;
            height: 50px;
            width: 560px;
            border-bottom: 1px solid #333333;
        }
        .news_list_con h3 span{
            display: inline-block;
            height: 50px;
            border-bottom: 2px solid red;
            font: 18px/50px 'Microsoft Yahei';
            color: black;
            padding: 0px 15px;
            position: relative;
        }
        .news_list_con ul{
            list-style: none;
            padding: 0px;
            width: 560px;
            height: 238px;
            margin: 6px auto 0;
        }
        .news_list_con ul li{
            height: 38px;
            border-bottom: 1px solid #f0f0f0;
        }

        .news_list_con ul a{
            float:left;
            height: 38px;
            text-decoration: none;
            color: black;
            font: 14px/38px 'Microsoft Yahei';
        }
        .news_list_con ul a:hover{
            color: red;
        }

        .news_list_con ul a:before{
            content: "。";
        }
        .news_list_con ul span{
            float:right;
            height: 38px;
            text-decoration: none;
            color: black;
            font: 14px/38px 'Microsoft Yahei';
        }
    </style>
</head>
<body>
<div class="news_list_con">
    <h3><span>新闻列表</span></h3>
    <ul>
        <li><a href="">新一代码农心中的女神</a><span>2018-07-30</span></li>
        <li><a href="">新一代码农心中的女神</a><span>2018-07-30</span></li>
        <li><a href="">新一代码农心中的女神</a><span>2018-07-30</span></li>
        <li><a href="">新一代码农心中的女神</a><span>2018-07-30</span></li>
        <li><a href="">新一代码农心中的女神</a><span>2018-07-30</span></li>
        <li><a href="">新一代码农心中的女神</a><span>2018-07-30</span></li>
    </ul>
</div>
</body>
</html>

(3)翻页:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻页</title>
    <style type="text/css">
        .pagenation{
            width: 958px;
            height: 40px;
            border: 1px solid #ddd;
            margin: 50px auto 0;
            font-size: 0;
            text-align: center;
        }

        .pagenation a{
            display: inline-block;
            text-decoration: none;
            background-color: gold;
            padding: 5px 10px;
            font-size: 12px;
            font-family: "Microsoft Yahei";
            margin: 8px 5px;
            color: #333;

        }

        .pagenation a:hover{
            background-color: red;
            color: #fff;
        }
        .pagenation span{
            display: inline-block;
            font-size: 12px;
        }

    </style>
</head>
<body>
<div class="pagenation">

    <a href="">上一页</a>
    <a href="">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <span>...</span>
    <a href="">17</a>
    <a href="">18</a>
    <a href="">19</a>
    <a href="">20</a>
    <a href="">下一页</a>

</div>

</body>
</html>

(4)导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>

    <style type="text/css">

        .menu{
            width: 958px;
            height: 40px;
            list-style: none;
            border: 1px solid #000;
            margin: 50px auto 0;
            padding: 0;
            text-align: center;
            line-height: 40px;
            font-size: 0;
        }

        .menu li{
            display: inline-block;
            font-size: 14px ;
        }

        .menu li a{
            font-family: "Microsoft Yahei";
            color: #333;
            text-decoration: none;
        }
        .menu .line{
            color: #333;
            margin: 0 20px;
        }
        .menu li a:hover{
            color: red;
        }
    </style>
</head>
<body>
<div class="menu">
    <li><a href="">首页</a></li>
    <li class="line">|</li>
    <li><a href="">网站建设</a></li>
    <li class="line">|</li>
    <li><a href="">网站建设</a></li>
    <li class="line">|</li>
    <li><a href="">网站建设</a></li>
    <li class="line">|</li>
    <li ><a href="">网站建设</a></li>
    <li class="line">|</li>
    <li><a href="">网站建设</a></li>
    <li class="line">|</li>
    <li><a href="">网站建设</a></li>

</div>
</body>
</html>

胖哥哥飘过

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html学习（3）

1.css盒子模型&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;盒子模型&lt;/title&gt; &lt;style&gt; body{
复制链接

扫一扫