• css3学习笔记


    1 border-radius:20% 30% 40% 50%/20% 30% 40% 50%

    第一个值表示左上角的x,第二个表示右上角的x,顺时针,斜杠右边是y的顺时针。

    2 box-shadow:1px 2px 3px rgba(0,0,0,0.5)

    1px:x轴偏移量

    2px:y轴偏移量

    3px:阴影的模糊半径

    rgba:三原色加透明度

    box-shadow:0 0 0 2px rgba(0,0,0,0.5),inset 0 0 3px rgba(0,0,0,0.5),110px 0 0 #fff;

    第一个2px是阴影扩展,类似边框,第二个是内阴影,第三个很大的偏移量

    3 背景渐变 background:linear-gradient(#fff,#000);

    4

     

    5 高清适配的问题

    将图片大小放大两倍后保存为其他图片,用于高清适配的替换图片

    @media screen and (-webkit-min-device-pixel-ratio:1.5){
           .m-list1{
                  background-image:url(bgx2.png);//宽400px
                  background-size:200px; //宽200px
    }

    6 两列布局,定宽

    定义两个div,一个float:left,一个float:right

    记住清除浮动,下面也是需要清除浮动,清除浮动的方法见另外一篇随笔

    7 两列布局

    一列定宽,一列自适应

     1、左边定宽,右边不定宽,左在上,右在下;(此处的上和下是指在html代码中从上到下编写顺序中的位置,下文皆同)
             遇到这种情况时,要将两个div进行左右布局,与左右定宽布局的方法基本相同,只需要将左边的div向左浮动{float:left;},并清除浮动,右边的div就会跟在已浮动的“div左”后面,即已经实现左右两列布局了。

    <div class="all">
            <div class="left"></div>
            <div class="right"></div>        
    </div>
    .all{
        clear:both;
    }
    .left {
    float:left;
    300px; height: 300px; background: #0EE6FF; } .right {
    margin-left: -320px; height: 300px; background: #57B61F; }

     2、左边定宽,右边不定宽,左在下,右在上
            将右边div写在上方,通常是希望在加载网站内容时先显示右边的内容,这种情况在“左边为菜单,右边是内容”的左右布局中经常用到。
            1)将右边的div向右浮动,并设一个负的margin-left;
            2)在右边div里面增加一个div,用于放右边的内容,计算出左边需要留出的宽度,并将此数据设置为该div的margin-left,如{margin-left:280px;}

  • 相关阅读:
    asp.net 添加引用类型自动变为GAC
    FPDFCJK.BIN下载(Foxit Reader中/日/韩CJK文字符支持包)
    Failed to access IIS metabase.
    Failed to access IIS metabase.
    判断用户计算机是否安装了sql server
    (Microsoft.Reporting.WebForms.ReportViewer) is not compatible with the type of control (Microsoft.Reporting.WebForms.ReportViewer)
    当你被利用的价值越来越小时,路会越来越窄.
    tomcat 6.0如何配置虚拟目录?tomcat 6.0 不能列目录?
    史上最高科技,Big Data奥运
    基于ping命令的网络故障排查方法
  • 原文地址:https://www.cnblogs.com/Zoe-only/p/4612093.html
Copyright © 2020-2023  润新知