每日两道前端面试题20190318

2019-03-18 admin

一个满屏<品>字布局 如何设计?

第一种方式:采用float的方式. 上面的div宽100%,下面的两个div分别宽50%

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>满屏品字布局</title>
    <style type="text/css">
        .ping-top{
            width: 100%;
            height: 500px;
            background-color: red;
        }
        .ping-left{
            width: 50%;
            height: 500px;
            background-color:green;
            float: left;
        }
        .ping-right{
            width: 50%;
            height: 500px;
            float: left;
            background-color:yellow;
        }

    </style>
</head>
<body>
    <div class="ping-top d1">上</div>
    <div class="ping-left d2">左</div>
    <div class="ping-right d3">右</div>
</body>
</html>

第二种方式:display:inline-block

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>满屏品字布局</title>
    <style type="text/css">
        .d1, .d2, .d3{
            height: 100px;
            width: 100px;
            background-color: yellow;
            border: solid 1px #000000;
         }
        .d1{
            height: 100px;
            width: 100px;
            background-color: #FF0000;
            margin: 0 auto;
        }
        .d2{
            display: inline-block;
            margin-left: 50%;
        }
        .d3{
            display: inline-block;
            margin-right:-210px;
        }
    </style>
</head>
<body>
    <div class="ping-top d1">上</div>
    <div class="ping-left d2">左</div>
    <div class="ping-right d3">右</div>
</body>
</html>

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

#demo{
   width:0;
   height:0;
   border-width:20px;
   border-style:solid;
   border-color:transparent transparent red transparent;
}

[转载]原文链接:https://segmentfault.com/a/1190000018556757

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-58019.html

文章标题:每日两道前端面试题20190318

相关文章
前端MV*框架的意义
经常有人质疑,在前端搞MV有什么意义?也有人提出这样的疑问:以AngularJS,Knockout,BackBone为代表的MV框架,它跟jQuery这样的框架有什么区别?我jQuery用得好好的,有什么必要再引入这种框架? 回答这些问题之...
2016-03-11
前端问答社区成立了
由雷锋网友提供的给大家相互交流的前端问答社区正式上线了,欢迎大家来此相互交流相互学习 ...
2016-03-30
面试官:谈谈你对 CSS 盒模型的认识?(你确定会?)
题目:谈谈你对 CSS 盒模型的认识 涉及知识点(层层递进): 基本概念:标准模型+ IE模型(区别) CSS如何设置这两种模型 JS如何设置获取盒子模型对应的宽和高 实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) 1...
2018-06-09
javascript字面量
你在JavaScript中使用文字代表值。 这些都是固定的值,而不是变量 从字面上 提供在你的脚本。 本节描述以下类型的文字: 数组 布尔 浮点型 整数 对象 字符串字面值 数组字面量 数组文字是零个或多个表达式的列表,每个代表一个数组元素...
2015-11-12
前端工程师应该具备的三种思维
如果你是一个天才等级的工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你。但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需要协调和配合,需要考虑除了代码以外...
2016-01-13
最简单的JavaScript图片轮播代码(两种方法)
通过改变每个图片的opacity属性: 素材图片: 代码一: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta cha...
2017-03-21
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
JavaScript实现模仿桌面窗口的方法
本文实例讲述了JavaScript实现模仿桌面窗口的方法。分享给大家供大家参考。具体如下: 这里使用JS模仿了桌面窗口的移动、八个方向的缩放、最小化、最大化和关闭,以及 双击缩小放大窗口、改变窗口大小的预览效果等功能。 &lt;!DOCTY...
2017-03-27
javascript记住用户名和登录密码(两种方式)
下面主要通过代码给大家展示下javascript记住用户名和登录密码,具体代码内容请看下文。 第一种方式: CONTENT login.html welcome.html cookie.js common.js login.html &lt...
2017-03-29
前端开发领域推荐关注的微信公众号
这篇文章分享了前端领域的多个值得关注的技术、设计、极客、创业相关微信公众号。其中有最受欢迎的热门公众号、也有专注某个技术或设计的公众号,涵盖:算法、JavaScript、Nodejs、程序员、Web前端、Linux、数据库、创业、UI设计和...
2017-03-23
回到顶部