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

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

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

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

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


相关文章
|
安全 NoSQL 关系型数据库
使用cnpm搭建企业内部私有NPM仓库
cnpm是企业内部搭建npm镜像和私有npm仓库的开源方案。它同时解决了现有npm架构的一些问题。
1113 0
使用cnpm搭建企业内部私有NPM仓库
|
8月前
|
存储 关系型数据库 分布式数据库
PolarDB开源数据库进阶课18 通过pg_bulkload适配pfs实现批量导入提速
本文介绍了如何修改 `pg_bulkload` 工具以适配 PolarDB 的 PFS(Polar File System),从而加速批量导入数据。实验环境依赖于 Docker 容器中的 loop 设备模拟共享存储。通过对 `writer_direct.c` 文件的修改,替换了一些标准文件操作接口为 PFS 对应接口,实现了对 PolarDB 15 版本的支持。测试结果显示,使用 `pg_bulkload` 导入 1000 万条数据的速度是 COPY 命令的三倍多。此外,文章还提供了详细的步骤和代码示例,帮助读者理解和实践这一过程。
256 0
|
算法 数据安全/隐私保护 Python
数字签名是一种用于验证数据完整性和来源身份的技术。它基于公钥密码学,允许数据的发送方使用其私钥对数据进行签名,而接收方则可以使用发送方的公钥来验证签名的有效性。
数字签名是一种用于验证数据完整性和来源身份的技术。它基于公钥密码学,允许数据的发送方使用其私钥对数据进行签名,而接收方则可以使用发送方的公钥来验证签名的有效性。
|
数据可视化 Python
【100天精通Python】Day64:Python可视化_Matplotlib绘制误差线图、填充图、堆叠面积图,示例+代码
【100天精通Python】Day64:Python可视化_Matplotlib绘制误差线图、填充图、堆叠面积图,示例+代码
527 0
|
前端开发
CSS实现中间粗两头细的线条
CSS实现中间粗两头细的线条
176 1
|
缓存 安全 NoSQL
SpringSecurity实现前后端分离登录token认证详解
SpringSecurity实现前后端分离登录token认证详解
969 1
|
Web App开发 Shell 开发者
技术分享 | 使用 cURL 发送请求
cURL 是一个通过 URL 传输数据的,功能强大的命令行工具。cURL 可以与 Chrome Devtool 工具配合使用,把浏览器发送的真实请求还原出来,附带认证信息,脱离浏览器执行,方便开发者重放请求、修改参数调试,编写脚本。也可以单独使用,根据自己的需求构造请求调整参数,构造多种接口测试场景。
|
定位技术 开发工具 Android开发
Android 地图导航调用百度地图、高德地图、腾讯地图
Android 地图导航调用百度地图、高德地图、腾讯地图
1450 0
Android 地图导航调用百度地图、高德地图、腾讯地图
|
人工智能 小程序 数据安全/隐私保护
微信8.0状态视频无水印素材+个人设置技巧
微信8.0状态视频无水印素材+个人设置技巧
507 0
微信8.0状态视频无水印素材+个人设置技巧