div+css+jquery仿写HTML京东首页的练习及一些关于oo css的总结

整个工程：

https://download.csdn.net/download/weixin_43388844/10864383

前言

前几天看b站上极客学院的web前端开发第二部分时了解到OO CSS（面向对象的css）这个名词，当时不太懂，想着练习一遍基础来更深入的理解，便用了3天左右练习写了个京东首页的静态页面，实现了一些基本的结构和功能。
（OO CSS大致是要注意一些规范或一些东西，截个图以便随时翻阅）

OO CSS注意事项：

效果

PS：因为代码有些冗长就分一些部分来叙述

PS：整个工程我在文章开头分享！

PS：后面的css代码就只贴一些重要的部分，因为在实践中写得有些冗长有些乱（也就是分离做的不太好）。

首先整个页面结构

布局部分css：

* {
    margin: 0;
    padding: 0;
}

a:hover {
    color: red;
    text-decoration:none;
}
/* <!-- 整个页面 --> */
.page {
    background-color: #f0f3ef;
    width: 100%;
}

/* <!-- 主体可视区 --> */
.viewbody {
    width: 1160px;
    margin: 0 auto;
}

我大致是这样分的，大致看看就好。

接着顶部广告（jquery实现关闭）

html：

<div class="topadbg" id="topadbg"></div>
<!-- 顶部广告 -->
<div id="topad">
   <a href="https://sale.jd.com/act/gZ0vFYnUNXj.html?cpdad=1DLSUE" target="_blank" class="topadimg">
   </a>
   <i class="closeadimg" id="closeadimg"></i>
</div>

css：

/* <!-- 顶部广告 --> */

.topadbg {
    position: absolute;
    background-color: black;
    width: 100%;
    height: 80px;
    z-index: 1;
}

.topadimg {
    position: relative;
    display: block;
    background: url("JDimg/top_ad.jpg") no-repeat 50% 0;
    width: 100%;
    height: 80px;
    z-index: 2;
}

.closeadimg {
    display: block;
    background: url("JDimg/topad_close.png") no-repeat;
    background-size: 15px;
    background-color: rgb(37, 37, 37);
    width: 15px;
    height: 15px;
    position: absolute;
    right: 200px;
    top: 5px;
    z-index: 3;
}

js：

$("#closeadimg").click(function(){
      $("#topad").hide();
      $("#topadbg").css("display","none");
      $("#topnavline").css("top","0");
      $("#jdlogo").css("top","0");
});

这里我用了3层（第一层就是整个页面，第二层是黑底色背景，第三层就是广告图片）。接着就在广告图片上添了个删除图标用jquery控制关闭广告。

其后是最顶部的导航栏及搜索框部分

html：

<nav class="topnav">
   <!-- 定位 -->
   <div class="addr" id="addr">
       <i class="positionimg"></i>四川
       <div class="someposition" id="someposition">
           <a href="#">钓鱼岛</a>
           		.
           		.
           		.
           <a href="#">海外</a>
           
       <div class="cutoffline"></div>
       <div class="positionlanguage"><img src="JDimg/positionlanguage.png" width="280px" height="auto"></div>
       </div>
   </div>
   <ul class="navul">
       <li>
           <a href="#">你好，请登录</a>
           <a href="#" style="color:red;">免费注册</a>
       </li>
       <li class="navline"></li>
       <li><a href="#">我的订单</a></li>
       <li class="navline"></li>
       <li class="myJD"  id="myJD">
           <a href="#">我的京东</a><i class="downimg"></i>
           <div class="JDdropmenu" id="JDdropmenu">
               <a href="#">待处理订单</a>
						.
						.
						.
               <a href="#">我的理财</a>
           </div>
       </li>
       <li class="navline"></li>
       <li><a href="#">京东会员</a></li>
       <li class="navline"></li>
       <li><a href="#">企业采购</a><i class="downimg"></i></li>
       <li class="navline"></li>
       <li>客户服务<i class="downimg"></i></li>
       <li class="navline"></li>
       <li>网站导航<i class="downimg"></i></li>
       <li class="navline"></li>
       <li id="phoneJD">
           手机京东
           <div class="erweima">
               <div class="jianjiao"></div>
               <img src="JDimg/mobile_qrcode.png">
               <div class="erweimacontent" id="erweimacontent"></div>
           </div>
       </li>
   </ul>
</nav>

<!-- 头部搜索框及购物车部分 -->
<header class="myheader">
   <div class="jdlogo" id="jdlogo"><a href="https://www.jd.com/"><img src="JDimg/jdlogo.png" alt="logo" width="180px"
               height=&#