1.边框的处理
 
要形成上图所示的布局效果,即,点选后,导航下面的边框不显示而其他的边框形成平滑的形状。相对于把导航的下面边框取消然后用空白覆盖掉下面搜索栏的边框比较而言,sougou有很好的方法来实现它。
我们设定这整个nav选择区域为#nav_container,然后给被选择了的nav加上一个class:current,我们下面的logo+输入框为:sog_div,整个部分的外部容器为:#search
我们看看sogou是怎么实现的:
css脚本:
#nav_container{
       text-align:center;
        line-height:24px;
        height:26px;
        padding-left:56px;
        overflow:hidden;
        z-index:110;
        position:absolute;    
    }
#nav_container li {
    color: #3f3f3f;
        font-size:14px;
        width:60px;
        height:25px;
        padding:1px;
        float:left;
        cursor:pointer;
}
.current {
          color:#3f3f3f;
        font-weight:bold;
        background:#f3f7fb;
        border:1px solid #9bbed9;
        padding:0 0 1px 0;
   }
#sog_div{
    
    width:958px;
        height:49px;
        border:1px solid #9bbed9;
        background:#f3f7fb;
        z-index:100;
        position:absolute;
        top:25px;
        left:0px;
 
}
#search {
         width:960px;
        height:76px;
        position:absolute;
        z-index:100;
        top:0px;
        left:0px;
}
我们看到,nav_container的高度为26px,然后sog_div相对布局,它离顶部有25px。nav的正常高度为25px(不带边框)。current四边都有边框,因此它的实际高度为25px+1*2=27px。但是呢,nav_container的属性overflow:hidden,使得下面的边框被隐藏掉了~所以,它实际的高度仍然是26px,只是没有下面的边框。那么我们sog_div距离顶部25px,会出现什么呢?sog_div是有边框的,边框宽度1px。它距离顶部25px,就是意味着,25px是被nav覆盖的部分,下面的1px是nav_container和nav_li剩下的1px透明的部分,显示为sog_div自己的边框,如果是current,current会覆盖这1px边框的部分,但是如果是其他的nav其他的nav只有25px的高度,而它们的容器又是没有背景的,因此还是照样会显示sog_div的边框出来。
 
2.图片和文字的组合
实现上面图片的效果。
首先把这个整体以<div class="today"></div>来表示
它由5部分组成,阴云的图片(<img />),表示今天的圆图(<span class="wicon"></span>),右边的温度(<p></p>,污染(<span></span>,程度(span->em)。
层叠样式表:
  body,a,ul,li,div,span,h1,h2,h3,p,img,form,input,select,option,i,dt,dd,em {
        margin:0;
        padding:0;
  }
    #weather .today, #weather .tomorrow {
    position: relative;
    width: 125px;
    z-index: 10;
    }
    #weather .today, #weather .today .weather_a {
    width: 139px;
    }
    .weather_a {
        color: #3F3F3F;
        cursor: pointer;
        display: block;
        height: 46px;
        width: 125px;
    }
a img {
    border:none;
}
#weather {
        font-size:13px;
        line-height:23px;
        padding-top:10px;
        position:relative;
        z-index:9;
    }
    #weather div {
        height:46px;
        float:left;
    }
    #weather div img {
    float: left;
    height: 33px;
    margin-top: 3px;
    position: relative;
    width: 40px;
    z-index: 10;
    }
    #weather div p {
    display: block;
    float: right;
    height: 23px;
    line-height: 23px;
    overflow: hidden;
    position: relative;
    text-align: left;
    width: 84px;
    z-index: 10;
    }
    #weather div.today p, #weather div.today p span {
    overflow: hidden;
    width: 99px;
    }
 
#weather div p span {
    display: block;
    height: 22px;
    line-height: 22px;
    margin-top: 1px;
    }
    .wicon {
        position: absolute;
        top: 23px;
        left: 20px;
        width: 20px;
        height: 20px;
        z-index: 20;
        display: block;
        clear: both;
    }
    .today .wicon {
        background-position: -1px -68px;
    }
HTML代码:
<div class="today">
            <a href="http://123.sogou.com/sub/tianqi.html?d=7" class="weather_a" target="_blank" title="阴有大雨">
              <img height="24" width="24" src="http://p0.123.sogou.com/imgn/wt2/cloudy.png">
              <p>
                <span id="t-t-t" style="margin-top: -23px;">阴有大雨</span>
                <span>
                  空气污染:
                  <em style="font-style:normal;padding:0px 1px 1px;padding:2px 1px 0 1px\9;;color:#fff;background:#FF7E00;">轻度</em>
                </span>
              </p>
              <p class="current">27℃~ 22℃</p>
              <span class="wicon">&nbsp;</span>
            </a>
          </div>
