• 网页开发——淘宝首页导航

    这篇博文主要是重新学习（复习）前端知识，通过写淘宝购物首页导航为案例。

     html主要书写内容：

    1.首先我写了一个大盒子，用于存放所用的全部标签

    主要内容

    2.插入一张淘宝网图片 

    淘宝网站商标

    3.在淘宝网图片右边写一个大盒子用于存放搜索引擎与一些主要购物大板块的链接

     

     

    4 .在search_box大盒子里面放入搜索框和搜索按钮以及装购物超标签的盒子

     

     

    5.在search_links盒子写入常购物板块的超链接 

    一淘限时

    苹果

    手链

     窗帘

     女裤

     mac

    手表

     女袜

    电动牙刷

    杯子

    包包 

    css主要书写内容：

    1. <style>
    2.         div{
    3.             display: block;
    4.         }
    5.         .nav{
    6.             width: 1438px;
    7.             height: 125px;
    8.             /* background-color: pink; */
    9.             text-align: center;
    10.         }
    11.         .nav img{
    12.             padding: 22px 0 23px;
    13.             /* display: inline-block; */
    14.             height: auto;
    15.             max-width: 100%;
    16.             vertical-align: top
    17.         }
    18.        .nav .search_box{
    19.             position: relative;
    20.             display:inline-block;
    21.             width: 690px;
    22.             height: px;
    23.             /* background-color: g */
    24.             border: 3px solid #f03726;
    25.             border-right: 0;
    26.             /* float: right; */
    27.             height: 34px;
    28.             line-height: 23px;
    29.             margin-top: 30px;
    30.             margin-left: 80px;  
    31.        }
    32.        .search_text{
    33.             height: 23px;
    34.             font-size: 12px;
    35.             border: 0;
    36.             width: 85%;
    37.             outline: 0;
    38.             /* padding-top: 5px; */
    39.             margin-top: 5px; 
    40.         }
    41.        
    42.         .search_button{
    43.         width: 95px;
    44.         height: 40px;
    45.         border: 0;
    46.         position: absolute;
    47.         top: -3px;
    48.         right: 0;
    49.         background: #f03726;
    50.         color: #f5f5f2;
    51.         font-size: 18px;
    52.         float: right;
    53.        }
    54.        .search_warp{
    55.             display: inline;
    56.             overflow: hidden;
    57.             padding: 8px 110px 8px 10px
    58.        }
    59.        .search_links{
    60.             text-decoration: none;
    61.             padding-top: 10px;
    62.             height: 23px;
    63.             line-height: 23px;
    64.             overflow: hidden;
    65.             width: 690px;
    66.             text-align: left;
    67.            margin-left: 18px;
    68.            color: #000;
    69.             /* display: block; */
    70.  
    71.        }
    72.        .search_links .red{
    73.            color: red;
    74.        }
    75.        a{
    76.            text-decoration: none;
    77.        }
    78.        .search_links a{
    79.             float: left;
    80.             margin-right: 20px;
    81.        }
    82.     style>

    淘宝首页导航标签的实现： 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>淘宝主页title>
    8.     <style>
    9.         div{
    10.             display: block;
    11.         }
    12.         .nav{
    13.             width: 1438px;
    14.             height: 125px;
    15.             /* background-color: pink; */
    16.             text-align: center;
    17.         }
    18.         .nav img{
    19.             padding: 22px 0 23px;
    20.             /* display: inline-block; */
    21.             height: auto;
    22.             max-width: 100%;
    23.             vertical-align: top
    24.         }
    25.        .nav .search_box{
    26.             position: relative;
    27.             display:inline-block;
    28.             width: 690px;
    29.             height: px;
    30.             /* background-color: g */
    31.             border: 3px solid #f03726;
    32.             border-right: 0;
    33.             /* float: right; */
    34.             height: 34px;
    35.             line-height: 23px;
    36.             margin-top: 30px;
    37.             margin-left: 80px;  
    38.        }
    39.        .search_text{
    40.             height: 23px;
    41.             font-size: 12px;
    42.             border: 0;
    43.             width: 85%;
    44.             outline: 0;
    45.             /* padding-top: 5px; */
    46.             margin-top: 5px; 
    47.         }
    48.        
    49.         .search_button{
    50.         width: 95px;
    51.         height: 40px;
    52.         border: 0;
    53.         position: absolute;
    54.         top: -3px;
    55.         right: 0;
    56.         background: #f03726;
    57.         color: #f5f5f2;
    58.         font-size: 18px;
    59.         float: right;
    60.        }
    61.        .search_warp{
    62.             display: inline;
    63.             overflow: hidden;
    64.             padding: 8px 110px 8px 10px
    65.        }
    66.        .search_links{
    67.             text-decoration: none;
    68.             padding-top: 10px;
    69.             height: 23px;
    70.             line-height: 23px;
    71.             overflow: hidden;
    72.             width: 690px;
    73.             text-align: left;
    74.            margin-left: 18px;
    75.            color: #000;
    76.             /* display: block; */
    77.  
    78.        }
    79.        .search_links .red{
    80.            color: red;
    81.        }
    82.        a{
    83.            text-decoration: none;
    84.        }
    85.        .search_links a{
    86.             float: left;
    87.             margin-right: 20px;
    88.        }
    89.     style>
    90. head>
    91. <body>
    92.     <div class="nav">
    93.         <img src="./images/tabao.jpg" alt="淘宝网站商标" >
    94.         <div class="search_box">
    95.           <span class="search_warp">  <input type="text" class="search_text" value="女装">span>
    96.             <input type="submit" value="搜索" class="search_button">
    97.             <div class="search_links">
    98.                 <a href="#" class="red">一淘限时a>
    99.                 <a href="#">苹果a>
    100.                 <a href="#">手链a>
    101.                 <a href="#">窗帘a>
    102.                 <a href="#">女裤a>
    103.                 <a href="#">maca>
    104.                 <a href="#">手表a>
    105.                 <a href="#">女袜a>
    106.                 <a href="#">电动牙刷a>
    107.                 <a href="#">杯子a>
    108.                 <a href="#">包包a>
    109.              div>
    110.         div>
    111.       
    112.     div>
    113. body>
    114. html>

    运行结果：

    代码中使用的图片，我将其放入到百度网盘中，大家可以自己去提取：

    链接：https://pan.baidu.com/s/1nKw1vN6ovzm4K7VRk17hPg?pwd=1mvr 
    提取码：1mvr

  • 相关阅读:
    （附源码）ssm招聘网站 毕业设计 250858
    s27.linux运维面试题分享
    SQLite3 操作命令以及c/c++编程API和例子
    从零打造“乞丐版” React（一）——从命令式编程到声明式编程
    vulnhub靶机Funbox11
    前端架构师之02_Node.js安装
    TCPIP协议栈的心跳、丢包重传、连接超时机制实例详解
    java计算机毕业设计家政服务系统MyBatis+系统+LW文档+源码+调试部署
    Python迭代器和生成器
    做库存功能业务场景详解，S2B2B系统助力建筑建材企业精准掌握库存动态
  • 原文地址：https://blog.csdn.net/gjbss/article/details/128014958