web作业练习

最新推荐文章于 2024-09-02 20:34:02 发布

陈佳雨c

最新推荐文章于 2024-09-02 20:34:02 发布

阅读量141

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_63199267/article/details/130180663

版权

此HTML代码展示了小米商城的顶部导航条设计，包括左侧的服务链接、App下载功能和右侧的购物车及用户信息。当鼠标悬停在下载App上时，会显示二维码图片；悬停在购物车上，会显示购物车详情。此外，还有一段代码是关于商品展示的布局，包括小米闪购和手机模块，展示了商品图片、名称、价格等信息。

摘要由CSDN通过智能技术生成

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>1</title>
  <style>
    a {
      display: block;
      width: 230px;
      height: 40px;
      background-color: #55585a;
      color: #fff;
      font-size: 14px;
      text-decoration: none;
      text-indent: 2em;
      line-height: 40px;
    }

    a:hover {
      background-color: red;
    }
  </style>

</head>

<body>
  <a href="#">手机 电话卡</a>
  <a href="#">电视 盒子</a>
  <a href="#">笔记本 平板</a>
  <a href="#">出行 穿戴</a>
  <a href="#">智能 路由器</a>
  <a href="#">健康 儿童</a>
  <a href="#">耳机 音响</a>
</body>

</html>

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小米商城 - 小米11、Redmi K40 Pro、小米MIX Alpha，小米电视官方网站</title>
  <style>
    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    footer,
    header,
    hgroup,
    menu,
    nav,
    output,
    ruby,
    section,
    summary,
    time,
    mark,
    audio,
    video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
    }

    /* HTML5 display-role reset for older browsers */
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
      display: block;
    }

    body {
      line-height: 1;
    }

    ol,
    ul {
      list-style: none;
    }

    blockquote,
    q {
      quotes: none;
    }

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
      content: '';
      content: none;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
    }


    /* 公共样式 */
    .clearfix::before,
    .clearfix::after {
      content: "";
      display: table;
      clear: both;
    }

    /* 去除a的下划线 */
    a {
      text-decoration: none;
      color: #333;
    }

    body {
      font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
      color: #333;
      min-width: 1226px;
    }

    /* 设置一个类，用来表示中间容器的宽度 */
    .w {
      /* 固定容易宽度 */
      width: 1226px;
      /* 设置容器居中 */
      margin: 0 auto;
    }

    /* 主页index.html的样式表 */

    /* 顶部导航条的容器 */
    .topbar-wrapper {
      /* 设置宽度全屏 */
      width: 100%;
      /* 设置背景颜色 */
      background-color: #333;
      /* 设置高度和行高 */
      height: 40px;
      line-height: 40px;
    }

    /* 设置超链接颜色 */
    .topbar a {
      font-size: 12px;
      color: #B0B0B0;
      display: block;
    }

    /* 设置超链接移入效果 */
    .topbar a:hover {
      color: #fff;
    }

    /* 设置中间分隔线 */
    .topbar .line {
      color: #424242;
      font-size: 12px;
      margin: 0 8px;
    }

    /* 设置左侧导航栏 */
    .service,
    .topbar li {
      float: left;
    }

    .app {
      position: relative;
    }

    /* 设置app下的小三角 */
    .app::after {
      display: none;
      content: "";
      /* 设置绝对定位 */
      position: absolute;
      width: 0;
      height: 0;
      /* 设置四个方向的边框 */
      border: 10px solid transparent;
      /* 去除上边框 */
      border-top: none;
      /* 设置下边框的颜色 */
      border-bottom-color: #fff;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }

    .app:hover .qrcode,
    .app:hover::after {
      display: block;
      height: 148px;
      z-index: 9999;
    }

    /* 设置下载app的下拉 */
    .app .qrcode {
      /* display: none; */
      position: absolute;
      left: -40px;
      width: 124px;
      /* height: 148px; */
      height: 0;
      overflow: hidden;
      line-height: 1;
      text-align: center;
      background-color: #fff;
      box-shadow: 0 0 8px rgba(0, 0, 0, .3);
      /* transition: 用于为样式设置过渡效果*/
      transition: height 0.3s;
      z-index: 9999;
    }

    /* 设置二维码图片 */
    .app .qrcode img {
      width: 90px;
      margin: 17px;
      margin-bottom: 10px;
    }

    /* 设置二维码文字 */
    .app .qrcode span {
      color: #000;
      font-size: 14px;
    }

    .shop-cart {
      position: relative;
    }

    .box1 {
      position: absolute;
      width: 300px;
      height: 0;
      overflow: hidden;
      line-height: 1;
      text-align: center;
      background-color: #fff;
      color: #000;
      box-shadow: 0 8px 8px rgba(0, 0, 0, .3);
      /* transition: height 0.3s; */
      left: -180px;

    }

    .shop-cart:hover .box1 {
      display: block;
      height: 100px;
      line-height: 100px;
      z-index: 9999;
    }

    /* 设置右侧导航栏 */
    .shop-cart,
    .user-info {
      float: right;
    }

    /* 设置购物车样式 */
    .shop-cart a {
      width: 120px;
      background-color: #424242;
      text-align: center;
    }

    .shop-cart i {
      margin-right: 2px;
    }

    .shop-cart:hover a {
      background-color: #fff;
      color: #ff6700;
    }

    .shop-cart {
      margin-left: 26px;
    }
  </style>
</head>

<body>
  <!-- 顶部导航条 -->
  <!-- 顶部导航条外部容器 -->
  <div class="topbar-wrapper">
    <!-- 创建内部容器 -->
    <div class="topbar w clearfix">
      <!-- 左侧导航条 -->
      <ul class="service">
        <li><a href="javascript:;">小米商城</a></li>
        <li class="line">|</li>
        <li><a href="javascript:;">MIUI</a></li>
        <li class="line">|</li>
        <li><a href="javascript:;">loT</a></li>
        <li class="line">|</li>
        <li><a href="javascript:;">云服务</a></li>
        <li class="line">|</li>
        <li><a href="javascript:;">金融</a></li>
        <li class="line">|</li>
        <li><a href="javascript:;">有品</a></li>
        <li class="line">|</li>
        <li><a href="javascript:;">小爱开放平台</a></li>
        <li class="line">|</li>
        <li><a href="javascript:;">企业团购</a></li>
        <li class="line">|</li>
        <li><a href="javascript:;">资质证照</a></li>
        <li class="line">|</li>
        <li><a href="javascript:;">协议规则</a></li>
        <li class="line">|</li>
        <li>
          <a class="app" href="javascript:;">
            下载app
            <!-- 添加一个弹出层 -->
            <div class="qrcode">
              <img src="./img/download.png">
              <span>小米商城APP</span>
            </div>
          </a>
        </li>
        <li class="line">|</li>
        <li><a href="javascript:;">Select Location</a></li>
      </ul>
      <!-- 购物车 -->
      <ul class="shop-cart">
        <li>
          <a class="cart" href="javascript:;">
            <i class="fas fa-shopping-cart"></i>
            购物车（0）
          </a>
          <div class="box1">
            <span>购物车中还没有商品，赶紧选购吧！</span>
          </div>
        </li>
      </ul>
      <!-- 用户登录注册 -->
      <ul class="user-info">
        <li><a href="javascript:;">登录</a></li>
        <li class="line">|</li>
        <li><a href="javascript:;">注册</a></li>
        <li class="line">|</li>
        <li><a href="javascript:;">消息通知</a></li>
      </ul>

    </div>
  </div>

</body>

</html>

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="shortcut icon" href="/fonts/" />
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/common.css">
  <style>
    .main {
      background-color: #f5f5f5;
      width: 100%;
      margin-top: 20px;
      overflow: hidden;
      /*自动找高 */
    }

    .flash_hd,
    .miphone_hd,
    .elec_hd,
    .vedio_hd {
      height: 58px;
    }

    .flash_hd h4,
    .miphone h4,
    .elec h4,
    .vedio_hd h4 {
      float: left;
      font-weight: 200;
      line-height: 58px;
      font-size: 22px;
      text-align: left;
    }

    .flash_bd {
      height: 339px;
    }

    .flash_bd>div {
      border-top: 1px solid #e53935;
    }

    .flash_bd>div:nth-child(2) {
      border-top-color: #00c0a5;
    }

    .flash_bd>div:nth-child(3) {
      border-top-color: #ffac13;
    }

    .flash_bd>div:nth-child(4) {
      border-top-color: #ffac13;
    }

    .flash_bd>div:nth-child(5) {
      border-top-color: #2196f3;
    }

    .items {
      width: 234px;
      height: 338px;
      background-color: #fff;
      float: left;
      margin-left: 14px;
    }

    .f_one {
      margin-left: 0;
      vertical-align: center;
      padding-top: 41px;
      background-color: #f1eded;
    }

    .f_one p {
      color: #ef3a3b;
      font-size: 21px;

    }

    .f_one img {
      width: 34px;
      height: 63px;
      margin: 15px auto;
    }

    .f_one h4 {
      font-size: 15px;
      color: rgba(0, 0, 0, .56);
    }

    .watch {
      width: 160px;
      margin: 39px 0 22px;
    }

    .name {
      width: 194px;
      height: 24px;
      color: #212121;
      font-size: 14px;
      margin: 0 auto 3px;
    }

    .c {
      width: 194px;
      height: 18px;
      font-size: 12px;
      color: #b0b0b0;
      margin: 0 auto 12px;
    }

    .price {
      font-size: 14px;
      color: #ff6709;
    }

    .bd_box img {
      width: 100%;
      height: 120px;
      margin: 22px auto;
    }

    .miphone {
      height: 58px;
    }

    .miphone .more {
      float: right;
      color: #424242;
      font-size: 16px;
      line-height: 58px;
    }

    .miphone .more::after {
      font-family: 'icomoon';
      content: '\ea42';
    }

    .miphone .more:hover {
      color: #ff6700;
    }

    .miphone_bd_l {
      width: 234px;
      height: 614px;
      float: left;
    }

    .miphone_bd_l:hover,
    .miphone_bd_r>div:hover,
    .items:hover,
    .elec_bd .last>div:hover,
    .vedio_bd ul li:hover {
      box-shadow: 0 15px 30px 30px rgba(0, 0, 0, .1);
      transform: translateY(-2px);
      transition: all 0.5s;
    }

    .miphone_bd_r {
      float: left;
      width: 992px;
      height: 614px;
    }

    .miphone_bd_r>div {
      float: left;
      height: 300px;
      width: 234px;
      background-color: #fff;
      margin: 0 0 14px 14px;
    }
  </style>
</head>

<body>

  <!-- main  s -->
  <div class="main">
    <div class="w">
      <!-- 小米闪购 s -->
      <div class="flash">
        <div class="flash_hd">
          <h4>小米闪购</h4>
        </div>
        <div class="flash_bd">
          <div class="f_one items">
            <p>14:00 场</p>
            <img src="images/flash.png" alt="">
            <h4>距离结束还有</h4>
          </div>
          <div class="items">
            <a href="#">
              <img src="images/watch.png" alt="" class="watch">
              <p class="name">小米手环4 NFC版黑色</p>
              <p class="c">大屏彩显，可刷公交、门禁</p>
              <p class="price">
                209元
                <del>229元</del>
              </p>
            </a>
          </div>
          <div class="items">
            <a href="#">
              <img src="images/watch.png" alt="" class="watch">
              <p class="name">小米手环4 NFC版黑色</p>
              <p class="c">大屏彩显，可刷公交、门禁</p>
              <p class="price">
                209元
                <del>229元</del>
              </p>
            </a>
          </div>
          <div class="items">
            <a href="#">
              <img src="images/watch.png" alt="" class="watch">
              <p class="name">小米手环4 NFC版黑色</p>
              <p class="c">大屏彩显，可刷公交、门禁</p>
              <p class="price">
                209元
                <del>229元</del>
              </p>
            </a>
          </div>
          <div class="items">
            <a href="#">
              <img src="images/watch.png" alt="" class="watch">
              <p class="name">小米手环4 NFC版黑色</p>
              <p class="c">大屏彩显，可刷公交、门禁</p>
              <p class="price">
                209元
                <del>229元</del>
              </p>
            </a>
          </div>
        </div>
      </div>
      <!-- 小米闪购 e -->


      <!-- 手机模块 s -->
      <div class="miphone">
        <div class="miphone_hd">
          <h4>手机</h4>
          <a href="#" class="more">
            查看全部
          </a>
        </div>
        <div class="miphone_bd">
          <div class="miphone_bd_l">
            <a href="#">
              <img src="images/mi1.webp" alt="">
            </a>
          </div>
          <div class="miphone_bd_r">
            <div>
              <a href="#">
                <img src="images/mi2.jpg" alt="">
                <p class="name">小米10</p>
                <p class="c">骁龙865/1亿像素相机</p>
                <p class="price">3999元起</p>
              </a>
            </div>
            <div>
              <a href="#">
                <img src="images/mi2.jpg" alt="">
                <p class="name">小米10</p>
                <p class="c">骁龙865/1亿像素相机</p>
                <p class="price">3999元起</p>
              </a>
            </div>
            <div>
              <a href="#">
                <img src="images/mi2.jpg" alt="">
                <p class="name">小米10</p>
                <p class="c">骁龙865/1亿像素相机</p>
                <p class="price">3999元起</p>
              </a>
            </div>
            <div>
              <a href="#">
                <img src="images/mi2.jpg" alt="">
                <p class="name">小米10</p>
                <p class="c">骁龙865/1亿像素相机</p>
                <p class="price">3999元起</p>
              </a>
            </div>
            <div>
              <a href="#">
                <img src="images/mi2.jpg" alt="">
                <p class="name">小米10</p>
                <p class="c">骁龙865/1亿像素相机</p>
                <p class="price">3999元起</p>
              </a>
            </div>
            <div>
              <a href="#">
                <img src="images/mi2.jpg" alt="">
                <p class="name">小米10</p>
                <p class="c">骁龙865/1亿像素相机</p>
                <p class="price">3999元起</p>
              </a>
            </div>
            <div>
              <a href="#">
                <img src="images/mi2.jpg" alt="">
                <p class="name">小米10</p>
                <p class="c">骁龙865/1亿像素相机</p>
                <p class="price">3999元起</p>
              </a>
            </div>
            <div>
              <a href="#">
                <img src="images/mi2.jpg" alt="">
                <p class="name">小米10</p>
                <p class="c">骁龙865/1亿像素相机</p>
                <p class="price">3999元起</p>
              </a>
            </div>
          </div>
        </div>
      </div>