I .
JavaScript.
JavaScript .
( , ). , . , , .
, JavaScript. , , .
, . . : ; ; . , , , 100, "Hello world". , .
, ( , ), . , JavaScript , . , NaN ( ).
| / | ||
| + | . , . | |
| - | . | |
| - | . | |
| * | . | |
| / | . , . | |
| % ( ) | , . , . |
. .
. , , . .
, true false. , , . , , , . , false. / /, /. / , / , . , NaN false. .
|
|
|
, . if.
32- , , . , . . , , , , .
.
25. Web?
- #123ABC.
, : . #ABC, #AABBCC.
- , green, black. , , , .
- rgb(*,*,*), * 0 255, (, , ) .
- rgba(*,*,*,*), 3 * , 0 255, * (-), 0 1.
.
, .
1) , . , (.1).
. 1. .
2) JavaScript , . Alert (). (. 2).
. 2. .
.
index.html.
<!DOCTUPE html>
<html>
<head>
<meta charset="utf-8">
<link href="style/style.css" rel="stylesheet" media="all">
<script type="text/javascript" src="js/close.js"></script>
<title>Happy!</title>
</head>
|
|
|
<body>
<h1><span>Happy!</span></h1>
<div class="wr">
<img src="img/one.jpg" height="100%" width="100%">
<h2><span>, <br> .</span></h2>
<ul id="navbar">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="about.html"> </a></li>
</ul>
</div>
<div class="leftText">
<div style="text-align: center;"><b><br>
<img style="width: 398px; height: 226px;" alt="korp" src="img/korp.jpg"></b></div>
</div>
<div class="centerText">
<div style="text-align: center;"><b> <br>
<img style="width: 398px; height: 226px;" alt="bird" src="img/bird.jpg"></b></div>
</div>
<div class="rightText">
<div style="text-align: center;"><b> <br>
<img style="width: 398px; height: 226px;" alt="utr1" src="img/s6.jpg"></b></div>
</div>
<div class="clearfx">
</div>
<div class="teloText">
<p><b> .
.
.
, ,
.</b>
</p>
</div>
<div class="phone">
T. 8-800-000-00-00
</div>
</body>
</html>
.
style.css.
body
{
display:block;
background-color: #ffffff;
margin: 5px;
padding:0;
width:99%;
}
.wr
{
display:block;
margin: 0;
padding: 0;
width:100%;
height:40%;
}
h2 {
position: absolute;
top: 60px;
left: 10px;
width: 100%;
}
h2 span {
color: white;
font: bold 24px/50px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h1 {
position: absolute;
top: 10px;
left: 10px;
width: 100%;
}
h1 span {
color: white;
font: bold 24px/50px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
.leftText
{
display:block;
float: left; /* */
background: #fffafa;
border-style:outset;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
border: 1px solid black; /* */
padding: 10px; /* */
margin: 5px; /* */
width: 30%; /* */
}
.rightText
{
display:block;
float: right; /* */
background: #fffafa;
border-style:outset;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
border: 1px solid black; /* */
padding: 10px; /* */
margin: 5px; /* */
width: 30%; /* */
}
.centerText{
display:block;
float: left; /* */
background: #fffafa;
border-style:outset;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
border: 1px solid black; /* */
padding: 10px; /* */
margin: 5px; /* */
margin-left: 2%;
width: 30%; /* */
}
.clearfx
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.teloText
{ display:block;
margin: 10px;
padding: 5px;
|
|
|
font-size: 20px;
background: #fffafa;
border-style:outset;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.phone
{
position:absolute;
margin: 5px;
padding: 5px;
right: 5px;
top: 10px;
font-size: 30px;
color: rgb(106, 56, 255);
z-index:1;
}
.teloTextAbout
{
display:block;
margin: 10px;
margin-left: 20%;
padding: 5px;
font-size: 20px;
background: #fffafa;
border-style:outset;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
width:60%;
}
/*//////////////////////////////////////*/
#navbar {
margin: 0;
padding: 0;
list-style-type: none;
}
#navbar li { display: inline; }
#navbar {
margin: 0;
padding: 0;
list-style-type: none;
border: 2px solid #0066FF;
width: 100%;
text-align: center;
background-color:rgba(0, 0, 0, 0.7);
position:absolute;
top:230px;
}
#navbar a {
color: #fff;
padding: 5px 10px;
text-decoration: none;
font-weight: bold;
display: inline-block;
width: 100px;
}
#navbar a:hover {
border-radius: 20px 5px;
background-color: #0066FF;
}
.
close.js.
onbeforeunload = function(e){
if(confirm('Are you nuts? Do you really want to leave me?')){
return 'OK, Good Bye then';
}
else {
e = e || event;
if(e.preventDefault){e.preventDefault();}
e.returnValue = false;
return 'Are you sure?';
}
}
