CSS图片水平垂直居中+CSS的dl的显示与隐藏

最新推荐文章于 2022-01-20 17:06:12 发布

Feather_74

最新推荐文章于 2022-01-20 17:06:12 发布

阅读量404

点赞数

分类专栏： CSS+LESS 文章标签： CSS

本文链接：https://blog.csdn.net/qq_44997147/article/details/102492521

版权

CSS+LESS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS图片水平垂直居中

注意：大div的margin:0 auto才是关键，其次是图片不能过大。不能用padding或者margin写居中，否则页面缩小会出现问题，并且会出现增大页面宽度的弊端。

<div style="margin:0 auto;width: 948px;">
  <img src="~/Content/Img/fmy1.png"
    style="text-align: center;vertical-align:central;vertical-align: -9px;margin:0 auto;width: 948px;height: 172px;" />
</div>

CSS的dl的显示与隐藏

html

<body>
  <div class="chu">
    <div>
      <i class="iconfont icon-tubiaozhizuomoban-"></i>
      <span>角色切换</span>
      <i class="iconfont icon-xiangxia"></i>
    </div>
    <dl class="hid">
      <dd>职员</dd>
      <dd>企业</dd>
    </dl>
  </div>
</body>

css（注意：必须是大div hover下小div才会出现）

.hid {
  display: none;
}
.chu:hover > .hid {
  display: block;
  color: blue;
  cursor: pointer;
}
.chu:hover {
  color: blue;
  cursor: pointer;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Feather_74

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS图片水平垂直居中+CSS的dl的显示与隐藏

CSS图片水平垂直居中注意：大div的margin:0 auto才是关键，其次是图片不能过大。不能用padding或者margin写居中，否则页面缩小会出现问题，并且会出现增大页面宽度的弊端。<div style="margin:0 auto;width: 948px;"><img src="~/Content/Img/fmy1.png" style="text-align:...
复制链接

扫一扫