zoukankan      html  css  js  c++  java
  • 利用HTML和CSS简单实现小米首屏(所得经验)

    经验:

    1.行内元素不能设置宽,高,margin-top,margin-bottom属性,给行内元素设置行高,行高会给其父元素,而当把他设置为块元素时,行高才会给它,所有行内元素行高无效。

    2.设置图标字体大小时,如果通过给其父元素a设置,图标字体的原有css样式会覆盖继承的a的字体大小,所以无效。

    3.选择器的权重,参考CSS选择器优先级的计算方式

    4.mid-width保证宽度最小值,布局稳定性。

    5.traption: height 0.3s,过渡效果。

    6.相邻块元素相邻边的阴影会被层级高的遮挡。

    7.border-color,transparent(属性)。

    8.text-indent:首行缩进 我们可以把设置一个特别大的负值,然后隐藏文本(文字是给搜索引擎看的,并不想用户看到)。

    9. : focus 当元素获取焦点的伪元素

    10.ctrl + f ,本文件中搜索代码。

    11.

            

    小米商城首页右侧固定布局的工具栏,使用固定定位(position: fixed;),由于固定定位按视窗布局,所以使用以下代码实现此功能。

    .right-toolbar {
         26px;
        height: 206px;
        background-color: pink;
        position: fixed;
        bottom: 60px;
        right: 50%;
        margin-right: -639px;
    
        /* left + margin-left + width + margin-right + right = 视口的宽度
    
        auto + 0 + 26 + 0 + 60 = 视口宽度
    
        auto + 0 + 26 + -639px + 50% = 视口宽度 */
    }
    

    12.(图标字体的使用再重新总结一次,参考HTML5和CSS3基础教程那本书以及iconfont官方文档中的使用教程)。

    13.开启BFC解决外边距重叠(overflow: hidden;)。

    14.搜索框增加打字时候与边框的距离,给搜索框增加padding-left和padding-right

    15.设置标题图标:

    网站图片一般都存储在网站的根目录下, 名字一般都叫做favicon.ico。

    <link rel="icon" href="favicon.ico"/>

    16.为了提升用户体验,css代码是要压缩的。

    疑问(希望看完《CSS世界》后可以得到解答):

    1.对图片使用vertical-align: top;有什么效果,为什么。

    2.

     为什么0;height:0;(不使用此行代码小三角将变大)。

    3.有关行高的问题。

    学识浅薄,如有错误,恳请斧正,在下不胜感激。

  • 相关阅读:
    centos7 部署kubernetes 1.20.1
    Pulse Width Modulation (PWM) interface
    imx6的IOMUX配置方法
    Linux下巧用转义符来完成多阶攻击
    记录一次半失败的php代码审计
    通过钉钉网页上的js学习xss打cookie
    PostMessage xss学习和挖掘
    解决Android微信支付官方demo运行失败
    Android集成银联支付,提示java.lang.UnsatisfieldLinkError错误
    解决 Plugin with id 'com.github.dcendents.android-maven' not found.
  • 原文地址:https://www.cnblogs.com/yin-jie/p/13788454.html
Copyright © 2011-2022 走看看