会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132495个问题
JAVA 全系列/(隐藏)第二十三阶段:数字货币交易所项目/服务中台_财务系统的开发 22981楼

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
  PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
  "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">

<generatorConfiguration>
   <context id="testTables" targetRuntime="MyBatis3">
      <!-- 生成实体类实现序列化-->
      <plugin type="org.mybatis.generator.plugins.SerializablePlugin"  />
      <!-- 实体类中包含toString() -->
      <plugin type="org.mybatis.generator.plugins.ToStringPlugin" ></plugin>
      <commentGenerator>
         <!-- 是否去除自动生成的注释 true:是 : false:否 -->
         <property name="suppressAllComments" value="true" />
      </commentGenerator>
      <!--数据库连接的信息:驱动类、连接地址、用户名、密码 -->
      <jdbcConnection driverClass="com.mysql.jdbc.Driver"
         connectionURL="jdbc:mysql://localhost:3306/ego" userId="root"
         password="smallming">
      </jdbcConnection>
      <!-- 默认false,把JDBC DECIMAL 和 NUMERIC 类型解析为 Integer,为 true时把JDBC DECIMAL 和 
         NUMERIC 类型解析为java.math.BigDecimal -->
      <javaTypeResolver>
         <property name="forceBigDecimals" value="false" />
      </javaTypeResolver>

      <!-- targetProject:生成PO类的位置 -->
      <javaModelGenerator targetPackage="com.ego.pojo"
         targetProject=".\src">
         <!-- enableSubPackages:是否让schema作为包的后缀 -->
         <property name="enableSubPackages" value="false" />
         <!-- 从数据库返回的值被清理前后的空格 -->
         <property name="trimStrings" value="true" />
      </javaModelGenerator>
        <!-- targetProject:mapper映射文件生成的位置 -->
      <sqlMapGenerator targetPackage="com.ego.mapperxml"
         targetProject=".\src">
         <!-- enableSubPackages:是否让schema作为包的后缀 -->
         <property name="enableSubPackages" value="false" />
      </sqlMapGenerator>
      <!-- targetPackage:mapper接口生成的位置 -->
      <javaClientGenerator type="XMLMAPPER"
         targetPackage="com.ego.mapper"
         targetProject=".\src">
         <!-- enableSubPackages:是否让schema作为包的后缀 -->
         <property name="enableSubPackages" value="false" />
      </javaClientGenerator>
      <!-- 指定数据库表 -->
      <table schema="" tableName="manager"></table>
      <table schema="" tableName="tb_content"></table>
      <table schema="" tableName="tb_content_category"></table>
      <table schema="" tableName="tb_item"></table>
      <table schema="" tableName="tb_item_cat"></table>
      <table schema="" tableName="tb_item_desc"></table>
      <table schema="" tableName="tb_item_param"></table>
      <table schema="" tableName="tb_item_param_item"></table>
      <table schema="" tableName="tb_order"></table>
      <table schema="" tableName="tb_order_item"></table>
      <table schema="" tableName="tb_order_shipping"></table>
      <table schema="" tableName="tb_user"></table>

   </context>
</generatorConfiguration>

老师,我想知道里面的内容需要记住吗?工作中忘记了怎么办?或者随着公司需要不知道需要配置什么怎么办?

JAVA 全系列/第十八阶段:亿级高并发电商项目_架构/编码(旧)/电商:基于SpringSecurity实现后台登录功能 22982楼

老师,中间隐藏部分我想写过渡(官网有过渡),不能用display,所以我用了高度设为零,鼠标悬停后高度变为正常高度从而实现将隐藏部分显示出来的效果,但是我的效果就是有一条阴影线(官网没有),不知道哪里来的?并且鼠标悬停在这条线上,隐藏部分也会出来,可我语法里写的是鼠标悬停在Li标签上!我用display属性的时候,就一切正常,麻烦老师帮我看一下,一直困扰。

html,body,div,h1,h2,h3,h4,h5,h6,dd,dt,dl,form,label,table,caption,tbody,tfoot,thead,tr,td,th,ul,ol,li,pre
,fieldset,legend,input,textarea,button,blockquote,p{margin:0;padding:0}
ul,ol,li{list-style-type:none;}
body{text-align: center;}
img,input{vertical-align:middle;}
img{border:none}
a{text-decoration: none;}
@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1617464689211'); /* IE9 */
  src: url('iconfont.eot?t=1617464689211#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
  url('iconfont.woff?t=1617464689211') format('woff'),
  url('iconfont.ttf?t=1617464689211') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1617464689211#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-icon-test:before {
  content: "\e634";
}

.icon-icon-test1:before {
  content: "\e63b";
}

.icon-icon-test2:before {
  content: "\e63c";
}

.icon-icon-test3:before {
  content: "\e63e";
}

.icon-icon-test4:before {
  content: "\e63f";
}

.icon-icon-test5:before {
  content: "\e640";
}

.icon-icon-test6:before {
  content: "\e641";
}

.icon-icon-test7:before {
  content: "\e642";
}

.icon-icon-test8:before {
  content: "\e644";
}

.icon-icon-test9:before {
  content: "\e645";
}

.icon-icon-test10:before {
  content: "\e648";
}

.icon-icon-test11:before {
  content: "\e64a";
}

.icon-icon-test12:before {
  content: "\e64d";
}

.icon-icon-test13:before {
  content: "\e64e";
}

.icon-icon-test14:before {
  content: "\e64f";
}

.icon-icon-test15:before {
  content: "\e650";
}

.icon-icon-test16:before {
  content: "\e65f";
}

.icon-icon-test17:before {
  content: "\e65e";
}

.icon-alipay:before {
  content: "\e666";
}

