Follow along with the video below to see how to install our site as a web app on your home screen.
Бележка: This feature may not be available in some browsers.
body {
width: 800px;
margin: 50 auto;
}
.logo {
height: 50px;
background: red;
border: 2px solid black;
}
.ad {
height: 100px;
background: green;
margin-top: 10px;
border: 2px solid black;
}
.content {
width: 480px;
float: left;
min-height: 414px;
background: yellow;
margin-top: 10px;
border: 2px solid black;
}
.righttop {
width: 298px;
float: right;
min-height: 200px;
background: orange;
margin-top: 10px;
border: 2px solid black;
}
.rightbottom {
width: 298px;
float: right;
min-height: 200px;
background: brown;
margin-top: 10px;
border: 2px solid black;
}
.footer {
height: 50px;
background: blue;
margin-top: 438px;
border: 2px solid black;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="style.css" type="text/css">
<title>asd</title>
</head>
<body>
<div class="logo">sadas</div>
<div class="ad">sadas</div>
<div class="content">sadas</div>
<div class="righttop">sadas</div>
<div class="rightbottom">sadas</div>
<div class="footer">sadas</div>
</body>
</html>
body {
width: 800px;
margin: 50 auto;
}
#logo {
height: 50px;
background: red;
border: 2px solid black;
}
#search {
height: 50px;
background: grey;
border-left: 2px solid black;
border-right: 2px solid black;
}
#ad {
height: 100px;
background: green;
border: 2px solid black;
}
#wrapper {
padding: 9px;
border: 1px solid red;
min-height: 405px;
}
#content {
width: 490px;
float: left;
min-height: 400px;
background: yellow;
border: 2px solid black;
}
#righttop {
width: 284px;
float: right;
min-height: 200px;
background: orange;
border-top: 2px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black;
}
#rightbottom {
width: 284px;
float: right;
min-height: 198px;
background: brown;
border-right: 2px solid black;
border-bottom: 2px solid black;
}
#footer {
clear: both;
height: 50px;
background: blue;
border: 2px solid black;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="stylen.css" type="text/css">
<title>asd</title>
</head>
<body>
<div id="logo">sadas</div>
<div id="search">sadas</div>
<div id="ad">sadas</div>
<div id="wrapper">
<div id="content">sadas</div>
<div id="righttop">sadas</div>
<div id="rightbottom">sadas</div>
</div>
<div id="footer">sadas</div>
</body>
</html>
skatebord каза:style.css
index.htmlКод:body { width: 800px; margin: 50 auto; } #logo { height: 50px; background: red; border: 2px solid black; } #search { height: 50px; background: grey; border-left: 2px solid black; border-right: 2px solid black; } #ad { height: 100px; background: green; border: 2px solid black; } #wrapper { padding: 9px; border: 1px solid red; min-height: 405px; } #content { width: 490px; float: left; min-height: 400px; background: yellow; border: 2px solid black; } #righttop { width: 284px; float: right; min-height: 200px; background: orange; border-top: 2px solid black; border-right: 2px solid black; border-bottom: 2px solid black; } #rightbottom { width: 284px; float: right; min-height: 198px; background: brown; border-right: 2px solid black; border-bottom: 2px solid black; } #footer { clear: both; height: 50px; background: blue; border: 2px solid black; }
Demo!Код:<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <link rel="stylesheet" href="stylen.css" type="text/css"> <title>asd</title> </head> <body> <div id="logo">sadas</div> <div id="search">sadas</div> <div id="ad">sadas</div> <div id="wrapper"> <div id="content">sadas</div> <div id="righttop">sadas</div> <div id="rightbottom">sadas</div> </div> <div id="footer">sadas</div> </body> </html>