首页 👨‍💻计算机,🐍Python

第一题

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>作业一</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }

    table {
      margin: 0 auto;
    }

    ul {
      margin-top: 100%;
      list-style: none;
      text-align: center;
    }

    .main {
      width: 900px;
      height: 567px;
      margin: 0 auto;
    }

    .left {
      float: left;
      width: 180px;
      height: 567px;
      background: url(images/background.jpg);
    }

    .right {
      float: right;
      width: 690px;
      height: 567px;

    }

    .h1 {
      width: 568px;
      height: 25px;
      background: url(images/main_bg_01.jpg);
    }

    .h1 span {
      margin-left: 30px;
    }

    .img {
      width: 592px;
      height: 158px;
      background: url(images/help_5.jpg);
    }

    .h2 {
      width: 568px;
      height: 25px;
      background: url(images/main_bg_01.jpg);
    }

    .h2 span {
      margin-left: 30px;
    }
  </style>
</head>

<body>
   <table width="1200px" height="60px" border="0" background="images/naviBg.JPG" align="center">
    <tr>
      <td rowspan="2">
        <img src="images/logo.JPG">
      </td>
      <td colspan="2">
        <img src="images/buy.gif">&nbsp;&nbsp;&nbsp;<img src="images/sell.gif">
      </td>
      <td>
        <img src="images/mypp.gif">
      </td>
      <td>
        <img src="images/help.gif">
        <font color="red">帮助中心</font>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <font color="red">欢迎来到抬抬网</font>
      </td>
      <td colspan="2" align="center">
        <a href=""> [登录]&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;[免费注册]&nbsp;&nbsp;&nbsp;|[结算中心]</a>

      </td>
    </tr>
  </table>

  <!-- 主体 -->
  <div class="main">
    <!-- 左边 -->
    <div class="left">
      <ul>
        <li> <img src="images/help_1.JPG" alt=""></li>
        <li> <img src="images/help_2.JPG" alt=""></li>
        <li> <img src="images/help_3.JPG" alt=""></li>
        <li> <img src="images/help_4.JPG" alt=""></li>
      </ul>
    </div>
    <!-- 右边 -->
    <div class="right">
      <div class="h1">
        <span>新手上路</span>
      </div>
      <div class="img"></div>

      <div class="h2">
        <span>热门帮助</span>
      </div>

      <li><a href="">如何及时与卖家联系</a></li>
      <li><a href="">如何查找我想要的东西</a></li>
      <li><a href="">如何出价购物唱片</a></li>
      <li><a href="">如何使用财付通支付</a></li>
      <li><a href="">如何给买家评价</a></li>

    </div>
</body>

</html>

image-20200925173910149

第二题

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>第二</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }

    li {
      list-style: none;
    }

    h6 {
      color: #555555;
      float: right;
    }

    header {
      width: 800px;
      height: 100px;
      background: #000;
      margin: 0 auto;
    }

    .top {
      width: 800px;
      height: 50px;
      color: white;
      background: #55555d;
    }

    ul {
      margin-left: 40px;
    }

    .top ul li {
      float: left;
      line-height: 40px;
      margin-right: 45px;
    }

    main {
      width: 800px;
      height: 460px;
      margin: 0 auto;
    }

    .left {
      float: left;
      width: 200px;
      height: 460px;
      background: #141414;
    }

    h4 {
      color: white;
      margin-left: 20px;
    }

    .box {
      margin: 15px;
      width: 167px;
      height: 112px;
      background: #30292b;
    }

    form {
      margin-left: 20px;
      color: white;
    }

    select {
      width: 100px;
      margin-left: 30px;
      margin-top: 5px;
    }

    .box1 {
      margin: 15px;
      width: 167px;
      height: 112px;
      background: url(images/pic9.bmp);
    }

    .right {
      width: 600px;
      height: 460px;
      float: right;
      background: #141414;

    }

    .zhubao {
      width: 590px;
      height: 74px;
      background: url(images/banner2.bmp);
      margin-left: 10px;
    }

    .box3 {
      width: 590px;
      height: 310px;
      background: url(images/main.png);
    }

    .form {
      text-align: center;
    }

    footer {
      width: 800px;
      height: 70px;
      margin: 0 auto;
      background: url(images/bottom.png);
    }
  </style>
</head>

<body>
  <header>
    <h6>设为首页&nbsp;|&nbsp;加入收藏</h6>
    <!-- logo -->
    <img src="images/banner.bmp" alt="" style="width: 800px;">
    <div class="top">
      <ul>
        <li>首页</li>
        <li>关于我们</li>
        <li>产品搜索</li>
        <li>企业文化</li>
        <li>校企合作</li>
        <li>企业专栏</li>
        <li>在线专家</li>
      </ul>

    </div>
  </header>
  <main>
    <!-- 左边 -->
    <div class="left">
      <h4>会员登录</h4>
      <div class="box">
        <form>
          用户名:<input type="text" style="width: 80px;">
          密&nbsp;&nbsp;&nbsp;码:<input type="password" style="width: 80px;">
          <input type="submit" value="提交" style="margin-left: 40px;margin-top: 5px;">
        </form>
      </div>
      <h4>产品搜索</h4>
      <div class="box">
        <input type="text" style="width: 80px;margin-left: 30px;"> <input type="submit" value="提交">
        <select>
          <option>产品编码</option>
          <option>产品编码</option>
          <option>产品编码</option>
          <option selected="selected">产品编码</option>
        </select><br>
        <select>
          <option>产品编码</option>
          <option>产品编码</option>
          <option>产品编码</option>
          <option selected="selected">产品编码</option>
        </select>
        <select>
          <option>产品编码</option>
          <option>产品编码</option>
          <option>产品编码</option>
          <option selected="selected">产品编码</option>
        </select>

      </div>
      <div class="box1"></div>
    </div>
    <!-- 右边 -->
    <div class="right">
      <img src="images/zbwh.png" alt="" style="margin-top: 20px;">
      <img src="images/line.png" alt="" style="width: 600px;">
      <div class="zhubao"></div>
      <div class="box3">

      </div>
    </div>
    <!-- 底部 -->
  </main>
  <footer></footer>
</body>

</html>

image-20200925173834991




文章评论

目录