.icon-taobao:before {
  content: "\e667";
}
/* 白色导航部分 */
.white-nav{
    width:100%;
    height:100px;
    /* background-color:cadetblue; */
    position:relative;
}
.wrap-nav{
    width:1226px;
    height:100px;
    margin: 0 auto;
}

/* 白色导航左侧logo处内容及样式 */
.logo{
    width:56px;
    height:56px;
    float:left;
    margin-top:22px;
    position: relative;
    overflow:hidden;
}
.logo>img{
    width:56px;
    height:56px;
    /* 将引入的图片设置成带圆角形状 */
    border-radius:40%;
    position:absolute;
    /* 图片位置改变有0.5s的过渡 */
    transition:all .5s;
}
/* 对引入的两张图片进行绝对定位,鼠标悬停在父元素logo上,位置发生改变 */
.logo-mi2{
    left:0;
}
.mifile{
    left:-56px;
}
.logo:hover>.logo-mi2{
    left:56px;
}
.logo:hover>.mifile{
    left:0;
}
.logo:hover{
    display:block;
}

/* 白色导航中间部分内容及样式 */
.nav-bar{
    width:874px;
    height:100px;
    line-height:100px;
    float:left;
}
.nav-bar>ul>li{
    float:left;                                                                                                                                                                                                                                                                                                                                                                                                                 
}
.nav-bar>ul>li>a{ 
    color:#333;
    padding:0 10px;
}
.nav-bar>ul>li:first-child img{
    margin-top:22.5px;
}
/* 鼠标悬停在中间部分Li标签里的超链接a上,字体颜色改变 */
.nav-bar>ul>li>a:hover{
    color:#ff6700;
}
/* 中间部分隐藏的大盒子样式 */
.nav-bar-list{
    width:100%;
    height:0px;
    background-color:#fff;
    border-top:1px solid #eee;
    box-shadow:0 2px 3px rgba(0,0,0,.18);
    position:absolute;
    top:100px;
    left:0;

    /* 当高度设置为0时,其里面的内容部分(含文字、图片等)即为溢出部分,将溢出部分隐藏用overflow:hidden */
    overflow:hidden;  
    /* 将自己隐藏起来    */
    /* display:none;和下文的display:block一起实现将元素隐藏再显示,但上文的高度需设置成应有的高度 */
}
/* 白色导航中间nav-bar部分隐藏的大盒子里嵌套一个div */
.wrap>ul>li{
    width:180px;
    height:229px;
    float:left;
}
/* 隐藏的大盒子中li里的图片外嵌套一个div,目的是设置右边框 */
.img-box{
    width:100%;
    height:110px;
    margin-top:35px;
    margin-bottom:16px;
    border-right:1px solid #e0e0e0;
    box-sizing:border-box;
}
.img-box>img{
    width:160px;
    height:110px; 
}
/* 最后一个Li元素里面的img-box右边框为0 */
.wrap>ul>li:last-child>.img-box{
    border-right:0;
}
.name1,.price1{
    font-size:12px;
    line-height:20px;
}
.name1{ 
    color:#333;
}
.price1{
    color:#ff6700;
}
/* 鼠标悬停在li上,隐藏的大盒子显示出来 */
.nav-bar>ul>li:hover>.nav-bar-list{
 /* display:block;第二种将元素显示出来的方法(但过渡属性不作用于display,作用于颜色、数值、转换、阴影,),
 用display:none;将nav-bar-list隐藏,高度为正常高度,而不是0,本效果要求过渡,所以用高度为0溢出隐藏的方法 */
    height:229px;
}
/* 白色导航右侧搜索框内容及样式 */
.search{
    width:296px;
    height:100px;
    /* background-color: darkkhaki; */
    float:left;
    position:relative;
}
.search>input{
    width:244px;
    height:50px;
    padding:0 10px;
    border:1px solid #e0e0e0;
    font-size:14px;
    margin-top:25px;
    border-right:0;
    box-sizing:border-box;
    /* 鼠标点击后没有边框 */
    outline:none;
    float:left;
    transition:all .2s;
}
.search>button{
    width:52px;
    height:50px;
    margin-top:25px;
    border:1px solid #e0e0e0;
    outline:none;
    float:left;
    transition:all .2s;
}
/* 鼠标悬停在input上,input和它的兄弟相邻元素button的边框颜色改变 */
.search>input:hover,.search>input:hover~button{
    border:1px solid #b0b0b0;
}
/* 鼠标悬停在button上,鼠标变为小手,背景颜色改变 */
.search>button:hover{
    cursor:pointer;
    background-color:#ff6700;
    color:#fff;
}
.search>input:focus,.search>input:focus~button{
    border:1px solid #ff6700;
}
.search-list{
    width:245px;
    height:181px;
    background-color:#fff;
    border:1px solid #ff6700;
    border-top:none;
    box-sizing:border-box;
    position:absolute;
    top:75px;
    left:0;
    display:none;
}
/* 在input处点击鼠标,其后面第二个元素即.search-list出现,(通用选择器) */
.search>input:focus~.search-list{
    display:block;
}
 <!-- 白色导航部分 -->
    <div class="white-nav">
        <div class="wrap-nav">
            <div class="logo">
                <img src="https://s02.mifile.cn/assets/static/image/logo-mi2.png" alt="" class="logo-mi2">
                <img src="https://i1.mifile.cn/f/i/17/appdownload/download.png?1" alt="" class="mifile">
            </div>
            <div class="nav-bar">
                <ul>
                    <li>
                        <a href="#">
                           <img src="../images/f58837161090e2e04bf687088b2ffe77.gif" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">小米手机</a>
                        <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <div class="img-box">
                                            <img src="../images/85e44ea2405ff8414148bbde7446b137.png" alt="">
                                        </div>
                                        <p class="name1">小米MIX FOLD</p>
                                        <p class="price1">9999元起</p>
                                    </li>
                                    <li>
                                        <div class="img-box">
                                            <img src="../images/1a359e9346e3c6ee8c9d8389e3fd9458.png" alt="">
                                        </div>
                                        <p class="name1">小米11 Ultra</p>
                                        <p class="price1">5999元起</p>
                                    </li>
                                    <li>
                                        <div class="img-box">
                                            <img src="../images/a1c45eadcedeb27b1cafca0359422da9.png" alt="">
                                        </div>
                                        <p class="name1">小米11 Pro</p>
                                        <p class="price1">4999元起</p>
                                    </li>
                                    <li>
                                        <div class="img-box">
                                            <img src="../images/56e3379b5422cb06e5c8a0c546445606.png" alt="">
                                        </div>
                                        <p class="name1">小米11 青春版</p>
                                        <p class="price1">2299元起</p>
                                    </li>
                                    <li>
                                        <div class="img-box">
                                            <img src="../images/f9149ef3ba2c9025a4a21c98ae793808.png" alt="">
                                        </div>
                                        <p class="name1">小米10S</p>
                                        <p class="price1">3299元起</p>
                                    </li>
                                    <li>
                                        <div class="img-box">
                                            <img src="../images/963679eaf3937351e154600ab3448460.png" alt="">
                                        </div>
                                        <p class="name1">小米11</p>
                                        <p class="price1">3999元起</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>                                  
                </ul>
            </div>
            <div class="search">
                <input type="text" placeholder="【以旧换新】至高补贴3888元">
                <button class="iconfont">&#xe63c;</button>
                <div class="search-list">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>   

