页面布局综合练习_2018-08-21-16:00提交 - 作业

Home > List of blog posts > 页面布局综合练习_2018-08-21-16:00提交

Blogger Information

Blog 17

fans 0

comment 0

visits 10692

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>文档管理</title>
</head>
<body>
  <header>
    文档管理
  </header>
<main>
  <table>
   <caption>文档管理</caption>

       <tr>
         <td>编号</td>
         <td>图片</td>
         <td>标题</td>
         <td>分类</td>
         <td>操作</td>
       </tr>


   <tr>
     <td>1</td>
     <td><img src="" alt="图片丢失"></td>
     <td><a href="">Apple公司最新旗舰产品: iPhone X 系列手机隆重上市</a></td>
     <td>手机</td>
     <td><a href="">编辑</a> | <a href="">删除</a></td>

   </tr>
   <tr>
     <td>2</td>
     <td><img src="" alt="图片丢失"></td>
     <td><a href="">Apple公司最新旗舰产品: iPhone X 系列手机隆重上市</a></td>
     <td>手机</td>
     <td><a href="">编辑</a> | <a href="">删除</a></td>

   </tr>
   <tr>
     <td>3</td>
     <td><img src="" alt="图片丢失"></td>
     <td><a href="">华为P20手机将全面采用自主研发的麒麟系统片</a></td>
     <td>手机</td>
     <td><a href="">编辑</a> | <a href="">删除</a></td>

   </tr>
   <tr>
     <td>4</td>
     <td><img src="" alt="图片丢失"></td>
     <td><a href="">OPPO手机勇夺印度市销售冠军</a></td>
     <td>手机</td>
     <td><a href="">编辑</a> | <a href="">删除</a></td>

   </tr>
  </table>
  <ul>
    <li ><a href="">首页</a></li>
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li class="more"> <a href="">...</a></li>
    <li><a href="">尾页</a></li>
  </ul>
  <style>
  *{
    margin: 0;
    padding: 0;
  }
  header{

    text-align: center;
    background: #eee;
    height: 3rem;
    line-height: 3rem;
    margin: 2rem;

  }
  table{
    width: 90%;
    margin: auto;
    border-collapse: collapse;
     text-align: center;

  }
  caption{
    margin: 1rem;
  }
  table,th,td{

    border: 2px solid black;

  }
  table tr:first-child{
    background-color: #0ee;
  }
   td{
    padding: 1rem;
  }
  a{
      text-decoration-line: none;
      color: blue;
  }
  a:hover{
    color: red;
  }
  ul{
    margin-top: 1rem;
    text-align: center;
  }
  li {
    display: inline;
    padding: 0.5rem;
    background: #aaf;
    border: 2px solid blue;
    border-radius: 4px;
    list-style-type: none;

  }
  li:nth-child(2){
    background: green;
  }
  .more{
    border: none;
    background: #fff;
  }
  </style>
</main>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

2、产品管理

实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>产品管理</title>
</head>
<body>
  <header>
    产品管理
  </header>
