1 / 1 / 1
Регистрация: 18.11.2014
Сообщений: 101
|
|
|
1
|
3 блок съехал ниже остальных, почему?
08.11.2015, 19:01. Показов 1185. Ответов 1
| HTML5 | 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
| <!DOCTYPE html>
<html>
<head>
<title>Main - Portfolio</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<div id="header">
<div id="logo"><img src="img/logo.png"></div>
<div id="contactu">
<table>
<tr><td><font>Телефон: +********** <br> E-mail: *****@gmail.com<br>Skype: ******</font></td></tr>
</table>
</div>
<div id="sortirovka">
<font>Сортувати за тематикою: <a href="#">Заробіток</a> |<a href="#">Інтернет-магазин</a> <br>Сортувати за типом: <a href="#">Сайт-візитка</a> |<a href="#">Тип2</a> |<a href="#">Тип3</a></font>
</div>
</div>
<div id="content">
<hr></hr><br><br>
<a href="http://best-random.besaba.com/" target="_blank">
<div class="block">
<div class="previev"><img src="img/1.png"></div>
<div class="description">
<div class="topic"><font>ЗАГОЛОВОК</font></div>
<div class="text"><font>ТЕКСТ.</font></div>
</div>
</div>
</a>
<a href="http://124124124124.esy.es/" target="_blank">
<div class="block">
<div class="previev"><img src="img/2.png"></div>
<div class="description">
<div class="topic"><font>ЗАГОЛОВОК</font></div>
<div class="text"><font>ТЕКСТ.</font></div>
</div>
</div>
</a>
<a href="#" target="_blank">
<div class="block">
<div class="previev"><img src="img/4.png"></div>
<div class="description">
<div class="topic"><font>ЗАГОЛОВОК</font></div>
<div class="text"><font>ТЕКСТ.</font></div>
</div>
</div>
</a>
<a href="#" target="_blank">
<div class="block">
<div class="previev"><img src="img/5.png"></div>
<div class="description">
<div class="topic"><font>ЗАГОЛОВОК</font></div>
<div class="text"><font>ТЕКСТ.</font></div>
</div>
</div>
</a>
<a href="http://web2.890m.com/" target="_blank">
<div class="block">
<div class="previev"><img src="img/3.png"></div>
<div class="description">
<div class="topic"><font>ЗАГОЛОВОК</font></div>
<div class="text"><font>ТЕКСТ.</font></div>
</div>
</div>
</a>
<hr></hr>
</div>
<div id="footer">
<font> © *** | 2014 - 2015</font>
</div>
</div>
</body>
</html> |
|
| CSS | 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
| body {
background: black;
background-image: url(img/bg.png);
background-repeat: no-repeat;
background-size: 100%;
text-align: left;
margin: 0 auto;
font-family: sans-serif;
}
font {
color: white;
}
a {
margin: 5px 0 0 5px;
color: darkgrey;
transition: all 0.5s;
}
a:hover {
color: white;
transition: all 0.5s;
}
hr {
width: 90%;
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
#main {
width: 1200px;
height: 1000px;
margin: 0 auto;
}
/*Header*/
#header {
width: 1200px;
height: 430px;
}
#logo {
float: left;
}
#contactu {
float: right;
margin: 20px 20px;
}
#contactu font {
font-style: italic;
}
#contactu table{
padding: 10px;
border: 1px solid #e3e3e3;
border-radius: 5px;
}
#sortirovka {
margin: 60px 90px 40px 90px;
float: left;
}
/**/
/*Content*/
#content {
width: 1200px;
height: 800px;
padding: 10px;
}
.block {
width: 380px;
height: 400px;
margin: 10px 9px;
float: left;
text-align: center;
white-space: normal;
transition: all 0.8s;
}
.block font {
color: white;
}
.block img {
height: 220px;
width: 370px;
box-shadow: 1px 1px 7px #777;
transition: all 0.6s;
}
.block img:hover {
transform: scale(1.25);
transition: transform 0.5s;
}
.previev {
width: 370px;
height: 220px;
background-color: #ffffff;
border: 5px solid white;
}
.description {
width: 380px;
height: 170px;
}
.topic {
padding: 10px;
font-weight: bold;
font-size: 18pt;
}
.topic font {
color: #b7b6b6;
}
.text {
text-align: left;
padding: 10px;
white-space: normal;
}
/**/
/*FOOTER*/
#footer {
text-align: center;
margin: 100px 0px 50px 0px;
} |
|
:
0
|
(
