- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这很奇怪,我以前从未见过,也许我的电脑需要重新启动但是:我在网页上添加的每个链接都消失了。你可以看到一个活生生的例子here .
这是我的样式表:
/*------- UNIVERSAL -------*/
body
{
background: #333333;
color: #222222;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.tleft { text-align: left; }
.tright { text-align: right; }
a
{
text-decoration: none;
color: #e6267c;
font-weight: bold;
}
a :hover{ border-bottom: 1px #e6267c dashed; }
/*------- PAGE PARTS -------*/
#container
{
position: relative;
margin: 0 auto;
width: 760px;
padding: 0 70px 0 70px;
background: url(images/background.png);
}
#top { height: 141px; }
/*------- TOP -------*/
#logo
{
background: url(images/logo.png);
display: block;
width: 263px;
height: 141px;
position: absolute;
top: 0;
left: 50px;
text-indent: -9000px;
}
#addjoke
{
background: url(images/addjoke.png) bottom left;
display: block;
width: 242px;
height: 65px;
position: absolute;
top: 0;
left: 360px;
text-indent: -9000px;
}
#addjoke:hover { height: 95px; }
#quickbar
{
background: url(images/quickbar.png);
width: 160px;
height: 69px;
position: absolute;
top: 0;
left: 670px;
}
#quickbar form, a { display: none; }
/*------- MENU -------*/
#menu
{
color: white;
background: url(images/menumiddle.png) repeat-y;
float: left;
width: 207px;
}
#menu div.box
{
margin-left: 20px;
margin-right: 28px;
}
#menu span.top
{
margin: 0;
display: block;
height: 10px;
background: url(images/menutop.png);
}
#menu span.bottom
{
margin: 0;
display: block;
height: 10px;
background: url(images/menubottom.png);
}
#menu h2
{
margin: 0;
height: 31px;
text-indent: -9000px;
}
#menu ul li
{
padding-left: 15px;
background: url(images/menubullet.png) left 4px no-repeat;
}
/*navigation*/
#navigation { background: url(images/navigation.png); }
/*youraccount*/
#youraccount { background: url(images/youraccount.png); }
img.avatar
{
float: left;
margin-right: 10px;
}
#menu_login { clear: both; margin-top: 20px; margin-bottom: 20px; }
#menu_login input
{
padding: 2px 5px 2px 5px;
color: white;
background: black;
border: 2px solid white;
width: 145px;
}
#menu_login label.label_password { display: block; margin-top: 10px; }
#menu_login div
{
margin-top: 5px;
text-align: right;
}
#menu_login button
{
text-indent: -9000px;
border: 0;
width: 57px;
height: 28px;
background: transparent url(images/loginbutton.png);
cursor: pointer;
cursor: hand;
}
#menu_login label
{
font-weight: bold;
}
/*toprated*/
#toprated { background: url(images/toprated.png); }
/*newsletter*/
#newsletter { background: url(images/newsletter.png); }
/*recentcomments*/
#recentcomments { background: url(images/recentcomments.png); }
/*------- FOOTER -------*/
#footer
{
background: url(images/footer.png);
width: 779px;
height: 57px;
margin: 0 auto;
}
这是我的 XHTML(目前还不完整):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Conforming XHTML 1.0 Strict Template</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="container">
<div id="top">
<a id="logo" href="http://superfunnyjokes.net/">SuperFunnyJokes.Net</a>
<a id="addjoke">Add Joke</a>
<div id="quickbar">
<form action="http://superfunnyjokes.net/search/" method="post">
<input type="text" name="query" />
<input type="submit" value="Search" />
</form>
<a href="http://superfunnyjokes.net/rss/">RSS Feed</a>
</div>
</div>
<div id="menu">
<!-- span for top of menu, replace with jquery -->
<span class="top"></span>
<h2 id="navigation">Navigation</h2>
<div class="box">
<ul>
<li><a href="http://superfunnyjokes.net/">Home</a></li>
<li><a href="http://superfunnyjokes.net/categories/">Joke Categories</a></li>
<li><a href="http://superfunnyjokes.net/random/">Random Joke</a></li>
<li><a href="http://superfunnyjokes.net/members/registration/">Become A Member</a></li>
<li><a href="http://superfunnyjokes.net/add/">Add A Joke</a></li>
</ul>
</div>
<h2 id="youraccount">Your Account</h2>
<div class="box">
<img class="avatar" src="images/noavatar.png" />
<p>Welcome back! You are not signed in.</p>
<form id="menu_login" action="http://superfunnyjokes.net/members/login.php" method="post">
<label for="menu_username">Username:</label>
<input id="menu_username" type="text" name="username" />
<label class="label_password" for="menu_password">Password:</label>
<input id="menu_password" type="password" name="password" />
<div><button type="submit">Login</button></div>
</form>
</div>
<h2 id="toprated">Top Rated Jokes</h2>
<div class="box">
<ul class="ordered">
<li><a>The Werewolf and Me</a></li>
<li><a>Erection</a></li>
<li><a>The Werewolf and Me</a></li>
<li><a>Erection</a></li>
<li><a>The Werewolf and Me</a></li>
</ul>
</div>
<h2 id="newsletter">Newsletter</h2>
<div class="box">
<form id="menu_newsletter" action="http://superfunnyjokes.com/newsletter/register.php" method="post">
<table>
<tr>
<td><label for="menu_email">Email:</label></td>
<td><input id="menu_email" type="text" name="email" /></td>
</tr>
<tr>
<td></td>
<td><button type="submit">Sign Up</button></td>
</tr>
</table>
</form>
</div>
<h2 id="recentcomments">Recent Comments</h2>
<div class="box">
<ul class="nobullet">
<li><strong>andworth:</strong> haha I really like that one</li>
<li><strong>andworth:</strong> haha I really like that one</li>
<li><strong>andworth:</strong> haha I really like that one</li>
<li><strong>andworth:</strong> haha I really like that one</li>
<li><strong>andworth:</strong> haha I really like that one</li>
</ul>
</div>
<!-- span for bottom of menu, replace with jquery -->
<span class="bottom"></span>
</div>
<div id="main">
<h2 class="sifr">THE WEREWOLF AND ME</h2>
<p class="joke">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam blandit est eu lectus. Sed augue tortor, vehicula in, condimentum eget, tempor in, lectus. Integer enim leo, aliquam eget, hendrerit vel, laoreet a, turpis. Quisque sit amet ligula at quam condimentum ultricies. Sed molestie dolor non tellus. Vestibulum luctus nisi eget metus. Integer semper vestibulum nisl. Proin vel libero ac justo euismod sollicitudin. Duis a ligula sit amet quam fermentum convallis. Quisque tempus iaculis risus. Cras et libero vehicula lorem ultrices volutpat. Mauris quam quam, blandit et, facilisis in, sodales nec, libero. In massa tellus, varius non, luctus eu, facilisis rutrum, odio. Vivamus congue lacus quis metus.
<br /><br />
Nunc ultrices nisi ut tellus. In placerat tempus quam. Nulla dolor nulla, dictum eget, auctor a, rutrum sit amet, ante. Sed scelerisque est. Vestibulum arcu purus, dignissim nec, rhoncus id, sodales eu, quam. Nullam congue hendrerit enim. Phasellus risus. Pellentesque lacus sem, luctus tempus.
</p>
<div id="jokedetails">
<table>
<tr>
<td>Submitted By:</td>
<td>admin</td>
</tr>
<tr>
<td>Date Submitted:</td>
<td>26/2/09</td>
</tr>
<tr>
<td>Views:</td>
<td>1891</td>
</tr>
<tr>
<td>Average Rating:</td>
<td>4.5 / 5</td>
</tr>
</table>
<form action="http://superfunnyjokes.net/process/rating.php" method="post">
<input name="starrating" type="radio" class="star {split:2}" />
<input name="starrating" type="radio" class="star {split:2}" />
<input name="starrating" type="radio" class="star {split:2}" />
<input name="starrating" type="radio" class="star {split:2}" />
<input name="starrating" type="radio" class="star {split:2}" />
<input name="starrating" type="radio" class="star {split:2}" />
<input name="starrating" type="radio" class="star {split:2}" />
<input name="starrating" type="radio" class="star {split:2}" />
<input name="starrating" type="radio" class="star {split:2}" />
<input name="starrating" type="radio" class="star {split:2}" />
</form>
</div>
<h2 id="comments">Comments</h2>
<div class="comment">
<div class="left">
<img src="http://superfunnyjokes.net/members/avatars/noavatar.png" alt="No Avatar" />
</div>
<div class="right">
<h3>Ryan Polosky</h3>
<span>12 March 09</span>
<p>I found that joke really funny!</p>
</div>
</div>
<div class="comment">
<div class="left">
<img src="http://superfunnyjokes.net/members/avatars/noavatar.png" alt="No Avatar" />
</div>
<div class="right">
<h3>Laura Brauman</h3>
<span>12 March 09</span>
<p>Nunc ultrices nisi ut tellus. In placerat tempus quam. Nulla dolor nulla,
dictum eget, auctor a, rutrum sit amet, ante. Sed scelerisque est.
Vestibulum arcu purus, dignissim nec, rhoncus id, sodales eu, quam. Nullam
congue hendrerit enim. Phasellus risus. Pellentesque lacus sem, luctus
tempus.</p>
</div>
</div>
<div class="comment">
<div class="left">
<img src="http://superfunnyjokes.net/members/avatars/noavatar.png" alt="No Avatar" />
</div>
<div class="right">
<h3>James Brauman</h3>
<span>10 March 09</span>
<p>Haha! Good stuff!</p>
</div>
</div>
<h2 id="postcomment">Post Comment</h2>
<div class="postcomment">
<div class="left">
<img src="images/noavatar.png" alt="No Avatar" />
</div>
<div class="right">
<table>
<tr>
<td><label for="commentname">Your Name:</label></td>
<td><input id="commentname" type="text" name="commentname" /></td>
</tr>
<tr>
<td colspan="2"><textarea cols="0" height="0"></textarea></td>
</tr>
<tr>
<td></td>
<td><button type="submit">Post</button></td>
</tr>
</table>
</div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
整体<ul>
“导航”标题下方正在消失,因为它充满了超链接。
最佳答案
这条线将他们淘汰:
#quickbar form, a { display:none; }
关于html - 超链接消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/709514/
我使用下拉菜单提供一些不同的链接,但我希望这些链接在同一选项卡中打开,而不是在新选项卡中打开。这是我找到的代码,但我对 Javascript 非常缺乏知识 var urlmenu = docume
我对 javascript 不太了解。但我需要一个垂直菜单上的下拉菜单,它是纯 JavaScript,所以我从 W3 复制/粘贴脚本:https://www.w3schools.com/howto/t
我已经坐了 4 个小时,试图让我的导航显示下 zipper 接垂直,但它继续水平显示它们。我无法弄清楚为什么会发生这种情况或如何解决它。 如果有人能告诉我我做错了什么,我将不胜感激。我有一个潜移默化的
我正在尝试创建选项卡式 Accordion 样式下拉菜单。我使用 jQuery 有一段时间了,但无法使事件状态达到 100%。 我很确定这是我搞砸的 JS。 $('.service-button').
对于那些从未访问过 Dropbox 的人,这里是链接 https://www.dropbox.com/ 查看“登录”的下拉菜单链接。我如何创建这样的下 zipper 接? 最佳答案 这是 fiddle
我正在制作一个 Liferay 主题,但我在尝试设计导航菜单的样式时遇到了很多麻烦。我已经为那些没有像这样下拉的人改变了导航链接上的经典主题悬停功能: .aui #navigation .nav li
如果您将鼠标悬停在 li 上,则会出现一个下拉菜单。如果您将指针向下移至悬停时出现的 ul,我希望链接仍然带有下划线,直到您将箭头从 ul 或链接移开。这样你就知道当菜单下拉时你悬停在哪个菜单上。 知
我有一个带有多个下拉菜单的导航栏。因此,当我单击第一个链接时,它会打开下拉菜单,但是当我单击第二个链接时,第一个下拉菜单不会关闭。 (所以如果用户点击第二个链接我想关闭下拉菜单) // main.js
我正在尝试制作一个导航下拉菜单(使用 Bootstrap 3),其中链接文本在同一行上有多个不同的对齐方式。 在下面的代码中,下拉列表 A 中的链接在 HTML 中有空格字符来对齐它们,但是空白被忽略
我希望有人能帮我解决这个 Bootstrap 问题,因为我很困惑。 有人要求我在底部垂直对齐图像和其中包含图像的链接。 我面临的问题是他们还希望链接在链接/图像组合上具有 pull-right,这会杀
我正在构建一个 Rails 应用程序,并希望指向我的类的每个实例的“显示”页面的链接显示在“索引”页面的下拉列表中。我目前正在使用带有 options_from_collection_for_sele
我有以下 Bootstrap3 导航菜单 ( fiddle here )。我想设置“突出显示”项及其子链接与下拉列表 1 和 2 链接不同的链接文本(和悬停)的样式。我还希望能够以不同于 Highli
我对导航栏中的下拉菜单有疑问。对于普通的导航链接(无下拉菜单),我将菜单文本放在 H3 中,但是当我尝试对下 zipper 接执行相同操作时,箭头不在标题旁边,而是在标题下方。我决定用 span 替换
我是一名优秀的程序员,十分优秀!