2017.6.25仿网易考拉排版记录

于 2017-06-28 15:42:32 发布
阅读量1.5k 收藏 2
点赞数
分类专栏： 网页排版 文章标签： css html5 排版
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_35993084/article/details/73848924
版权

今天开始写第一篇学习前端博客，经过近些天的学习，基本清楚了div+css排版。
开始第一次尝试：仿网易考拉购物首页（先抛弃图片文字和复杂的特效以及一些细节优化，以排出大致相同版面为目标。）
以下为6.25为止网页上半部分的排版代码。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>购物网站首页</title>
<style type="text/css">
*{margin:0;padding:0;font-family:"微软雅黑";font-size:12px}
ul{
    list-style-type:none
    }
li a{
    text-decoration:none;
    display:inline-block;
    color:#666;
    padding:0 12px;
    margin-top:4px;
    border-right:1px solid #999
    }
.left_ul{
    float:left;
    }
.right_ul{
    float:right
    }
.mid_ul{
    width:1100px;
    margin:0 auto;
    height:27px
    }
.left_ul li,.right_ul li
    {
    float:left
    }
.border_none{
    border:0
    }
li a:hover,ul a:hover{
    color:#F00
    }
.dropdown_img{
    position:absolute;
    display:none
    }
.dropdown_list{
    position:absolute;
    display:none;
    background-color:#FFF;
    border:1px solid #DBDBDB;
    }
.dropdown_list a{
    min-width:100px;
    display:block;
    padding:3px 4px;
    text-align:center;
    border:0;
    box-shadow:0px 0px 1px 0px #D8D8D8;
    color:#666
    }
.dropdown:hover .dropdown_list{
    display:block
    }
.kaola_img{float:left;margin-top:18px;}
.serach_div{height:100px;overflow:hidden}
.serach_ul{
    margin-left:345px;
    width:510px;
    margin-top:23px;
    }
.serach_ul a{
    text-decoration:none;
    display:inline-block;
    color:#999;
    padding:0 8px;
    margin-top:4px;
    border-right:1px solid #999
    }
.gouwuche{
    float:right;
    border:1px solid #999;
    padding:10px 40px;
    margin-top:22px;
    display:inline-block;
    color:#666;
    font-size:13px;
    border-radius: 5px;
    text-decoration:none;
    }
.gouwuche:hover{
    color:#666;
    background-color:#DBDBDB;
    }
.secmid_ul{
    margin:0 auto;
    height:100px;
    width:1100px;
    overflow:hidden
    }
.fourth_div{
    height:40px;
    border-bottom:2px solid #000;
    }
.fourth_mid_ul{
    height:40px;
    width:1100px;
    margin:0 auto;
    overflow:hidden
    }
.fourth_mid_ul a{
    display:inline-block;
    padding:12px 20px;
    float:left;
    font-size:14px;
    color:#000;
    font-weight:bold;
    text-decoration:none;
    }
.fenlei_menu{
     display:none;
     position:absolute;
     background:#000;
     filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;  /*半透明代码*/

    }
.fenlei_menu a{
    display:block;
    float:none;
    }
.fourth_div .fourth_mid_ul .fenlei_menu a{
    margin:0;
    border:0;
    color:#FFF;
    min-width:112px;
    text-align:center;
    padding:11px 12px;
    }
.fourth_div .fourth_mid_ul a{
    margin:0;
    border:0;   
    }
.fenlei:hover .fenlei_menu{
    display:block
    }
.fenlei_menu a:hover{
    background:#666;
    border-left:1px solid #F00;
    }
</style>
</head>
<body>
<ul>
  <a href="#" style="width:auto"><img src="top.png" alt=""></a>