</body>
</html>

image.png

WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS3新特性 22983楼
JAVA 全系列/第十八阶段:亿级高并发电商项目_架构/编码(旧)/电商:基于SpringSecurity实现后台登录功能 22985楼
Python 全系列/ 第十四阶段:自动化操作办公软件、邮件、定时任务等/自动化操作办公软件、邮件、定时任务等 22986楼
WEB前端全系列/第十九阶段:Vue2知识体系(旧)/Vue基础知识 22990楼
JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 22991楼
JAVA 全系列/第二十七阶段:JVM实战和BATJ大厂面试重难点/JVM调优 22992楼

<!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>小米</title>
    <link rel="icon" href="../img/favicon.ico">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/小米官网练习.css">
    <link rel="stylesheet" href="../css/iconfont.css">
    <link rel="stylesheet" href="../css/demo.css">
    
</head>
<body>
<!--顶部图片  -->
<div class="header">
    <a href="#">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/41d16e66381cfeda7b6b39ab67678d5e.jpg?thumb=1&w=1533&h=150&f=webp&q=90" alt="">
    </a>
<!-- 黑色导航div -->
</div>
    <div class="nav">
        <div class="nav-center">
            <ul class="nav-left">
                <li><a href="#">小米商城</a><span>|</span></li>
                <li><a href="#">MIUI</a><span>|</span></li>
                <li><a href="#">loT</a><span>|</span></li>
                <li><a href="#">云服务</a><span>|</span></li>
                <li><a href="#">天星科技</a><span>|</span></li>
                <li><a href="#">有品</a><span>|</span></li>
                <li><a href="#">小爱开放平台</a><span>|</span></li>
                <li><a href="#">企业团购</a><span>|</span></li>
                <li><a href="#">资质证照</a><span>|</span></li>
                <li><a href="#">协议规则</a><span>|</span></li>
                <li class="app">
                    <a href="#">下载APP</a>
                    <span>|</span>
                    <div class="QRcode">
                        <img src="../img/93650133310ec1c385487417a472a26c.png" alt="" class="QRcode-img">
                        <p>小米商城APP</p>
                    </div>
                    <div class="sanjiao"></div>
                </li>
                <li><a href="#">智能生活</a><span>|</span></li>
                <li><a href="#">select location</a></li>
            </ul>   
            <ul class="nav-right">
                <li class="cart">
                    <a href="#">购物车(0)</a>
                    <div class="cart-list">购物车还没有商品,赶紧加入吧</div>
                </li>
                <li><a href="#">信息通知</a></li>
                <li><a href="#">注册</a><span>|</span></li>
                <li><a href="#">登录</a><span>|</span></li>
            </ul>   
        </div>  
    </div>
<!-- 白色导航div -->
<div class="white-nav">
    <div class="white-wrap">
        <div class="logo-mi">
            <a href="#">
                <img src="../img/mi-logo.png" alt="" class="mi-logo">
                <img src="../img/mi-home.png" alt="" class="mi-home">
            </a>
            
        </div>
        <div class="white-nav-center"> 
             <ul>
                <li>
                    <a href="#">
                    <img src="../img/大logo.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">小米手机</a>
                    <div class="pull-down">
                        <div class="pull-down-center">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="img-box">
                                            <img src="../img/pull-down.jpg" alt="">
                                        </div>
                                        <p>小米10s</p>
                                        <p>3299元起</p>
                                    
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="img-box">
                                            <img src="../img/pull-down1.png" alt="">
                                        </div>
                                        <p>小米11</p>
                                        <p>3999元起</p>                                      
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#">Redmi 红米</a>
                    <div class="pull-down">
                        <div class="pull-down-center">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="img-box">
                                            <img src="../img/pull-down1.png" alt="">
                                        </div>
                                        <p>小米10s</p>
                                        <p>3299元起</p>
                                    
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="img-box">
                                            <img src="../img/pull-down.jpg" alt="">
                                        </div>
                                        <p>小米11</p>
                                        <p>3999元起</p>                                      
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <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>
                <li><a href="#">服务</a></li>
                <li><a href="#">社区</a></li>
            </ul> 
        </div>
        <div class="nav-input">
            <input type="text" placeholder="小米之家">
            <button class="button">搜索</button>
               <div class="nav-input-list"></div>
        </div>
    </div>
