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

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

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

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

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


相关文章
|
4月前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
103 0
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
|
5月前
二次元风格个人导航网站源码
二次元风格个人导航网站源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
132 1
|
6月前
|
前端开发 JavaScript Java
计算机Java项目|网页时装购物系统
计算机Java项目|网页时装购物系统
|
前端开发
在笔记软件Notion中嵌入音乐歌单
在笔记软件Notion中嵌入音乐歌单
|
机器学习/深度学习 编解码 数据可视化
生成你的漫画形象! 漫画风格迁移神器 AnimeGANv2
趁着有空的时间,给大家介绍一些有趣的项目吧,比如这个漫画风格迁移神器 AnimeGANv2,可以快速生成自己的漫画形象 动漫是我们日常生活中常见的艺术形式,被广泛应用于广告、电影和儿童教育等多个领域。目前,动漫的制作主要是依靠手工实现。然而,手工制作动漫非常费力,需要非常专业的艺术技巧。对于动漫艺术家来说,创作高质量的动漫作品需要仔细考虑线条、纹理、颜色和阴影,这意味着创作动漫既困难又耗时。因此,能够将真实世界的照片自动转换为高质量动漫风格图像的自动技术是非常有价值的。它不仅能让艺术家们更多专注于创造性的工作,也能让普通人更容易创建自己的动漫作品。
生成你的漫画形象! 漫画风格迁移神器 AnimeGANv2
|
移动开发 开发者 HTML5
制作一个表白网页|学习笔记
快速学习制作一个表白网页
制作一个表白网页|学习笔记
|
移动开发 前端开发 安全
制作超美的个人网页(附源码带音乐
制作超美的个人网页(附源码带音乐
制作超美的个人网页(附源码带音乐
|
弹性计算 移动开发 开发者
制作一个表白网页
快速学习制作一个表白网页
制作一个表白网页
一文教会你制作精美的动态图表
简介:一文教会你制作精美的动态图表
一文教会你制作精美的动态图表
|
前端开发
一篇文章教会你使用html+css3制作炫酷效果
一篇文章教会你使用html+css3制作炫酷效果
304 0
一篇文章教会你使用html+css3制作炫酷效果