</ul>
<ul style="height:29px;background:#DBDBDB;margin-top:-4px">
  <ul class="mid_ul">
    <ul class="left_ul">
      <li><a class="border_none">考拉欢迎你！</a></li>
      <li><a href="#">登录</a></li>
      <li><a href="#" class="border_none">免费注册</a></li>
      <li class="dropdown"><a href="#" style="border:0">手机考拉海购</a>
        <div class="dropdown_list"><img src="二维码.png"></div>
      </li>
    </ul>
    <ul class="right_ul">
      <li><a href="#">每日签到</a></li>
      <li><a href="#">我的订单</a></li>
      <li class="dropdown"><a href="#">个人中心</a>
        <div class="dropdown_list">
          <a href="#">我的优惠券</a>
          <a href="#">我的考拉豆</a>
          <a href="#">账户安全</a>
          <a href="#">我的实名认证</a>
          <a href="#">我收藏的商品</a>
          <a href="#">我关注的品牌</a>
          <a href="#">售后管理</a>
        </div>
      </li>
      <li class="dropdown"><a href="#">客户服务</a>
        <div class="dropdown_list">
          <a href="#">联系客服</a>
          <a href="#">帮助中心</a>
        </div>
      </li>
      <li class="dropdown"><a href="#">充值中心</a>
        <div class="dropdown_list">
          <a href="#">游戏充值</a>
          <a href="#">手机充值</a>
        </div>
      </li>
      <li><a href="#">消费者告知书</a></li>
      <li class="dropdown"><a href="#" class="border_none">更多</a>
         <div class="dropdown_list">
          <a href="#" >收藏本站</a>
          <a href="#" >新浪微博</a>
          <a href="#" >微信公众号</a>
          <a href="#" >易信公众号</a>
          <a href="#" >招商合作</a>
          <a href="#" >考拉招聘</a>
        </div>
      </li>
    </ul>
  </ul>
</ul>
<div class="serach_div">
  <ul class="secmid_ul">
    <a href="#" class="gouwuche">购物车</a>
    <a href="#" class="kaola_img"><img src="../shopping/网易考拉.png" alt=""></a>
    <ul class="serach_ul">
    <span><input type="text" style="width:460px;height:30px;border:2px solid #000"></span>
    <span><input type="submit" style="height:34px;width:40px;border:2px solid #000;margin-left:-4px;border-left:0"></span>
    <a href="#">面膜</a>
     <a href="#">花王</a>
      <a href="#">安耐晒</a>
       <a href="#">驱蚊</a>
        <a href="#">Swisee</a>
         <a href="#">小龙虾</a>
          <a href="#">电动牙刷</a>
           <a href="#" style="border:0">防晒喷雾</a>
    </ul>
  </ul>
</div>
<div class="fourth_div">
  <ul class="fourth_mid_ul">
    <li class="fenlei"><a href="#" style="padding:11px 40px;color:#FFF;background:#000;">所有分类</a>
      <div class="fenlei_menu">
          <a href="#" >收藏本站</a>
          <a href="#" >母婴儿童</a>
          <a href="#" >美容彩妆</a>
          <a href="#" >服饰鞋包</a>
          <a href="#" >家具个护</a>
          <a href="#" >营养保健</a>
          <a href="#" >海外直邮</a>
          <a href="#" >数码家电</a>
          <a href="#" >环球美食</a>
          <a href="#" >运动户外</a>
          <a href="#" >水果生鲜</a>
      </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>
  </ul>
</div>
<div>
  <img src="图2.jpg" alt="">
</div>
</body>
</html>

6.25 仿网站图
上图为设计图，有以下几部分问题未解决：
1. 文本搜索框，没有原站美观。没有找到优化的方法。
2. 搜索框下部的实时搜索热点，没有办法实时根据数据来更换。我设计时只是简单的利用了a标签包裹加border边框处理。
3. 原站加入了图片文字样式，同时“我的订单”和“个人中心”等类似下拉菜单，在鼠标经过时会触发后面的倒三角转动成正三角的动画样式。目前没法仿造。
4. “所有分类”二级下拉菜单时，虽然对fenlei_menu这个div设置了属性，但此div中第一个a标签总是在hover经过时和“所有分类”重合。目前没有找到原因。
5. 1920*400的图片实现自动切换和点击切换还在学习中。

nateeinit
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值