html关于图片置底当背景或者图片链接
自己写的小米侧边栏加置底图片链接：
视频：
Rec 0001
这个后面的大图是在侧边栏的下边的，是可以点击跳转的，具体实现方法是：
- 我用一个父盒子为content 然后在父盒子里面定义一个img盒子，img的宽度和父盒子一样宽，再在img盒子里面放入图片链接a里面嵌套img就可以实现点击图跳转。
<div class="content"><div class="img"><a href=""><img src="图片呀/xiaomibg.jpg" alt="">a>
- 关于侧边栏：我是在img盒子里面放侧边栏，因为我想的是img盒子是侧边栏的父亲，那侧边栏理所应当在img上面呀，然后再给侧边栏加一个float属性，那他就在图片最左边了。可事实不是这样，侧边栏跑到了img盒子的下边。
- 关于为什么会下滑，我也没清楚。但是有几个猜测：1.img是个行内块元素，所以侧边盒子会掉下来。2.因为父盒子刚刚够宽度，装不下侧边栏了。我试了试扩宽父盒子，侧边栏是上去了，但不是浮在图片上面的。
尝试解决的方法
- 将图片作为背景，这样侧边栏就可以浮在最左边，关于链接问题，可以再设置一个div链接，面积大一点，透明色，放在图片主要位置。
- 就用图片背景链接，但要用相对定位position：relative，来设置侧边栏悬浮在上面，这样做最简单！
这是图片当背景，然后直接浮动的样式：
css代码段
.imgconter{width: 2000px;height: 800px;background-image: url("图片呀/xiaomibg.jpg");background-size: 100% 100%;}.cebian{width: 230px;height: 800px;background: rgba(0, 0, 0, .3);float: left;}
html代码段
<div class="img"><div class="cebian"><a href="">手机a><a href="">手机a><a href="">手机a><a href="">手机a><a href="">手机a><a href="">手机a><a href="">手机a><a href="">手机a><a href="">手机a><a href="">手机a>div>
直接图片链接的话：
样式：
定义大盒子box，图片盒子img居中显示（图片盒子当背景必须小于父亲盒子，才可以装下其他元素，小米导航栏就是因为宽度刚刚等于，就会让侧边栏掉出来）。然后再用几个div，写上具体的css属性就可以了。
源码：
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>*{padding: 0;margin: 0%;}body{background-color:#f5f5f5;}.box{background-color: #ffffff;width: 295px;height: 375px;margin: 100px auto;}.box img{/* width: 100%; */width: 160px;height: 160px;margin: 10px auto;}div{text-align: center;}.xinhao h4{height:20.8px;width: 214px;padding:0 40px;margin-top: 80px;font-weight:400 ;}.jieshao p{color: #d9c1b0;font-size: 14px;margin-top: 5px;}.jiage a{display: block;color: #ff6700;text-decoration: none;margin-top: 25px;font-size: 14px;}.box:hover{box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3);}style>
head>
<body><div class="box"><a href="#" title="购买"><img src="图片呀/shouji.jpg" alt="">a><div class="xinhao"><h4>小米11 Ultrah4>div><div class="jieshao"><p>1.12"GN2|2k四微曲屏p>div><div class="jiage"><a href="">5999元起a>div>div>body>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！