Миний блог сайт: April 2019

Monday, April 29, 2019

CSS3 Animation - 3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body{
padding:100px 0;
background-color:#c33
}

#heart {
position: relative;
width: 100px;
height: 90px;
animation: heartbeat 1s infinite;
margin:0 auto
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #fff;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;

transform: rotate(-45deg);

transform-origin: 0 100%;
}
#heart:after {
left: 0;

transform: rotate(45deg);

transform-origin :100% 100%;
}

@keyframes heartbeat
{
0%
{
transform: scale( .75 );
}
20%
{
transform: scale( 1 );
}
40%
{
transform: scale( .75 );
}
60%
{
transform: scale( 1 );
}
80%
{
transform: scale( .75 );
}
100%
{
transform: scale( .75 );
}
}

</style>
</head>

<body>
<div id="heart"></div>
<h1>Follow the heartbeat</h1>
</body>
</html>

CSS3 Animation-2

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.element {
height: 400px;
width: 400px;
background-color: red;
animation:
pulse 3s ease infinite alternate,
nudge 5s linear infinite alternate;
border-radius: 100%;
}

@keyframes pulse {
0%, 100% {
background-color: red;
}
50% {
background-color: orange;
}
}

@keyframes nudge {
0%, 100% {
transform: translate(0, 0);
}

50% {
transform: translate(150px, 0);
}

80% {
transform: translate(-150px, 0);
}
}

html, body {
height: 100%;
}

body {
display: flex;
align-items: center;
justify-content: center;
}
</style>

</head>

<body>

<div class="element"></div>
</body>
</html>

CSS3 Animataion

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}

@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Sunday, April 28, 2019

CSS3 Transition жишээ

<html>
<head>
<title>All</title>
<style>
body {font-family: arial; margin: 0; text-align: center}
div, img {
transition: 1s ease-in-out;
}
.one, .two, .three {
border: 5px solid transparent;
width: 200px;
height: 100px;
margin: 0 auto;
padding: 10px;
}
.one {
background-color: #B0CBC4;
}
.one:hover {
border: #0000FF;
background-color: #FF0000;
border-radius:50%;
}
.two {
background-color: #9F908F;

}
.two:hover {
border: 5px inset #9F908F;
background-color: #E0CABB;
transform: rotateZ(-30deg);
}
.three {
background-color: #FBE2A9;
border: 5px solid #FFD18F;
outline: 5px solid transparent;
}
.three:hover {
outline: 5px solid #9E8463;
outline-offset: 5px;
}
.four {
width: 200px;
height: 100px;
background-color: #95A1B1;
margin: 0 auto;
}
.four:hover {
width: 250px;
height: 80px;
}
.five {
width: 100px;
height: 100px;
background-color: #E0CABB;
margin: 0 auto;
position: relative;
left: 50px;
}
.five:hover {
left: -50px;
}
img:hover {opacity: 0.2;}
.six {
width: 200px;
height: 200px;
margin: 0 auto;
background: url("ball.png");
background-repeat: no-repeat;
background-position: bottom center;
}
.six:hover {
background-position: top center;
}

}
</style>
</head>
<body>
<div class="box"><div class="one"> Хүрээ, дэвсгэр өнгө, хэлбэр

</div></div> <br>
<div class="box"><div class="two"> Хэлбэр, дэвсгэр өнгө

</div></div> <br>
<div class="box"><div class="three">Гадна хүрээ </div></div>

<br>
<div class="box"><div class="four"> Хэмжээ </div></div> <br>
<div class="box"><div class="five"> Байрлал </div></div> <br>
<div class="box"><div> Уусалт </div> <img src="car.jpeg">

</div> <br>
<div class="box"><div class="six"> Дэвсгэр зургийн байрлал

</div></div> <br>
</body>
</html>

Monday, April 22, 2019

Хуудсыг мужид хуваах

HTML код

<body>

<header> Толгой хэсгийн муж </header>

<nav>

Цэсний хэсгийн муж

</nav>

Мэдээний хэсгийн муж 1

</section>

Мэдээний хэсгийн муж 2

</section>

Мэдээний хэсгийн муж 3

</section>

</div>

<footer> Хөлний хэсгийн муж, бэхжүүлсэн </footer>

</body>

CSS код

Box sizing

HTML код

<body>

<div class="one"> өргөн ба өндөр + муж доторх зай + хүрээ = элементийн бодит хэмжээ </div>

<div class="two"> өргөн ба өндөр + муж доторх зай + хүрээ = элементийн бодит хэмжээ </div>

</body>

CSS код

.one { /* one нэртэй класс зарлаж байна */

width: 500px; /* мужийн өргөн */

margin: 20px auto; /* мужийн гадна талын зай */

border: solid yellow 5px; } /* мужийн хүрээ, түүний өнгө, хэмжээ */

