精华内容
下载资源
问答
  • 2013-09-26 10:21:36

    原文地址:http://hi.baidu.com/nancy0302/item/c11a7a639ee87a196995e615

    clock.js

    function Clock() {
        var date = new Date();
        this.year = date.getFullYear();
        this.month = date.getMonth() + 1;
        this.date = date.getDate();
        this.day = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[date.getDay()];
        this.hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        this.minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        this.second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
         
        this.toString = function() {
            return "现在是:" + this.year + "年" + this.month + "月" + this.date + "日 " + this.hour + ":" + this.minute + ":" + this.second + " " + this.day; 
        };
             
        this.toSimpleDate = function() {
            return this.year + "-" + this.month + "-" + this.date;
        };
             
        this.toDetailDate = function() {
            return this.year + "-" + this.month + "-" + this.date + " " + this.hour + ":" + this.minute + ":" + this.second;
        };
             
        this.display = function(ele) {
            var clock = new Clock();
            ele.innerHTML = clock.toString();
            window.setTimeout(function() {clock.display(ele);}, 1000);
        };
    }

    使用:

    1、将clock.js复制到项目js存放目录下

    2、在页面引入Clock.js文件

    <script src="js/Clock.js" type=text/javascript></script>

    3、显示。注意:js代码一定要放在时间显示的下面。

    <div><span id="clock"></span></div>
    <script type="text/javascript">
        var clock = new Clock();
        clock.display(document.getElementById("clock"));
    </script>

    4、时间显示格式:现在是:2013年1月11日 15:41:23 星期五。显示格式可根据具体需求对clock.js文件进行修改。

    更多相关内容
  • HTML页面显示当前时间

    千次阅读 2020-08-11 16:39:09
    页面显示当前时间 当前时间

    1.在一个div里面显示当前时间

      用id选择器
    
    <html>
    <head>
        <meta charset="utf-8">
        <title>当前时间</title>
        <script type="text/javascript">
            var t = null;
    
            function time() {
                dt = new Date();
                var y = dt.getFullYear();
                var M = dt.getMonth() + 1;
                var d = dt.getDate();
                var h = dt.getHours();
                var m = dt.getMinutes();
                var s = dt.getSeconds();
                M=checkTime(M);
                d=checkTime(d);
           		h=checkTime(h);
                m=checkTime(m);
                s=checkTime(s);
                document.getElementById("timeShow").innerHTML = "当前时间:" + y + "-" + M + "-" + d + " " + h + ":" + m + ":" + s;
                t = setTimeout(time, 1000);
            }
    
            window.onload = function () {
                time()
            }
            
            function checkTime(i){
            if(i<10){
                i="0"+i;
            }
            return i;
        }
        </script>
    
    </head>
    <body>
    <div id="timeShow"></div>
    </body>
    </html> 
    
    

    显示结果:
    在这里插入图片描述

    2.如果多个div显示当前时间的话

       用class选择器
    
    <html>
    <head>
        <meta charset="utf-8">
        <title>当前时间</title>
        <script type="text/javascript">
            var t = null;
    
            function time() {
                dt = new Date();
                var y = dt.getFullYear();
                var M = dt.getMonth() + 1;
                var d = dt.getDate();
                var h = dt.getHours();
                var m = dt.getMinutes();
                var s = dt.getSeconds();
                M=checkTime(M);
        	    d=checkTime(d);
          		h=checkTime(h);
            	m=checkTime(m);
            	s=checkTime(s);
                $('.timeShow').html(y + "-" + M + "-" + d + " " + h + ":" + m + ":" + s);
                t = setTimeout(time, 1000);
            }
    
            window.onload = function () {
                time()
            }
            
        function checkTime(i){
            if(i<10){
                i="0"+i;
            }
            return i;
        }
        </script>
    
    </head>
    <body>
    <div class="timeShow"></div>
    <div class="timeShow"></div>
    <div class="timeShow"></div>
    </body>
    </html>  
    
    展开全文
  • html显示当前时间

    万次阅读 多人点赞 2017-04-14 16:05:07
    效果图: html代码:         show_time  ... padding-top: 40px;  }  #main {   margin: auto;   text-align: center;   width: 300px;   height: 200px
    效果图:


    html代码:

    <!doctype html>  
    <html>  
    <head>  
    <meta charset="utf-8">  
    <title>show_time</title>  
    <style>  
    body {  
        padding-top: 40px;  
    }  
    #main {  
        margin: auto;  
        text-align: center;  
        width: 300px;  
        height: 200px;   
        background-color: #0CC;  
    }  
    #show_time0,#show_time {  
    width:300px;
    height:100px;
        color: #FFF;  
    }  
    </style>  
    </head>  
      
    <body>  
    <div id="main">  
    <div id="show_time0" style="">
    <script>
    //这里就一句话就可以显示时间,但不是我想要的最理想结果
     setInterval("show_time0.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);  
    </script>
    
    
    </div>
    
    
    
    
    
    
    <div id="show_time">  
    <script>  
    //这里代码多了几行,但是不会延迟显示,速度比较好,格式可以自定义,是理想的时间显示
    setInterval("fun(show_time)",1);
    function fun(timeID){ 
    var date = new Date();  //创建对象  
    var y = date.getFullYear();     //获取年份  
    var m =date.getMonth()+1;   //获取月份  返回0-11  
    var d = date.getDate(); // 获取日  
    var w = date.getDay();   //获取星期几  返回0-6   (0=星期天) 
    var ww = ' 星期'+'日一二三四五六'.charAt(new Date().getDay()) ;//星期几
    var h = date.getHours();  //时
    var minute = date.getMinutes()  //分
    var s = date.getSeconds(); //秒
    var sss = date.getMilliseconds() ; //毫秒
    if(m<10){
    m = "0"+m;
    }
    if(d<10){
    d = "0"+d;
    }
    if(h<10){
    h = "0"+h;
    }
    
    
    if(minute<10){
    minute = "0"+minute;
    }
    
    
    if(s<10){
    s = "0"+s;
    }
    
    
    if(sss<10){
    sss = "00"+sss;
    }else if(sss<100){
    sss = "0"+sss;
    }
    
    
    document.getElementById(timeID.id).innerHTML =  y+"-"+m+"-"+d+"   "+h+":"+minute+":"+s+"."+sss+"  "+ww;
    //document.write(y+"-"+m+"-"+d+"   "+h+":"+minute+":"+s);  
      }
    </script>  
    </div>  
    
    
    
    
    
    
    </div>  
    </body>  
      
    </html>  
      

    展开全文
  • 前端开发面试题(二)

    2016-11-29 12:43:00
    * png24位的图片iE6浏览器上出现背景,解决方案是做成PNG8.   * 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。   * IE6双边距bug:块属性标签float后,又有...

    CSS

     

    1、介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?

    (1)有两种, IE 盒子模型、W3C 盒子模型;

     

    (2)盒模型:内容(content)、填充(padding)、边界(margin)、边框(border);

     

    (3)区  别: IE的content部分把 border 和 padding计算了进去;

     

    2、CSS选择符有哪些?哪些属性可以继承?

     

    (1)id选择器( # myid)

       

     

    (2)类选择器(.myclassname)

      

     

    (3)标签选择器(div, h1, p)

       

     

    (4)相邻选择器(h1 + p)

      

     

    (5)子选择器(ul > li)

       

     

    (6)后代选择器(li a)

       

     

    (7)通配符选择器( * )

       

     

    (8)属性选择器(a[rel ="external"])

       

     

    (9)伪类选择器(a:hover,li:nth-child)

     

    *   可继承的样式:font-size font-family color, UL LI DL DD DT;

     

    *   不可继承的样式:borderpadding margin width height ;

     

    3、CSS优先级算法如何计算?

     

    *   优先级就近原则,同权重情况下样式定义最近者为准;

    *   载入样式以最后载入的定位为准;

     优先级为:

       

    同权重: 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。

     

    !important >  id > class > tag

      

     important 比 内联优先级高

     

    4、CSS3新增伪类有那些?

     

    举例:

       p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。    p:last-of-type  选择属于其父元素的最后 <p>元素的每个 <p> 元素。

       p:only-of-type  选择属于其父元素唯一的<p> 元素的每个 <p> 元素。

       p:only-child        选择属于其父元素的唯一子元素的每个 <p> 元素。

       p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

     

       :after          在元素之前添加内容,也可以用来做清除浮动。

       :before         在元素之后添加内容

       :enabled       

       :disabled       控制表单控件的禁用状态。

       :checked        单选框或复选框被选中。

     

    5、如何居中div?

     

    水平居中:给div设置一个宽度,然后添加margin:0 auto属性

     

     

    div{

       width:200px;

       margin:0 auto;

     }

     

    让绝对定位的div居中

     

    div {

       position: absolute;

     

     

     width: 300px;

       

     

    height: 300px;

     

     

     margin: auto;

      

     

     top:0;

       

     

    left: 0;

       

     

    bottom: 0;

      

     

     right: 0;

       

     

    /* 方便看效果 */

     

    }

     

    水平垂直居中一

     

     

     

    确定容器的宽高宽500 高 300 的层

    设置层的外边距

     

    div {

       position: relative;     /* 相对定位或绝对定位均可*/

       width:500px;

       height:300px;

       top: 50%;

       left: 50%;

       margin: -150px 0 0 -250px;      /*外边距为自身宽高的一半 */

            /* 方便看效果 */

     

     }

    水平垂直居中二

     

    未知容器的宽高,利用 `transform` 属性

     

    div {

       position: absolute;     /* 相对定位或绝对定位均可*/

       width:500px;

       height:300px;

       top: 50%;

       left: 50%;

       transform: translate(-50%, -50%);

            /* 方便看效果 */

     

    }

    水平垂直居中三

     

    利用 flex 布局

    实际使用时应考虑兼容性

     

    .container {

       display: flex;

       align-items: center;        /* 垂直居中 */

       justify-content: center;    /* 水平居中 */

     

    }

    .container div {

       width: 100px;

       height: 100px;

            /* 方便看效果 */

     

     

    6、display有哪些值?说明他们的作用。

     block        块类型。默认宽度为父元素宽度,可设置宽高,换行显示。

     none          缺省值。象行内元素类型一样显示。

     inline        行内元素类型。默认宽度为内容宽度,不可设置宽高,同行显示。

     inline-block  默认宽度为内容宽度,可以设置宽高,同行显示。

     list-item     象块类型元素一样显示,并添加样式列表标记。

     table         此元素会作为块级表格来显示。

     inherit       规定应该从父元素继承display 属性的值。

     

    7、position的值relative和absolute定位原点是?

     

     absolute

        生成绝对定位的元素,相对于值不为 static的第一个父元素进行定位。

     fixed (老IE不支持)

        生成绝对定位的元素,相对于浏览器窗口进行定位。

     relative

        生成相对定位的元素,相对于其正常位置进行定位。

     static

        默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right z-index 声明)。

     inherit

        规定从父元素继承position 属性的值。

     

    8、CSS3有哪些新特性?

     

      新增各种CSS选择器  (: not(.input):所有 class 不是“input”的节点)

      圆角            (border-radius:8px)

      多列布局      (multi-column layout)

      阴影和反射   (Shadow\Reflect)

      文字特效      (text-shadow、)

      文字渲染      (Text-decoration)

      线性渐变      (gradient)

      旋转            (transform)

      缩放,定位,倾斜,动画,多背景

    例如:

    transform:\scale(0.85,0.90)\

    translate(0px,-30px)\

    skew(-9deg,0deg)\Animation:

     

    9、请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景?

     

     一个用于页面布局的全新CSS3功能,Flexbox可以把列表放在同一个方向(从上到下排列,从左到右),并让列表能延伸到占用可用的空间。

     较为复杂的布局还可以通过嵌套一个伸缩容器(flex container)来实现。

     采用Flex布局的元素,称为Flex容器(flexcontainer),简称"容器"。

     它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。

     常规布局是基于块和内联流方向,而Flex布局是基于flex-flow流可以很方便的用来做局中,能对不同屏幕大小自适应。

     在布局上有了比以前更加灵活的空间。

     

    10、用纯CSS创建一个三角形的原理是什么?

     

    把上、左、右三条边隐藏掉(颜色设为 transparent)

    #demo {

     width: 0;

     height: 0;

     border-width: 20px;

     border-style: solid;

     border-color: transparent transparent red transparent;

    }

     

    11、一个满屏 品 字布局 如何设计?

     

    简单的方式:

        上面的div宽100%,

        下面的两个div分别宽50%,

        然后用float或者inline使其不换行即可

    12、css多列等高如何实现?

     

    利用padding-bottom|margin-bottom正负值相抵;

    设置父容器设置超出隐藏(overflow:hidden),这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度,

    当它里面的任一列高度增加了,则父容器的高度被撑到里面最高那列的高度,

    其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。

     

    13、经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧?

     

    * png24位的图片在iE6浏览器上出现背景,解决方案是做成PNG8.

     

    * 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

     

    * IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大。

     

      浮动ie产生的双倍距离 #box{float:left; width:10px; margin:0 0 0 100px;}

     

      这种情况之下IE会产生20px的距离,解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

     

      渐进识别的方式,从总体中逐渐排除局部。

     

      首先,巧妙的使用“\9”这一标记,将IE游览器从所有情况中分离出来。

      接着,再次使用“+”将IE8和IE7、IE6分离开来,这样IE8已经独立识别。

     

      css

         .bb{

             /*所有识别*/

              /*IE6、7、8识别*/

              +/*IE6、7识别*/

             _/*IE6识别*/

         }

     

     

    *  IE下,可以使用获取常规属性的方法来获取自定义属性,

       也可以使用getAttribute()获取自定义属性;

      Firefox下,只能使用getAttribute()获取自定义属性。

       解决方法:统一通过getAttribute()获取自定义属性。

     

    *  IE下,even对象有x,y属性,但是没有pageX,pageY属性;

      Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。

     

    *  解决方法:(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。

     

    * Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,

       可通过加入 CSS 属性-webkit-text-size-adjust: none; 解决。

     

    超链接访问过后hover样式就不出现了被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:

    L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

     

    14、li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?

     

    行框的排列会受到中间空白(回车\空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔,把字符大小设为0,就没有空格了。

     

    15、为什么要初始化CSS样式。

     

    - 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

     

    - 当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。

     

    最简单的初始化方法: * {padding: 0; margin: 0;} (强烈不建议)

     

    淘宝的样式初始化代码:

    body, h1, h2, h3, h4, h5, h6, hr, p,blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input,textarea, th, td { margin:0; padding:0; }

    body, button, input, select, textarea {font:12px/1.5tahoma, arial, \5b8b\4f53; }

    h1, h2, h3, h4, h5, h6{ font-size:100%; }

    address, cite, dfn, em, var {font-style:normal; }

    code, kbd, pre, samp {font-family:couriernew, courier, monospace; }

    small{ font-size:12px; }

    ul, ol { list-style:none; }

    a { text-decoration:none; }

    a:hover { text-decoration:underline; }

    sup { vertical-align:text-top; }

    sub{ vertical-align:text-bottom; }

    legend { color:#000; }

    fieldset, img { border:0; }

    button, input, select, textarea {font-size:100%; }

    table { border-collapse:collapse;border-spacing:0; }

     

    16、absolute的containingblock(容器块)计算方式跟正常流有什么不同?

     

    无论属于哪种,都要先找到其祖先元素中最近的 position 值不为 static 的元素,然后再判断:

    (1)若此元素为 inline 元素,则containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形;

    (2)否则,则由这个祖先元素的padding box 构成。

    如果都找不到,则为 initial containing block。

     

    补充:

    (1)static(默认的)/relative:简单说就是它的父元素的内容框(即去掉padding的部分)

    (2) absolute: 向上找最近的定位为absolute/relative的元素

    (3) fixed: 它的containing block一律为根元素(html/body),根元素也是initialcontaining block

     

    17、对BFC规范(块级格式化上下文:blockformatting context)的理解?

     

    (W3C CSS 2.1 规范中的一个概念,它是一个独立容器,决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。)

     一个页面是由很多个 Box组成的,元素的类型和 display 属性,决定了这个 Box 的类型。

     不同类型的 Box,会参与不同的Formatting Context(决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。

     

    18、css定义的权重

     

    以下是权重的规则:标签的权重为1,class的权重为10,id的权重为100,以下例子是演示各种定义的权重值:

     

    /*权重为1*/

    div{

    }

    /*权重为10*/

    .class1{

    }

    /*权重为100*/

    #id1{

    }

    /*权重为100+1=101*/

    #id1 div{

    }

    /*权重为10+1=11*/

    .class1 div{

    }

    /*权重为10+10+1=21*/

    .class1 .class2 div{

    }

     

    如果权重相同,则最后定义的样式会起作用,但是应该避免这种情况出现

     

    19、请解释一下为什么需要清除浮动?清除浮动的方式

     

    清除浮动是为了清除使用浮动元素产生的影响。浮动的元素,高度会塌陷,而高度的塌陷使我们页面后面的布局不能正常显示。

     

    (1)父级div定义height;

    (2)父级div 也一起浮动;

    (3)常规的使用一个class;

       .clearfix:before, .clearfix:after {

            content: " ";

           display: table;

        }

       .clearfix:after {

           clear: both;

        }

       .clearfix {

           *zoom: 1;

        }

     

    (4)SASS编译的时候,浮动元素的父级div定义伪类:after

       &:after,&:before{

           content: " ";

           visibility: hidden;

           display: block;

           height: 0;

           clear: both;

        }

     

    解析原理:

    1) display:block 使生成的元素以块级元素显示,占满剩余空间;

    2) height:0 避免生成内容破坏原有布局的高度。

    3) visibility:hidden 使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互;

    4)通过content:"."生成内容作为最后一个元素,至于content里面是点还是其他都是可以的,例如oocss里面就有经典的 content:".",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0content:”" 仍然会产生额外的空隙;

    5)zoom:1 触发IEhasLayout。

     

    通过分析发现,除了clear:both用来闭合浮动的,其他代码无非都是为了隐藏掉content生成的内容,这也就是其他版本的闭合浮动为什么会有font-size:0,line-height:0。

     

    20、什么是外边距合并?

     

    外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。

    合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

     

    21、zoom:1的清除浮动原理?

     

    清除浮动,触发hasLayout;

    Zoom属性是IE浏览器的专有属性,它可以设置或检索对象的缩放比例。解决ie下比较奇葩的bug。

    譬如外边距(margin)的重叠,浮动清除,触发ie的haslayout属性等。

     

    来龙去脉大概如下:

    当设置了zoom的值之后,所设置的元素就会就会扩大或者缩小,高度宽度就会重新计算了,这里一旦改变zoom值时其实也会发生重新渲染,运用这个原理,也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

     

    Zoom属是IE浏览器的专有属性,火狐和老版本的webkit核心的浏览器都不支持这个属性。然而,zoom现在已经被逐步标准化,出现在 CSS 3.0 规范草案中。

     

    目前非ie由于不支持这个属性,它们又是通过什么属性来实现元素的缩放呢?

    可以通过css3里面的动画属性scale进行缩放。

     

    22、移动端的布局用过媒体查询吗?

     

    假设你现在正用一台显示设备来阅读这篇文章,同时你也想把它投影到屏幕上,或者打印出来,而显示设备、屏幕投影和打印等这些媒介都有自己的特点,CSS就是为文档提供在不同媒介上展示的适配方法

     

    当媒体查询为真时,相关的样式表或样式规则会按照正常的级联规被应用。当媒体查询返回假,标签上带有媒体查询的样式表仍将被下载 (只不过不会被应用)。

     

     

     

    包含了一个媒体类型和至少一个使用宽度、高度和颜色等媒体属性来限制样式表范围的表达式。 CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。

     

    @media (min-width: 700px) and (orientation:landscape){ .sidebar { display: none; } }

     

    23、使用 CSS 预处理器吗?喜欢那个?

     

    SASS (SASS、LESS没有本质区别,只因为团队前端都是用的SASS)

     

    24、CSS优化、提高性能的方法有哪些?

     

    关键选择器(key selector)。选择器的最后面的部分为关键选择器(即用来匹配目标元素的部分);

    如果规则拥有 ID 选择器作为其关键选择器,则不要为规则增加标签。过滤掉无关的规则(这样样式系统就不会浪费时间去匹配它们了);

    提取项目的通用公有样式,增强可复用性,按模块编写组件;增强项目的协同开发性、可维护性和可扩展性;

    使用预处理工具或构建工具(gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级);

     

    25、浏览器是怎样解析CSS选择器的?

     

    样式系统从关键选择器开始匹配,然后左移查找规则选择器的祖先元素。

    只要选择器的子树一直在工作,样式系统就会持续左移,直到和规则匹配,或者是因为不匹配而放弃该规则。

    ­­

    26、­margin和padding分别适合什么场景使用?

     

    margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。

    margin用于布局分开元素使元素与元素互不相干;

    padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段

     

    27、::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用。

     

    单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。(伪元素由双冒号和伪元素名称组成)

    双冒号是在当前规范中引入的,用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法,

    比如:first-line、:first-letter、:before、:after等,

    而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

     

    想让插入的内容出现在其它内容前,使用::before,否者,使用::after;

    在代码顺序上,::after生成的内容也比::before生成的内容靠后。

    如果按堆栈视角,::after生成的内容会在::before生成的内容之上

     

    28、如何修改chrome记住密码后自动填充表单的黄色背景 ?

     

    input:-webkit-autofill,textarea:-webkit-autofill, select:-webkit-autofill {

      /* #FAFFBD; */

     background-image: none;

     color: rgb(0, 0, 0);

    }

     

    29、设置元素浮动后,该元素的display值是多少?

     

    自动变成了 display:block

     

    30、怎么让Chrome支持小于12px 的文字?

     

    (1)用图片:如果是内容固定不变情况下,使用将小于12px文字内容切出做图片,这样不影响兼容也不影响美观。

    (2)使用12px及12px以上字体大小:为了兼容各大主流浏览器,建议设计美工图时候设置大于或等于12px的字体大小,如果是接单的这个时候就需要给客户讲解小于12px浏览器不兼容等事宜。

    (3)继续使用小于12px字体大小样式设置:如果不考虑chrome可以不用考虑兼容,同时在设置小于12px对象设置-webkit-text-size-adjust:none,做到最大兼容考虑。

    (4)使用12px以上字体:为了兼容、为了代码更简单 从新考虑权重下兼容性。

     

    31、让页面里的字体变清晰,变细用CSS怎么做?

     

    -webkit-font-smoothing: antialiased;

     

    32、font-style属性可以让它赋值为“oblique” oblique是什么意思?

     

    倾斜的字体样式

     

    33、position:fixed;在android下无效怎么处理?

     

    fixed的元素是相对整个页面固定位置的,你在屏幕上滑动只是在移动这个所谓的viewport,

    原来的网页还好好的在那,fixed的内容也没有变过位置,

    所以说并不是iOS不支持fixed,只是fixed的元素不是相对手机屏幕固定的。

    <meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no"/>

     

    34、如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)

     

    多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms

     

    35、display:inline-block什么时候会显示间隙?(携程)

     

    移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

     

    36、什么是Cookie 隔离?(或者说:请求资源的时候不要让它带cookie怎么做)

     

    如果静态文件都放在主域名下,那静态文件请求的时候都带有的cookie的数据提交给server的,非常浪费流量,

    所以不如隔离开。

     

    因为cookie有域的限制,因此不能跨域提交请求,故使用非主要域名的时候,请求头中就不会带有cookie数据,

    这样可以降低请求头的大小,降低请求时间,从而达到降低整体请求延时的目的。

     

    同时这种方式不会将cookie传入Web Server,也减少了Web Server对cookie的处理分析环节,

    提高了webserver的http请求的解析速度。

     

     

    37、什么是CSS 预处理器 / 后处理器?

     

    - 预处理器例如:LESS、Sass、Stylus,用来预编译Sass或less,增强了css代码的复用性,

      还有层级、mixin、变量、循环、函数等,具有很方便的UI组件模块化开发能力,极大的提高工作效率。

     

    - 后处理器例如:PostCSS,通常被视为在完成的样式表中根据CSS规范处理CSS,让其更有效;目前最常做的

      是给CSS属性添加浏览器私有前缀,实现跨浏览器兼容性的问题。

    转载于:https://www.cnblogs.com/woodyliang/p/6113132.html

    展开全文
  • 1颜色属性pppppppppppppppppppp2 字体属性font-size: 20px/50%/largerfont-family:'Lucida Bright'font-weight: lighter/bold/border/3 背景属性border:1px solid red;background-color: cornflowerblue;background-...
  • CSS 面试题

    千次阅读 2020-08-15 16:51:25
    , 3)浮动方向偏移量(left 或者 right)设置 50%, 4)浮动方向上的 margin 设置元素宽度一半乘以-1 居中绝对定位元素 1)元素设置宽度,2)设置左右偏移量都 0,3)设置左右外边距都 auto 1)元素...
  • 在div中设置文字与内部div垂直居中

    千次阅读 2019-08-09 23:42:04
    在div中设置文字与内部div垂直居中 要实现如图一所示的结果: html代码如下: 复制代码 商品管理后台首页 这是一个测试要居中 我是div中的文字 复制代码 相应的less代码 ...
  • <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> </head> <...li&g.
  • &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&...div id="sss" onmouseover = "over
  • CSS的伪类选择器,颜色设置,度量单位,文本字体及文本样式设置。
  • css基础丨一次搞懂CSS 字体单位:px、em、rem 和 % css基础丨只用1个div,你能用CSS常规属性绘制:正3、4、5、6、7、8边形吗? CSS 3D 专题丨搞懂 CSS 3D,你必须理解 perspective(视域)这个属性 JS基础丨Array 数组...
  •   设定样式之前我们需要了解一下,由于浏览器的默认样式会页面的元素添加一些padding和margin,具体这些是什么我们会盒模型了解到,这里不作赘述。不过我们可以暂且认为他们是围元素周围的一些空隙...
  • CSS3实现背景色一半红一半白

    万次阅读 2020-06-23 18:01:00
    给定一个div的宽度和高度,设置它的背景,使它的背景色一半是红色,一半是白色。 分析 可以使用CSS3的渐变来实现这个需求。 代码 废话不多说,直接上代码了。 <!DOCTYPE html> <html lang="en"> <...
  • 今天学习了JS的入门课程,听的不多,做了个小练习,给DIV设置宽高,背景色一点点都是进步核心代码如下。: &lt;!DOCTYPE html&gt; &lt;html lang =“en”&gt; &lt;head&gt; &lt;meta ...
  • 跟某马学的css啦~基础知识,基础选择器,字体和文本样式,Chrome调试工具,拓展
  • 通过绝对定位实现div重叠实例代码复制代码代码如下:div重叠 叠加实例 未排层叠顺序 www.divcss5.com.div-relative {position: absolute;color: #000;border: 1px solid #000;width: 500px;height: 400px;right: 0;...
  • 1.思路首先呢,需要做出来一道倾斜的白光,这道白光就是用来实现“照亮字体”的效果的。这一步做好之后,接下来的事情就简单了,也就是让白光先消失,然后当鼠标移动到字体上的时候,白光出现,从字体上划过。2.白光...
  • 这里写目录标题外观样式选择器伪元素背景 外观样式 /* 设置边框厚度1px 实线 */ border: 1px solid; /* 设置p标签的高度 */ height: 100px; /* 如果行高和高度一致,则文字垂直居中 */ line-height: 100px; /...
  • 1.input或textareachrome、safari浏览器点击获得焦点时出现黄色边框去掉的方法input{ outline:0;}outline 定义和用法...outline 简写属性一个声明设置所有的轮廓属性。可以按顺序设置如下属性:outline-col...
  • **要求:**将导航栏分成八个小部分,并鼠标放上并不点击,导航栏背景颜色显示为黄绿色; Ⅱ实现过程如下: 1、运行软件VScode,亲测可实现; 2、运行代码: <!DOCTYPE html> <html lang="en"> <...
  • 前一篇文章讲述了数据预处理、Jieba分词和文本聚类知识,这篇文章主要介绍Matplotlib和Pandas扩展包绘图的基础用法,同时引入Echarts技术,该技术主要应用于网站可视化展示。本文内容以实例主,给读者最直观的...
  • JS实现点击下拉框改变背景颜色

    千次阅读 2021-05-06 21:09:37
    使用onchange事件,当点击不同下拉框选项时,改变div背景颜色以及文字 效果展示 代码演示 <!DOCTYPE html> <html> <head lang="en">... #div { width: 300px; height
  • 网页设计(四)——DIV+CSS布局3

    千次阅读 2020-07-11 15:41:51
    前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者。最近打算把原来的一些资料整理一下,作为经验...CSS,可以使用下面的语段示例来设置div的宽度(width)、高度(height)、外边距(margin)、..
  • Web前端开发初级模拟测试卷(三)共...实现向右的红色三角形,样式实现正确的是( ) AA.icon{width:0; height:0; overflow:hidden; border:5px solid transparent; border-left-color:#f00; }B.icon{width:0; height:0;...
  • text-shadowcss文字阴影、css字体投影与字体阴影模糊功能效果的CSS属性单词css text-shadow阴影效果一、text-shadow介绍text-shadow是CSS样式属性单词,是设置对象文本的文字字体是否有阴影及模糊效果的CSS样式...
  • 样式定义如何显示 HTML 元素,样式通常存储样式表 外部样式表可以极大提高工作效率,外部样式表通常存储 CSS 文件 CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是您需要...
  • div三行或三列铺满全屏

    千次阅读 2019-04-07 09:55:01
    这里写自定义目录标题一、实现要求二、实现过程1、字体水平居中和垂直居中 一、实现要求 铺满屏,字体居中 交互,点击一个盒子能够改变另外一个盒子的颜色 最开始的实现效果使这样的: 但是有些问题: 字体只有...
  • Day04CSS字体和选择器

    2019-09-19 16:24:40
    目录CSS字体样式属性font-size:字号大小font-family:字体CSS Unicode字体font-weight:字体粗细font-style:字体风格font:综合设置字体样式CSS外观属性color:文本颜色line-height:行间距text-align:水平对齐方式text-...
  • ​ 含义:所谓层叠,可以将网页想像成一层一层的结构,层次高的样式会覆盖层次低的样式,我们的CSS可以每一层设置不同的样式,处于文档最底层被称为文档流,元素默认都文档流存放。 CSS引入
  • Word字体种类这说明sample.text是一个unicode格式文档。WORD打开时,是让你选择一个正确的字符集,否则有可能乱码! 你看提示窗口默认已经是unicode(UTF-8)格式了,直接确即可。你可以随便用记事本写点东西,然后...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,679
精华内容 1,871
关键字:

实现在div中显示当前日期时间,字体24px,白色,背景为黄色