Tuesday, April 28, 2015
Index ба Main CSS бичилт
Ангилал:
HTML хичээл
Бүтээл хуудас болон Үндсэн Хэлбэржүүлэлтийн кодыг орууллаа.
Дутуу хийсэн хүүхдүүд нь гүйцээгээрэй.
Өөрсдийн бичсэн кодтойгоо харьцуулан алдаагаа олж засаж аваарай.
Main.css
***************************************************************
/***********************
Үндсэн тохиргоо
************************/
body {
font-family: 'Open Sans', sans-serif;
}
#wrapper{
max-width:940px;
margin: 0 auto;
padding: 0 5%;
}
a { text-decoration: none;
}
img {
max-width: 100%;
}
/********************
Хуудас: Миний бүтээлүүд
********************/
#gallery{
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li p {
margin: 0;
padding: 5%;
font-size: 14px;
color: #bdc3c7;
}
/*************************
Толгойн хэлбэржүүлэлт
**************************/
header {
float:left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
text-align:center;
margin: 0;
}
h1 {
font-family: 'Lobster', sans-serif;
margin: 15px 0;
font-size: 28px;
font-weight: normal;
line-height: 14px;
}
h2 {
font-size: 12px;
margin: -5px 0 0;
font-weight: normal;
}
/***********************
Цэсний хэлбэржүүлэлт
***********************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li{
display: inline-block;
}
/**********************
Хөлний хэлбэржүүлэлт
*************************/
footer {
font-size: 12px;
text-align:center;
padding-top: 50px;
color: #ccc;
clear: both;
}
/**************************
Өнгөний хэлбэржүүлэлт
***************************/
body {
background-color: #fff;
color: #999;
}
header {
background-color: #6ab47b;
border-color : #599a68;
font-family: lobster;
}
nav {
background-color: #599a68;
}
h1,h2 {
color: #fff
}
a {
color: #6ab47b;
}
nav a, nav a:visited:{
color: #fff;
}
nav a.selected, nav a:hover {
color: #32673f;
}
**************************************************************************
Index.html
**************************************************************************
<html>
<head>
<link rel="stylesheet" type="text/css" href="normalize.css">
<link href='http://fonts.googleapis.com/css?family=Lobster|Bree+Serif|Pacifico&subset=latin,cyrillic,latin-ext' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Б.Ган-Эрдэнэ | 11-р сургууль</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Б.Ган-Эрдэнэ</h1>
<h2>Мэдээлэл зүйн багш</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Минйи бүтээлүүд</a></li>
<li><a href="about.html">Миний тухай</a></li>
<li><a href="contact.html">Холбоо барих</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<img src="image/bee.gif" alt="Зөгий">
<p> Нисэж буй зөгий</p>
</li>
<li>
<img src="image/city.gif" alt="Хот">
<p>Миний бүтээсэн хот</p>
</li>
<li>
<img src="image/nature.gif" alt="Хөдөө">
<p> Хөдөө талын үзэсгэлэн </p>
</li>
</ul>
</section>
</div>
<footer>
<a href="http://facebook.com/ganerdene1.bat"><img src="image/facebook-wrap.png" ></a>
<a href="http://twitter.com/ganfass"><img src="image/twitter-wrap.png"></a>
<p> ©|2015 Б.Ган-Эрдэнэ</p>
</footer>
</body>
</html>
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment