css oeil.html
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css oeil.html相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Oeil de Sauron</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<!--Ligne 1-->
<div class="row">
<div class="col-xs-1 gris"></div>
<div class="col-xs-1 col-xs-offset-9 gris"></div>
</div>
<!--Ligne 2-->
<div class="row">
<div class="col-xs-1 gris"></div>
<div class="col-xs-1 col-xs-offset-3 orange"></div>
<div class="col-xs-1 jaune"></div>
<div class="col-xs-1 orange"></div>
<div class="col-xs-1 col-xs-offset-3 gris"></div>
</div>
<!--Ligne 3-->
<div class="row">
<div class="col-xs-1 gris"></div>
<div class="col-xs-1 col-xs-offset-2 orange"></div>
<div class="col-xs-1 jaune"></div>
<div class="col-xs-1 noir"></div>
<div class="col-xs-1 jaune"></div>
<div class="col-xs-1 orange"></div>
<div class="col-xs-1 col-xs-offset-2 gris"></div>
</div>
<!--Ligne 4-->
<div class="row">
<div class="col-xs-1 gris"></div>
<div class="col-xs-1 gris"></div>
<div class="col-xs-1 orange"></div>
<div class="col-xs-1 orange"></div>
<div class="col-xs-1 jaune"></div>
<div class="col-xs-1 noir"></div>
<div class="col-xs-1 jaune"></div>
<div class="col-xs-1 orange"></div>
<div class="col-xs-1 orange"></div>
<div class="col-xs-1 gris"></div>
<div class="col-xs-1 gris"></div>
</div>
<!--Ligne 5-->
<div class="row">
<div class="col-xs-1 gris"></div>
<div class="col-xs-1 gris"></div>
<div class="col-xs-1 col-xs-offset-1 orange"></div>
<div class="col-xs-1 jaune"></div>
<div class="col-xs-1 noir"></div>
<div class="col-xs-1 jaune"></div>
<div class="col-xs-1 orange"></div>
<div class="col-xs-1 col-xs-offset-1 gris"></div>
<div class="col-xs-1 gris"></div>
</div>
<!--Ligne 6-->
<div class="row">
<div class="col-xs-1 gris"></div>
<div class="col-xs-1 gris"></div>
<div class="col-xs-1 gris"></div>
<div class="col-xs-1 col-xs-offset-1 orange"></div>
<div class="col-xs-1 jaune"></div>
<div class="col-xs-1 orange"></div>
<div class="col-xs-1 col-xs-offset-1 gris"></div>
<div class="col-xs-1 gris"></div>
<div class="col-xs-1 gris"></div>
</div>
<!--Ligne 7-->
<div class="row">
<div class="col-xs-1 col-xs-offset-1 gris"></div>
<div class="col-xs-1 gris"></div>
<div class="col-xs-1 gris"></div>
<div class="col-xs-1 col-xs-offset-3 gris"></div>
<div class="col-xs-1 gris"></div>
<div class="col-xs-1 gris"></div>
</div>
<!--Ligne 8-->
<div class="row">
<div class="col-xs-1 col-xs-offset-2 gris"></div>
<div class="col-xs-1 gris"></div>
<div class="col-xs-1 gris"></div>
<div class="col-xs-1 gris"></div>
<div class="col-xs-1 gris"></div>
<div class="col-xs-1 gris"></div>
<div class="col-xs-1 gris"></div>
</div>
<!--Ligne 9-->
<div class="row">
<div class="col-xs-1 col-xs-offset-3 gris"></div>
<div class="col-xs-1 gris"></div>
<div class="col-xs-1 gris"></div>
<div class="col-xs-1 gris"></div>
<div class="col-xs-1 gris"></div>
</div>
<!--Ligne 10-->
<div class="row">
<div class="col-xs-1 col-xs-offset-4 gris"></div>
<div class="col-xs-1 gris"></div>
<div class="col-xs-1 gris"></div>
</div>
<!--Ligne 11-->
<div class="row">
<div class="col-xs-1 col-xs-offset-4 gris"></div>
<div class="col-xs-1 gris"></div>
<div class="col-xs-1 gris"></div>
</div>
</div>
</body>
</html>
.gris, .jaune, .orange, .noir {
border: 1px solid #8c8c8c;
padding-top: 8.3%;
}
.gris {
background-color: #333333;
}
.orange {
background-color: #f98006;
}
.jaune {
background-color: #ffc61a;
}
.noir {
background-color: black;
}
@media (max-width: 600px) {
body {min-width: 385px;}
}
以上是关于css oeil.html的主要内容,如果未能解决你的问题,请参考以下文章
css oeil_sauron_bootstrap.html