html及css进阶2

其他 2018-05-08 00:07:08 阅读次数: 4

html表格创建及样式设定

table标签 声明表格
tr标签 定义表格中的一行
td和th标签 定义一行中的一个单元格 td表示普通单元格 th表示表头单元格
表格中有数据的权重大于没有数据的权重 显示比其他没有数据的格子大些

样式:border-collapse：collapse 边线合并
样式:text-align:center 文字水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .table01{
            width: 500px;
            height: 200px;
            border: 1px solid black;
            /* 设置表格的边线合并 */
            border-collapse: collapse;

            /* 设置表格水平居中 */
            margin: 0px auto;
        }

        .table01 th{
            border: 1px solid black;
            background: lightblue;
        }

        .table01 td{
            border: 1px solid black;
            /* 设置文字水平居中 */
            text-align: center;
        }

    </style>
</head>
<body>
    <!-- table>(tr>td*5)*4 -->
    <table class="table01">
        <!-- 表格中有数据的权重大于没有数据的权重 显示比其他没有数据的格子大些-->
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>班级</th>
        </tr>
        <tr>
            <td>1</td>
            <td>二狗子</td>
            <td>男</td>
            <td>18</td>
            <td>幼儿园</td>
        </tr>
        <tr>
            <td>1</td>
            <td>二狗子</td>
            <td>男</td>
            <td>18</td>
            <td>幼儿园</td>
        </tr>
        <tr>
            <td>1</td>
            <td>二狗子</td>
            <td>男</td>
            <td>18</td>
            <td>幼儿园</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

</body>
</html>

定位

文档流: 
    指盒子按照html标签编写的顺序依次从上到下 从左到右排序
    块元素占一行 行内元素在一行之内从左到右排序

定位:css的position属性不受文档流影响
    relative相对定位
    相对自身位置做偏移

    absolute绝对定位
    相对于父级位置定位

    fixed固定定位
    相对于浏览器四个角 进行定位

    常用绝对定位 相对定位

定位元素的层级
    设置z-index 优先度 越大 优先越高

相对位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .con{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 0px auto;


        }

        .con div{
            width: 200px;
            height: 70px;
            margin: 10px;
        }

        .box01{
            background: lightblue;
            /* 设置相对定位 相对自身位置做偏移 */
            position: relative;
            left: 32px;
            top: 50px;



        }

        .box02{
            background: lightpink;
        }

        .box03{
            background: lightgray;
        }
    </style>
</head>
<body>
    <!-- .con>.box01+.box02+.box03 -->
    <div class="con">
        <div class="box01">1</div>
        <div class="box02">2</div>
        <div class="box03">3</div>
    </div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .con{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 0px auto;


        }

        .con div{
            width: 200px;
            height: 70px;
            margin: 10px;
        }

        .box01{
            background: lightblue;
            /* 设置相对定位 相对自身位置做偏移 */
            position: relative;
            left: 32px;
            top: 50px;



        }

        .box02{
            background: lightpink;
        }

        .box03{
            background: lightgray;
        }
    </style>
</head>
<body>
    <!-- .con>.box01+.box02+.box03 -->
    <div class="con">
        <div class="box01">1</div>
        <div class="box02">2</div>
        <div class="box03">3</div>
    </div>
</body>
</html>

绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .con{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 0px auto;

            /* 父级设置相对定位 并且不设置偏移*/
            position: relative;

            /* 设置父级 隐藏溢出 */
            overflow: hidden;

        }

        .con div{
            width: 200px;
            height: 70px;
            margin: 10px;
        }

        .box01{
            background: lightblue;
            /* 设置相对定位 相对自身位置做偏移 */
            /* position: relative;
            left: 32px;
            top: 50px; */

            /* 设置绝对定位 找有定位属性的父级 进行定位 没有找到就以body定位 */
            position: absolute;
            left: 32px;
            top: 50px;


        }

        .box02{
            background: lightpink;
        }

        .box03{
            background: lightgray;
        }
    </style>
</head>
<body>
    <!-- .con>.box01+.box02+.box03 -->
    <div class="con">
        <div class="box01">1</div>
        <div class="box02">2</div>
        <div class="box03">3</div>
    </div>
