在我的网站上添加一个按钮HTML& CSS [英] Adding a button to my website HTML & CSS
本文介绍了在我的网站上添加一个按钮HTML& CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图将我在JsFiddle上找到的这个按钮添加到我的网站上，但我似乎无法让它显示出来，我已经离开这个项目大约1个月了，我可能已经忘记了一两件事，任何人可以解释为什么按钮现在出现了吗？
< ！DOCTYPE html >
<！ - 开发人员：Varga Developments - >
<！ - 项目：完全响应的网站，背景图片滑块。 - >
< html >
< head >
< meta charset = UTF-8 >
< meta 名称 = viewport content = width = device-width，initial-scale = 1 >
< 标题 > 全宽度响应式图片滑块 < / title >
< script src = http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min。 js > < / script >
< script src = http://malsup.github.com/ jquery.cycle2.js > < / script >
< style type = text / css >
html ， body ， img {
padding ： 0;
margin ： 0;
height ： 100％;
width ： 100％;
background ： url（.container）;
}
body {
font-family ： Helvetica Neue，Helvetica，Arial;
}
。 container {
height ： 100％;
width ： 100％;
溢出 ： 隐藏;
z-index ： 900;
}
。 cycle-slideshow {
height ： 100％;
width ： 100％;
display ： block;
position ： relative;
margin ： 0 auto;
}
。 cycle-prev ，。 cycle-next {
font-size ： 200;
color ： #FFF;
display ： block;
position ： 绝对;
top ： 50％;
margin-top ： -16px;
z-index ： 9999;
cursor ： 指针;
}
。 cycle-prev {
left ： 10％;
}
。 cycle-next {
right ： 10％;
}
。 cycle-pager {
width ： 100％;
text-align ： center;
display ： block;
position ： 绝对;
position ： top;
bottom ： 20px;
z-index 9999;
}
。 cycle-pager span {
text-indent ： 100％;
white-space ： nowrap;
;
width ： 12px;
height ： 12px;
display ： inline-block;
border ： 1px solid #FFF ;
border-radius ： 50％;
margin ： 0 10px;
cursor ： 指针;
}
。 cycle-pager 。 cycle-pager-active {
background ： #FFF;
}
按钮。 contact-us {
background-color ： 红色;
border ： 2px纯蓝色;
position ： 已修复;
top ： calc（（100vh - 38px）/ 2）;
left ： calc（（100vw - 120px）/ 2）;
}
按钮：悬停 {
颜色 ： #fff;
background ： rgba（255,255,255,0.2）;
}
/ * 菜单CSS * /
＃ 侧栏 {
背景 ： ＃151718;
width ： 200px;
height ： < span class =code-keyword> 17％;
display ： block;
position ： 绝对值;
left ： -200px;
top ： 0px;
transition ： 左0.3s线性;
z-index ： 1000;
}
＃ sidebar 。可见 {
left ： 0px;
transition ： 左0.3s线性;
}
ul {
margin ： 0;
padding ： 0;
}
ul li {
list-style ： none;
}
ul li a {
background ： ＃1C1E1F;
颜色 ： #ccc;
border-bottom ： 1px solid＃111;
display ： block;
width ： 180px;
padding ： 10px;
text-decoration ： none;
}
＃ sidebar-btn {
display ： inline-block;
vertical-align ： middle;
width ： 20px;
height ： 150px;
cursor ： 指针;
margin ： 20px;
position ： 绝对;
top ： 0px;
right ： - 60px;
}
＃侧边栏-btn span {
height ： 1px;
background ： #ffifff;
margin-bottom ： 5px;
display ： block;
}
＃ sidebar-btn span：nth-child（2）{
width ： 75％;
}
＃ sidebar-btn span：nth-child（3） {
width ： 50％;
}
/ * 菜单CSS * /
< / 样式 >
< / head >
< body >
< div id = 侧栏 >
< ul >
< li > < a href = index.html > 主页< / a > < / li >
< li > ; < a href = servicesPage.html > 服务< / a > < / li >
< li > < a href = aboutPage.html > 关于< / a > < < span class =code-leadattribute> / li >
< li > < a href = aboutPage.html > 联系< / a > < / li >
< / ul >
< div id = sidebar-btn >
< < span class =code-leadattribute> span > < / span >
< span > < / span >
< span > < / span >
< / div >
< / div >
<！ - 按钮电子邮件订阅和内容 - >
< 按钮 < span class =code-attribute> class = contact-us > 与我们联系< / button >
<！ - 全宽度响应滑块 - >
<跨越ss =code-keyword>< div 类 = 容器 >
< div class = cycle-slideshow > s
< span class = cycle-prev > << span class =code-keyword> < / span >
< span class = cycle-next < span class =code-keyword>> > < / span >
< span < span class =code-attribute> class = cycle-pager > < / span >
< img src = images / wp5.jpg >
< img src = images / wp6.jpg >
< img src = images / wp7.jpg >
< / div >
<！ - Full Width Responsi ve Slider - >
< / div >
< script type = text / javascript >
$（ document ）。ready（ function （）{
$ （' ＃sidebar-btn'）。click（ function （）{
$（' ＃sidebar'）。toggleClass（< span class =code-string>' visible'）;
}）;
}）;
< / script >
< / body >
< / html >
我尝试了什么：
我尝试过几次更改代码并移动它但没有去
解决方案
（ document ）。ready（ function （）{
（' ＃sidebar-btn'）。click（ function （）{
（' #sidebar'）。toggleClass（' visible'）;
}）;
}）;
< / script >
< / body >
< / html >
我尝试了什么：
我试过几次更改代码然后移动它但没有去
Im trying to add this button that I found on JsFiddle to my website but I cant seem to make it show up, I've been off this project for about 1 month and I might have forgotten a thing or two, anyone who could explain why the button is now showing up?
<!DOCTYPE html>
<!-- Developer: Varga Developments -->
<!-- Project: Fully Responsive Website With A Background Image Slider. -->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<style type="text/css">
html, body, img {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background: url(.container);
}
body {
font-family: "Helvetica Neue", Helvetica, Arial;
}
.container {
height: 100%;
width: 100%;
overflow: hidden;
z-index: 900;
}
.cycle-slideshow {
height: 100%;
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev, .cycle-next {
font-size: 200;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -16px;
z-index: 9999;
cursor: pointer;
}
.cycle-prev {
left: 10%;
}
.cycle-next {
right: 10%;
}
.cycle-pager {
width: 100%;
text-align: center;
display: block;
position: absolute;
position: top;
bottom: 20px;
z-index: 9999;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;
;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
}
.cycle-pager .cycle-pager-active {
background: #FFF;
}
button.contact-us {
background-color: red;
border: 2px solid blue;
position: fixed;
top: calc((100vh - 38px) / 2);
left: calc((100vw - 120px) / 2);
}
button:hover {
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
/*Menu CSS*/
#sidebar {
background: #151718;
width: 200px;
height: 17%;
display: block;
position: absolute;
left: -200px;
top: 0px;
transition: left 0.3s linear;
z-index: 1000;
}
#sidebar.visible {
left: 0px;
transition: left 0.3s linear;
}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
ul li a {
background: #1C1E1F;
color: #ccc;
border-bottom: 1px solid #111;
display: block;
width: 180px;
padding: 10px;
text-decoration: none;
}
#sidebar-btn {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 150px;
cursor: pointer;
margin: 20px;
position: absolute;
top:0px;
right:-60px;
}
#sidebar-btn span {
height: 1px;
background:#ffffff;
margin-bottom: 5px;
display: block;
}
#sidebar-btn span:nth-child(2) {
width: 75%;
}
#sidebar-btn span:nth-child(3) {
width: 50%;
}
/*Menu CSS*/
</style>
</head>
<body>
<div id="sidebar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="servicesPage.html">Services</a></li>
<li><a href="aboutPage.html">About</a></li>
<li><a href="aboutPage.html">Contact</a></li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- Buttons for email subscriptions and stuff -->
<button class="contact-us">Contact Us</button>
<!-- Full Width Responsive Slider -->
<div class="container">
<div class="cycle-slideshow">s
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/wp5.jpg">
<img src="images/wp6.jpg">
<img src="images/wp7.jpg">
</div>
<!-- Full Width Responsive Slider -->
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</body>
</html>
What I have tried:
I've tried changing the code a few times and moving it around but no go
解决方案
(document).ready(function(){
('#sidebar-btn').click(function(){
('#sidebar').toggleClass('visible'); }); }); </script> </body> </html>
What I have tried:
I've tried changing the code a few times and moving it around but no go
这篇关于在我的网站上添加一个按钮HTML& CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
