web期末复习-编程题篇

1.html-表格

代码：

<!-- #d7d7d7 灰色#ffffff 白色 -->
<table width="300px"  cellspacing="1" cellpadding="0" bgcolor="#d7d7d7" style="text-align: center">
    <caption>练习</caption>
    <tr>
        <th bgcolor="#ffffff" colspan="2">会员级别</th>
    </tr>
    <tr>
        <td bgcolor="#ffffff">金卡</td>
        <td bgcolor="#ffffff" rowspan="2">200</td>
    </tr>
    <tr>
        <td bgcolor="#ffffff">svip卡</td>
    </tr>
</table>

2.css-决定定位相对定位：

代码：

<style>
    #boxA{
        /*相对定位*/
        position: relative;
        top:50px;
        left: 50px;
    }
    #boxB{
        /*决定定位*/
        position: absolute;
        top:75px;
        left: 125px;
    }
</style>
<body>
<div id="boxA" style="width: 400px;height: 300px;background-color: red;">A
    <div id="boxB" style="width: 150px;height: 150px;background-color: yellow;">B</div>
    <div id="boxC" style="width: 100px;height: 100px;background-color: blue;">C</div>
</div>

代码：

    <style>
        #A{
            /*A使用相对对象，相对浏览器的位置*/
            border-radius: 25px;
            position: relative;
            top: 100px;
            left: 50px;
        }
        #B{
            /*B使用决定对味，以A作为父元素*/
            position: absolute;
            top: 50px;
            left: 50px;
        }
        #C{
            /*C使用固定定位，固定在浏览器的右下角*/
            position: fixed;
            bottom: 0px;
            right: 0px;
        }
    </style>
</head>
<body>
<div id="A" style="width: 500px;height: 500px;background-color: red;">A
    <div id="B" style="width: 300px;height: 200px;background-color: yellow;">B</div>
    <div id="C" style="background-color: blue;width: 300px;height: 200px;">C</div>
</div>
</body>

3.jQuery:

代码：

<div>
    <span>购买数量:</span>
    <a href="javascript:void(0)" id="minus"><b>-</b></a>
    <input type="text" name="" value="1" id="num">
    <a href="javascript:void(0)" id="plus"><b>+</b></a>
    <em>(当前库存<strong class="max">5</strong> )</em>
</div>
    <script>
        $(document).ready(function () {
            //减小
            $('#minus').on("click",function () {
                var number = $("#num").val();
                if(number > 1){
                    number--;
                    $("#num").val(number);
                }
            });

            //增加
            $("#plus").on("click",function () {
                var number = $("#num").val();
                var max = $(".max").html();
                if(number < parseInt(max)){
                    number++;
                    $("#num").val(number);
                }
            });
        })
    </script>

代码：

<ul id="nav">
    <li id="1">男装</li>
    <li>女1装</li>
</ul>
<!--type 默认属性是button reset submit-->
<button type="button" id="add">添加</button>
<button type="button" id="remove">删除</button>

<script>
    $(document).ready(function () {
        $("#add").on('click',function () {
            $("#nav").append("<li>童装</li>");
            $("#nav").prepend("<li>女装</li>");
            $("#nav").before("<li>运动装</li>");
            $("#nav").after("<li>休闲装</li>");
        });
        $("#remove").on('click',function () {
            $("#nav").empty();
            //$("#nav").remove();
        })
    })
</script>

fejxc

https://fejxc.top/posts/1c4c5b4a/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 fejxc !

web

ip网络构建期末知识点总结

2021-01-16 计算机网络

计算机网络

jQuery编程复习

2021-01-10 web知识点复习

web