所以我是html的新手,不像刚开始时那样,但绝对不先进:
假设您已经阅读标题,这是我的html代码
window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
.socialButton {
visibility: hidden;
}
.tooltip {
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
center {
left: 220px;
}
.vertical-menu {
width: 200px;
height: 100%;
position: fixed;
top: 10px;
left: 10px;
margin-bottom: 30px;
z-index: 1;
}
.vertical-menu a {
background-color: #eee;
color: black;
display: block;
pading: 12px;
text-decoration: none;
z-index: 2;
}
.vertical-menu a:hover {
background-color: #ccc;
z-index: 2;
}
.vertical-menu a.active {
background-color: #4CAF50;
color: white;
z-index: 2;
}
html {
height: 100%;
text-indent: 2.0em;
position: relative;
left: 220px;
margin-right: 220px;
text-indent: 2.0em;
}
a {
color: blue;
text-shadow: 0px 0px black;
text-decoration: none;
}
body {
background-color: #72b368;
color: white;
text-shadow: 2px 2px black;
font-size: 18;
text-indent: 2.0em;
height: 100%;
margin: 0;
}
head {
background-color: #72b368;
color: orange;
text-shadow: 2px 2px black;
font-size: 18;
}
footer {
background-color: black;
color: darkred;
font-size: 12;
height: 20;
text-indent: 0em;
margin: 0;
position: relative;
left: -220px;
right: 220px;
margin-right: -220px;
text-align: right;
padding-right: 10px;
padding-top: 4px;
}
h1 {
color: white;
text-shadow: 2px 2px black;
font-size: 22;
}
h2 {
color: white;
text-shadow: 2px 2px black;
font-size: 26;
}
h3 {
color: orange;
text-shadow: 2px 2px black;
font-size: 26;
}
h4 {
color: white;
text-shadow: 2px 2px black;
font-size: 30;
}
h5 {
color: white;
text-shadow: 2px 2px black;
font-size: 34;
}
h6 {
color: white;
text-shadow: 2px 2px black;
font-size: 38;
}
<center>
<!--Header Title-->
<h3>Insert Meaningless Contact Here</h3>
</center>
<b></b>
<p>Welcome to a meaningless contact page, with meaningless contacts on it, where you can contact the meaningless creature known as me.</p>
<!--Yes this is a joke-->
<div class="vertical-menu">
<!--Side menu-->
<a href="Page.html">Home</a>
<a href="#" class="active">Contact Me</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
<a href="#">Link 6</a>
<a href="#">Link 7</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
<a href="#">Link 6</a>
<a href="#">Link 7</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
<a href="#">Link 6</a>
<a href="#">Link 7</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
<a href="#">Link 6</a>
<a href="#">Link 7</a>
</div>
<div class="pusher">
<!--Actual <body> content-->
<hr></hr>
<a class="twitter-follow-button socialButton" href="https://twitter.com/TwitterDev">Follow @TwitterDev</a>
<br></br>
<center>
<a class="twitter-timeline" href="https://twitter.com/TwitterDev" data-width="750" data-height="400">Tweets by TwitterDev</a>
</center>
<center>
<!--More Content-->
<h2>More content coming soon.</h2>
<h1>(Always trying to add more stuff.)</h1>
</center>
<null>
<!--Page breaks for footer-->
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
</null>
</div>
<footer>
<!--Copyright and other shit-->
Site design by Matthew Rease. (c) 2017. Do not copy custom design without permission. To contact me, go to my YouTube channel listed above, and use the contact information there.
</footer>
抱歉,这么长了,我只是想展示所有这些,以防万一。
我进行了一些研究,但有一半时间我不了解其他人在说什么,另一半(当我这样做时)他们的解决方案不起作用。
我再也无法用语言解释我的结果了,但是这里有一个我“用照片购物”的例子
http://imgur.com/a/EqD8X
显然不一定要在同一地点,但我仅举一个例子。
在您指出.socialButton仅使其不可见(尽管即使它不起作用)之前,它是一个测试,基本上,我无法在.socialbutton {}块内运行任何东西,我已经尝试过诸如右之类的显而易见的事情:align-text:align-content:以及诸如此类,但不是很明显,问题在于让类应用特质
它应该使用该类的twitter-follow-button,然后使用我创建的一个名为socialButton的按钮。
有任何想法吗?建议?感谢所有帮助。
最佳答案
试试下面的代码。您可以添加带有分隔符的锚标记,然后将其右对齐。
<div align = "right"><a class="twitter-follow-button socialButton" href="https://twitter.com/TwitterDev">Follow @TwitterDev</a><div>