HTML / CSS列表样式类型未显示

时间:2014-09-18 11:22:06

标签: html css html-lists

我正在研究我正在学习的课程的网站,我遇到了一个列表问题。我需要在特定页面上显示一个列表,其中较低的alpha作为项目符号类型,但没有显示任何内容。

我使用Notepad ++中的find工具搜索包含list-style-type的所有行,并检查它们是否设置为none。

我还需要导航栏上的列表将图像作为样式类型。

包含列表和CSS的HTML页面:



@font-face{ font-family:customFont; src: url('../fonts/Balkeno.ttf'); }

* {
	margin: 0;
	border: 0;
	padding: 0;
	font-size: 12px;
	font-family: arial, sans-serif;
}

body {
	width: 100%;
	height: 300%;
	background-color: #D8D8D8;
}

nav {
	font-family: customFont;
	font-size: 30px;
	width: 100%;
	height: 50px;
	position: fixed;
	z-index: 50;
}

.nav-background {
	width: 100%;
	height: 100%;
	background: #12A7CB;
	opacity: 0;
	position: absolute;
}

.nav-content {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

header {
	width: 100%;
	height: 320px;
}

#slideshow {
    position:relative;
    height:320px;
	width: 100%;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
	width: 100%;
	height: 320px;
	box-shadow: 0px 5px 10px #5E5E5E;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}

#logo { 
	float: left; 
	padding-left: 100px;
	padding-right: 200px;
}

#nav {
	background: url(http://4.bp.blogspot.com/-dVtgikk-kOY/UprtswP0yGI/AAAAAAAADag/Og0DtZ8t_oQ/s1600/header+base.png) no-repeat scroll top left;     background-color: transparent;
	width:100%;
	height:66px;
	box-shadow: 0px 1px 10px #5E5E5E;
	position:fixed;
	top:0px;
}

.title {
	display:none;
	color:#EDEDED;
	font-size:25px;
	width:350px;
	margin-top:6px;
	margin-left:150px;
	font-weight:bold;
	float:left;
}

.navigation {
	list-style-image: url('navIcon.png'); 
}

li {
	display:inline;
	padding:15px;
	color: black;
}

.navigation a {
	font-size: 19px;
	font-family: customFont;
	/*text-decoration:none;*/
	color: #01ebfe;
} 

.navigation a:hover {
	opacity:0.36;
}

.wrapper {
	width: 900px;
	height: 1000%;
	margin-top: 25px;
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	background-color: white;
	padding-top: 100px;
	box-shadow: 10px 10px 5px #888888;
}

p{
	font-size: 14px;
	padding-bottom: 32px;
}

p:first-letter {
	font-size: 32px;
	color: #71CAE0;
}

h1 {
	font-family: customFont;
	font-size: 32px;
	font-weight: bolder;
	color: #12A7CB;
	text-align: center;
}

h2 {
	font-family: customFont;
	font-size: 22px;
	font-weight: bold;
	color: #12A7CB;
	text-align: left;
	text-decoration: underline;
}

section {
	width: 100%;
	height: 100%;
	background-color: #D8D8D8;
}

img.logo {
	text-align: center;
	margin: auto;
	display: block;
}

img.slideshow {
	width: 100%;
	height: 480px;
}

footer {
	width: 900px;
	margin: 25px auto 0 auto;
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	background-color: white;
	text-align: center;
	box-shadow: 10px 10px 5px #888888;
}

.members {
	padding: 10px;
	display: inline-block;
	background-color: #e4f4f8;
	margin-top: 15px;
	margin-left: 15px;
	border: 1px solid #12A7CB;
	float: right;
}

ol {
	list-style-type: lower-alpha;
}

li {
	list-style-type: lower-alpha;
}

ol.test {
	list-style-type: lower-alpha;
}

.members ol {
	list-style-type: lower-alpha;
}

.members li {
	display: block;
	color: #6c6c6c;
	list-style-type: lower-alpha;
	padding: 5px;
	margin-bottom: 5px;
}

/** START TABLE STUFF **/

table, tr, th, td {
	border: 1px solid black;
}

th, td {
	padding: 5px;
}

table {
	margin-top: 500px;
}

.disco {
	margin:0px;padding:0px;
	width:100%;
	box-shadow: 10px 10px 5px #888888;
	border:1px solid #000000;
	border-bottom-left-radius:8px;
	border-bottom-right-radius:8px;
	border-top-right-radius:8px;
	border-top-left-radius:8px;
	
}.disco table{
    border-collapse: collapse;
    border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
}

.disco tr:last-child td:last-child {
	border-bottom-right-radius:8px;
}

.disco table tr:first-child td:first-child {
	border-top-left-radius:8px;
}

.disco table tr:first-child td:last-child {
	border-top-right-radius:8px;
}

.disco tr:last-child td:first-child{
	border-bottom-left-radius:8px;
}

.disco td{
	vertical-align:middle;
	background: green;
	border:1px solid #000000;
	border-width:0px 1px 1px 0px;
	text-align:center;
	padding:18px;
	font-size:10px;
	font-weight:normal;
	color:#000000;
}