</div>
<!-- 轮播图部分div -->
<div class="banner">
    <div class="banner-center">
        <div class="center-lfet">
            <ul>
                <li>
                    <a href="#">电视 机顶盒<u>▶</u></a>
                    <div class="center-left-list">
                        <div class="center-left-list-sub">
                            <ul>
                                <li>
                                    <a href="#">
                                    <img src="../img/left.png" alt="">
                                    <span>小米MIX FOLD</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                    <img src="../img/left.png" alt="">
                                    <span>小米MIX FOLD</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../img/left.png" alt="">
                                        <span>小米MIX FOLD</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../img/left.png" alt="">
                                        <span>小米MIX FOLD</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../img/left.png" alt="">
                                        <span>小米MIX FOLD</span>
                                    </a>
                                </li>                                                                                                                          
                            </ul>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#">手机 充电器<u>▶</u></a>
                    <div class="center-left-list">
                        <div class="center-left-list-sub">
                            <ul>
                                <li>
                                    <a href="#">
                                    <img src="../img/left-bottom.png" alt="">
                                    <span>小米MIX FOLD</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                    <img src="../img/left-bottom.png" alt="">
                                    <span>小米MIX FOLD</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../img/left-bottom.png" alt="">
                                        <span>小米MIX FOLD</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../img/left-bottom.png" alt="">
                                        <span>小米MIX FOLD</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../img/left-bottom.png" alt="">
                                        <span>小米MIX FOLD</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../img/left-bottom.png" alt="">
                                        <span>小米MIX FOLD</span>
                                    </a>
                                </li>                   
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#">电视 机顶盒<u>▶</u></a></li>
                <li><a href="#">电视 机顶盒<u>▶</u></a></li>
                <li><a href="#">电视 机顶盒<u>▶</u></a></li>
                <li><a href="#">电视 机顶盒<u>▶</u></a></li>
                <li><a href="#">电视 机顶盒<u>▶</u></a></li>
                <li><a href="#">电视 机顶盒<u>▶</u></a></li>
                <li><a href="#">电视 机顶盒<u>▶</u></a></li>
                <li><a href="#">电视 机顶盒<u>▶</u></a></li>
            </ul>
        </div>
    </div>
</div>
<!-- 轮播图部分结束 -->


<!-- 伪对象部分 -->
<div class="weiduixiang">
    <!-- 伪对象的六张opacity: ;透明度 -->
    <div class="wdx">
        <ul>
            <li>
                <a href="#">
                    <img src="../img/placeholder-40.png" alt="">
                    <span>小米之家</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48" alt="">
                    <span>小米之家</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48" alt="">
                    <span>小米之家</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48" alt="">
                    <span>小米之家</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48" alt="">
                    <span>小米之家</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48" alt="">
                    <span>小米之家</span>
                </a>
            </li>
        </ul>
    </div>
    <!-- 伪对象部分的三张超链接图片 -->
    <div class="diyi">
        <a href="#">
            <img src="../img/weiduixiang.jpg" alt="">
        </a>
    </div>
    <div class="dier">
        <a href="#">
            <img src="../img/weiduixiang.jpg" alt="">
        </a>
    </div>
    <div class="disan">
        <a href="#">
            <img src="../img/weiduixiang.jpg" alt="">
        </a>
    </div>
</div>