</body>
</html>

固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .con{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 0px auto;


        }

        .con div{
            width: 200px;
            height: 70px;
            margin: 10px;
        }

        .box01{
            background: lightblue;
            /* 设定固定定位 */
            position: fixed;
            left: 32px;
            top: 50px;
        }

        .box02{
            background: lightpink;
        }

        .box03{
            background: lightgray;
        }
    </style>
</head>
<body>
    <!-- .con>.box01+.box02+.box03 -->
    <div class="con">
        <div class="box01">1</div>
        <div class="box02">2</div>
        <div class="box03">3</div>
    </div>
</body>
</html>

定位元素的层级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .con{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 0px auto;



        }

        .con div{
            width: 200px;
            height: 70px;
            margin: 10px;
        }

        .box01{
            background: lightblue;

            position: absolute;
            left: 0px;
            top: 0px;

            /* 设置定位元素的层级 */
            z-index: 6;


        }

        .box02{
            background: lightpink;
            position: absolute;
            left: 30px;
            top: 30px;
            z-index: 7;
        }

        .box03{
            background: lightgray;
            position: absolute;
            left: 60px;
            top: 60px;
            z-index: 8;
        }
    </style>
</head>
<body>
    <!-- .con>.box01+.box02+.box03 -->
    <div class="con">
        <!-- 如果不设置z-index属性 定位元素按顺序排列 -->
        <div class="box01">1</div>
        <div class="box02">2</div>
        <div class="box03">3</div>
    </div>
</body>

使用定位创建垂直水平居中弹框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .pop{
            width:500px;
            height: 300px;
            border: 1px solid black;
            background: white;


            /* 弹框水平垂直居中的方法 使用固定位置 以及margin */
            position:fixed;
            left: 50%;
            top: 50%;
            margin-left: -251px;
            margin-top: -151px;


            /* 定位元素不能用margin居中 */
            /* margin: 0px auto; */

            /* 设置弹框的层级  设置比较大的值 盖住其他所有的元素*/
            z-index: 9999;
        }

        .pop h3{
            margin: 5px;
            background: lightblue;
            line-height: 40px;
        }
        .mask{
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            background: black;
            z-index: 9998;
            /* 设置背景的透明度 */
            opacity: 0.3;

            /* 透明度兼容写法 兼容IE */
            filter: alpha(opacity=30);
        }

        /* 设置pop_con的显示隐藏 可以同时将弹框和背景隐藏*/
        .pop_con{
            display: none;
        }
    </style>
</head>
<body>
    <h1 class="pop_con" style="display: block;">网页内容</h1>
    <div class="pop">
        <h3>弹框标题</h3>
        <p>弹框的文字内容</p>

    </div>
    <div class="mask"></div>
</body>
</html>

css权重值

多条样式作用于一个元素 使用权重大的样式

权重的等级
    内联样式 style="" 权重值为1000
    ID选择器 #content 权重值为100
    类 伪类  .div{}    权重值为10
    标签选择器 div p 权重值为1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 权重值为 1 */
        div{
            color: red;
        }

        /* 权重值为 1+10+10+1=22 */
        body .con .box h3{
            color:blue
        }

        /* 权重值 10+10+1=21 */
        .con .box h3{
            color:red
        }
    </style>
</head>
<body>
    <!-- style的权重值为 1000 -->
    <div style="color: blue">
        this is a div
    </div>

    <div class="con">
        <div class="box">
            <h3 style="color: pink;">this is h3</h3>
        </div>
    </div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/troysps/article/details/80198724
今日推荐
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
虽然老乡鸡开源的不是代码，但背后的原因却让人很暖心
周排行
决策树的部分理解
STM32软件IIC的实现
RocketMQ原理解析-HA
vue-动态路由（路由的传参和接参）
利用python对Excel中的特定数据提取并写入新表
【Ubuntu】 Ubuntu16.04搭建NFS服务
Elasticsearch基础操作与对应的curl命令行，python对接实现
JVM数据存储结构 & Java的值传递和址传递
yum命令使用指南
java基础（一）：java语法基础
每日归档
更多
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)
2024-04-15(42)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022