- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经为我的导航栏使用了一个模板,但我不太确定哪里出了问题。你能更正我的代码吗?
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="Ryan$ /Users/Ryan/Downloads/logo.png" type="image/x-icon"/>
<!-- Title -->
<script>
/*
Creating an error page
1. Get error code using XMLGetHTTPRequest
2. Take them to the error page if the website is not found (if the error code is 404)
3. If the website URL... is fine, execute all of the javascript
Checking if javascript is enabled or installed
1. Get the element by id (noscript)
2. If noscript="true", make an alert warning that tells the user that the website may not function properly if you don't enable their Javascript.
Creating a slideshow of images
1. Enable JQuery
2. Store your slideshow images in variables
3. Make a variable that will store the amount of time each image will take to cycle (use setInterval)
4. Make a for function that will slide the images every time the timer reaches a multiple of the variable in number 3.
*/
</script>
<style>
/*
Make the whole page have a font of Open Sans. Also, add a margin of 40px
Colour the right column gainsboro and the sidebar white
Make the blog title bold, underlined and big (Remember to make it stand out)
Another alternative for the blog title is just an image. In that case, you should:
Make it repeat horizontally (X) and if the image doesn't have word in it, use figcaption
Then, make a sidebar by making a border-right that is 1px wide and float it right of the sidebar (Also set the display to relative or fixed)
, use a template to design the navigation menu (Make sure it's a drop down navigation menu)
*/
#cssmenu ul,#cssmenu li,#cssmenu span,#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
line-height: 1;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
background: #fff;
background: -moz-linear-gradient(top,#fff 0%,#fff 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(100%,#fff));
background: -webkit-linear-gradient(top,#fff 0%,#fff 100%);
background: -o-linear-gradient(top,#fff 0%,#fff 100%);
background: -ms-linear-gradient(top,#fff 0%,#fff 100%);
background: linear-gradient(to bottom,#fff 0%,#fff 100%);
border-bottom: 2px solid #db000b;
width: auto;
}
#cssmenu:after,#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #fff;
background: -moz-linear-gradient(top,#fff 0%,#fff 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(100%,#fff));
background: -webkit-linear-gradient(top,#fff 0%,#fff 100%);
background: -o-linear-gradient(top,#fff 0%,#fff 100%);
background: -ms-linear-gradient(top,#fff 0%,#fff 100%);
background: linear-gradient(to bottom,#fff 0%,#fff 100%);
color: #fff;
display: block;
font-family: Helvetica,Arial,Verdana,sans-serif;
padding: 19px 20px;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul > li {
display: inline-block;
float: left;
margin: 0;
}
#cssmenu.align-center {
text-align: center;
}
#cssmenu.align-center > ul > li {
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul {
float: right;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu > ul > li > a {
color: #000;
font-size: 12px;
}
#cssmenu > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #db000b;
margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#cssmenu.align-right > ul > li:first-child > a,#cssmenu.align-center > ul > li:first-child > a {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
#cssmenu.align-right > ul > li:last-child > a {
border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a,#cssmenu > ul > li:hover > a {
color: #000;
box-shadow: inset 0 0 3px #d9d9d9;
-moz-box-shadow: inset 0 0 3px #d9d9d9;
-webkit-box-shadow: inset 0 0 3px #d9d9d9;
background: #f2f2f2;
background: -moz-linear-gradient(top,#fff 0%,#f2f2f2 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(100%,#f2f2f2));
background: -webkit-linear-gradient(top,#fff 0%,#f2f2f2 100%);
background: -o-linear-gradient(top,#fff 0%,#f2f2f2 100%);
background: -ms-linear-gradient(top,#fff 0%,#f2f2f2 100%);
background: linear-gradient(to bottom,#fff 0%,#f2f2f2 100%);
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu.align-right .has-sub ul {
left: auto;
right: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #db000b;
border-bottom: 1px dotted #ff0f1b;
font-size: 11px;
filter: none;
display: block;
line-height: 120%;
padding: 10px;
color: #fff;
}
#cssmenu .has-sub ul li:hover a {
background: #a80008;
}
#cssmenu ul ul li:hover > a {
color: #fff;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu.align-right .has-sub .has-sub ul,#cssmenu.align-right ul ul ul {
left: auto;
right: 100%;
}
#cssmenu .has-sub .has-sub ul li a {
background: #a80008;
border-bottom: 1px dotted #ff0f1b;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #8f0007;
}
#cssmenu ul ul li.last > a,#cssmenu ul ul li:last-child > a,#cssmenu ul ul ul li.last > a,#cssmenu ul ul ul li:last-child > a,#cssmenu .has-sub ul li:last-child > a,#cssmenu .has-sub ul li.last > a {
border-bottom: 0;
}
/*
Style the text however you want and either float it left or center it in the right column
If you want to add images, try to save as much space as you can by making a slideshow of images
Style the top of page button so it looks big, stands out and look fancy
(Optional) Make a thick, black footer that will contain the top of page button
(Optional) Style the horizontal rules (hrs) so that they have a different colour or a different style (like dotted)
*/
</style>
</head>
<body>
<!-- Remember to:
Try and label every section with a div (It'll come in handy!)
Not include old code like align
Try not to make code lines too long
Have everything on one page except for the error page
Separate each section off with a horizontal rule (hr)
-->
<!-- Checking if javascript is enabled or installed
1. Add a no script element
2. Give it an id
3. The javascript will then send a alert to tell you that you should enable/install Javascript on your browser
-->
<!-- Blog title goes here Navigation menu content (Brings user to a different part of the page)
Home
About me > Introduction,
About me > What it's like to be me,
About me > Kind words,
About me > Good moments,
About me > Bad moments
About me > Why I love programming so much,
Web design tips 'n' tricks > Introduction,
Web design tips 'n' tricks > HTML,
Web design tips 'n' tricks > CSS,
Web design tips 'n' tricks > Javascript,
Web design tips 'n' tricks > Creating a website,
Web design tips 'n' tricks > Tutorials > Introduction,
Web design tips 'n' tricks > Tutorials > HTML,
Web design tips 'n' tricks > Tutorials > CSS,
Web design tips 'n' tricks > Tutorials > Javascript,
Web design tips 'n' tricks > Projects (Coming soon),
Quotes > Famous quotes from famous people,
Quotes > Quotes from my friends and family,
Quotes > Quotes from me,
The past, present and future > This website > Future,
The past, present and future > Me > Past > Introduction,
The past, present and future > Me > Past > 2005,
The past, present and future > Me > Past > 2006,
The past, present and future > Me > Past > 2007,
The past, present and future > Me > Past > 2008,
The past, present and future > Me > Past > 2009,
The past, present and future > Me > Past > 2010,
The past, present and future > Me > Past > 2011,
The past, present and future > Me > Past > 2012,
The past, present and future > Me > Past > 2013,
The past, present and future > Me > Past > 2014,
The past, present and future > Me > Past > 2015,
The past, present and future > Me > Present,
The past, present and future > Me > Future,
The past, present and future > Me > Brief Recap,
Minigamez (Coming soon),
Contact,
Chat room
-->
<div id="cssmenu">
<ul>
<li class="active"><a href="MyBlog.html"><span>Home</span></a></li>
<li class="has-sub"><span>About me</span></a>
<ul>
<li><a href="#"><span>Introduction</span></a></li>
<li><a href="#"><span>What it's like to be me</span></a></li>
<li><a href="#"><span>Kind words</span></a></li>
<li><a href="#"><span>Good moments</span></a></li>
<li><a href="#"><span>Bad moments</span></a></li>
<li><a href="#"><span>Why I love programming so much</span></a></li>
</ul>
</li>
<li class="has-sub"><span>Web design tips 'n' tricks</span>
<ul>
<li><a href="#"><span>Introduction</span></a></li>
<li><a href="#"><span>HTML</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>Javascript</span></a></li>
<li><a href="#"><span>Building websites</span></a></li>
<li class="has-sub"><span>Tutorials</span></a></li>
<ul>
<li><a href="#"><span>Introduction</span></a></li>
<li><a href="#"><span>HTML</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>Javascript</span></a></li>
<li><a href="#"><span>Projects (Coming Soon!)</span></a></li>
</ul>
</li>
<li class="has-sub"><span>Quotes</span>
<ul>
<li><a href="#"><span>Introduction</span></a></li>
<li><a href="#"><span>Quotes from Famous people</span></a></li>
<li><a href="#"><span>Quotes from my friends/family</span></a></li>
<li><a href="#"><span>Quotes from me</span></a></li>
</ul>
</li>
<li class="has-sub"><span>The past and future</span></a>
<ul>
<li><a href="#"><span>The future of this website</span></a></li>
<li class="has-sub"><span>Me</span></li>
<ul>
<li><a href="#"><span>Introduction</span></a></li>
<li><a href="#"><span>2005</span></a></li>
<li><a href="#"><span>2006</span></a></li>
<li><a href="#"><span>2007</span></a></li>
<li><a href="#"><span>2008</span></a></li>
<li><a href="#"><span>2009</span></a></li>
<li><a href="#"><span>2010</span></a></li>
<li><a href="#"><span>2011</span></a></li>
<li><a href="#"><span>2012</span></a></li>
<li><a href="#"><span>2013</span></a></li>
<li><a href="#"><span>2014</span></a></li>
<li><a href="#"><span>2015</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span>Mingamez (Coming Soon)</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Chat room</span></a></li>
</ul>
</li>
</ul>
</div>
<!-- Sidebar
Search bar from Google
Top trending blog posts today (Top ten)
Recent blog posts
-->
<!-- Articles
Home
About me > Introduction
About me > What it's like to be me
About me > Kind words
About me > Good moments
About me > Bad moments
About me > Why I love programming so much
Web design tips 'n' tricks (Medium)
Web design tips 'n' tricks > Introduction (Tiny)
Web design tips 'n' tricks > Tutorials > HTML
Web design tips 'n' tricks > Tutorials > CSS
Web design tips 'n' tricks > Tutorials > Javascript
Web design tips 'n' tricks > Projects (Coming soon)
Quotes > Famous quotes from famous people
Quotes > Quotes from my friends and family
Quotes > Quotes from me
The past, present and future > This website > Future
The past, present and future > Me > Past > Introduction
The past, present and future > Me > Past > 2005
The past, present and future > Me > Past > 2006
The past, present and future > Me > Past > 2007
The past, present and future > Me > Past > 2008
The past, present and future > Me > Past > 2009
The past, present and future > Me > Past > 2010
The past, present and future > Me > Past > 2011
The past, present and future > Me > Past > 2012
The past, present and future > Me > Past > 2013
The past, present and future > Me > Past > 2014
The past, present and future > Me > Past > 2015
The past, present and future > Me > Present
The past, present and future > Me > Future
The past, present and future > Me > Brief Recap
Minigamez (Coming soon)
Contact
Chat room
-->
<!-- Top of page button -->
</body>
</html>
希望这不是一个重大错误,因为我为此花了好几个小时!
最佳答案
“关于我”这一项有错误,应该是:
<li class="has-sub"><a href="#"><span>About me</span></a>
和“网页设计技巧”:
<li class="has-sub"><a href="#"><span>Web design tips 'n' tricks</span></a>
子项也一样:“教程”、“名言”和“过去与 future ”
fiddle :https://jsfiddle.net/u54hr8xz/1/
关于html - 为什么我的导航栏不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33736842/
我使用 Runtime.getRuntime().exec 来运行 perl 程序。现在我想在执行过程中显示百分比进度条,然后在perl程序执行完成后,它应该关闭进度条。我该怎么做? Runtime.
我已广泛搜索该网站,但找不到答案。请我是新手,我需要你的帮助。 我想创建一个固定的导航栏,但每次在我的 CSS 样式表中放置一个固定的规则时,导航栏都会消失。这是我的 html 代码:
Here's a nice jsFiddle illustrating the problem 我正在尝试创建一个标题栏元素... 永远只有 1 行高 在右上角有始终存在的控件 在左上角有一个标题,如
int fd = open(JOYSTICK_NAME, O_RDONLY | O_NONBLOCK); O_RDONLY 和 O_NONBLOCK 之间的栏是什么意思?我在 OpenGL/GLUT
我注意到我的网页在页脚之后和页面底部有一个空白/栏: 我试图通过使用 Chrome 中的 inspect 元素来查找此问题的原因,但找不到任何内容。我正在使用 Boostrap,这是我的页脚 HTML
我已经对这个主题进行了一些研究,但我找不到完整的解决方案,因此,我一步一步地尝试和错误,我终于找到了如何实现这些结果:透明或彩色Actionbar 和 Statusbar。请参阅下面的答案。 最佳答案
Highcharts 教程中的经典示例是: $(function () { $('#container').highcharts({ chart: { type: 'bar'
注意 :这与 iOS 13 中使用的新默认模态呈现样式无关。 我有一个奇怪的问题,显示模态 UINavigationController . 考虑一个 UIViewController位于 UINav
我需要帮助了解如何在加载页面时隐藏 iPad 地址栏或顶部的整个地址栏。 我正在开发基于在线客户管理系统的系统,需要隐藏 iPad 地址栏,因为它在查看网站时会占用大量空间。 问候涡流 已经尝试了以下
我在向栏中添加文本时遇到了一些问题。我想在栏上方显示值,但我无法向每个栏添加文本。 现在我的dom结构是: g rect rect rect 我想要什么: g g.bar rect
我有 ListView ,数据将从数据表显示在 ListView 中像这样我已经完成了但是我在数据行 6 有问题 dt = classes.xxxxx.GetData(sql,
我使用 opposite 属性将 xAxis 向右移动。条形图怎么可能也从右侧开始? 谢谢! Highcharts.chart('absoluteInterruptions', { chart:
我得到了这张图片,我想在我的导航 Controller 中使用它: 我是这样设置的(根据 this 问题的建议): UINavigationBar *theBar = self.navigationC
这个问题在这里已经有了答案: How to disable breadcrumbs in Eclipse (11 个答案) 关闭 9 年前。 有谁知道如何删除我在 Eclipse 中用红色圈出的栏?
总而言之,我的应用程序中有一个浏览器,我希望它只启动 5 个网站,仅此而已。有没有办法让我的浏览器通过设置自定义字符串来启动 5 个网站,例如 if {用户键入此字符串} 转到该网站,然后 else
我想在我的应用程序中实现一个进度条。发生的过程是应用程序将一个目录复制到 iOS 文档目录中。通常需要 7-10 秒(iPhone 4 测试)。我对进度条的理解是你在事情发生时更新进度条。但是根据目录
我正在寻找一种创建交互式子弹图的方法,它允许用户单击图中的任意位置并设置一个标记,然后根据该标记所在的位置计算一些简单的值。例如,我希望它看起来类似于: http://www.usrecordings
我目前在一个网站上工作,我有一张人的照片。在图片的右侧,我想要名称和描述。名称应与描述具有不同的背景。我上传了一张它应该是什么样子的图片:http://www.tiikoni.com/tis/view
我将 div 栏设置为不滚动,因此它将始终显示在网站顶部。在这个栏内,我有另一个 div 框,里面有两个按钮,它们向右浮动,所以它们总是在右上角。 问题是我希望按钮居中于页面的右上角而不是右上角。相反
因此,我在我的网站中使用了一个选择栏。我试图在悬停时更改选项的背景颜色。此外,如果有人知道设置垂直 slider 样式的好方法,那就太棒了。 这是我正在尝试做的事情的 fiddle : http://
我是一名优秀的程序员,十分优秀!