<!-- 手机广告部分 -->
<div class="big-shouji">
    <div class="h2">
        <h2>广告部分</h2>
    </div>
    <a href="">
        <img src="../img/big-img.jpg" alt="">
    </a>
    
    <div class="title1">
        <h2>手机</h2>
       <div class="more">
           <a href="#">
               <span>查看更多 <u>▶</u></span>
           </a>
       </div>
    </div>
   <!-- 居中的手机广告div -->
    <div class="shouji-guanggao">
      <!-- 左侧div -->
      <div class="shouji-left-img">
        <a href="#">
            <img src="../img/left-img.jpg" alt="">
        </a>
      </div>
       <!-- 右侧的8张图片设置 -->
       <ul class="shouji-right">
           <li>
               <a href="#">
                   <img src="../img/shouji-rigth.png" alt="">
                   <h3>小米MIX FOLD</h3>
                   <p>折叠大屏|自研芯片</p>
                   <p>9999元起</p>
               </a>
            </li>
           <li><a href="#"><img src="../img/shouji-rigth.png" alt=""><h3>小米MIX FOLD</h3>
                   <p>折叠大屏|自研芯片</p>
                   <p>9999元起</p></a></li>
           <li><a href="#"><img src="../img/shouji-rigth.png" alt=""><h3>小米MIX FOLD</h3>
                   <p>折叠大屏|自研芯片</p>
                   <p>9999元起</p></a></li>
           <li><a href="#"><img src="../img/shouji-rigth.png" alt=""><h3>小米MIX FOLD</h3>
                   <p>折叠大屏|自研芯片</p>
                   <p>9999元起</p></a></li>
           <li><a href="#"><img src="../img/shouji-rigth.png" alt=""><h3>小米MIX FOLD</h3>
                   <p>折叠大屏|自研芯片</p>
                   <p>9999元起</p></a></li>
           <li><a href="#"><img src="../img/shouji-rigth.png" alt=""><h3>小米MIX FOLD</h3>
                   <p>折叠大屏|自研芯片</p>
                   <p>9999元起</p></a></li>
           <li><a href="#"><img src="../img/shouji-rigth.png" alt=""><h3>小米MIX FOLD</h3>
                   <p>折叠大屏|自研芯片</p>
                   <p>9999元起</p></a></li>
           <li><a href="#"><img src="../img/shouji-rigth.png" alt=""><h3>小米MIX FOLD</h3>
                   <p>折叠大屏|自研芯片</p>
                   <p>9999元起</p></a></li>
       </ul>
    </div>
    <!-- 隔断图 -->
    <a href="#">
        <img src="../img/隔断图.jpg" alt="">    
    </a>
    <!-- 家电部分的h2让(广告部分)的h2重用了 -->
    <div class="jiadian">
        <h2>家电</h2>
    </div>
    <!--家电部分居中div加10个里边的div设置-->
    <div class="home">
        <div class="home2">
            <a href="#">
                <img src="../img/家电.jpg" alt="">
            </a>
        </div>
        <div class="home1"><a href="#"><img src="../img/家电1.jpg" alt=""><h3>小米全面屏电视65英寸 E65X</h3>
            <p>全面屏设计</p>
            <p><span>2899元</span> <s>3299元</s></p></a></div>
        <div class="home1">
            <a href="#">
                <img src="../img/家电1.jpg" alt="">
                <h3>小米全面屏电视65英寸 E65X</h3>
                <p>全面屏设计</p>
                <p><span>2899元</span> <s>3299元</s></p>
            </a>
        </div>
        <div class="home1"><a href="#"><img src="../img/家电1.jpg" alt=""><h3>小米全面屏电视65英寸 E65X</h3>
            <p>全面屏设计</p>
            <p><span>2899元</span> <s>3299元</s></p></a></div>
        <div class="home1"><a href="#"><img src="../img/家电1.jpg" alt=""><h3>小米全面屏电视65英寸 E65X</h3>
            <p>全面屏设计</p>
            <p><span>2899元</span> <s>3299元</s></p></a></div>
        <div class="home2"><a href="#"><img src="../img/家电.jpg" alt=""> </a></div>
        <div class="home1"><a href="#"><img src="../img/家电1.jpg" alt=""><h3>小米全面屏电视65英寸 E65X</h3>
            <p>全面屏设计</p>
            <p><span>2899元</span> <s>3299元</s></p></a></div>
        <div class="home1"><a href="#"><img src="../img/家电1.jpg" alt=""><h3>小米全面屏电视65英寸 E65X</h3>
            <p>全面屏设计</p>
            <p><span>2899元</span> <s>3299元</s></p></a></div>
        <div class="home1"><a href="#"><img src="../img/家电1.jpg" alt=""><h3>小米全面屏电视65英寸 E65X</h3>
            <p>全面屏设计</p>
            <p><span>2899元</span> <s>3299元</s></p></a></div>
            <!-- 最后一个单独写 -->
        <div class="home-last">
            <a href="#">
                <div class="last1">
                    <img src="../img/last.webp" alt="">
                    <p>米家电烤箱</p>
                    <p>299元</p>
                </div>
                <div class="last2">
                   <div>
                       <p>浏览更多</p>
                       <p>热门</p>
                   </div>
                </div>
            </a>
        </div>   
    </div>
    <!-- 视频广告部分开始 -->
    <div class="shipin">
        <h2>视频</h2>
    </div>
    <!--第一个超链接视频的设置 -->
    <div class="video">
        <div class="video1">
                                      <!-- 新开一网站打开 -->
            <a href="../video/video.mp4" target="_blank">
                <img src="../img/video.jpg" alt="">
                <span class="span">
                 <u>▶</u>
                </span>
                 <a href="../video/video.mp4" target="_blank">
                    <p>Redmi 10X系列发布会 </p>
                 </a>
               
            </a>
        </div>
       <div class="video1"></div>
       <div class="video1"></div>
       <div class="video1"></div>
    </div>




</div>
</body>
</html>

