老师，不是很懂后面那个点击后表单出来的元素是怎么写的
来源：4-4 自由编程
慕粉8021849
2020-02-23 19:23:21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拉缩练习</title>
<style>
*{
padding: 0;
margin:0;
box-sizing: border-box;
}
.container{
height:80px;
}
img{
display: flex;
margin-left: 50%;
}
ul li{
float:left;
list-style: none;
padding-right: 20px;
line-height: 80px;
}
.col3{
height:80px;
width:80px;
background-color: red;
float: left;
border-radius: 0 80px 0 0;
display: none;
}
@media(max-width:576px){
ul li{
display: none;
}
.col3{
display: inline-block;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col1">
<ul>
<li>首页</li>
<li>关于</li>
<li>商业合作</li>
</ul>
</div>
<div class="col3">
</div>
<div class="col2">
<img src="img/logo.png">
</div>
</div>
</div>
<script>
</script>
</body>
</html>
1回答
-
好帮手慕慕子
2020-02-23
同学你好，可以使用ul列表，先将其隐藏，在点击时，让其显示即可。
这个练习题的效果主要是针对老师讲解过内容进行练习，帮助同学们巩固所学知识，
课程中头部的实现思路，与这个练习题的思路是一样的。建议：同学先仔细回顾下老师课程中关于头部header区的讲解，学习下如何布局，如何实现效果，将老师讲解的内容弄懂，然后，尝试自己先动手写一写，这样对提高自己的编程能力才会有更大的帮助。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快
0
相似问题