.two { /* two нэртэй класс зарлаж байна */

width: 500px; /* мужийн өргөн */

margin: 20px auto; /* мужийн гадна талын зай */

padding: 50px; /* мужийн хүрээ болон доторх обьект хоорондын зай */

border: solid blue 5px; } /* мужийн хүрээ, түүний өнгө, хэмжээ */

</style>

Sunday, April 21, 2019

HTML5 хуудасны бүтэц

<!DOCTYPE html> <! HTML5, Баримтын зарлалт >

<head>

body { /* вэбийн ерөнхий хэлбэр тодорхойлох */

font-family: Verdana;

font-size: 0.9em; }

header, footer { /* хуудасны толгой болон хөл мужийн хэлбэр тодорхойлох */

padding: 10px;

color: white;

background-color: black; }

section { /* ерөнхий мэдээний мужийн хэлбэр тодорхойлох */

margin: 5px;

padding: 10px;

background-color: lightgrey; }

article { /* мэдээ оруулах мужийн хэлбэр */

margin: 5px;

padding: 10px;

background-color: white; }

nav ul { /* хуудасны цэс мужийн хэлбэр */

padding: 0; }

nav ul li { /* цэсний текстийн хэлбэр */

display: inline;

margin: 5px; }

</style> <! дотоод хэлбэрийн CSS төгсгөл >

</head>

<body>

<h1>Mongol News</h1>

</header>

<ul>

<li>Мэдээ</li>

<li>Боловсрол</li>

<li>Нийгэм</li>

</ul>

</nav>

<h2>Мэдээний хэсэг</h2>

<h2>Мэдээ</h2>

<p>Hyper Text Markup Language буюу HTML нь вэбийн үндсэн суурь хэл юм. 1990 онд анхны хувилбар гарснаас хойш өдгөө 5 дахь шинэчилсэн хувилбар нь (2008) одоо ч хөгжүүлэгдсээр байна.</p>

</article>

<h2>Мэдээлэл</h2>

</article>

</section>

</footer>

</body>

</html>

HTML4 хуудасны бүтэц

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <! HTML4, Баримтын зарлалт>

<html>

body { /* вэбийн ерөнхий хэлбэр тодорхойлох */

font-family: Verdana; /* үндсэн текстийн фонт */

font-size: 0.9em; } /* үндсэн текстийн хэмжээ */

div#header, div#footer { /* хуудасны толгой болон хөл хэсгийн хэлбэр тодорхойлох id */

padding: 10px; /* дотор талын зай */

color: white; /* дотор обьектын өнгө */

background-color: black; } /* хэсгийн дэвсгэр өнгө */

div#content { /* хуудасны мэдээний хэсгийн хэлбэр тодорхойлох id */

margin: 5px; /* гадна талын зай */

padding: 10px;

background-color: lightgrey; }

div.article { /* хуудасны мэдээ оруулах хэсгийн хэлбэр тодорхойлох класс */

margin: 5px;

padding: 10px;

background-color: white; }

div#menu ul { /* хуудасны цэсний хэсгийн хэлбэр тодорхойлох id */

padding: 0; }

div#menu ul li { /* цэсний текстийн хэсгийн хэлбэр тодорхойлох id */

display: inline;

margin: 5px; }

</style> /* дотоод хэлбэрийн CSS төгсгөл */

</head> /* толгой хэсгийн төгсгөл */

<h1>Mongol News</h1> <! толгой хэсгийн гарчиг >

</div> <! хэсгийн төгсгөл >

<li>Мэдээ</li>

<li>Боловсрол</li>

<li>Нийгэм</li>

</ul>

</div>

<h2>Мэдээний хэсэг</h2>

<h2>Мэдээ</h2>

<p> Hyper Text Markup Language буюу HTML нь вэбийн үндсэн суурь хэл юм. 1990 онд анхны хувилбар гарснаас хойш өдгөө 5 дахь шинэчилсэн хувилбар нь (2008) одоо ч хөгжүүлэгдсээр байна.</p> <! мэдээний текст>

</div>

<h2>Мэдээлэл</h2>

</div>

</div>

</body> <! их биеийн төгсгөл >

</html>

Monday, April 15, 2019

Хурдан бичгийн Typer программын суулгац

Дараах холбоосоор татан авна уу

http://share.hiub.mn/download.htm?id=4nv8rsrmlrm2j8isgtqbhdkvm9&fbclid=IwAR1wAt54cuvENcJgr0CiQxZZJEfJb0uKtNf6eTh3TVdCpeylmB5b5BRiSfE

Hot patotoes программын суулгац

Суулгацыг дараах холбоосоор татан авна уу

https://drive.google.com/file/d/1C07ioUlDBFkT_lpDL8kGjSOC8hTIvygI/view?usp=sharing

Monday, April 8, 2019

Dreamweaver программын хичээл

Хичээлийг дараах холбоосоор татан авч үзнэ ү

https://drive.google.com/file/d/1ejM7FVtkq5NkaK-YLf9lqnG1xi5DGbq7/view?usp=sharing