个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
31
4
有谁知道是否可以创建一个功能标题生成器，使用户能够使用颜色、图像和文本对其进行自定义？然后保存并添加到他们的网站？
I have created a feature banner demo here to give you an idea of what I'm trying to achieve . (源码在文末)
我希望用户能够:
有人知道如何实现吗？
非常感谢，
罗斯
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
img {
display: block;
}
h3 {
font-size:200%
}
#container {
width: 100%;
height: 150px;
border-style:solid;
border-width:1px;
border-color:#a9a9a9;
}
#container > div {
display: table-cell;
}
#left {
width: 250px;
vertical-align: middle;
}
#middle {
width: 80%;
min-width: 400px;
max-width: 960px;
color:white;
text-align:center;
vertical-align:middle;
/* fallback */
background-color: #9b4596;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9b4596), to(#6c2787));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #9b4596, #6c2787);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #9b4596, #6c2787);
/* IE 10 */
background: -ms-linear-gradient(top, #9b4596, #6c2787);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #9b4596, #6c2787);
}
#right {
width: 250px;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
<img src="http://placehold.it/250x150">
</div>
<div id="middle">
<h3>School of Computing</h3>
</div>
<div id="right">
<img src="http://lorempixel.com/output/technics-q-c-250-150-1.jpg">
</div>
</div>
</body>
</html>
最佳答案
我只是很快想到了这个来向您展示如何做到这一点。
<div id="makeBanner">
<div id="container">
<div id="left">
<img src="http://lorempixel.com/output/technics-q-c-250-150-1.jpg" />
</div>
<div id="middle">
<h3>Space for text here</h3>
</div>
<div id="right">
<img src="http://lorempixel.com/output/technics-q-c-250-150-1.jpg" />
</div>
</div>
</div>Image change:
<select id="changeimage">
<option value="http://lorempixel.com/output/technics-q-c-250-150-1.jpg">Image 1</option>
<option value="http://www.reflexskis.co.nz/wp-content/uploads/2013/06/demo-1.png">Image 2</option>
</select>
<button id="click">Get HTML</button>
<div class="getHTML"></div>
body {
font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
img {
display: block;
}
h3 {
font-size:200%
}
#container {
width: 100%;
height: 150px;
border-style:solid;
border-width:1px;
border-color:#a9a9a9;
}
#container > div {
display: table-cell;
}
#left {
width: 250px;
vertical-align: middle;
}
#middle {
width: 80%;
min-width: 400px;
max-width: 960px;
color:white;
text-align:center;
vertical-align:middle;
/* fallback */
background-color: #9b4596;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9b4596), to(#6c2787));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #9b4596, #6c2787);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #9b4596, #6c2787);
/* IE 10 */
background: -ms-linear-gradient(top, #9b4596, #6c2787);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #9b4596, #6c2787);
}
#right {
width: 250px;
vertical-align: middle;
}
.getHTML {
width: 60%;
border: 1px solid;
margin: 0 auto;
margin-top: 50px;
}
img {
width: 250px;
height: 150px;
}
没错!所以使用 jQuery 我们可以实时更改横幅上的图像(这是我们的横幅预览)，然后我们可以单击获取代码并从元素中获取 HTML 并将其输出为文本!简单，快速的方法来制作你想要的东西。您只需要创建更多选项来更改您想要的部分，然后就像点击“获取代码”按钮一样简单。
希望对你有帮助，有问题欢迎提问。
这是一个布局更好的版本(外观等)。 CSS 不是最好的，但您可以根据需要修复所有问题。
关于php - 创建用户可以自定义的页眉/横幅，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21754062/
31
4
0
相信我，我在 Adsense 论坛(西类牙语和英语)中问过这个问题，还检查了以下资源和问题: 1 - 2 - 3 - 4 我有一个实际与 AdMob 配合使用的 AdSense 帐户。我们在 Andr
我想创建一个标题图像/横幅，单击播放图像后，它会垂直扩展以播放YouTube上托管的视频。 此页面准确显示了我要执行的操作: blendedlearningnow.com/about。 我不确定这是否
这里有一个漂亮的 Flash 横幅:http://osc4.template-help.com/drupal_30779/ 。我想知道是否有一个 jquery 库可以让我达到同样的效果。 (点击、滑动
我在一个宽度为 960px 的容器 div 中有一个标题。页眉包含几个完全位于页面中央的 Logo 。我想有一个背景渐变永远延伸到标题后面。出现问题是因为渐变横幅受限于 960px 的宽度。我尝试将横
有谁知道是否可以创建一个功能标题生成器，使用户能够使用颜色、图像和文本对其进行自定义？然后保存并添加到他们的网站？ I have created a feature banner demo here
通常在我的网页中，我会有一个 #wrapper DIV 来包装整个页面并设置为如下内容: #wrap {position: relative; width: 1000px; display: bloc
我正在寻找一种动态创建可以放置在其他页面上的横幅的方法。横幅包含一个背景图像、两个重叠图像和两个位于该背景图像之上的文本标签。 是不是只能用绝对定位来实现元素的叠加？我如何确保横幅本身相对放置在集成页
我有一个 900 x 80 的标题区域，以及一个适合该区域左上角的 175 x 75 Logo 。我想要做的是使用 jquery 将 Logo 从标题区域的右侧移动到左侧，然后卡住并设置在左侧。我知道
我成功地在页脚上显示智能横幅，然后将其处理掉。我的问题是显示在应用程序的所有页面上。 我的问题是:如何只显示在一页上？ @override void initState() { super.i
我主要是一名开发人员，不知道使用 Adobe Flash CS4。是否有一种简单的方法可以将链接添加到 Flash 横幅。我有 .flv 文件，其中包含库中的一些项目和两层。 请给我一步一步的指示
如何在响应式布局中处理 Adsense 横幅？ 据我从 Adsense TOS 中了解到，我几乎不允许在客户端对横幅做任何事情，所以我不能在客户端将横幅切换到较小的分辨率，如果它是低分辨率的. 似乎我
ChannelBannerResource chBannerResource = new ChannelBannerResource(); chBannerResource.setKind("yout
下面附有代码，我正在尝试使用 javascript 制作横幅。 使用 setInterval 我做了一个循环，一个接一个地显示 3 个 div。 我遇到的问题是，当循环结束时，有一个按钮显示“返回”，
我即将在拥有 1000 个活跃用户的应用程序中实现 AdMob 横幅。 我有 1 个 main Activity，其中包含 5 个 fragment，每个 fragment 代表不同的选项卡。 我应该
我尝试在我的应用中实现 AdMob 横幅，但它没有显示。我已经使用了横幅，并且总是使用相同的方式..我有一个带有 View 的 FrameLayout 。此 FrameLayout 位于 Linear
我在我的第一款游戏中使用 Andengine 与 Mobclix 结合使用，每当我尝试运行该应用程序时，我都会在 LogCat 中收到巨大错误。我到处都搜索过，但似乎找不到答案。 FATAL EXCE
JS: document.getElementsByTagName("input, select, textarea, option, optgroup, fieldset, label").onch
我想在页面底部安装一个横幅，但它与主屏幕的内容重叠。在主屏幕中有很多内容并且有滚动。 有人知道为什么吗？谢谢。 XML android:id="
我想在屏幕顶部显示横幅，但是有问题。在我的代码中(这不是我的代码，因为我正在学习过程中)我有两个选择。在屏幕底部的屏幕下方或上方显示横幅。 public void showBanner(fin
我的 AdMob 横幅显示在屏幕顶部而不是底部。 这是我的代码: adView = new AdView(mSingleton); adView.setAdSize(AdSize.SMART_BANN
我是一名优秀的程序员,十分优秀！