/* 顶部图片隐藏 */
.header{
    width: 100%;
    height: 100%;
    display: none;
}
/* 黑色导航 */
.nav{
    width: 100%;
    height: 40px;
    background-color:#333;
    

}
/* 居中div */
.nav-center{
    width: 1226px;
    height: 100%;
    margin: 0 auto;
}
/* a的字体颜色 */
a{
    color: #b0b0b0;
}
/* 鼠标悬停时字体颜色 */
.nav-center a:hover{
    color: #fff;
}
/* 左侧li浮动 定位*/
.nav-left>li{
    float: left;
    font-size: 12px;
    line-height: 40px;
    position: relative;
}
/* 右侧li浮动 定位*/
.nav-right>li{
    float: right;
    font-size: 12px;
    line-height: 40px;
    position: relative;
}
/* span竖杠(|)的外边距 */
.nav span{
    margin: 0 3.6px;
    color: #424242;
}
/* 购物车:大小 颜色 外边距 */
.cart{
    width: 120px;
    height: 40px;
    background: #424242;
    margin-left: 20px;
}
/* 购物车鼠标悬停时背景颜色 */
.cart:hover{
    background: #fff;
}
/* 购物车鼠标悬停时a的的颜色*/
.cart:hover>a{
    color: #ff6700;
}
/* 购物车下拉列表的属性,1:相对于右侧li定位,隐藏下拉列表,所有属性:all .3s的过度 */
.cart>.cart-list{
    width: 316px;
    /* 高度设置为0隐藏下拉列表 */
    height: 0px;
    background:#fff;
    position: absolute;
    right: 0px;
    top: 40px;
    box-shadow: 0 2px 10px #aaa;
    color: #424242;
    /* 下拉列表的文字溢出部分隐藏 */
    overflow: hidden;
    /* 过度:所有属性 .3s秒速度显示 */
    transition: all .3s;
    /* 在白色导航上边显示出来 */
    z-index: 1;
}
/* 鼠标悬停时显示下拉列表,字体居中 */
.cart:hover>.cart-list{
    height: 100px;
    line-height: 100px;
}
/* app下载的属性中的二维码框设置 */
.app>.QRcode{
   width: 124px;
    /* 高度设置为0隐藏下拉列表 */
   height: 0px;
   background-color:#fff;
   box-shadow: 0 1px 5px #aaa;
   /* 相对于左侧li定位 */
   position: absolute;
   top: 40px;
   left: 50%; 
   margin-left: -66px; 
   /* 下拉列表的文字溢出部分隐藏 */
   overflow: hidden;
   /* 过度:所有属性 .3s秒速度显示 */
   transition:all .3s;
   /* 在白色导航上边显示出来 */
   z-index: 1;
}
/* 二维码图片的设置 */
.QRcode>.QRcode-img{
    width: 90px;
    height: 90px;
    margin: 18px 0 0;
}
/* 二维码框中字体的设置 */
.QRcode>p{
    font-size: 14px;
    line-height: 1;
}
/* 鼠标悬停二维框显示 */
.app:hover>.QRcode{
    height: 148px;
}
/* 小三角的设置:绘制特殊图形的方式写 */
.sanjiao{
    width: 0;
    height: 0;
    border-bottom: 8px solid #fff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    /* 定位小三角并且隐藏 */
    position: absolute;
    left: 17px;
    top: 32px;
    display: none;
}
/* 鼠标悬停显示小三角 */
.app:hover>.sanjiao{
    display: block;
}
/* 白色导航部分 */
.white-nav{
    width: 100%;
    height: 100px;
    position: relative;
}
/* 居中部分 */
.white-wrap{
    width: 1226px;
    height: 100px;
    margin: 0 auto;
}
/* logo部分 */
.logo-mi{
    width: 55px;
    height: 55px;
    background: #ff6700;
    float: left;
    margin-top: 22.5px;
    /* 定位加隐藏 */
    position: relative;
    overflow: hidden;
    
}
/* 中间文字导航部分 */
.white-nav-center{
    width: 876px;
    height:100px;
    float: left;
}
/* 搜索框部分 */
.nav-input{
    width: 295px;
    height:100px;
    float: right;
    position: relative;
}
/* logo的图片大小 */
.logo-mi>a>img{
    width: 100%;
    height: 100%;
    /* 定位加过渡*/
    position: absolute;
    top: 0;
    transition: all .3s;
}
/* logo-mi-logo定位的设置 */
.mi-logo{
    top: 0;
    left: 0px;
}
/* logo-mi-home定位的设置 */
.mi-home{
    top: 0;
    left: -55px;
}
.logo-mi:hover>a>.mi-home{
    left: 0px;
}
.logo-mi:hover>a>.mi-logo{
    left: 55px;
}
/* 白色导航中间部分 浮动加字体间距 */
.white-nav-center ul>li{
    float: left;
    line-height: 100px;
}
/* 设置a的字体 颜色 内边距 */
.white-nav-center>ul>li>a{
   font-size: 16px;
   color: #333;
   padding:0 10px;
}
/* logo右边图标的调整 */
.white-nav-center>ul>li:first-child{
    margin-top: 9px;
    margin-left: 20px;
    margin-right: 40px;
}
/* 鼠标悬停a的文字变橘色 */
.white-nav-center>ul>li>a:hover{
    color: #ff6700;
}
/* 白色导航栏的下拉列表的属性 */
.pull-down{
    width: 100%;
    height: 0px;
    background: #fff;
    
    box-shadow: 0 1px 2px #aaa;
    position: absolute;
    top: 100px;
    left: 0;
    box-sizing: border-box;
    transition: all .3s;
    overflow: hidden;
    z-index: 2;
    outline: none;
}
/* 居中的下拉列表部分 */
.pull-down-center{
    width: 1226px;
    height: 100%;
    background-color: #fff;
    margin: 0 auto;
    
}
.img-box{
    width: 204px;
    height: 110px;
    border-right:1px solid #bdb8b8 ;
    box-sizing: border-box;
    margin-top: 30px;
    margin-bottom: 15px;
}
.img-box img{
    width: 160px;
    height: 110px;
}
.pull-down-center p{
    font-size: 12px;
    line-height: 20px;
    
}
.pull-down-center p:nth-of-type(1){
    color: #333;
}
.pull-down-center p:nth-of-type(2){
    color:#ff6700;
}
/* 隐藏高度实现过渡效果 */
.white-nav li:hover>.pull-down{
    height: 230px;
    
}


/* input属性 */
.nav-input>input{
    width: 220px;
    height: 50px;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    padding: 0 10px;
    margin-top: 23.5px;
    float: left;
    /* 不显示轮廓线 */
    outline: none;
    border-right: none;
    transition:all .3s;
    z-index: 5;
}
/* button按钮属性 */
.nav-input>button{
    width: 52px;
    height: 50px;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    float: left;
    margin-top: 23.5px;
    /* 不显示轮廓线 */
    outline: none;
    transition:all .3s;
}
/* hover鼠标悬停时的状态 */
.nav-input>input:hover,.nav-input>input:hover+button{
    border-color: #b0b0b0;
}
/* focus(否卡尔时)鼠标获取焦点时的状态 */
.nav-input>input:focus,.nav-input>input:focus+button{
    border-color: #ff6700;
}
/* 鼠标悬停在button按钮上的状态 */
.nav-input>button:hover{
    background-color: #ff6700;
    border-color: #ff6700;
    color: #fff;
}
/* input下拉列表属性 */
.nav-input-list{
    width: 219px;
    height: 240px;
    background-color: #fff;
    border: 1px solid #ff6700;
    border-top:none ;
    /* 在input的div上定位 */
    position: absolute;
    left: 0;
    top: 74px;
    display: none;
   
}
/* 点击获取焦点时下拉列表出现 */
.nav-input>input:focus~.nav-input-list{
    display: block;
}
/* 以上白色导航结束 */