分解来看,<p></p>的宽度+<img></img>的宽度刚好是容器的宽度,img左边漂浮,<p>元素向右漂浮。<p>元素的高度为23px,两个<p>元素占满了容器的高度,wicon类的元素为相对布局,它的父容器为.today(相对布局的元素),因此它就浮在了.today左边23Px,上边20px的位置。当然,如果是浮动的话,margin最好不用。因为会造成边距加倍的问题。
注意:在超链接中img的属性webkit默认是none,而ie中是默认会加一个边界的,所以为了兼容性,为了废了九牛二虎之力计算出的布局不死给IE看,给超链接中的img加上border:none

CSS学习小记的更多相关文章

  1. 搜狗主页页面CSS学习小记

    1.边框的处理   要形成上图所示的布局效果,即,点选后,导航下面的边框不显示而其他的边框形成平滑的形状.相对于把导航的下面边框取消然后用空白覆盖掉下面搜索栏的边框比较而言,sougou有很好的方法来 ...

  2. 6号css学习小记

    一.overfloat属性:(四个值) visible :默认值.内容不会被修剪,会呈现在元素匡之外. hidden:内容会被修剪,并且其余内容是不可见的. scroll :内容会被修剪,但是浏览器会 ...

  3. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  4. mongodb入门学习小记

    Mongodb 简单入门(个人学习小记) 1.安装并注册成服务:(示例) E:\DevTools\mongodb3.2.6\bin>mongod.exe --bind_ip 127.0.0.1 ...

  5. css学习归纳总结(三) 转

    原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...

  6. css学习归纳总结(二) 转

    原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...

  7. css学习归纳总结(一) 转

    原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...

  8. 【2016年特别福利】史上最全CSS学习资料大全

    css学习篇 [2016年特别福利]史上最全CSS学习资料大全

  9. 【转】css学习专题-BFC

    css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...

随机推荐

  1. 【Java编码准则】の #12不要使用不安全或者强度弱的加密算法

    安全性要求高的应用程序必须避免使用不安全的或者强度弱的加密算法,现代计算机的计算能力使得攻击者通过暴力破解能够攻破强度弱的算法.比如,数据加密标准算法DES是极度不安全的,使用类似EFF(Electr ...

  2. Mac下Android配置及unity3d的导出Android

    昨晚实在弄的太晚了,费尽脑汁才弄出来. ok,关于mac下的eclipse的安卓配置,我仅仅贴一个网址,就ok了 http://developer.android.com/sdk/index.html ...

  3. 观察者模式的程序实例C++

    一.什么是观察者模式 Observer模式也叫观察者模式,是由GoF提出的23种软件设计模式的一种.Observer模式是行为模式之中的一个,它的作用是当一个对象的状态发生变化时,可以自己主动通知其它 ...

  4. VisualStudio2012轻松把JSON数据转换到POCO的代码

    原文:VisualStudio2012轻松把JSON数据转换到POCO的代码       在Visual Studio 2012中轻松把JSON数据转换到POCO的代码,首先你需要安装Web Esse ...

  5. Asp.Net MVC5入门学习系列②

    原文:Asp.Net MVC5入门学习系列② 添加一个Controller(控制器) 因为我们用的是Asp.Net MVC,MVC最终还是一套框架,所以我们还是需要遵循它才能玩下去,或者说是更好的利用 ...

  6. js 模拟QQ聊天窗口图片播放效果(带滚轮缩放)

    页面效果如下: 完整代码如下: <!DOCTYPE html> <html> <head> <title>Test</title> < ...

  7. SQLServer通过链接服务器远程删除数据性能问题解决

    原文:SQLServer通过链接服务器远程删除数据性能问题解决 在上一遍文章中介绍了SQLServer通过链接服务器访问Oracle性能问题的解决方法,本文介绍链接服务器下远程删除SQLServer数 ...

  8. [转载]Android中WebView自适应屏幕

    webview中右下角的缩放按钮能不能去掉 settings.setDisplayZoomControls(false); //隐藏webview缩放按钮 让Webview加载的页面居中显示有我知道的 ...

  9. 代码审查 (Google牛人谈Code Review)

    代码审查 (Google牛人谈Code Review) 在上一篇博客里我暗示自己将不在为Google工作. 我还没有决定好去哪儿-有几个非常不错的工作机会让我选择.鉴于这段时间内我不受雇于任何公司,我 ...

  10. foreach,foreachelse

    foreach,foreachelse Table of Contents目录 iteration 用于显示当前循环的执行次数[待考] first : 当前 foreach 循环第一次执行时 firs ...