zoukankan      html  css  js  c++  java
  • 百度ife2015-小白的弯路1

    header部分

    遇到的问题:

    1.设置背景宽度为100%时,当浏览器低于980px时,出现横向滚动条,滚动滚动条,发现背景颜色是白色,而不是紫色

    由于只设置了header的背景颜色,而没有设置header-main的背景颜色,其默认为透明的;而header的背景颜色的宽度为实际浏览器的宽度,超出浏览器宽度的位置自然为默认的颜色,故需重新给header-main添加背景颜色。

    2.当浏览器低于980px时,右上角的Github图标在浏览器低于980px时消失。

    这个问题刚开始困扰了我好久,因为github图标是根据header块进行绝对定位的,而header的宽度就是浏览器实际宽度,也就是说github图标一直在距离浏览器右边距10px的地方,滚动滚动条,会发现两个div互相覆盖了,
    而且都是用position进行定位,故只要将git-logo放在header-main前面就行。

    banner部分

    遇到的问题:

    1.图片与浏览器宽度问题

    背景时宽度为100%,当浏览器小于980px时会出现滚动条,但滚动滚动条发现超出浏览器尺寸的地方没有背景图片,于是设置成min-height:980px,这样,即使尺寸小于980px,背景也有980px,和header部分相对应。

    2.图片尺寸问题

    由于图片尺寸过大,作为背景时宽度为100%,浏览器只能显示一部分,故使用background-size:100% 100%;

    3.渐变透明度

    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0) 100%);

    center部分

    遇到的问题:

    1.当div中只有img元素时,div的高度始终比图片设置的宽度多3px

    当只设置图片宽度和高度时,div的高度始终比图片宽度多3px,用margin为0也去不掉,故只有重新定义div的宽度和高度,本想去掉图片的宽高度设置,结果发现图片超过了显示范围,故只有两个都设置。

    2.使3个子div并排显示,高度一致且自适应的问题,即3个div的高度为高度最大的子div的高度

    刚开始我将父级div设置了一个固定高度,后来发现子div可能会溢出这个高度,就决定不设置父级div的高度,让3个子div的高度将其撑开,这样就可以达到高度自适应,用的是margin:0 auto 100px auto;
    要使3个子div并排,有2种方法:

    --使用display:box,这个属性需要设置在父级div中,并且不会脱离文档流,可以正常的将父级div的高度撑开,且3个div的高度会相等且自适应,但是需要兼容其他的浏览器,比如chrome,display:-webkit-box;

    --使用float:left,这会导致子div脱离文档流,使得父级div的高度为0,会使margin-bottom的100px被子div覆盖,怎样使父级div可以被撑开,只需对父级div添加一个overflow:hidden的属性即可;
    但是虽然父级div有了高度,但是3个子div的内容并不相同,故高度也不同,可以添加padding-bottom:999px,margin-bottom:-999px就可以使3个div的高度相同且随着最高的div自适应。
    padding-bottom:999px是将div的高度增加,使得3个子div的高度都超过最大高度,然后margin-bottom:-999px是div的外边距与内容的高度相同,但是背景色仍会随着padding的长度溢出外边距,此时父元素的overflow会将溢出多余的部分隐藏,达到效果。

    author部分

    1.遇到了垂直外边距合并的问题,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素与父元素的边距没有发生任何变化

    这是margin一个常见的问题,这个问题发生的原因是根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠
    解决方法就是给父元素加上padding-top或者border-top,当然还有别的解决方法。

    footer部分

    1.当对想将div中的内容居中时,使用了text-align:center,但是又对div中的li使用了浮动,脱离文档流无法居中

    后来突然想到,对li使用display:inline就可以了,这样既不会脱离文档流,text-align也有效

    github地址

    总结

    在编写index.html的时候遇到很多问题,而且速度很慢,明显的感觉到基础不扎实,而且写的过程中感觉很混乱,没有条理,深刻的觉得在写了一遍把思路理顺之后应该重写一遍,这个时候应该更加注意css的结构问题,不能想实现一个功能就编写一行代码,这样写出来的程序会比较好一点。

  • 相关阅读:
    详解:数据库名、实例名、ORACLE_SID、数据库域名、全局数据库名、服务名
    培养正直的品德
    限定任务的时间
    SOA是什么
    软件项目管理实践之日计划
    项目管理经验的获取
    善于分解大的任务
    oracle表分区详解
    如何定义和建立架构?
    构架、框架、设计模式之间的关系简述
  • 原文地址:https://www.cnblogs.com/aicanxxx/p/6837474.html
Copyright © 2011-2022 走看看