第一次月测

第一题:

css:

<style type="text/css">
/* 
所有图片横向布局    10'
图片之间的间隔为16px 10'
第一张图片的左边距为0 10'
最后一张图片的右边距为0 10'
*/
body {
background-color: cornsilk;
width: 1200px;
margin: 0 auto;
}

body>img {
width: 100%;
}

.content {
border: 1px solid red;
height: 174px;
}
/* 在这里填写css代码 */

.content ul{
padding-left: 0;
}

.content ul li{
display: inline-block;/*显示在一行*/
}

.content .top{
margin-top: 20px;
}

.content .top li{
margin: 0 16px;
width: 115px;
background-color: white;
text-align: center;
font-weight: bolder;/*加粗*/
}

.content .top li a{
text-decoration: none;/*去除下划线*/
}

.content .top li:first-child{
margin-left: 0;
}

.content .top li:last-child{
margin-right: 0;
}

</style>

html:

<body>
        <img src="img/res.png">
        <div class="content">
            <!-- 在这里填写html代码 -->
            <div class="top">
            <!--    ul>(li>img[src=toplist_a0$.jpg])*8-->
            <ul>
                <li><a href=""><img src="img/toplist_a01.jpg" alt=""></a></li>
                <li><a href=""><img src="img/toplist_a02.jpg" alt=""></a></li>
                <li><a href=""><img src="img/toplist_a03.jpg" alt=""></a></li>
                <li><a href=""><img src="img/toplist_a04.jpg" alt=""></a></li>
                <li><a href=""><img src="img/toplist_a05.jpg" alt=""></a></li>
                <li><a href=""><img src="img/toplist_a06.jpg" alt=""></a></li>
                <li><a href=""><img src="img/toplist_a07.jpg" alt=""></a></li>
                <li><a href=""><img src="img/toplist_a08.jpg" alt=""></a></li>
            </ul>
            </div>
        </div>
    </body>

第二题:

<style>
body {
position: relative;
text-align: center;
}

body>.small {
display: inline-block;
}

body>.big {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
display: none;
}
</style>
<script>
/*
当鼠标移入页面小图时，在鼠标右侧展示对应大图，
鼠标移入、移出、移动、事件将对应图片加载到正确位置展示各10分
*/
/* 在这里填写jquery代码，禁止修改html代码 */
window.onload = function(){
var imgs = document.querySelectorAll(".small");
var big =document.querySelector(".big");
for (let i = 0; i < imgs.length; i++) {
imgs[i].onmousemove = function(e){
big.style.top=e.y+10+"px";
big.style.left=e.x+10+"px";5
big.src=this.src;
}
imgs[i].onmouseout = function(){
big.style.display="none";
}
imgs[i].onmouseenter = function(){
big.style.display="block";
}

}
}
</script>
</head>

<body>
<img class="small" src="./img/toplist_a01.jpg" alt="">
<img class="small" src="./img/toplist_a02.jpg" alt="">
<img class="small" src="./img/toplist_a03.jpg" alt="">
<img class="big" src="./img/toplist_a01.jpg" alt="">
</body>

第三题：

<style type="text/css">
            body {
                background-color: cornsilk;
            }

            table {
                text-align: center;
                border: 1px solid #ccc;
                width: 800px;
                margin: 10% auto;
            }

            table caption {
                font-size: 24px;
                padding: 10px;
            }

            table thead th {
                background-color: #CCCCCC;
            }

            label.count,
            label.money {
                padding: 0 5px;
                color: red;
                font-weight: bolder;
            }
        </style>
        <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            /*
            全选/全不选                 15'
            删除当前行（要有提示）       15'
            数据行复选框                10'
            */
            
            /* 在这里填写jquery代码，禁止修改html代码 */
                 $(function(){
                                    // 全选/全不选
                                    $(":checkbox").attr("checked",false)
                                    $(":checkbox").prop("checked",false)
                                    $("#chkAll").change(function(){
                                        var chk=$(this).prop("checked")
                                        $(":checkbox").prop("checked",chk)
                                    })
                                    })
                    
                    
                    
                    //删除一行
                    $(function() { 
                    $(":button").click(function() { 
                    if (confirm("确认删除项商品?")) { 
                    $(this).parent().parent().remove(); 
                    } 
                    }); 
                    }); 
                    
                    
                    
                    
        </script>
    </head>
    <body>
        <table border="1" cellspacing="0" cellpadding="0">
            <caption>购物车商品管理</caption>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="chkAll" />
                        <label for="chkAll">全选</label>
                    </th>
                    <th>产品编号</th>
                    <th>产品名称</th>
                    <th>产品单价</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1001</td>
                    <td>Redmi 笔记本 15寸</td>
                    <td>5999</td>
                    <td><button type="button" data-del="1001">删除</button></td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1003</td>
                    <td>华为平板2</td>
                    <td>2999</td>
                    <td><button type="button" data-del="1003">删除</button></td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1004</td>
                    <td>华为笔记本电脑</td>
                    <td>6888</td>
                    <td><button type="button" data-del="1004">删除</button></td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1005</td>
                    <td>小米10青春版</td>
                    <td>1299</td>
                    <td><button type="button" data-del="1005">删除</button></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5" style="text-align: right;">您已选购<label class="count">0</label>件，合计<label
                            class="money">0</label>元</td>
                </tr>
            </tfoot>
        </table>
    </body>

posted @ 2021-11-21 20:10 牵着宇宙来遛弯阅读(27) 评论(0) 收藏举报

刷新页面返回顶部

赐

第一次月测

公告