Web前端第三次作业-CSDN博客

本文链接：https://blog.csdn.net/shayell/article/details/140610218

1.学校官网

（1）相关信息

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学校官网-相关信息</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }
  .header {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    text-align: center;
  }
  .nav {
    overflow: hidden;
    background-color: #333;
  }
  .nav a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  .nav a:hover {
    background-color: #ddd;
    color: black;
  }
</style>
</head>
<body>

<div class="header">
  <h1>相关信息</h1>
</div>

<div class="nav">
  <a href="index.html">首页</a>
  <a href="about.html">相关信息</a>
  <a href="login.html">登录</a>
</div>

<h2>学校历史</h2>
<p></p>

<h2>教育理念</h2>
<p></p>

</body>
</html>

（2）首页

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学校官网 - 首页</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }
  .header {
    background-color: blue;
    color: white;
    padding: 10px;
    text-align: center;
  }
  .nav {
    overflow: hidden;
    background-color: #333;
  }
  .nav a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  .nav a:hover {
    background-color: #ddd;
    color: black;
  }
</style>
</head>
<body>

<div class="header">
  <h1>首页</h1>
</div>

<div class="nav">
  <a href="index.html">首页</a>
  <a href="about.html">关于我们</a>
  <a href="login.html">登录</a>
</div>

<h2>最新消息</h2>
<p></p>

<h2>学校简介</h2>
<p></p>

</body>
</html>

（3）登录

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学校官网 - 登录</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }
  .login-container {
    width: 300px;
    margin: 0 auto;
    margin-top: 100px;
  }
  input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
  button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
  }
  button:hover {
    opacity: 0.8;
  }
</style>
</head>
<body>

<div class="login-container">
  <h2>登录</h2>

  <form action="/login" method="post">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" required>

    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>

    <button type="submit">登录</button>
  </form>
</div>

</body>
</html>

截图：

2.电商

（1）代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝商品页面</title>
    
    <style>
        .box{
            width: 90%;
            margin: auto;
            float: left;
            margin-left: 110px;
        }
        .prod{
            width: 234px;
            height: 366px;
            list-style: none;
            border: 1px solid #f2f2f2;
            display: inline-block;
            line-height: 1.6;
            margin-left: -5px;
            
        }
        .prod-href{
            text-decoration: none;
        }
        .prod:hover{
            border-color: red;
        }
     
        .prod-intoduce-span{
            color: #9b9b9b;
            font-size: 14px;
        }
        .prod-price{
            font-size: 19px;
            color: red;
        }
        .prod-boss{
            color: #9b9b9b;
            font-size: 12px;
        }
        .prod-sale{
            color: #9b9b9b;
            font-size: 12px;
            border-top: 1px solid #f2f2f2;
            text-align: right;
            padding-top: 10px;
        }
 
        .prod-test-box{
            width: 210px;
            height: 340px;
            margin: auto;
            margin-top: 15px;
        }
 
         .firstbox{
            height: 15px;
            width: 100%;
            /* border: 1px solid black; */
            text-align: center;
           
         }
 
         .firstbox li{
            width: 5%;
            height: 100%;
            display: inline-block;
            /* border: 1px solid black; */
            list-style:none;
            font-size: 12px; 
         }
         #second{
            width: 220px;
         }
         .one,.two{
            float: left;
            /* border: 1px solid black; */
            margin-top: 20px;
 
         }
         .one{
            width: 20%;
            height: 130px;
            margin-left: 150px;
            text-align: center;
            padding-top: 20px;
         }
         .two{
            width: 60%;
            height:130px ;
         }
         .three,.four{
            float: left;
            border: 2px solid black;
            margin-top: 20px;
         }
         .three{
            width: 70%;
            height: 40px;
         }
         .four{
            width: 10%;
            height: 40px;
            text-align: center;
            font-size: 25px;
            background-color: rgb(238, 158, 54);
           
 
         }
          .five{
            display: inline-block;
          }
         .five li{
            float: left;
           
            height: 20px;
            /* border: 1px solid black; */
            list-style: none;
            margin-left: 11px;
         }
    </style>
</head>
<body>
      <div class="firstbox">
        <li id="first"> </li>
        <li>中国大陆</li>
        <li>亲，请登录</li>
        <li>免费注册</li>
        <li>手机逛淘宝</li>
        <li>网页无障碍</li>
        <li id="second"></li>
        <li>淘宝网首页</li>
        <li>我的淘宝</li>
        <li>购物车</li>
        <li>收藏夹</li>
        <li>商品分类</li>
        <li>免费开店</li>
        <li>千牛卖家中心</li>
        <li>帮助中心</li>
        <li id="end"></li>
      </div>
 
     <div class="one">
        <img src="https://img.alicdn.com/tfs/TB1R5fsgyDsXe8jSZR0XXXK6FXa-281-80.jpg" alt="">
     </div>
     <div class="two">
        <div class="three"></div>
        <div class="four">搜索</div>
        <div class="five">
            <li>一淘限时抢</li>
            <li>女包包</li>
            <li>mac</li>
            <li>沐浴露</li>
            <li>口红</li>
            <li>床</li>
            <li>手机</li>
            <li>手表</li>
            <li>苹果</li>
            <li>窗帘</li>
            <li>零食</li>
        </div>
     </div>
    <div class="box">
        <ul class="prods">
            <li class="prod">
                <a class="prod-href" href="https://item.taobao.com/item.htm?id=668471446102&ali_refid=a3_430673_1006:1121635483:N:P%2FZ32%2FrV%2FQXfQRA2YhUlJQ%3D%3D:077f30b74a795404c75ac5adf204495a&ali_trackid=1_077f30b74a795404c75ac5adf204495a&spm=a2e0b.20350158.31919782.1&bxsign=tanBrTy6OAHn3_9mUgdEEknyXxFFMi7eypWKYKcICDB7Yl2gTNSl27xSTVBq4v3VqDW4ciyC_uHd2yFG8tFgOTqDYaDt1Ub3Gkjg_GxQT87elM">
                    <div class="prod-test-box">
                        <img class="prod-img" width="200px" height="200px" src="https://img.alicdn.com/imgextra/i4/2390140164/O1CN01E2DYtR1D59si3d17L_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
                        
                        <div class="prod-introduce">
                            <span class="prod-intoduce-span">全店批发价 800多款得力办公用品一站购</span>
                        </div>
                        <div class="prod-price">￥66</div>
                        <div class="prod-boss">美团批发部</div>
                        <div class="prod-sale">月销9999+</div>
                    </div>
                </a>
             </li>
        </ul>
    </div>
</body>
</html>

截图：