0
点赞
收藏
分享

微信扫一扫

前端小组考核试题

独孤凌雪 2022-04-15 阅读 49
htmlcss

1、常见的块级元素和行内元素有哪些?说说块级元素和行内元素的主要区别。 

2、去掉 ul li 前面的小点,需要用什么属性?具体方法是什么?

3、清除浮动的方法

4、你知道哪些选择器?css的优先级如何计算?

5、css中哪些样式可以继承?

6、让元素不可见的方法,以及他们的区别

 7、你是否了解过flex布局?有哪些常用属性

8、让div水平居中的方法

9、说说你知道的中animation 和 transition 的属性及作用

10、你知道哪些定位?说说他们的区别

11、BFC是什么?BFC的作用?

代码题 

1、用css画一条0.5px的线

<style>
        div {
	        background:black;
	        width:200px;
	        height:1px;
	        transform:scaleY(0.5)
        }
</style>

 效果:

2、使用css实现 淡入淡出 动画效果

<style>
        div {
            width: 200px;
            height: 200px;
            margin: auto;
            background-color: skyblue;
            animation-name: move;
            animation-duration: 3s;
        }
        @keyframes move {
            0% {
                opacity: 0;
            }
            25% {
                opacity: 0.5;
            }
            50% {
                opacity: 1;
            }
            75% {
                opacity: 0.5;
            }
            100% {
                opacity: 0;
            }
        }
    </style>

 3、使用css实现一个,选中行进行变色的细边框的表格

<style>
        table {
        border-spacing: 0;
        border-top: 1px solid #999999;
        border-left: 1px solid #999999;
        margin: 16px auto;
        width: 300px;
    }
    th {
        border-right: 1px solid #999999;
        border-bottom: 1px solid #999999;
        padding: 8px 0;
    }
    td {
        border-right: 1px solid #999999;
        border-bottom: 1px solid #999999;
        padding: 8px 0;
    }
    tr:hover {
        background-color: rgba(218, 141, 239, 0.77);
    }
    </style>
<table>
    <tbody>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </tbody>
</table>

 效果:

附加题 

1、使用div+css实现一个圆形,红色占60%,绿色占40%

   <style>
      .pie{
           width: 100px; 
           height: 100px;
           border-radius: 50%;
           background: red;
           background-image: linear-gradient(to right, transparent 50%, green 0);
        }
        .pie::before {
            content: '';
            display: block;
            margin-left: 50%;
            height: 100%;
            border-radius:0 50px 50px 0;
            background: red;
            transform-origin: left;
            transform: rotate(144deg);
        }
</style>

效果:  

2、要求使用至多两个元素实现以下效果

 <style>
        #one {
            height: 100px;
            width: 300px;
            background-color: #999;
            position: relative;
            margin: 10px;
        }
        #two {
            position: absolute;
            top: -1px;
            left: 1px;
            width: 50%;
            height: 3px;
            background-color: red;
        }
    </style>

 效果:

举报

相关推荐

0 条评论