请教图片效果问题：做如东方财富网首页顶部图片效果

oliver · 发表于 2021-7-1 11:40:43

请教一个图片效果问题：做如东方财富网首页顶部图片效果和弹出可收缩广告图 ( https://www.eastmoney.com )
已找到样式代码但不知道放在论坛那个文件上可以做出这样效果，请教各位大侠

<style type="text/css">
      .baokuang{height:800px;width:100%;background:url(//g1.dfcfw.com/g4/202106/20210623175012.png) repeat-x 0 0 #FFF;}
      .baokuang .bkImg,.baokuang .bkImg .cImgDiv {background:url(//g1.dfcfw.com/g4/202106/20210623182133.png) no-repeat center top;}
      .baokuang .bkImg {width:100%; height:800px;margin:0 auto;}
      .baokuang .bkImg .cImgDiv{width:1000px; height:40px; margin:0 auto; position:relative;}
      .baokuang .bkImg .clickMap { display:block; height:40px; width:100%; text-indent:-100em; overflow:hidden;}
      .baokuang .bkImg .close{background:url(//g1.dfcfw.com/g4/202106/20210623120249.png) no-repeat;width:44px; height:18px;cursor:pointer; position:absolute; right:0px; bottom:20px; text-indent:-100em; overflow:hidden;}
      .pageCont { background:#FFF; height:0; overflow:hidden; margin-top:-760px;}
      .top-advert{margin-top:0; padding-top: 0;}
      .emfloat_wrapper{margin-top:30px;}
      </style>
</head>

<body>
      <div id="baokuangBox" class="baokuang">
         <div class="bkImg">
            <div class="cImgDiv">
                     <a class="clickMap" > </a>
                  <span class="close">关闭</span>
            </div>
         </div>
      </div>
      <div id="pageCont" class="pageCont"></div>

我知道答案回答被采纳将会获得1 贡献已有11人回答

oliver · 发表于 2021-7-1 14:41:57

如首页顶部这个图片不知放在论坛什么文件上

鸿茂传媒 · 发表于 2021-7-1 15:42:33

一般放在头部

oliver · 发表于 2021-7-1 20:03:01

试过放在header.htm文件中，但没效果

allthebest · 发表于 2021-7-2 02:09:31

oliver 发表于 2021-7-1 11:03
试过放在header.htm文件中，但没效果

你的没效果是什么意思？

allthebest · 发表于 2021-7-2 05:05:42

东方财富网首页顶部图片

oliver · 发表于 2021-7-2 12:51:28

把以下代复制到header.htm文件中，在论坛首页没显示图片
注：图片和路径已改为自己网地址
<style type="text/css">
      .baokuang{height:800px;width:100%;background:url(//g1.dfcfw.com/g4/202106/20210623175012.png) repeat-x 0 0 #FFF;}
      .baokuang .bkImg,.baokuang .bkImg .cImgDiv {background:url(//g1.dfcfw.com/g4/202106/20210623182133.png) no-repeat center top;}
      .baokuang .bkImg {width:100%; height:800px;margin:0 auto;}
      .baokuang .bkImg .cImgDiv{width:1000px; height:40px; margin:0 auto; position:relative;}
      .baokuang .bkImg .clickMap { display:block; height:40px; width:100%; text-indent:-100em; overflow:hidden;}
      .baokuang .bkImg .close{background:url(//g1.dfcfw.com/g4/202106/20210623120249.png) no-repeat;width:44px; height:18px;cursor:pointer; position:absolute; right:0px; bottom:20px; text-indent:-100em; overflow:hidden;}
      .pageCont { background:#FFF; height:0; overflow:hidden; margin-top:-760px;}
      .top-advert{margin-top:0; padding-top: 0;}
      .emfloat_wrapper{margin-top:30px;}
      </style>

allthebest · 发表于 2021-7-2 17:40:54

东方财富网首页顶部图片先下载到本地；将图片传到服务器对应的目录里，覆盖，更新缓存即可

oliver · 发表于 2021-7-2 20:10:26

是这样做的，但图片不显示，没效果

allthebest · 发表于 2021-7-2 21:22:34

oliver 发表于 2021-7-2 11:10
是这样做的，但图片不显示，没效果

图片只支持窄版；若用第三方模版，背景图片要放到第三方模版的同样位置。

[求助] 请教图片效果问题：做如东方财富网首页顶部图片效果

产品服务

开发者服务

使用教程