Дараах холбоосоор татаж авна уу!
Tuesday, October 15, 2019
Sunday, May 5, 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>
<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>
<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>
<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>
<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>
<div
class="container">
<nav>
Цэсний
хэсгийн муж
</nav>
<section>
Мэдээний
хэсгийн муж 1
</section>
<section>
Мэдээний
хэсгийн муж 2
</section>
<section>
Мэдээний
хэсгийн муж 3
</section>
</div>
<footer>
Хөлний хэсгийн муж, бэхжүүлсэн </footer>
</body>
CSS
код
body { /* хуудасны их биеийн үндсэн хэлбэр тодорхойлох */
margin-bottom: 80px; /* доод талаас авах үндсэн зай*/
font-family:Verdana; /* үндсэн текстийн фонт */
text-align: center; } /* үндсэн текстийн зэрэгцүүлэлт */
header { /* толгой мужийн хэлбэр тодорхойлох*/
position: relative; /* мужийн байрлал тодорхойлох (харьцангуй) */
height: 70px; /* мужийн өндөр */
background-color: #E4FFFE; /* мужийн дэвсгэр өнгө */
border: solid blue 3px; /* мужийн хүрээний өнгө */
border-radius: 10px; } /* мужийн өнцөг */
.container { /* үндсэн мэдээний хэсгийн хэлбэр тодорхойлох */
position: relative;
border: solid red 3px;
border-radius: 10px;
height: 700px; }
nav { /* цэсний мужийн хэлбэр тодорхойлох */
position: absolute;
margin-left: 5px; /* зүүн захын зай */
margin-top: 5px; /* мужийн дээд талын обьект хүртэлх захын зай */
width: 200px; /* мужийн өргөн */
height: 400px; /* мужийн өндөр */
border: solid green 3px;
border-radius: 10px; }
section { /* мэдээний хэсгийн хэлбэр тодорхойлох */
/* Жич: Мужийн байрлал заагаагүй үед үндсэн тохиргоо нь статик байна */
margin-left: 210px;
margin-top: 10px;
height: 100px;
border: solid yellow 3px;
border-radius: 10px; }
footer { /* хөлний мужийн хэлбэр тодорхойлох */
position: fixed; /* мужийн байрлал (бэхжүүлсэн буюу ямар ч үед байрнаасаа хөдлөхгүй) */
bottom: 0;
left: 0;
right:0;
height: 70px;
background-color: white;
border: solid green 3px; }
</style>
Box sizing
HTML
код
<body>
<div
class="one"> өргөн ба өндөр + муж доторх зай + хүрээ = элементийн
бодит хэмжээ </div>
<div
class="two"> өргөн ба өндөр + муж доторх зай + хүрээ = элементийн
бодит хэмжээ </div>
</body>
CSS
код
<style>
/* Дотоод
хэлбэрийн 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, Баримтын
зарлалт >
<html
lang="en">
<head>
<meta
charset="utf-8"> <! HTML5, Encoding зарлалт >
<title>HTML5</title>
<style> /* дотоод
хэлбэрийн CSS эхлэл */
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>
<header> <! толгойн муж тодорхойлох
header таг >
<h1>Mongol
News</h1>
</header>
<nav> <! цэсний муж
тодорхойлох nav таг >
<ul>
<li>Мэдээ</li>
<li>Боловсрол</li>
<li>Нийгэм</li>
</ul>
</nav>
<section> <! мэдээний ерөнхий
муж тодорхойлох section
таг >
<h2>Мэдээний
хэсэг</h2>
<article> <! мэдээ
тодорхойлох article таг >
<h2>Мэдээ</h2>
<p>Hyper Text Markup Language буюу HTML
нь вэбийн үндсэн суурь хэл юм. 1990 онд анхны хувилбар гарснаас хойш өдгөө 5
дахь шинэчилсэн хувилбар нь (2008) одоо ч хөгжүүлэгдсээр байна.</p>
</article>
<article>
<h2>Мэдээлэл</h2>
<p>Hyper Text Markup Language буюу HTML
нь вэбийн үндсэн суурь хэл юм. 1990 онд анхны хувилбар гарснаас хойш өдгөө 5
дахь шинэчилсэн хувилбар нь (2008) одоо ч хөгжүүлэгдсээр байна.</p>
</article>
</section>
<footer> <! хөлний муж
тодорхойлох footer таг >
<p>©
2014 Mongol News</p>
</footer>
</body>
</html>
HTML4 хуудасны бүтэц
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!
HTML4, Баримтын зарлалт>
<html>
<head> <! толгой
хэсгийн эхлэл >
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8"> <!
Encoding зарлалт
>
<title>
HTML4 </title> <! хуудасны
гарчиг >
<style> /* дотоод
хэлбэрийн CSS эхлэл */
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> /* толгой
хэсгийн төгсгөл */
<body> <! их бие
хэсгийн эхлэл >
<div
id="header"> <! толгой
хэсгийн div таг,
header id-тай
холбогдсон>
<h1>Mongol
News</h1> <! толгой
хэсгийн гарчиг >
</div> <! хэсгийн
төгсгөл >
<div
id="menu"> <! цэсний
хэсгийн div таг,
menu id-тай холбогдсон>
<ul> <! жагсаалт
буюу цэсний текст тодорхойлох >
<li>Мэдээ</li>
<li>Боловсрол</li>
<li>Нийгэм</li>
</ul>
</div>
<div
id="content"> <! Мэдээний
хэсгийн div таг,
content id-тай
холбогдсон>
<h2>Мэдээний
хэсэг</h2>
<div
class="article"> <! Мэдээ
хэсгийн div таг,
article class-тай
холбогдсон>
<h2>Мэдээ</h2>
<p> Hyper Text Markup Language буюу
HTML нь вэбийн үндсэн суурь хэл юм. 1990 онд анхны хувилбар гарснаас хойш өдгөө
5 дахь шинэчилсэн хувилбар нь (2008) одоо ч хөгжүүлэгдсээр байна.</p> <! мэдээний
текст>
</div>
<div
class="article"> <! мэдээлэл
хэсгийн div таг,
article class-тай
холбогдсон>
<h2>Мэдээлэл</h2>
<p>Hyper Text Markup Language буюу HTML
нь вэбийн үндсэн суурь хэл юм. 1990 онд анхны хувилбар гарснаас хойш өдгөө 5
дахь шинэчилсэн хувилбар нь (2008) одоо ч хөгжүүлэгдсээр байна.</p>
</div>
</div>
<div
id="footer"> <! hөлний
хэсгийн div таг,
footer id-тай
холбогдсон>
<p>©
2018 Mongol News</p> <! хөлний
хэсгийн текст >
</div>
</body> <! их биеийн
төгсгөл >
</html>
Monday, April 15, 2019
Hot patotoes программын суулгац
Суулгацыг дараах холбоосоор татан авна уу
https://drive.google.com/file/d/1C07ioUlDBFkT_lpDL8kGjSOC8hTIvygI/view?usp=sharing
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
https://drive.google.com/file/d/1ejM7FVtkq5NkaK-YLf9lqnG1xi5DGbq7/view?usp=sharing
Sunday, March 24, 2019
Багшлах ур чадварын олимпиад 2019
Уралдааны удирдамжийг дараах холбоосоор татан авна уу
https://drive.google.com/file/d/1GE6jrWLz8bNBDuAkHmSQDMagBCNJHqvU/view?usp=sharing
Subscribe to:
Posts (Atom)