Шаблон

KenJoker · 7 Янв 2012

Сегодня решил сделать так скажем Rip

Самп-Рп,но много что изменил в css.

Время работы: 30 Min.

Что изменино: Сделал менюшку,округлил body,при наведении курсором на ссылки - Цвет меняется,в меню при на ведении курсором на ссылку появляется рамка,почти как в ВК.

В общем смотрите сами,скрин не сделал. От +са не откажусь!

PHP:

<html>
<head>
<title> ::: New Samp Server ::: </title>

<style>
body { 
background-color: rgb(25, 27, 33);
color: rgb(0, 0, 0);
display: block;
margin-bottom: 8px;
margin-left: 8px;
margin-right: 8px;
margin-top: 30px;
font-family:"Tahoma" sans-serif;
background-image: url("http://www.kyleeheuerphotography.com/sitezimages/background/website%20background.jpg");
 }

body a { 
color: #edbaff;
text-decoration: none;
font-family: serif;
font-size: 15px;
font-weight: 700;
 }
body a:hover { 
color: #dd89fb;
text-decoration: none;
font-family: serif;
font-size: 15px;
font-weight: 700;
 }

table.body { 
background-color: #7e7e7e;
border-bottom-color: rgb(255, 255, 255);
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(255, 255, 255);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(255, 255, 255);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(255, 255, 255);
border-top-style: solid;
border-top-width: 1px;
 }

td.HeaderImage { 
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://s011.radikal.ru/i318/1201/ed/485d44aa474c.png");
background-origin: padding-box;
background-position: 50% 0%;
background-repeat: no-repeat;
background-size: auto;
border-bottom-color: rgb(102, 102, 102);
border-bottom-style: solid;
border-bottom-width: 1px;
 }

td.HeaderLinks { 
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(157, 157, 157);
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat-x;
background-size: auto;
height: 30px;
border-bottom-color: #545454;
border-bottom-style: solid;
border-bottom-width: 1px;
 }
div.MenuRight { 
border-left-color: rgb(52, 57, 62);
border-left-style: solid;
border-left-width: 1px;
float: right;
margin-right: 10px;
text-indent: 10px;
 }

.HeaderLinks a{
color: #edbaff;
text-decoration: none;
font-family: serif;
font-size: 15px;
font-weight: 700;
}

.HeaderLinks a:hover{
color: #dd89fb;
text-decoration: none;
font-family: serif;
font-size: 15px;
font-weight: 700;
}

#header { 
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(116, 116, 116);
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
border-bottom-color: #9f9f9f;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #9f9f9f;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #9f9f9f;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #9f9f9f;
border-top-style: solid;
border-top-width: 1px;
color: rgb(214, 214, 214);
font-size: 11px;
font-weight: 700;
line-height: 140%;
padding-bottom: 7px;
padding-left: 10px;
padding-right: 10px;
padding-top: 7px;
position: relative;
width: 500px;
border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;border-top-left-radius: 5px;border-top-right-radius: 5px;
 }

#header2 { 
background-attachment: scroll;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0.102);
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
font-size: 13px;
font-weight: 700;
line-height: 140%;
padding-bottom: 7px;
padding-left: 10px;
padding-right: 10px;
padding-top: 7px;
position: relative;
width: 500px;
 }

#bar { 
padding-bottom: 10px;
padding-left: 4px;
padding-right: 0px;
padding-top: 5px;
width: 160px;
 }

#bar ol { 
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
 }

#bar ol li a:hover { 
background-attachment: scroll;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0.102);
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
text-decoration: none;
text-shadow: 1px 1px 1px rgb(34, 34, 34);
border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;border-top-left-radius: 5px;border-top-right-radius: 5px;
 }

#bar ol li a { 
background-attachment: scroll;
background-clip: border-box;
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
border-bottom-color: currentColor;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: currentColor;
border-left-style: none;
border-left-width: 0px;
border-right-color: currentColor;
border-right-style: none;
border-right-width: 0px;
border-top-color: currentColor;
border-top-style: none;
border-top-width: 0px;
display: block;
padding-bottom: 4px;
padding-left: 6px;
padding-right: 3px;
padding-top: 4px;
 }
</style>
</head>
<body>

<table class="body" cellspacing="0" align="center" width="700" height="600px" style="border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;border-top-left-radius: 5px;border-top-right-radius: 5px;">

<tbody>
    <tr>
      <td class="HeaderImage" valign="bottom" height="124px" colspan="2" > </td>
    </tr>
<tr>
  <td class="HeaderLinks" colspan="2">
    <div class="MenuRight">
      <a href="" class="menu">Скачать SAMP</a>
    </div>
    <div class="MenuRight">
      <a href="" class="menu">Форум</a>
    </div>
    <div class="MenuRight">
      <a href="" class="menu">Донат</a>
    </div>
    <div class="MenuRight">
      <a href="" class="menu">Аккаунт</a>
    </div>
    <div class="MenuRight">
      <a href="" class="menu">Мониторинг</a>
    </div>
  </td>
</tr>
<tr>
  <td valign="top" class="content" width="70%">
    <div class="title">
    <div id="header" style="float: left; width: 170px; color: #FF8C00;font-size: 14px;margin-left: 20px;margin-top: 20px;box-shadow: 2px 2px 2px rgb(82, 82, 82);"> Меню <br>
<div id="bar">
  <ol>
    <li id="l_ph">
      <a href=""> 
Форум
</a>
    </li>
    <li id="l_ph">
      <a href=""> 
Помощь
</a>
    </li>
    <li id="l_ph">
      <a href=""> 
Регистрация 
</a>
    </li>
  </ol>
</div>
</div>
   <div id="header" style="float: right; width: 430px; color: #FF8C00;font-size: 14px;margin-right: 20px;margin-top: 20px;box-shadow: 2px 2px 2px rgb(82, 82, 82);"> Welcome! <br><br>
<div style="color: #F2F2F2;">Добро пожаловать на сервер sa:mp ::: Бла,бла,бла ::: ...</div>
    </div>
  </td>
</tr>

</tbody>
</table>


</body>
</html>

---------- Post added at 12:05 ---------- Previous post was at 11:57 ----------

Критика приветствуется

Переход в группу "Пользователь"

Шаблон

KenJoker

Компетентный