如何用DIV+CSS让导航的背景自适应浏览器宽度。见图片。1
发布网友
发布时间:2023-10-12 00:22
我来回答
共5个回答
热心网友
时间:2024-07-30 15:30
一般的 简单的方法是设置导航容器宽度为百分比数值
利用背景图片自动横向重叠的方法来做
-----------
按照楼主说的图片不用背景图片的方式,那就要用前景图片,那你导航文字还要用绝对定位到图片上??
这样这个导航就搞的太复杂了...
不用背景图片也不用前景图片的话就用H5的canvas绘图吧....更加复杂了 低版本浏览器兼容性也不好
不知道楼主你想咋样了
热心网友
时间:2024-07-30 15:31
一般都是做背景居中,也一样可以适应。
你一定要图片宽度跟着浏览器宽度变化的话,html和body设置为100%,底下垫一层div,宽度设置100%,插入图片宽度设置100%,就可以了。
-----补充
红色菜单不用图片,只用css是可以实现的,使用border来画红色三角形部分,就解决了,不需要使用canvas。
红色菜单的定位的问题,可以使用flex,不过在老浏览器里兼容性不好,这个设计好像没有其他很好的解决办法,只能用flex。
热心网友
时间:2024-07-30 15:31
在html里面插入一个图片标签,设置这个图片的css,
position:absolute;//绝对位置
top:0;
left:0;
right:0
;z-index:-1;//置于最下层,
红色的导航普通写就可以了。
热心网友
时间:2024-07-30 15:32
你可以设置百分之百的宽度,或者是横向平铺
热心网友
时间:2024-07-30 15:32
<body style="width:100%;">
<div style="width:100%;">
<img style="width:100%;" src="hang.jpg">
</div>
</body>
如何用DIV+CSS让导航的背景自适应浏览器宽度。见图片。
一般的 简单的方法是设置导航容器宽度为百分比数值 利用背景图片自动横向重叠的方法来做 --- 按照楼主说的图片不用背景图片的方式,那就要用前景图片,那你导航文字还要用绝对定位到图片上??这样这个导航就搞的太复杂了...不用背景图片也不用前景图片的话就用H5的canvas绘图吧...更加复杂了 低版本浏...
...如何将菜单导航部分背景自适应屏幕宽度,而让导航内容居中?
这是由两个div来实现的,首先建立一个外层div并设置宽高,要使宽度随屏幕宽度变化(即浏览器宽度变化),那么宽度就得设置100%,高度设置为你需要的高度即可,具体属性为 width:100%;height:你自己的高度;background:你需要的颜色; 这样就让该div随屏幕(浏览器)宽度变化而变化了。然后在这个div里面再...
怎么让图片自适应div怎么让图片自适应div大小
1.输入位置:固定;top:0;左:0;将整个div固定在屏幕的顶部和左侧。2.输入宽度:100%;身高:100%;最小宽度:1000像素;这个可以适合div的高度和宽度,而min-width是在屏幕宽度在1000px以内的情况下,保持div的大小不变。3.输入背景-尺寸:封面;-WebKit-背景-大小:封面;-o-背景-尺寸:封面;使画面...
css手机版页面制作时如何让背景图片适应div的高度和宽度
1、输入position:fixed; top: 0; left: 0;使整个div固定在屏幕的最上方和最左方。2、输入width:100%;height:100%; min-width: 1000px;这个可以适合div的高度和宽度,而min-width是为了实现让屏幕宽度在1000px以内时,div的大小保持不变。3、输入background-size: cover;-webkit-background-size: ...
css如何使导航下面的那个图片自动填充屏幕宽度
1.img标签导入,那么img外层如果没有浮动或者去限定宽度,默认就是填充整个屏幕的宽度,那么就可以设置img{width:100%;}这句样式来让其填充满屏幕,记得高度不要设置,不然会让图片变形失真;2.通过css里面的background-images的方式以背景的形式导进去,那么在html框架里面的图片展示标签必须是撑满屏幕...
如何控制div+css适应不同的浏览器
margin-left:5px;/*IE6下属性写的是5PX,但在显示出来的是10px 3.清除块display,这个可以解决浮动造成的块,造成块后,当DIV背景填色或填图片的时候,会出现背景断开或差一小块。这种兼容出现的不太多,我做到现在,只遇到过两次,方法是在出现兼容的DIV的CSS中写一个display:block,或其它属性,...
div如何自适应屏幕div自适应屏幕宽度
6、写样式用".pingmu{}"开始写,给它固定宽高,再添加背景色,让p自适应宽高,超过部分显示滚动条。7、将这个css样式保存到同级目录下,如ceshi.html在c盘,css样式也保存在c盘。8、保存好样式后,双击这个ceshi.html页面,用浏览器打开后看到100像素宽高的黑块。DW怎么设置DIV模块在页面中居中?D...
div+css怎么让背景图片自动缩放
-moz-background-size: 100% 100%;-o-background-size: 100% 100%;-webkit-background-size: 100% 100%;background-size: 100% 100%;-moz-border-image: url(./btn.png) 0;background-repeat:no-repeat\9;background-image:none\9;(此处空一行)filter:progid:DXImageTransform.Microsoft....
如何用CSS使图片自适应显示宽度
一是通过将该图片设定为某个div的背景图片,然后该div的长宽不使用绝对的px,使用相对的em或者rem。二是将图片设定display:block,设定图片的长宽为rem或者em。还是要看是什么情况下来去自适应图片的,如何使用CSS强制图片自适应大小 <!DOCTYPE PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" " :w3./...
网页导航条宽度随着浏览器窗口大小而自适应,用div+css应该怎么写?麻烦...
html:<nav> <ul> <li>home</li> <li>about</li> </ul> </nav> css:nav { width:100%; min-width:960px;}ul { display:block; margin:0 auto; }ul li { float:left;}