东师20秋学期《web网页开发基础》期末作业考核

奥鹏网院作业 · 发表于 2021-4-4 20:48:34

东师20秋学期期末作业考核 web网页开发基础
要求：在本文档中的题目下作答，在所写的代码下面粘贴运行后的网页截图，提交本word文档即可。
小明的女朋友跟他生气了，他想哄女朋友开心。他在想为女朋友做点儿什么呢？他看女朋友最近经常浏览淘宝、京东、新浪、百度这些网站，于是，就给她做了简单的页面。女朋友看了之后感觉不太好看，小明同学想将列表的方式转化为表格。过了一段时间，小明同学学到了css，发现css可以美化它写的网站。
<DOCTYPE html>
  <html>
<head></head>
<body>
   <table border="1" cellpadding = "20" cellspacing="0">
      <tr>
      <th>网站名称</th>
      <th>网站地址</th>
      </tr>
      <tr>
      <td>京东</td>
      <td>http://www.jingdong.com</td>
      </tr>
      <tr>
      <td>百度</td>
      <td>http://www.baidu.com</td>
      </tr>
      <tr>
      <td>新浪</td>
      <td>http://www.sina.com.cn</td>
      </tr>
      <tr>
      <td>淘宝</td>
      <td>http://www.taobao.com </td>
      </tr>
   </table>
<label for="name">网站名称：</label>
<input id="name"/>
<label for="address">网站链接：</label>
<input id="address"/>
<span class="btn">添加</span>
<style>
table {
   margin-bottom: 20px;
}
.btn {
   display: inline-block;
   padding: 3px 10px;
   border: 1px solid;
   margin-left: 20px;
   cursor: pointer;
}
  </style>

  </body>
  </html>

1.请同学们使用css实现网页背景颜色为#f1f1f1, 表格左右居中，内容居中展示，距上50px，奇数行背景色为#f5f2eb，取消a标签下划线效果，效果图如下:

2.小明同学给添加按钮添加点击事件，并判读两个输入框的值不能为空，如果两个输入框有一个值为空的话以弹窗提示：请输入添加网站所需内容。

		自动登录	找回密码
密码			立即注册