页面布局
文章平均质量分 54
LHarashi
这个作者很懒,什么都没留下…
展开
-
定位盒子的居中设置
定位盒子的居中设置布局中会经常性的使用到定位,而定位会带来一定的好处,也有一定的坏处例如下方的例子代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>固定盒子居中显示</title> <style> *{ margin: 0; }原创 2021-04-28 19:24:59 · 359 阅读 · 0 评论 -
对相似模块中的不同盒子设置不同的高(最小高和自动高)(css层叠性)
面对一个相似的模块(盒子的嵌套),但是两个模块中的盒子高有不同的高时,例:如下这两个模块的区别就是最左边的图片,第一张图片的高度是第二张图片的一倍多;所以当我选择用两个大盒子放10个小盒子,但是当我常规的排了,代码如下<div class="b_1"> <div><img src="image/whale_long.jpeg" alt=""></div> <div><img src="image/whale.jpeg原创 2021-03-28 23:54:18 · 195 阅读 · 0 评论 -
界面缩小后,全屏下设置的排版出现偏移
盒子布局在全屏模式下排版完好,但是当界面缩小时,就会出现偏移,导致最初的排版都出现问题我的最初界面放大情况下:我的最初界面缩小情况下:排版会随着缩小界面的大小进行移动,但实际状态下是不应该出现这样的状况,实际状态应该是底部添加了滚动条,然后看不见的排版与原先全屏时的布局相同,例如:如图,头部与导航栏右边部分应该是看不见的;有这个效果我是在我的网页body中添加了样式 min-width: 1200px;body{ width: 95%; position: absol原创 2021-03-26 14:29:39 · 675 阅读 · 0 评论 -
伸缩菜单栏
极简版:导航栏按平常的div+ul+li+a进行嵌套书写;因我写的箭头是用小正方形的边框来代替的,所以的我a标签尾部有个空盒子;然后将子菜单的内容以自定义列表添加至a标签后;到这基本的骨架就好了,剩下的效果为css的工作html代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>简易伸缩菜单</title>原创 2021-04-08 15:02:56 · 322 阅读 · 0 评论 -
banner图的添加(z-index与overflow的共同作用)
banner中的素材图和banner盒子的大小不合时,有以下两种添加方式给图片限制宽度,让其等比缩放;使用定位(图片最好绝对定位)、overflow属性、z-index属性共同编辑;我的盒子代码:<div class="banner_1"> <img src="../image/star.jpeg" alt="" class="t"></div><div class="banner_2"> <img src="../imag原创 2021-04-01 14:31:46 · 289 阅读 · 1 评论