Python-day15

来源：互联网发布：网络设备监控软件编辑：程序博客网时间：2024/06/01 20:53
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>position永远停留在某个位置，层次划分开来<div style="width:90px;height: 50px;background-color: black;color: red; position: fixed;bottom: 20px;right: 200px">返回顶部</div><div style="height:5000px;background-color: cornflowerblue"></div><div style="width: 10%;background-color: darkolivegreen;color: red; font-size: 30px;position: absolute;right: 0;bottom: 0">导航</div><div style="height: 1000px;background-color: brown";>内容</div><div style="width: 50%;background-color: #b36b52;height: 200px; margin: 0 auto;position: relative"><div style="width: 20%; height: 50%;background-color: cyan;position: absolute;left: 0;bottom: 0"></div></div>  z-index 数字大的会在最上层浮动，以此类推  opacity透明度  <div style="width: 400px;height: 500px; background-color: white;position: fixed;z-index: 10; right: 50%;top: 50%;margin-right: -200px;margin-top: -250px"></div><div style=" position: fixed; background-color: #b36b52;top: 0;bottom: 0;left: 0;right: 0; opacity: 0.5;z-index: 9"></div><div style="height: 5000px; background-color: green;font-size: 100px; font-weight: bold">皇家马德里</div>hidden超出限制的大小就隐藏，auto就是有滚动条.class1:hover   hover的意思是当鼠标移动上去就会应用该样式<div style="height: 200px; width: 300px;background-color: red;overflow: auto"><img src="123.jpg"></div>repeat-x 水平叠加， repeat-y 垂直叠加<div style="height:100px;border: solid 1.5px red;margin-bottom: 10px"></div><div style="background-image: url('icon_18_118.png');height: 20px;width: 20px;background-repeat: no-repeat;background-position-y: -35px;"></div></body></html><!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .hide {            display: none;        }        .c1 {            position: fixed;            left: 0;            right: 0;            top: 0;            bottom: 0;            background-color: black;            opacity: 0.6;            z-index: 9;        }        .c2 {            width: 500px;            height: 400px;            background-color: white;            position: fixed;            left: 50%;            top: 50%;            margin-left: -250px;            margin-top: -200px;            z-index: 10;        }    </style></head><body style="margin: 0 auto"><div>    <input type="button" value="添加" onclick="showmodel()">    <input type="button" value="全选" onclick="chooseall()">    <input type="button" value="反选" onclick="reverseall()">    <input type="button" value="取消" onclick="cancelall()">    <table>        <thead>        <tr>            <th>选择</th>            <th>主机名</th>            <th>端口</th>        </tr>        </thead>        <tbody id="tb">        <tr>            <td><input type="checkbox"></td>            <td>1.1.1.1</td>            <td>191</td>        </tr>        <tr>            <td><input type="checkbox"></td>            <td>1.1.1.2</td>            <td>192</td>        </tr>        <tr>            <td><input type="checkbox"></td>            <td>1.1.1.3</td>            <td>193</td>        </tr>        </tbody>    </table></div><!--    遮罩层开始   --><div id="id1" class="c1 hide"></div><!--    遮罩层结束   --><!--    弹出框开始   --><div id="id2" class="c2 hide">    <p><input type="text"></p>    <p><input type="text"></p>    <p>        <input type="button" value="确定">        <input type="button" value="取消" onclick="addmodel()">    </p></div><!--    弹出框结束   --><script>    function showmodel() {        document.getElementById('id1').classList.remove('hide');        document.getElementById('id2').classList.remove('hide');    }    function addmodel() {        document.getElementById('id1').classList.add('hide');        document.getElementById('id2').classList.add('hide');    }    function chooseall() {        var tbody = document.getElementById('tb');        var tr_list = tbody.children;        for (var i = 0; i < tr_list.length; i++) {//            循环所有的tr,current_tr            var current_tr = tr_list[i];            var checkbox = current_tr.children[0].children[0];            checkbox.checked = true;        }    }    function cancelall() {        var tbody = document.getElementById('tb');        var tr_list = tbody.children;        for (var i = 0; i < tr_list.length; i++) {//            循环所有的tr,current_tr            var current_tr = tr_list[i];            var checkbox = current_tr.children[0].children[0];            checkbox.checked = false;        }    }    function reverseall() {        var tbody = document.getElementById('tb');        var tr_list = tbody.children;        for (var i = 0; i < tr_list.length; i++) {//            循环所有的tr,current_tr            var current_tr = tr_list[i];            var checkbox = current_tr.children[0].children[0];            if (checkbox.checked) {                checkbox.checked = false;            } else {                checkbox.checked = true;            }        }    }</script></body></html><!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .item .header {            height: 35px;            background-color: #2459a2;            color: white;            line-height: 35px;        }        .hide {            display: none;        }    </style></head><body><div style=" height: 48px;"></div><div style="width: 300px">    <div class="item">        <div id="id1" class="header" onclick="changmemenu('id1')">菜单1</div>        <div class="content">            <div>内容1.1</div>            <div>内容1.2</div>            <div>内容1.3</div>        </div>    </div>    <div class="item">        <div id="id2" class="header" onclick="changmemenu('id2')">菜单2</div>        <div class="content hide">            <div>内容2.1</div>            <div>内容2.2</div>            <div>内容2.3</div>        </div>    </div>    <div class="item">        <div id="id3" class="header" onclick="changmemenu('id3')">菜单3</div>        <div class="content hide">            <div>内容3.1</div>            <div>内容3.2</div>            <div>内容3.3</div>        </div>    </div></div><script>    function changmemenu(nid) {        var current_header = document.getElementById(nid);        var item_list = current_header.parentElement.parentElement.children;        for (var i = 0; i < item_list.length; i++) {            var current_item = item_list[i];            current_item.children[1].classList.add('hide')        }        current_header.nextElementSibling.classList.remove('hide')    }</script></body></html>
阅读全文
0 0