我迷失在這裏。我正在嘗試在無節制的列表之前得到一個簡單的複選框圖像顯示。我已經嘗試過背景網址和列表樣式圖像,沒有好處。我已經改變了div類的名字。我已經嘗試將代碼放在一個ul或一個li中。我可以讓顯示沒有工作,但不是圖像。 `我無法得到一個圖像顯示之前ulli在一個div
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cloudstrike</title>
<meta charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width;" initial-scale=1">
</head>
<body>
<div id = "wrapper">
Piece of text inside a 500px width div centered on the page
<div id="site-title"><a href="#"></a></div>
<header>
<nav>
<ul>
<li><a href="#">T-Shirts</a></li>
<li><a href="#">Jackets</a></li>
<li><a href="#">Caps</a></li>
<li><a href="#">Toys</a></li>
</ul>
</nav>
</header>
<div style="clear:both;"></div>
<br>
<section>
<div class="banner">
<img src="img/cloud-9-banner.png" class="bannerimg">
</div>
<br>
<br>
<div class = "one">one
<h1>Blue Bolt</h1>
<ul>
<li> list number 1 </li>
<li> list number 2 </li>
<li> list number 3 </li>
</ul>
</div>
<div class="two">two
<h1>Blue Bolt</h1>
<ul>
<li> list number 1 </li>
<li> list number 2 </li>
<li> list number 3 </li>
</ul>
</div>
<div class="three">three
<h1>Blue Bolt</h1>
<ul>
<li> list number 1 </li>
<li> list number 2 </li>
<li> list number 3 </li>
</ul>
</div>
</secton>
<!-- end boxes -->
`
css style
html {overflow:auto;
height:100%;
font-size:62.5%;
font-family: Arial,Helvetica,sans-serif;
}
body{
margin: 0;
text-align: center;
background-color: #f1f1f1;
}
#wrapper{
max-width: 1000px;
background: #005397 none repeat scroll 0 0;
box-shadow: 0 0 35px #333;
margin: 0 auto;
height: 900px;
}
#site-title {
margin-right: 20px;
padding:1em 0 0 1em;
float:left;
}
#site-title a {
width:175px;
height:53px;
display:block;
text-decoration: none;
background: url('../img/cloud-strike-logo.png') no-repeat;
}
@font-face {
font-family: 'Trek';
src: url('fonts/Trek.eot'); /* IE9 Compat Modes */
src: url('fonts/Trek.eot?iefix') format('embedded-opentype'),
url('fonts/Trek.woff') format('woff'), /* Modern Browsers */
url('fonts/Trek.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/Trek.otf') format('opentype'), /* Safari, Android, iOS */
url('fonts/Trek.svg#Trek') format('svg'); /* Legacy iOS */
}
header {
overflow: auto;
border: 2px solid #000;
width:80%;
height:100px;
margin: 0px auto;
color: #FFFFFF
}
nav{
display: block;
float: right;
margin:.4em 0;
width: auto;
}
nav ul {
list-style: none;
margin: 0;
padding-left: 0
}
nav li {
float: left;
position: relative;
}
nav a{
display: block;
line-height: 3.333em;
padding: 0 .5em 0 .5em;
text-decoration: none;
font-family: "arial,times new roman";
font-size:100%;
color:#fff;
font-weight:none;
}
section {
width: 80%;
margin:2 auto;
height:450px;
display:block;
position: relative;
}
.banner {
background: #739ec2;
background: -moz-linear-gradient(#c0c0c0, #ffffff);
background: -o-linear-gradient(#c0c0c0, #ffffff);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c0c0c0), to(#ffffff)); /* older webkit syntax */
background: -webkit-linear-gradient(#c0c0c0, #ffffff);
width:98%;
height:210px;
display:block;
margin-top: 1%;
margin: 0 auto;
border-radius: 2px;
}
img.bannerimg {clear: both;
display: block;
margin-left: auto;
margin-right: auto;
padding:20px;
max-width: 90%;
height: auto;
}
#main {
display:block;
min-height:150px;
background:#4f4f4f;
margin:0 2em;
}
.one{
width:30%;
background: #fff none repeat scroll 0 0;
border-radius: 4px;
display: inline;
float: left;
margin-left: 1%;
min-height: 200px;
border:0px solid #000;
position: relative;
}
.two {
width:30%;
background: #fff none repeat scroll 0 0;
border-radius: 4px;
display: inline;
float: left;
margin-left: 4%;
min-height: 200px;
border:0px solid #000;
position: relative;
}
.three {
width: 30%;
background: #fff none repeat scroll 0 0;
border-radius: 4px;
display: inline;
float: right;
margin-right: 1%;
min-height: 200px;
border:0px solid #000;
position: relative;
}
.one ul
{
display:list-item;
}
.one ul li{
background-image: url(..img/blue-check.png);
}
.one h1 {
position: absolute;
color:#256091;
font-weight:normal;
margin-left: 1%;
padding-left: 1%;
font-size: 150%;
font-family: NettoOT arial;
}
.two ul
{
list-style: none;
}
.two ul li
{
background: url (../img/blue-check.png) no-repeat;
}
.two h1 {
position: absolute;
color:#256091;
font-weight:normal;
margin-left: 1%;
padding-left: 1%;
font-size: 150%;
font-family: NettoOT arial;
}
.three ul
{
list-style: none;
}
.three ul li
{
background: url (../img/blue-check.png) no-repeat;
}
.three h1 {
position: absolute;
color:#256091;
font-weight:normal;
margin-left: 1%;
padding-left: 1%;
font-size: 150%;
font-family: NettoOT arial;
}
#boxes p {
font-size:100%;
color:#333;
font-weight:normal;
margin:20px 20px 20px;
}
#footer{
width: 80%;
border: 2px solid #000;
height: 100px;
margin: 0px auto;
background: #6CEAF8;
}
#inner-box {
display:block;
min-height:150px;
background:#4f4f4f;
margin-top:10px;
}
#greybox ul {
list-style: none;
margin:0;
padding-left:1.3em;
}
#greybox li {
background-position:0px;
padding-left: 1em;
}
#greybox li a {
font-size:80%;
color:#fff;}
.footbox {
width:22%;
margin-right:3%;
float:left;
display:inline;
}
.footbox h2{
color: #b1a325;
}
.footboxlast {
width:24%;
float:right;
display:inline;
}
.footboxlast h2{
color: #b1a325;
}
#blackbar {display:block;
max-height:30px;
background:#c5b41c;
padding: 5px 20px; 5px 20px;
}
#blackbar p {font-size:70%;
color:#fff;
padding:0;
text-align:left;
}
#blackbar a {
color:#256091;
}
問題尋求幫助調試( 「**爲什麼不是這個代碼工作?**」)必須包括所期望的行爲,一個*特定的問題或錯誤*和*在問題本身**中重現**所需的最短代碼**。沒有**明確問題陳述**的問題對其他讀者沒有用處。請參閱:[如何創建一個最小化,完整和可驗證的示例。](http://stackoverflow.com/help/mcve) –
我只想在所有三個框中顯示所有ul li之前的複選框。如果我完成了一個,我可以管理剩下的事情。我想。一直在學習 –