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

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

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

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

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来调节盒子透明度则盒子内容也会透明


相关文章
|
3天前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
8 2
|
5月前
|
前端开发 JavaScript Java
计算机Java项目|网页时装购物系统
计算机Java项目|网页时装购物系统
|
6月前
|
数据采集 Web App开发 开发者
探秘Python爬虫技术:王者荣耀英雄图片爬取
探秘Python爬虫技术:王者荣耀英雄图片爬取
|
6月前
|
图形学
如何在微信小游戏制作工具中做出好看的粒子效果?
如何在微信小游戏制作工具中做出好看的粒子效果?
98 1
|
数据安全/隐私保护
又一款有虚拟形象的录屏软件来了,制作教学类视频的神器!(文末送福利)
Wondershare PDFelement:一款强大的pdf处理软件,一键去除水印、编辑图片、批量处理PDF等等,拥有很多强大的功能!
208 0
|
机器学习/深度学习 编解码 数据可视化
生成你的漫画形象! 漫画风格迁移神器 AnimeGANv2
趁着有空的时间,给大家介绍一些有趣的项目吧,比如这个漫画风格迁移神器 AnimeGANv2,可以快速生成自己的漫画形象 动漫是我们日常生活中常见的艺术形式,被广泛应用于广告、电影和儿童教育等多个领域。目前,动漫的制作主要是依靠手工实现。然而,手工制作动漫非常费力,需要非常专业的艺术技巧。对于动漫艺术家来说,创作高质量的动漫作品需要仔细考虑线条、纹理、颜色和阴影,这意味着创作动漫既困难又耗时。因此,能够将真实世界的照片自动转换为高质量动漫风格图像的自动技术是非常有价值的。它不仅能让艺术家们更多专注于创造性的工作,也能让普通人更容易创建自己的动漫作品。
生成你的漫画形象! 漫画风格迁移神器 AnimeGANv2
|
移动开发 开发者 HTML5
制作一个表白网页|学习笔记
快速学习制作一个表白网页
制作一个表白网页|学习笔记
|
弹性计算 移动开发 开发者
制作一个表白网页
快速学习制作一个表白网页
制作一个表白网页
|
移动开发 前端开发 安全
制作超美的个人网页(附源码带音乐
制作超美的个人网页(附源码带音乐
制作超美的个人网页(附源码带音乐
|
前端开发
一篇文章教会你使用html+css3制作炫酷效果
一篇文章教会你使用html+css3制作炫酷效果
298 0
一篇文章教会你使用html+css3制作炫酷效果