Advertisement
Guest User

Untitled

a guest
Apr 20th, 2014
82
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.24 KB | None | 0 0
  1. вот HTML: <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>PrintShop</title>
  5. <meta charset="windows-1251">
  6. <link href="css/main.css" rel="stylesheet" type="text/css">
  7. </head>
  8. <body>
  9. <div id="page_align" class="b3radius">
  10. <div id="header">
  11. <div id="header_nav">
  12. <ul>
  13. <li><a href="#">Г</a></li>
  14. <li><a href="#">К</a></li>
  15. <li><a href="#">О</a></li>
  16. <li><a href="#">К</a></li>
  17. <li><a href="#">Н</a></li>
  18. <li><a href="#">П</a></li>
  19. <li><a href="#">О</a></li>
  20. <li><a href="#">О</a></li>
  21. </ul>
  22. <form method="" action="">
  23. <a href="#"><img src="images/search.png" alt="Поиск" width="15" class="search_img f_right"></a><input type="text" name="topsearch" placeholder="Поиск" class="b3radius">
  24. </form>
  25. </div>
  26. <div id="header_cont">
  27. <h1><span style="color: #197b30">Print</span>Shop</h1>
  28. <span class="h1description">Все бренды для вас!</span>
  29. <div class="header_right f_rigth">
  30. <div class="header_profile f_left">
  31. <div class="header_text f_left">
  32. <b>Nickname</b><br>
  33. <span>Новых сообщений: 0</span>
  34. </div>
  35. <div class="header_shit f_right"><img src="images/avatar.png" width="38" class="b3radius hp_photo"></div>
  36. <ul>
  37. <li>ELEMENT</li><br/>
  38. <li>ELEMENT</li><br/>
  39. <li>ELEMENT</li><br/>
  40. <li>ELEMENT</li><br/>
  41. <li>ELEMENT</li><br/>
  42. </ul>
  43. </div>
  44. <div class="header_buttons f_left">
  45. <ul>
  46. <li><a href="#">Правила на сайте</a></li>
  47. <li><a href="#">Оставить отзыв о сайте</a></li>
  48. </ul>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. <div id="sidebar" class="f_left">
  54. <div class="sb_header"><i></i>Навигация</div>
  55. <div class="sb_nav">
  56. <ul>
  57. <li><a href="#"><i></i>Element</a></li>
  58. <li><a href="#"><i style="background-position: "></i>Element</a></li>
  59. <li><a href="#"><i style="background-position: "></i>Element</a></li>
  60. <li><a href="#"><i style="background-position: "></i>Element</a></li>
  61. <li><a href="#"><i style="background-position: "></i>Element</a></li>
  62. <li><a href="#"><i style="background-position: "></i>Element</a></li>
  63. <li><a href="#"><i style="background-position: "></i>Element</a></li>
  64. <li><a href="#"><i style="background-position: "></i>Element</a></li>
  65. </ul>
  66. </div>
  67. <div class="sb_header"><i style="background-position: -15px 0"></i>Опрос</div>../
  68. <div class="sb_header"><i style="background-position: -30px 0"></i>Статистика</div>
  69. <div>
  70. </div>
  71. </div>
  72. <div id="content" class="f_rigth">
  73. </div>
  74. <div class="clr"></div>
  75. </div>
  76. </body>
  77. </html>
  78.  
  79. А вот CSS: * {
  80. margin: 0;
  81. padding: 0;
  82. outline: none;
  83. }
  84. body {
  85. background: url(../images/bg.png) #EAEAEA;
  86. font: 12px Arial, Tahoma, sans-serif;
  87. }
  88. * {
  89. text-decoration: none;
  90. }
  91. h1 {
  92. font-size: 18px;
  93. color: #555555;
  94. padding-top: 18px;
  95. padding-left: 22px;
  96. }
  97.  
  98. .header_buttons, .f_left ul li {
  99. float: left;
  100. margin-left: -8px;
  101. padding-left: 12px;
  102. margin-top: -1px;
  103. }
  104.  
  105. .header_right, .f_rigth {
  106. float: left;
  107. }
  108.  
  109. .f_rigth, .header_shit {
  110. float: right;
  111. }
  112.  
  113. .f_left, #header_nav ul li, #sidebar, h1, .header_buttons ul li {
  114. float: left;
  115. }
  116. .f_rigth, input[name=topsearch], .search_img, #content {
  117. float: right;
  118. }
  119. .h1description {
  120. color: #404040;
  121. font-size: 11px;
  122. position: absolute;
  123. left: 22px;
  124. bottom: 9px;
  125. }
  126. .b3radius, .header_buttons ul li {
  127. border-radius: 3px;
  128. -webkit-border-radius: 3px;
  129. -o-border-radius: 3px;
  130. -moz-border-radius: 3px;
  131. -ms-border-radius: 3px;
  132. -khtml-border-radius: 3px;
  133. }
  134. #page_align {
  135. width: 1000px;
  136. margin:35px auto;
  137. background: url(../images/pagebg.png); #FFF;
  138. box-shadow: 0px 1px 3px #DDDDDD;
  139. -webkit-box-shadow: 0px 1px 3px #DDDDDD;
  140. -o-box-shadow: 0px 1px 3px #DDDDDD;
  141. -moz-box-shadow: 0px 1px 3px #DDDDDD;
  142. overflow: hidden;
  143. }
  144. #header{
  145. height: 105px;
  146. border-bottom: solid 3px #d5dde8;
  147. background: #FFF;
  148. }
  149. #header_nav {
  150. height: 35px;
  151. border-bottom: solid 1px #F1F1F1;
  152. }
  153. #header_nav ul {
  154. list-style: none;
  155. }
  156. #header_nav ul li {
  157. border-right: solid 1px #F1F1F1;
  158. }
  159. #header_nav ul li:last-child {
  160. border-right: none;
  161. }
  162. #header_nav ul li a {
  163. color: #868686;
  164. line-height: 35px;
  165. padding:0 7px;
  166. display: block;
  167. }
  168. #header_nav ul li a:hover {
  169. background: rgba(0,0,0,.05);
  170. }
  171. input[name=topsearch] {
  172. margin-right: 9px;
  173. height: 25px;
  174. margin-top: 5px;
  175. border:none;
  176. box-shadow: inset 0px 1px 3px rgba(0,0,0,.1);
  177. background: #F0F0F0;
  178. padding: 0 5px;
  179. width: 150px;
  180.  
  181. }
  182. .search_img {
  183. margin-top: 10px;
  184. margin-right: 6px;
  185. }
  186. #header_cont {
  187. background: url(../images/top_shadow.png) repeat-x left top -3px;
  188. position: relative;
  189. height: 60px;
  190. }
  191. .header_right {
  192. /*outline: solid 1px #000;*/
  193. margin-top: 16px;
  194. margin-right: 8px;
  195. }
  196. .header_profile {
  197. height: 48px;
  198. border-right: solid 1px #f1f2f2;
  199. padding-right: 5px;
  200. background: url(../images/header_traingl.png) no-repeat center left;
  201. position: relative;
  202. }
  203. .header_profile:hover {
  204. background: rgba(0,0,0,.07);
  205. }
  206. .header_profile ul {
  207. list-style: none;
  208. display: none;
  209. padding-left: 25px;
  210. }
  211. .header_profile:hover ul {
  212. display: block;
  213. position: absolute;
  214. top: 47px;
  215. background: rgba(0,0,0,.20);
  216. right: 0px;
  217. width: 85%;
  218. color: #FFF;
  219. text-shadow: 1px 1px 1px rgba(0,0,0,.40);
  220. }
  221. .header_profile:hover ul li {
  222. text-align: right;
  223. padding: 3px 5px;
  224. }
  225. .header_text {
  226. color: #515151;
  227. max-width: 195px;
  228. text-align: right;
  229. margin-top: 7px;
  230. margin-right: 9px;
  231. }
  232. .header_text span {
  233. font-size: 10px;
  234. color: #B6B6B6;
  235. }
  236. .hp_photo {
  237. border: solid 3px #aba8a8;
  238. margin-top: 2px;
  239. }
  240. .header_buttons ul {
  241. list-style: none;
  242. padding: 9px;
  243. }
  244. .header_buttons ul li {
  245. background: #8f9CA8;
  246. margin-right: 15px;
  247. }
  248. .header_buttons ul li:hover {
  249. background: #96a8bf;
  250. }
  251. .header_buttons ul li:first-child {
  252. background: url(../images/header_rules.png) #8f9CA8 no-repeat center left 5px;
  253. }
  254. .header_buttons ul li:last-child {
  255. background: url(../images/header_add.png) #8f9CA8 no-repeat center left 6px;
  256. }
  257. .header_buttons ul li a {
  258. color: #FFF;
  259. padding: 6px;
  260. padding-left: 17px;
  261. display: block;
  262. }
  263. #sidebar {
  264. width: 195px;
  265. }
  266. .sb_header {
  267. background: url(../images/sb_header.png) repeat-x;
  268. height: 30px;
  269. color: #FFF;
  270. line-height: 32px;
  271. padding-left: 6px;
  272. }
  273. .sb_header>i {
  274. background: url(../images/sbh_sprite.png) no-repeat;
  275. display: block;
  276. width: 15px;
  277. height: 15px;
  278. float: left;
  279. margin-top: 8px;
  280. margin-right: 6px;
  281. }
  282. .sb_nav ul {
  283. list-style: none;
  284. }
  285. .sb_nav ul li {
  286. line-height: 31px;
  287. background: url(../images/sbn.png);
  288. padding-left: 11px;
  289.  
  290. }
  291. #content {
  292. width: 800px;
  293. height: 400px;
  294. }
  295. .clr {
  296. clear: both;
  297. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement