CSS解决无序列表导航条随浏览器大小改变而窜行的方法

方法一:

 

li 的width 属性百分比 % 而代替 PX等具体数值设置。

这种方法的效果是导航条随浏览器的大小改变而与浏览器呈现相应比例的缩放

 

方法二:

 

在ul 外添加一个div层 或者直接设置ul 属性。

设置ul或div属性 margin:0 auto;(使ul或div剧中),按照需求设置好ul或div得width和height。

这种方法的效果是导航条随浏览器变小而只能看见浏览器大小范围内的页面,其他内容就不可见了。

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用CSS将一张图片的某个区域设置为背景,并固定它的位置,使其不随浏览器大小改变改变位置。下面是一个示例: HTML代码: ```html <div class="container"> <img src="your-image.jpg" alt="Your Image"> </div> ``` CSS代码: ```css .container { position: relative; width: 500px; /* 背景图容器的宽度 */ height: 300px; /* 背景图容器的高度 */ overflow: hidden; /* 超出容器的部分隐藏 */ } .container img { position: absolute; left: -100px; /* 要设置为背景的区域左边缘到容器左边缘的距离 */ top: -50px; /* 要设置为背景的区域上边缘到容器上边缘的距离 */ width: 800px; /* 图片的实际宽度 */ height: 500px; /* 图片的实际高度 */ } ``` 在上面的示例中,我们使用了一个`<div>`元素作为背景图容器,并在其中嵌套了一个`<img>`元素。我们将容器的宽度和高度设置为固定值,使其成为一个固定大小的容器,然后将`overflow`属性设置为`hidden`,以隐藏超出容器大小的部分。 接下来,我们使用绝对定位将图片的位置固定在容器内,并通过设置`left`和`top`属性来指定要设置为背景的区域的左上角坐标。最后,我们使用实际图片的宽度和高度来设置`img`元素的宽度和高度。 请注意,这种方法可能需要进微调以确保所选的区域与背景图容器完全对齐,并且在不同大小浏览器窗口中仍保持相同的位置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值