一个小游戏的公司的前端面试题
效果演示.gif
<!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>