• 面试问题(。。。不完整)


    • 高度跟宽度不定,自适应两栏布局
    • 两栏布局,左栏宽度为200,右栏高度跟左栏高度一致
    • js插入p元素
    • js截取字符串并计算字符串个数
    • ajax按钮提交一次后失效并修改当前点击的按钮
    • for循环 跳出循环
    • html5以及css3
    • 页面性能优化

    1、高度跟宽度不定,自适应两栏布局

    2015年3月 4日 总结:

    实现方法:①、overflow: hidden;

    ②、display: table-cell;

    两种方法可能都跟浏览器的BFC有关。

    首先,当使用overflow的时候:

    .box { width: 600px; background-color: #dcdcdc; }
    .cell1 { overflow: hidden; }
    <div class="box fix">
            <img class="l p10" src="images/xxx.jpg" width="100">
            <div class="cell1">
                <p class="f14">1977年的今天,28岁的拉齐奥中场球员Luciano Re
                    Cecconi和两个朋友走入罗马的一家珠宝店。不知为何,他突然想来个恶搞玩笑。进入珠宝店后他就大喊,"别动!打劫!"他随后、也是最后的两句话是在珠宝店主冲出开枪命中他后说的,"It's a joke!It's
                    a Joke!"30分钟后,他死了。
                    <span class="g6">//zxx:我xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
                </p>
                <p>It's a joke!It's a JokeIt's a joke!It's a JokeIt's a joke!It's a JokeIt's a joke!It's a JokeIt's a joke!It's a JokeIt's a joke!It's a Joke</p>
                <h3>无处理</h3>
            </div>
        </div>

    在浏览器firefox,chrome,ie7+运行正常。(特殊符号xxx不会换行)

    在ie6中文字出现环绕,

    当为cell添加*display:inline-block;或者*zoom:1触发haslayout,结果为:

    其次,当使用table-cell的时候

    .cell { display: table-cell;}

    firefox效果

    chrome,ie8+效果

    ie6,7效果

    因此使用display: table-cell+display:table-cell

    .box { width: 600px; background-color: #dcdcdc; }
    .cell1 {display: table-cell;*zoom:1;}
    .cell_bk1 { display: table; width: 100%; table-layout: fixed; word-wrap: break-word; }
    <div class="box fix">
            <img class="l p10" src="images/xxx.jpg" width="100">
            <div class="cell1">
                <p class="f14 cell_bk1">1977年的今天,28岁的拉齐奥中场球员Luciano Re
                    Cecconi和两个朋友走入罗马的一家珠宝店。不知为何,他突然想来个恶搞玩笑。进入珠宝店后他就大喊,"别动!打劫!"他随后、也是最后的两句话是在珠宝店主冲出开枪命中他后说的,"It's a joke!It's
                    a Joke!"30分钟后,他死了。
                    <span class="g6">//zxx:我xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
                </p>
                <p>It's a joke!It's a JokeIt's a joke!It's a JokeIt's a joke!It's a JokeIt's a joke!It's a JokeIt's a joke!It's a JokeIt's a joke!It's a Joke</p>
                <h3>无处理</h3>
            </div>
        </div>

    运行兼容所有浏览器。其中display: table-cell;也可以用overflow:hidden代替。在ie6中需触发haslayout。

    综上所述,当不需要考虑ie6效果并且不许考虑特殊字符的换行问题时候可以使用overflow:hidden方法比较简单。

    除此,使用方法二。

    2、两栏布局,左栏宽度为200,右栏高度跟左栏高度一致

    .content{overflow:hidden;}
    .left{width:200px;  background:#cad5eb; float:left;}
    .right{ margin-left: 210px; background:#f0f3f9;}
    .left,.right{ margin-bottom:-3000px; padding-bottom:3000px; }
    <div class="content">
            <div class="left">
                左边,无高度属性,自适应于最高一栏的高度<br/>左边,无高度属性,自适应于最高一栏的高度<br/>左边,无高度属性,自适应于最高一栏的高度<br/>左边,无高度属性,自适应于最高一栏的高度<br/>左边,无高度属性,自适应于最高一栏的高度<br/>左边,无高度属性,自适应于最高一栏的高度<br/>
            </div>
            <div class="right">
                右边,无高度属性,自适应于最高一栏的高度
            </div>
        </div>

      

    说明:核心CSS代码部分的3000像素是个可变值,如果您的分栏高度不可能高度超过2000像素,您就可以设为2000像素,如果会超过3000像素,那么您要修改值为4000像素或是更高。
    父标签的overflow:hidden属性是必须的,否则会显示溢出的内容。  

    margin负值实现分栏高度显示一致可以说是最好的方法,当然,还有其他一些轻便的替代方法。例如使用min-height属性,IE6不支持min- height但是height会自动撑高,所以min-height + _height的组合也是常用手段之一;另外就是使用背景图片了,利用背景图片的垂直平铺,可以模拟分栏的等高背景效果,但是,此方法对布局宽度有一定的 要求,如果布局宽度改变,背景图片可能也要做一番修改。

    3、js插入p元素

    <div id="box">
            <p>测试段落一...</p>
            <p>测试段落二...</p>
            <p>测试段落三...</p>
        </div>
    window.onload=function(){
           var box=document.getElementById("box");
           var items=document.getElementsByTagName("p");
           for(var i=0;i<items.length;i++) {
               var span = document.createElement("span");
               span.innerHTML = "i am a span";
               insertAfter(span,items[i]);
           }
           function insertAfter(newElement,targetElement){
               var parent=targetElement.parentNode;
               if(parent.lastChild==targetElement){
                   parent.appendChild(newElement,targetElement);
               }else{
                   parent.insertBefore(newElement,targetElement.nextSibling);
               };
           };
        }

    4、js截取字符串并计算字符串个数

    var s="ww.mma.cnxxxxxmama.cn......";
    var i= s.indexOf("mama.cn"); //14
    var k= s.indexOf("mamama.cn");  //-1
    alert(i);
    alert(k);
    var s1="ww.mama.cnxxxxxmama.cn......mama.cn";
    var j= s1.split("mama.cn").length-1;
    alert(j); //3

    5、ajax按钮提交一次后失效并修改当前点击的按钮

    6、for循环 跳出循环

    详见 break和continue语句

    7、html5以及css3

    8、页面性能优化

  • 相关阅读:
    点击标签实现元素的显示与隐藏
    二叉排序树查找 递归 非递归
    新闻实时分析系统 SQL快速离线数据分析
    新闻实时分析系统 Spark2.X集群运行模式
    新闻实时分析系统 Spark2.X分布式弹性数据集
    linux top命令查看内存及多核CPU的使用讲述
    新闻实时分析系统 基于IDEA环境下的Spark2.X程序开发
    新闻实时分析系统 Spark2.X环境准备、编译部署及运行
    新闻实时分析系统Hive与HBase集成进行数据分析 Cloudera HUE大数据可视化分析
    新闻实时分析系统Hive与HBase集成进行数据分析
  • 原文地址:https://www.cnblogs.com/zhaojieln/p/4311458.html
Copyright © 2020-2023  润新知