C1-简易表格-html css javascript

说明

⼤⼚每年都要招聘⼤量的前端软件⼯程师,有些开发基于浏览器应⽤,有些开发基于H5的应⽤,⽽有些可能会开发⼩程序和桌⾯
应⽤。不管是做哪种开发⼯作的前端⼯程师,都离不开HTML、CSS、JavaScript这三类Web浏览器核⼼技术。HTML定义了浏览
器中各种元素的分类和⽤途,CSS定义了浏览器⻚⾯的整体布局和外观,⽽JavaScript可以动态创建⻚⾯,使⽹⻚能够响应⽤户的
点击、拖拽等各种事件,给⽤户更好的体验。

实现如图的效果

C1-简易表格-html css javascript_第1张图片

我用的是Visual Studio Code

这里涉及html,css,javaScript

在这里插入图片描述

  • 通过编码实现需求
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
     
            width: 222px;
            height: 100px;
            border: 1px solid #000;
            border-collapse: collapse;
            text-align: center;
            margin: 200px auto;
        }
        
        td {
     
            border: 1px solid #000;
        }
        
        tr:nth-child(odd) {
     
            background-color: #ebebeb;
        }
        
        button {
     
            position: absolute;
            margin-left: 630px;
            margin-top: -156px;
        }
    </style>
</head>

<body>
    <table>
        <tbody>
            <tr>
                <td>1</td>
                <td>见习工程师认证</td>
            </tr>
            <tr>
                <td>2</td>
                <td>专项工程师认证</td>
            </tr>
            <tr>
                <td>3</td>
                <td>全栈工程师认证</td>
            </tr>
        </tbody>
    </table>
    <button>我要考试</button>
    <script>
        var btn = document.querySelector('button');
        btn.onclick = function() {
     
            alert('别考了,这么麻烦');
            alert('开玩笑,哈哈。 要考什么呀?');
            var hh = prompt('请输入考试科目序号');
            alert('加油哦');
        }
    </script>
</body>

</html>

效果

C1-简易表格-html css javascript_第2张图片
C1-简易表格-html css javascript_第3张图片
C1-简易表格-html css javascript_第4张图片

C1-简易表格-html css javascript_第5张图片

C1-简易表格-html css javascript_第6张图片


  • 作者:麦克猫Cat

  • 本文版权归作者和CSDN共有,欢迎交流

你可能感兴趣的:(html,css,javascript)