模仿制作武大图书馆网页时遇到的问题

简介: 模仿制作武大图书馆网页时遇到的问题

外边距合并块元素塌陷问题:

嵌套块元素之间塌陷(父元素有上外边距的同时子元素也有上外边距)

1.父元素设置边框border

2.给父元素添加:overflow:hidden;

3.给父元素添加内边距padding

相邻块元素之间的塌陷(垂直排列的两个元素,若第一个设置下外边距,第二个设置了上外边距,误以为两者距离为之和,实际为较大的值)

可以直接设一个元素的上外边距或者下外边距

锚点链接:跳转到相应内容

<a href="#指定内容">查看章节4</a>
<a id="指定内容">章节4</a>

上述就是点击 查看章节4 就跳转到 章节4 所对应的内容

下拉菜单的实现:

1.透明度:设置好下拉菜单样式内容后,给元素添加元素透明度为0,在伪类中添加透明度为1可显示下拉菜单

2.改变下拉菜单display:下拉菜单设置调整好样式后,设置:display:none;(不显示),在伪类中添加display:block;表示当鼠标移到父元素时,下拉菜单以块元素显示出来

3.绝对定位:给下拉菜单父元素设置position:relative;然后给子元素下拉菜单设置绝对定位position:absolute;然后给子元素left设为负值,给其移出页面,之后在hover伪类中将left设置为auto,即鼠标移动到父元素时下拉菜单进行自动定位会左端对齐或者将其设置为left:0;

使背景图片被遮住:

在其背景图片所在父盒子上,再加一个盒子,该子盒子与父盒子大小相同,并添加rgb来调节遮挡的颜色及程度

盒子透明盒子内容不透明:将盒子添加rgb(x,x,x,x)第一个值代表红色,第二个值绿色,第三个值代表蓝色,最后为透明度,若使用opactiy来调节盒子透明度则盒子内容也会透明


相关文章
|
5月前
在微信小游戏制作工具中制作一个下雨的效果
在微信小游戏制作工具中制作一个下雨的效果
29 0
|
5月前
|
图形学
如何在微信小游戏制作工具中做出好看的粒子效果?
如何在微信小游戏制作工具中做出好看的粒子效果?
47 1
|
10月前
|
前端开发
在笔记软件Notion中嵌入音乐歌单
在笔记软件Notion中嵌入音乐歌单
|
12月前
|
人工智能 移动开发 数据可视化
不会游戏编程还能制作游戏吗?(附无代码游戏制作软件推荐)
在这个时代,你不懂摄影,但是却可以用手机轻松地拍出好看的照片;你不懂图像处理,但是却可以一键让你的照片显示出各种各样的效果;你不懂画画,但是却可以通过语言描述,让 AI 帮助你画出你可能凭借自己永远都无法画出的作品......工具在不断的降低创作的门槛,让越来越多的人能够做一些原本只有少数人才能做到的事。
509 0
|
机器学习/深度学习 编解码 数据可视化
生成你的漫画形象! 漫画风格迁移神器 AnimeGANv2
趁着有空的时间,给大家介绍一些有趣的项目吧,比如这个漫画风格迁移神器 AnimeGANv2,可以快速生成自己的漫画形象 动漫是我们日常生活中常见的艺术形式,被广泛应用于广告、电影和儿童教育等多个领域。目前,动漫的制作主要是依靠手工实现。然而,手工制作动漫非常费力,需要非常专业的艺术技巧。对于动漫艺术家来说,创作高质量的动漫作品需要仔细考虑线条、纹理、颜色和阴影,这意味着创作动漫既困难又耗时。因此,能够将真实世界的照片自动转换为高质量动漫风格图像的自动技术是非常有价值的。它不仅能让艺术家们更多专注于创造性的工作,也能让普通人更容易创建自己的动漫作品。
生成你的漫画形象! 漫画风格迁移神器 AnimeGANv2
|
移动开发 开发者 HTML5
制作一个表白网页|学习笔记
快速学习制作一个表白网页
107 0
制作一个表白网页|学习笔记
|
移动开发 前端开发 安全
制作超美的个人网页(附源码带音乐
制作超美的个人网页(附源码带音乐
制作超美的个人网页(附源码带音乐
|
弹性计算 移动开发 开发者
制作一个表白网页
快速学习制作一个表白网页
107 0
制作一个表白网页
|
计算机视觉 Python
Python实现高级电影特效,CXK也能影分身
Python实现高级电影特效,CXK也能影分身
252 0
|
前端开发
一篇文章教会你使用html+css3制作炫酷效果
一篇文章教会你使用html+css3制作炫酷效果
268 0
一篇文章教会你使用html+css3制作炫酷效果