成都私人网站制作公司好看的网页设计代码
网页元素的显示与隐藏。
很多网页的侧边栏都会出现广告，我们点击关闭时，广告会消失不见，但若重新刷新网页页面，则广告会重新出现。网页的广告并非是真的被删除了，而是被暂时的隐藏起来了。
• display
• visibility
• overflow
一、display
display：none； 隐藏元素
display: block； 除了将元素转化为块内元素外，还有让元素显示出来的意思
display元素被隐藏后不再占有原来的元素的位置
// 不重要的代码块
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><style>.peppa {display: none;width: 200px;height: 200px;background-color: pink;}.gorge {width: 200px;height: 200px;background-color: aqua;}</style>
<body><div class="peppa">佩奇</div><div class="gorge">
乔治</div>
</body>
</html>二、visibility
visilibity: inherit(继承上一个父亲对象的可见性) | hidden(隐藏) | visible(可见)
注意⚠️：隐藏后仍然会占有原先的位置
三、overflow
对溢出的元素进行隐藏
overflow：visible
overflow：hidden
overflow：scroll(溢出的部分显示滚动条）
overflow：auto（在需要的时候添加滚动条）
四、旧土豆网网页制作
效果演示：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.tudou {position: relative;height: 320px;width: 444px;background-color: pink;margin: 30px auto;}.tudou img {width: 100%;height: 100%;}.mask {/* 隐藏遮罩层 */display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;}/* 当鼠标经过盒子时，就让遮罩层显示出来 */.tudou:hover .mask{display: block;}
</style><body><div class="tudou"><div class="mask"></div><img src="images/tudou.jpg" alt=""></div>
</body></html>