需要两个浮动侧边栏横幅的代码

市场
1

我需要有人编写一段代码，在我的论坛桌面版侧边栏中添加两个浮动横幅。

Screenshot_6
Screenshot_61919×955 177 KB

我可以为这项工作支付 50 美元。

3 个赞
2

我将分享我目前的工作成果，

它是零碎的、不完整的，并且是专门为图片横幅制作的。

PNG
PNG932×484 191 KB

但也可以调整为文本形式。

目前最大的问题是屏幕尺寸，你会看到 @media screen and (max-width: 1800px)
这里图片会在较小屏幕上缩小。

但这还不够，需要为更小的屏幕添加更多规则，或者更有可能的是，通过完整的自动代码进行大幅改进。

希望你能让它正常工作，并将你的 50 美元用于为某人的假期增添快乐。

完全坦白：我不是在电视上扮演程序员，昨晚也没住过假日酒店。这就是实际情况：一个基础模板，以及一个愿意提供帮助但不保证结果的提议。我原本是在为一个无法使用插件的网站开发一个组件。

HTML 
<!DOCTYPE html>
<html>
<head>

<style>


</style>
</head>
<body>
<!-- 左侧横幅 -->
<div class="sidenav1">
  <a href=
  "左侧横幅链接"
  target="_blank"><img width="270" height="648px" src=
  "左侧横幅图片"
  ></a>
</div>



<!-- 右侧横幅 -->
<div class="sidenav2">
  <a href=
  "右侧横幅链接"
  target="_blank"><img width="270" height="648px" src=
  "右侧横幅图片"
 ></a>
</div>


</body>
桌面端 CSS 
/* 左侧边栏  */
.sidenav1 {
  resize: both;
  overflow: auto;
 // height: 100%;
 // width: 160px;
  position: fixed; 
  z-index: 1; 
  top: 100px; 
  left: 2em;
  background-color: transparent; 
  overflow-x: hidden; /* 禁用水平滚动 */
  //padding-top: 20px;
}

/* 导航菜单链接 */
.sidenav1 a {
  //padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #000;
  display: block;
  cursor:url("my custom"), default;
}

/* 鼠标悬停在导航链接上时改变颜色 */
.sidenav1 a:hover {
  color: #f1f1f1;
}






@media screen and (max-width: 1800px) {
  .sidenav1 {left: 3.5em;}
  .sidenav1 a {font-size: 18px;}
  .sidenav1 img {width: 70%;}
  .sidenav1 img {height: auto;}
}




//////////



/* 侧边栏菜单 */
.sidenav2 {
  resize: both;
  overflow: auto;
 // height: 100%;
 // width: 160px; 
  position: fixed; 
  z-index: 1;
  top: 100px;
  right: 2em;
  background-color: transparent;
  overflow-x: hidden; /* 禁用水平滚动 */
  //padding-top: 20px;
}

/* 导航菜单链接 */
.sidenav2 a {
  //padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #000;
  display: block;
  cursor:url("my custom"), default;
}


.sidenav2 a:hover {
  color: #f1f1f1;
}




@media screen and (max-width: 1800px) {
  .sidenav2 {right: -2em;}
  .sidenav2 a {font-size: 18px;}
  .sidenav2 img {width: 70%;}
  .sidenav2 img {height: auto;}
}

祝你好运。

5 个赞
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.