<main>
  <table>
   <caption>产品管理</caption>

       <tr>
         <td>编号</td>
         <td>图片</td>
         <td>型号</td>
         <td>价格</td>
         <td>操作</td>
       </tr>


   <tr>
     <td>1</td>
     <td><img src="" alt="图片丢失"></td>
     <td><a href="">iPhone X </a></td>
     <td>6988</td>
     <td><a href="">编辑</a> | <a href="">删除</a></td>

   </tr>
   <tr>
     <td>2</td>
     <td><img src="" alt="图片丢失"></td>
     <td><a href="">华为p20</a></td>
     <td>7888</td>
     <td><a href="">编辑</a> | <a href="">删除</a></td>

   </tr>
   <tr>
     <td>3</td>
     <td><img src="" alt="图片丢失"></td>
     <td><a href="">小米9</a></td>
     <td>6789</td>
     <td><a href="">编辑</a> | <a href="">删除</a></td>

   </tr>
   <tr>
     <td>4</td>
     <td><img src="" alt="图片丢失"></td>
     <td><a href="">OPPO x20</a></td>
     <td>3999</td>
     <td><a href="">编辑</a> | <a href="">删除</a></td>

   </tr>
  </table>
  <ul>
    <li ><a href="">首页</a></li>
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li class="more"> <a href="">...</a></li>
    <li><a href="">尾页</a></li>
  </ul>
  <style>
  *{
    margin: 0;
    padding: 0;
  }
  header{

    text-align: center;
    background: #eee;
    height: 3rem;
    line-height: 3rem;
    margin: 2rem;

  }
  table{
    width: 90%;
    margin: auto;
    border-collapse: collapse;
     text-align: center;

  }
  caption{
    margin: 1rem;
  }
  table,th,td{

    border: 2px solid black;

  }
  table tr:first-child{
    background-color: #0ee;
  }
   td{
    padding: 1rem;
  }
  a{
      text-decoration-line: none;
      color: blue;
  }
  a:hover{
    color: red;
  }
  ul{
    margin-top: 1rem;
    text-align: center;
  }
  li {
    display: inline;
    padding: 0.5rem;
    background: #aaf;
    border: 2px solid blue;
    border-radius: 4px;
    list-style-type: none;

  }
  li:nth-child(2){
    background: green;
  }
  .more{
    border: none;
    background: #fff;
  }
  </style>
</main>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

3、分类管理

实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>分类管理</title>
</head>
<body>
  <header>
    分类管理
  </header>
<main>
  <table>
   <caption>分类管理</caption>

       <tr>
         <td>编号</td>
         <td>分类名称</td>
         <td>层级</td>
         <td>是否启用</td>
         <td>操作</td>
       </tr>


   <tr>
     <td>1</td>
     <td>手机</td>
     <td>顶级</td>
     <td>启用</td>
     <td><a href="">编辑</a> | <a href="">删除</a></td>

   </tr>
   <tr>
     <td>2</td>
     <td>笔记本电脑</td>
     <td>顶级</td>
     <td>禁用</td>
     <td><a href="">编辑</a> | <a href="">删除</a></td>

   </tr>
   <tr>
     <td>3</td>
     <td>打印机</td>
     <td>二级</td>
     <td>启用</td>
     <td><a href="">编辑</a> | <a href="">删除</a></td>

   </tr>
   <tr>
     <td>4</td>
     <td>显示器</td>
     <td>三级</td>
     <td>禁用</td>
     <td><a href="">编辑</a> | <a href="">删除</a></td>

   </tr>
  </table>
  <ul>
    <li ><a href="">首页</a></li>
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li class="more"> <a href="">...</a></li>
    <li><a href="">尾页</a></li>
  </ul>
  <style>
  *{
    margin: 0;
    padding: 0;
  }
  header{

    text-align: center;
    background: #eee;
    height: 3rem;
    line-height: 3rem;
    margin: 2rem;

  }
  table{
    width: 90%;
    margin: auto;
    border-collapse: collapse;
     text-align: center;

  }
  caption{
    margin: 1rem;
  }
  table,th,td{

    border: 2px solid black;

  }
  table tr:first-child{
    background-color: #0ee;
  }
   td{
    padding: 1rem;
  }
  a{
      text-decoration-line: none;
      color: blue;
  }
  a:hover{
    color: red;
  }
  ul{
    margin-top: 1rem;
    text-align: center;
  }
  li {
    display: inline;
    padding: 0.5rem;
 
    border: 2px solid blue;
    border-radius: 4px;
    list-style-type: none;

  }
  li:nth-child(2){
    background: green;
  }
  .more{
    border: none;
    background: #fff;
  }
  </style>
</main>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

三、手抄作业：

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

2018-08-13-1

2018-08-13 22:08:11