zoukankan      html  css  js  c++  java
  • csshtml布局及部分知识小分享~~~

    近期发现和总结的知识跟大侠们分享,请大侠们多多评论指教一二?

     HTML

    1、(1)body需设置页面默认字体大小 body{font-size:12px;}
    (2)IE6下png图片划过切换失效,建议使用gif、jpg
    (3)在布局当中左右div自适应高度相等,需要两个先天条件:
    1.外层box需设置overflow:hidden;
    2.左或右一侧均可以设置margin-bottom:-9999px;padding-bottom:9999px;达到左右对齐
    (4)浏览页面背景固定在body上:
    <body style="height:1000px;background:url(../images/20hills.jpg) no-repeat fixed #8ce2fd center top;"></body>
    (5)布局代码我也是才发现的,哈哈看一哥们写的被我发现了。
    <fieldset style="border:1px solid #000;" >//可以改变边框颜色
        <legend>用户登录</legend>
        </fieldset>


    2、ctrl+shift+c 折叠所选 ctrl+shift+j 折叠完成标签
    ctrl+shift+e 撤销折叠

    3、分享下最近学习的布局技巧也就是博客园最外框的布局:注释(随着浏览器大小自适应内容块)
    <div style="margin:100px 310px 10px 220px;background-color:#999;height:600px;padding:20px;font-size:20px;">
        <div  >   
             【编辑推荐】减少.NET应用程序内存占用的一则实践 (52/5601) »<br />
            [最多推荐]Fish Li 该如何帮助您呢?(78/2722) »<br />
            [最多评论][正能量系列]失业的程序员(三)(34/1406)<br />
            [新闻头条]研究员公开TOM-Skype关键词黑名单(21/1951) »<br />
            [推荐新闻]2013年3月TIOBE编程语言排行榜:Javascript正被开发者抛弃?(6/2528) »
        </div>
         <div style="200px;height:500px; background-color:#F00;position:absolute;left:15px;top:100px;">左侧</div>
         <div style="290px;height:500px; background-color:#00F;position:absolute;right:15px;top:100px;">右侧</div>
    </div>




     

    css

    1、css选择器 个人常用推荐:列如id class类 可以多个调用


    2、css3透明效果兼容IE浏览器
    .box{ filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150)
    progid:DXImageTransform.Microsoft.gradient(startcolorstr=#E5F5FF,endcolorstr=#ffffff,gradientType=0);
    -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150)
    progid:DXImageTransform.Microsoft.gradient(startcolorstr=#E5F5FF,endcolorstr=#ffffff,gradientType=0); background:#E5F5FF; /* 一些不支持背景渐变的浏览器 */
    background:-moz-linear-gradient(top, #E5F5FF, white); background:-webkit-gradient(linear, 0 0, 0 bottom, from(#E5F5FF),
    to(#ffffff)); 500px;height:200px;text-align:center; }



    3、图片圆角自适应:

    <li style="margin-right:10px;padding:0px 0 0 20px; background:url(/navbj.gif);font-size:14px;float:left;">        
           <span style="/navbj.gif) no-repeat right top;padding-right:20px;display:block;">圆角宽度自适应</span>
      </li>

  • 相关阅读:
    228. Summary Ranges
    227. Basic Calculator II
    224. Basic Calculator
    222. Count Complete Tree Nodes
    223. Rectangle Area
    221. Maximal Square
    220. Contains Duplicate III
    219. Contains Duplicate II
    217. Contains Duplicate
    Java编程思想 4th 第4章 控制执行流程
  • 原文地址:https://www.cnblogs.com/ninali/p/3186712.html
Copyright © 2011-2022 走看看