0
Я потерял здесь. Я пытаюсь получить простой показ экрана галочки перед неустановленным списком. Я пробовал фон URL и стиль списка, ничего хорошего. Я изменил имя класса div. Я попытался разместить коды в одной или одной ли. я могу заставить дисплей работать, а не изображения. `Я не могу получить изображение перед ul li в 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 во всех трех ящиках. если я получу один, я могу управлять отдыхом. Думаю. все время учится –