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>

  • 相关阅读:
    .Net Micro Framework中文讨论组
    .Net Micro Framework 4.0正式开源
    php论坛学习的一个遍历的问题(学习) 简单
    Visual C++ 2008入门经典 第十章标准模板库(二) 简单
    PHP类型转换&&类型强制转换 简单
    Visual C++ 2008入门经典 第九章练习题 简单
    Visual C++ 2008入门经典 第十章标准模板库 简单
    PHP服务端推送技术Long Polling 简单
    Visual C++ 2008入门经典 第九章类的继承和虚函数(三) 简单
    正则表达式学习一 简单
  • 原文地址:https://www.cnblogs.com/ninali/p/3186712.html
Copyright © 2011-2022 走看看