.disco tr:last-child td{
	border-width:0px 1px 0px 0px;
}

.disco tr td:last-child{
	border-width:0px 0px 1px 0px;
}

.disco tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}

.disco tr:first-child td{
	background:red;
	border:0px solid #000000;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:14px;
	font-family:Arial;
	color:#ffffff;
}

/** END TABLE STUFF **/

.video-wrapper {
	width: 100%;
	text-align: center;
}

.video-wrapper a {
	color: blue;
	text-decoration: none;
	font-size: 12px;
	font-family: arial, sans-serif;
}

.social img {
	padding-top: 32px;
	padding-right: 8px;
	width: 48px;
	height: 48px;
	border: none;
}

<!DOCTYPE html>
<html>
	<!-- 
	Author: *******
	Date: 11/08/2014
	-->

	<head>
		<meta charset="utf-8" />
		<title>Biography - Three Doors Down</title>
		
		<link rel="stylesheet" type="text/css" href="../css/style.css" /> 
		<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
		
		<script src="../js/jquery.js"></script>
		<script type="text/javascript" src="../js/scroll.js"></script>
		<script type="text/javascript" src="../js/header.js"></script>
		
	</head>
	
	<body>
		<nav class="nav">
			<div class="nav-background">
			</div>
			
			<div class="nav-content">
				<img src="../images/navTitle.png" alt="Three Doors Down" id="logo" width=250 />
				<ul class='navigation'>
					<li><a href="../index.html">Home</a></li>
					<li><a href="biography.html">Biography</a></li>
					<li><a href="discography.html">Discography</a></li>
					<li><a href="video.html">Video</a></li>
				</ul>
			</div>
		</nav>
		
		<header class="header">
			<div id="slideshow">
				<img src="../images/header1.jpg" alt="Three Doors Down" class="active" />
				<img src="../images/header2.jpg" alt="Three Doors Down" />
				<img src="../images/header3.jpg" alt="Three Doors Down" />
			</div>
		</header>
		
		<section>
			<div class="wrapper">
				<h1>Biography</h1>
				
				<div class="members">
				<h2>Band Members</h2>
					<ol>
						<li>Brad Arnold</li>
						<li>Chris Henderson</li>
						<li>Greg Upchurch</li>
						<li>Chet Roberts</li>
						<li>Justin Bitonen</li>
					</ol>
				</div>
				
				<p>If rock ‘n’ roll had fairy tales, the 3 Doors Down story would be one of the most popular. Their story begins in childhood, it celebrates friendship, honesty and making the most of God-given talents. It’s about faith in your teammates and collaboration, trusting instincts and, once success is achieved, lending a hand to help others. </p>

				<p>They made their mark early, selling 6 million copies of their debut album, and rather than allow that moment to define themselves, they have developed as musicians, songwriters and friends. The stories and emotions related in their songs resonate with audiences: Their music and lyrics are as approachable as the guys in the band. “The main thing is the lyrics,” says Brad Hardin, a radio programmer in Tampa, Florida, at one of the first stations to play 3 Doors Down's music. “I've watched them mature as a band. They work hard, they do anything for their community and they're so sincere and easy to be around. And that comes out in their music.” “I’ve got to make this life make sense” is a line from one of 3 Doors Down’s most popular songs, “Away From the Sun” and in many ways it sums up a key attraction to the band’s work: The directness of Brad Arnold’s lyrics. “Something I have always tried to do when writing a song: Talk about something besides the rims on the car, something somebody can identify with, but make it open-ended so a listener can make it adapt to their own life,” he says.</p>

		

				<p>Chris Henderson explains “One Light” as song that points out “everyone is looking for the leader to get behind so that change can begin.” Arnold adds: “It’s about giving the world more than you can take from it.” It could also be a description of 3 Doors Down’s Better Life Foundation that they founded in 2003 to help children in need of food, shelter and medical attention. “Every time we do something with our foundation or for the military, we’re just the catalyst,” Arnold says. “When I leave an event, I feel like I have been given something. We’ve been able to do a lot of good things, so it’s hard to look at it as giving back.”</p>

				<p>Brad, Todd and Chris all agree they have created a family by being in a band together. They left Mississippi for Nashville and still live just a few miles from one another and share their lives onstage and off. 3 Doors Down is a brotherhood of rock ‘n’ rollers whose bonds with each other and their fans only grow stronger with age.</p>
			</div>
		</section>
		
		<footer>			
			<div class="nav-content">
				<ul class='navigation'>
					<li><a href="../index.html">Home</a></li>
					<li><a href="biography.html">Biography</a></li>
					<li><a href="discography.html">Discography</a></li>
					<li><a href="video.html">Video</a></li>
				</ul>
			</div>
		</footer>
	</body>
</html>
&#13;
&#13;
&#13;

我很感激任何帮助,因为这项任务明天到期。

1 个答案:

答案 0 :(得分:2)

可能你忘了什么......

li {
    display: list-item;
}

在您的代码中,display:inline不是列表项,也没有列表样式。