C1任务三

最新推荐文章于 2022-04-16 11:37:38 发布

原创最新推荐文章于 2022-04-16 11:37:38 发布 · 187 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#C1认证 #Web前端

C1能力认证专栏收录该内容

4 篇文章

订阅专栏

该博客展示了如何使用HTML、CSS和JavaScript创建一个具有交互功能的网页。HTML用于基础结构，CSS用于实现隔行换色的表格和整体布局，JavaScript则用于按钮点击事件，弹出提示信息。此外，详细介绍了CSS盒子模型，通过实例演示了如何布局不同大小和位置的元素，包括浮动、绝对定位等技术，实现复杂的网页设计。

任务点一：

使用编辑器

结果：

隔行换色以及添加按钮

源代码如下

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           .red{
               color: red;
           }

           table{
               border-collapse: collapse;
           }

           table tr:nth-child(2n-1){
               background-color: #ebebeb;
           }
       </style>
   </head>
   <body>
       <label class="red">优快云能力认证中心</label>
       <table border="1">
           <tr>
               <td>C1</td>
               <td>见习工程师认证</td>
           </tr>
           <tr>
               <td>C4</td>
               <td>专项工程师认证</td>
           </tr>
           <tr>
               <td>C5</td>
               <td>全栈工程师认证</td>
           </tr>
       </table>
       <br />
       <button id="btn">我要考试</button>
   </body>
   <script>
       var btn = document.getElementById("btn");
       btn.onclick = function(){
           alert("信息");
       }
   </script>
</html>

效果图如下

点击按钮弹出消息

任务点二：

所见即所得式开发

任务点三：

css盒子模型

源代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           #box{
               width: 950px;
               height: 650px;
               border: 5px solid #aaaaaa;
               margin: 100px auto;
               background-color: #fcdd9c;
               color: aliceblue;
           }

           #left{
               float: left;
               width: 300px;
               height: 620px;
               margin: 10px;
           }

           #left div{
               border: 1px solid #AAAAAA;
               background-color: #c5d08e;
               margin: 10px;
               text-align: center;
           }

           #left-top{
               width: 300px;
               height: 200px;
               line-height: 200px;
           }

           #left-bottom{
               width: 300px;
               height: 400px;
               line-height: 400px;
           }

           #right-top{
               float: right;
               width: 600px;
               height: 250px;
               margin-top: 20px;
               margin-right: 10px;
               background-color: #C5D08E;
               border: 1px solid #AAAAAA;
               text-align: center;
               line-height: 250px;
           }

           #right-bottom{
               float: right;
               width: 600px;
               height: 350px;
               margin-right: 10px;
               margin-top: 10px;
               /* border: 1px solid #AAAAAA; */
           }

           #box4{
               float: left;
               width: 350px;
               height: 350px;
               background-color: #C5D08E;
               border: 1px solid #AAAAAA;
               text-align: center;
               line-height: 350px;
           }

           #box5{
               float: right;
               width: 240px;
               height: 190px;
               background-color: #C5D08E;
               border: 1px solid #AAAAAA;
               text-align: center;
               line-height: 190px;
           }

           #box6{
               float: right;
               width: 240px;
               height: 150px;
               background-color: #C5D08E;
               border: 1px solid #AAAAAA;
               text-align: center;
               line-height: 150px;
               margin-top: 10px;
           }

           #box7{
               position: absolute;
               width: 200px;
               height: 200px;
               margin-top: -230px;
               margin-left: 50px;
               background-color: #f3a464;
               line-height: 200px;
           }

           #box8{
               position: absolute;
               width: 200px;
               height: 200px;
               margin-top: -330px;
               margin-left: 350px;
               background-color: #f3a464;
               line-height: 200px;
           }

           #box9{
               width: 200px;
               height: 200px;
               margin-top: 530px;
               margin-left: 350px;
               background-color: #f3a464;
               z-index: 0;
               text-align: center;
           }
       </style>
   </head>
   <body>
       <div id="box">
           <div id="left">
               <div id="left-top">1</div>
               <div id="left-bottom">2</div>
           </div>
           <div id="right-top">
               3
               <div id="box7">7</div>
               <div id="box8">8</div>
           </div>
           <div id="right-bottom">
               <div id="box4">4</div>
               <div id="box5">5</div>
               <div id="box6">6</div>
           </div>
           <div id="box9">9</div>
       </div>
   </body>
</html>