/* banner轮播图部分 */
.banner{
    width: 100%;
    height: 460px;
/* 总高/宽度的设定 */
}
/* banner居中部分 */
.banner>.banner-center{
    width: 1226px;
    height: 460px;
    background-color: #ff6700;
    margin: 0 auto;
    background-image: url(../img/小米动画练习.webp);
    /* 引入动画 1名字 2播放时间 3循环次数(因飞内特) 4播放速度 5播放方向(哦特内特) */
    animation: xiaomi 5s  infinite ease-in-out alternate;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    
}
/* 鼠标悬停动画停止播放 */
div>.banner-center:hover{
    animation-play-state: paused;
}
/* 关键帧制作动画 url引入图片 */
@keyframes xiaomi{
    0%{
        background-image: url(../img/小米动画练习.webp);
    }
    50%{
        background-image: url(../img/113.jpg);
    }
    100%{
        background-image: url(../img/118.jpg);
    }
}
/* 左侧的半透明div */
.center-lfet{
    width: 234px;
    height: 460px;
    background-color: rgba(105,101,101,.6);
    padding-top: 18px ;
    line-height: 40px;
    box-sizing: border-box;
    position: relative;
}
/* 左侧半透明div里边的a样式 */
.center-lfet>ul>li>a{
    font-size: 14px;
    color: #fff;
    margin-left: -90px;
}

/* 左侧半透明鼠标悬停li的样式 */
.center-lfet>ul>li:hover{
    background-color: #ff6700;
}
/* 三角的特殊图形设置 */
.center-lfet>ul>li>a>u{
    float:right;
    margin-right: 20px;
    text-decoration: none;
}
/* 滑动门的设置与定位 */
.center-left-list{
    width: 992px;
    height: 460px;
    background: #fff;
    float: left;
    position: absolute;
    left: 234px;
    top: 0;
    border: 1px solid #eee;
    box-sizing: border-box;
    border-left:none ;
    display: none;
}
.center-left-list>div>ul>li{
    float: left;
    
}
.center-left-list>div>ul>li>a{
    font-size: 14px;
    color: #333;
    /* 在a里边加入inline-block会变成a的行内块元素img和span就会在a的范围里显示 */
    display: inline-block;
    height: 65px;
    width: 170px;
    padding-top: 13px;
    padding-left: 10px;
    box-sizing: border-box;
}
.center-left-list>div>ul>li a>span{
    position: relative;
    top: -20px;
    left: 05px;
}
.center-left-list>div>ul>li>:hover{
    color: #ff6700;
}
.center-lfet>ul>li:hover>.center-left-list{
    display: block;
}
/* 伪对象部分css */
.weiduixiang{
    width: 1226px;
    height: 170px;
    margin: 15px auto;
    display: flex;
    justify-content: space-between;
    
}
.weiduixiang .diyi,.dier,.disan{
    transition: all .3s;
}
.weiduixiang>.diyi:hover,.dier:hover,.disan:hover{
    box-shadow: 0 3px 6px #5f5750;
}

/* 第一个伪对象有六个div的设置 */
.weiduixiang>.wdx{
    width: 234px;
    height: 170px;
    background-color: #5f5750;
    float: left; 
}
.weiduixiang img{
    width: 316px;
    height: 170px;
}
.wdx>ul>li>a img{
    width: 24px;
    height: 24px;
    display:block;
    margin: 0 auto 4px;
}
.wdx>ul>li span{
    font-size: 12px;
    color: #fff;
}
.wdx>ul>li a{
    width: 76px;
    height: 82px;
    float: left;
    padding-top: 20px;
    box-sizing: border-box;
    transition:all.3s;
    border: 1px solid #686262;
    border-right: none;
    border-bottom: none;
}
.wdx>ul>li a{
    opacity: .4;
}
.wdx a:hover{
   opacity: 1;
}
/* 广告部分最外层的大div */
.big-shouji{
    width: 100%;
    height: 100%;
    background-color: #f1eded;
}
/* (广告部分)h2的div的设置+加上(家电字体div)的设置 */
.h2,.jiadian{
    width: 1226px;
    height: 58px;
    margin: 0 auto;
    text-align: left;
    line-height: 58px;
}
/* (广告部分)的字体设置+加上(家电字体)设置 */
.h2>h2,h2{
    font-size: 24px;
    font-weight: 300;
    color: #333;
    text-align: left;
}
/* 第一张居中(生生不息)的img图片 */
.big-shouji>a img{
    margin: 0 auto;
    width: 1226px;
    height: 120px;
}
/* h2(手机)的div设置 */
.title1{
   text-align: left; 
   width: 1226px;
   height: 58px;
   margin: 0 auto;
}
/* h2(手机)的样式设置 */
.title1>h2{
    font-size: 24px;
    line-height: 58px;
    font-weight: 300;
    margin-top: -3px;
    display: inline-block;
}
/* (查看更多)的a设置 */
.title1>.more{
    float: right;
    width: 100px;
    height: 100%;
}
/* (查看更多)的a设置 */
.title1>.more>a{
    font-size: 16px;
    line-height: 55px;
    color: #333;
    transition: all .3s;
}
/* 小三角的设置 */
.title1>.more>a u,u{
    text-decoration: none;
}
/* (查看更多)的鼠标悬停设置 */
.title1>.more>a:hover{
    color: #ff6700;
}
/* 居中的手机广告div部分 */
.shouji-guanggao{
    width:1240px ;
    height: 614px;
    margin: 0 auto;
}
/* 手机广告里的左侧div设置 */
.shouji-left-img{
    width: 234px;
    height: 614px;
    background-color: aqua;
    float: left;
    margin-left:8px;
    box-sizing: border-box;
    transition: all .3s;
}
/* 左侧div的过渡设置+加上右侧8个a鼠标悬停在a上的转换+加上家电部分十个a的鼠标悬停转换+视频部分的4个div转换  */
.shouji-left-img:hover,.shouji-right li a:hover,.home .home1 a:hover,.home2 a:hover,.video>div:hover{
    box-shadow: 0 8px 18px rgb(182, 168, 168);
    transform:translateY(-2px) ;
}
/* 左侧图片大小 */
.shouji-left-img>a img{
    width: 234px;
    height: 614px;
}
/* 右侧8张图片的大小+加上家电部分的img大小 */
.shouji-right img,.home1 img{
    width: 160px;
    height: 160px;
    margin-top: 20px;
}
/* 右侧八张超链接a的设置 */
.shouji-right li a{
    width: 234px;
    height: 300px;
    background-color: #fff;
    float: left;
    margin-left: 13px;
    margin-bottom: 14px;
    box-sizing: border-box;
    transition: all .3s;
}
/* h3字体的设置+加上家电部分h3的设置 */
.shouji-right li a>h3,.home1 h3,p{
    margin-top: 15px;
    font-size: 14px;
    font-weight: 400;
    color: #333;
}
/* 字体,第一个p的设置+加上家电部分的第一个p的设置 */
.shouji-right li a>p:nth-of-type(1),.home1 p:nth-of-type(1){
    font-size: 12px;
    color: #b0b0b0;
    margin-top: 5px;
}
/* 字体,第二个p的设置+加上家电部分的第二个p的设置*/
.shouji-right li a>p:nth-of-type(2),.home1 p:nth-of-type(2){
    font-size: 14px;
    color: #ff6700;
    margin-top: 10px;
}


