网易前端微专业-页面制作-讨论题汇总

Posted xll-candice

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网易前端微专业-页面制作-讨论题汇总相关的知识,希望对你有一定的参考价值。

1. JPG、PNG8、PNG24这些格式分别适合保存什么特点的图片?

1)JPG: 适合保存色彩丰富且无透明度要求的图片,一般为一些网页的内容性图片。

2)PNG8:图片色彩不太丰富,无论有无透明度要求的图片,一般为一些网页内修饰性图片。

3)PNG24: 有半透明要求的图片,一般为一些网页内修饰性图片。

2. 图片分类合并有哪些方式?

1)把属于同一个模块的图片进行合并

2)把大小相近的图片进行合并

3)把色彩相近的图片进行合并

4)综合以上所有方式对图片进行合并

合并推荐:1)同一页面图片的合并,比如登录页面的图片登陆后不再需要,这样合并只需要在登陆时加载一次图片即可; 2)有状态图标的合并,便于查找和升级维护

3. 如何实现浏览器兼容版的inline-block显示

(display:inline-block;在ie6、ie7下只有设置在默认显示方式为inline的元素上才会生效,请实现兼容ie6、ie7的通用的方式)

 

1 display:inline-block;
2 *display:inline;         /*IE下触发hasLayout*/
3 *zoom:1;                 /*一旦IE下触发了hasLayout,设置block元素为inline会使display:inline效果与display:inline-block相似*/

 

4. 实现一个自适应布局

技术分享图片

<div class="parent"> 

    <div class="side">侧栏</div>

    <div class="main">主栏</div>

</body>

要求如效果图中标注,两栏间距为10px,请写出这个两列布局的CSS。

 

 1 html,body{
 2     height: 100%;
 3     margin: 0;
 4 }
 5 .parent{
 6     display: flex;
 7     height: 100%;
 8     font:30px sans-serif;
 9     color: white;
10     text-align: center;
11 }
12 .side{
13     width: 200px;
14     background-color: red;
15 }
16 .main{
17     background-color: blue;
18     flex: 1;
19     margin-left: 10px;
20 }
21 .vertical-center{
22     vertical-align: middle;
23     height: 100%;
24 }

 

5. 实现一个Tab

请按以下效果图和图中标注完成HTML和CSS:

默认第一个Tab为选中状态。

补充说明:实现静态效果即可,不用实现点击切换。

技术分享图片

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Tab</title>
 6     <style type="text/css">
 7         html{
 8             height: 100%;
 9         }
10         body{
11             display: flex;
12             flex-flow: column;
13             box-sizing: border-box;
14             width: 574px;
15             height: 100%;
16             border:1px solid #999;
17         }
18         .charactor{
19             font:14px "微软雅黑";
20         }
21         .content{
22             padding: 20px;
23             background-color: white;
24             flex: 1;
25             display: flex;
26         }
27         .nav{
28             display: flex;
29         }
30         .item{
31             text-align: center;
32             border:1px solid #cecece;
33             background-color: #f1f1f1;
34             flex-grow: 1;
35             padding: 10px;
36         }
37         .item1{
38             background-color: white;
39             border:none;
40         }
41     </style>
42 </head>
43 <body>
44     <div class="nav">
45         <div class="item item1 charactor">课程</div>
46         <div class="item item2 charactor">学习计划</div>
47         <div class="item item3 charactor">技能图谱</div>
48     </div>
49     <div class="content charactor">课程内容</div>
50 </body>
51 </html>

6. 实现一个弹窗

请按以下效果图和要求完成一个弹窗的HTML和CSS:

技术分享图片

总体:弹窗相对于浏览器窗口固定(即滚动条拖动时不影响弹窗位置)且水平垂直居中,弹窗总宽度302px,高度未知(由内容区的内容决定),圆角半径为5px,边框为1px的实线,边框颜色为#cccccc。

标题栏:左右留白20px,高度为40px,文字为14px的微软雅黑且垂直居中,只显示单行文字且超出隐藏并显示“...”,背景色为#eeeeee。

内容区:由一个段落和一个按钮组成,四周留白20px,背景为白色,段落与按钮距离20px,字体均为12px的宋体。

段落:行高1.5倍。

按钮:水平居中、宽80px、高30px、蓝底、白字、文字居中、圆角半径为5px。

关闭:宽10px、高10px、距离上边框10px,距离右边框10px,鼠标为手型,假设关闭图标相对css的路径为“../x.png”

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>第三题</title>
 6     <style type="text/css">
 7         *{
 8             padding: 0;
 9             margin: 0;
10         }   
11  
12         .BombBox{
13             left: 50%;
14             top:50%;
15             transform: translate(-50%,-50%);
16             box-sizing: border-box;
17             width: 302px;
18             position: fixed;
19             border-radius: 5px;
20             border:1px solid #cccccc;
21             padding: 0;
22         }
23         .title{
24             position: relative;
25             height: 40px;
26             background-color: #eeeeee;
27         }
28         h1{
29             font:14px/40px "微软雅黑";
30             vertical-align: middle;
31             text-overflow: ellipsis;
32             overflow: hidden;
33             white-space: nowrap;
34             margin-left: 20px;
35         }
36         .content{
37             padding: 20px;
38             background-color: white;
39             font:12px "宋体";
40         }
41         .content p{
42             line-height: 1.5;
43             margin-bottom: 20px;
44         }
45         .content button{
46             display: block;
47             margin: 0 auto;
48             width: 80px;
49             height: 30px;
50             background-color: blue;
51             color: white;
52             text-align: center;
53             border-radius: 5px;
54             border:none;
55         }
56         span{
57             position: absolute;
58             width: 10px;
59             height: 10px;
60             right: 10px;
61             top: 10px;
62             background-image: url("../x.png");
63         }
64         span:hover{
65             cursor: pointer;
66         }
67     </style>
68 </head>
69 <body>
70     <div class="BombBox">
71         <div class="title">
72             <h1>标题栏</h1>
73             <span></span>           
74         </div>
75         <div class="content">
76             <p>内容区段落</p>
77             <button>确定</button>
78         </div>
79     </div>
80 </body>
81 </html>

 

以上是关于网易前端微专业-页面制作-讨论题汇总的主要内容,如果未能解决你的问题,请参考以下文章

前端那些典型布局方案

前端那些典型布局方案

网易校园招聘历年经典面试题汇总:前端 岗

好课分享: 网易-微专业高级前端开发工程师 百度云

手动制作微信h5分享活动页面

网易前端微专业,JavaScript程序设计基础篇:数组