一个小游戏的公司的前端面试题
效果演示图
考点
•基础的布局知识, 左侧浮动脱离标准流, 右侧margin-left 设置为左侧宽度,即可快速实现左右布局
•媒体查询, 媒体查询可以根据屏幕尺寸的变化,进行动态适配,语法为@margin (条件) {}
解法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>面试题</title>
<style>
body{
margin: 0;
}
#header{
width: 100%;
height: 200px;
background-color: #33ccff;
}
#left_con{
float: left;
width: 100px;
height: 1000px;
background-color: #ffcc99;
}
#right_con{
margin-left: 100px;
width: 100%;
height: 1000px;
background-color: #823384;
}
/*要及时覆盖上面的样式*/
@media (max-width: 700px) {
#header{
width: 100%;
height: 50px;
background-color: #33ccff;
}
#left_con{
width: 0;
}
#right_con{
width: 100%;
margin-left: 0;
background-color: #823384;
}
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="con">
<div id="left_con">
</div>
<div id="right_con">
</div>
</div>
</body>
</html>
复制代码
结总
以上就是我要说的内容,希望以上的内容可以帮助到正在默默艰辛的大家,希望大家在往后的工作与面试中一切顺利。 那如何学习才能快速入门并精通呢?
当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。 但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有一套实用的视频课程用来跟着学习是非常有必要的。
本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:866109386,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。