/* 家电部分居中div设置 */
.home{
    width: 1226px;
    height: 614px;
    margin: 0 auto;
}
/* 实在没找到重用的元素,单独写。 */
.home>.home1 a,.home2 a{
    width: 234px;
    height: 300px;
    background-color: #fff;
    float: left;
    transition: all .3s;
}
/* 定义home1的外边距 */
.home1 a{
    margin-left: 14px;
    margin-bottom: 15px;
}
/* 删除线 */
s{
    color: #aaa;
}
/* 10个中的最后一个div */
.home-last{
    width: 234px;
    height: 300px;
    float: left;
    margin-left: 14px;
}
/* 米家电烤箱图片设置 */
.last1 img{
    width: 80px;
    height: 80px;
    margin-left: 100px;
    margin-top: 29px;
    box-sizing: border-box;
}
/* 第十个中的上边的那一块 */
.last1{
    width: 234px;
    height: 143px;
    background-color: #fff;
    margin-bottom: 13px;
    box-sizing: border-box;
    float: left;
    transition: all .3s;
}
/* 第十个中下边的那一块,去掉下外边距 */
.last2{
    width: 234px;
    height: 143px;
    background-color: #fff;
    box-sizing: border-box;
    float: left;
    transition: all .3s;
}
/* 给上边的一个p设置定位 */
.last1 p{
    position: relative;
    right: 50px;
    top: -70px;
}
/* 给上边的第一个p设置样式 */
.last1 p:nth-of-type(1),.last2 p{
    color: #333;
    font-size: 14px;
}
/* 给上边的第二个p设置样式 */
.last1 p:nth-of-type(2){
    color: #ff6700;
    font-size: 14px;
    position: relative;
    right: 63px;
}
/* 给第十个的两个都设置上过渡和阴影 */
.home-last a>div:hover{
    box-shadow: 0 8px 18px rgb(182, 168, 168);
    transform:translateY(-2px) ;
}
/* 设置下p的距离没写具体内容内容,因为图标不生效 */
.last2 p{
    margin-top: 30px;
}
/* 以上手机、家电部分样式完成 */
/* 单独给(视频)字体的样式设置 */
.shipin{
    width: 1226px;
    height: 58px;
    margin:  auto;
}
/* 单独给(视频)字体的样式设置 */
.shipin h2{
    position: relative;
    left: -980px;
    line-height: 58px;
}
/* 视频div部分开始 */
/* 居中,视频部分的设置 */
.video{
    width: 1226px;
    height: 285px;
    margin: 0 auto;
    /* 写在父元素中的属性 (切记) */
    display: flex;
    justify-content: space-between;
}

/* 视频中div的设置 */
.video>div{
    width: 296px;
    height: 285px;
    background-color: #fff;
    transition: all .3s;
    margin-bottom: 14px;
}
/* 视频图片大小 */
.video>div img{
    width: 100%;
    height: 180px;
}
/* 三角形样式 */
.video>div u{
    color: #fff;
}
/* 播放按钮的属性 */
.span{
    width: 35px;
    height: 25px;
    border: 1px solid #fff;
    border-radius: 30px;
    position: relative;
    top: -50px;
    left: 20px;
    transition: all .2s;
    display: block;
}
/* 鼠标悬停在播放按钮上的属性 */
.video>div a:hover>.span{
    background-color: #ff6700;
    border: none;
}

鼠标放在视频的播放按钮上下边的文字会有会跟着上移,并且从手机部分开始后都会有鼠标悬停在div有一瞬间的由灰黑的很快的过程需要仔细看,鼠标移开时也会有一瞬间由灰变黑的过程。

WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS3新特性 22995楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637