KenJoker
Компетентный
Приветствую всех 
Сегодня вот решил переделать Гл.Страницу Сайта ВКонтате.Ру И вот смотрите что получилось,кому что не понравилась,пишите,в след. раз учту.
Время работы: 20 Минут.
Что изменил: Мною было изменинно следуйщее: Поменял местами side_bar с page_body,то-есть меню было слево,стало с право,а "Тело" страницы перенес в лево.
Также при наведении курсором на ссылочку в меню,появляется такая так скажем "рамочка" Оттенка свело-голубого цвета и светлая тень текста.
Шапка "page_header" Да,изменил текст в шапке,было "Vk" Стало "Pawno-Info.Ru"
Страница сама по себе удобна в её редактировании,но я подчеркну: Если кто будет ставить себе,то указывайте оригинал сайта,вот так <style> Дизай Vk.Com </style>.
Если вас интересует как сдeлать кнопочки как в Вконтакте,обращайтесь в "PM"
Смотрим:
Все мои работы:
Сегодня вот решил переделать Гл.Страницу Сайта ВКонтате.Ру И вот смотрите что получилось,кому что не понравилась,пишите,в след. раз учту.Время работы: 20 Минут.
Что изменил: Мною было изменинно следуйщее: Поменял местами side_bar с page_body,то-есть меню было слево,стало с право,а "Тело" страницы перенес в лево.
Также при наведении курсором на ссылочку в меню,появляется такая так скажем "рамочка" Оттенка свело-голубого цвета и светлая тень текста.
Шапка "page_header" Да,изменил текст в шапке,было "Vk" Стало "Pawno-Info.Ru"
Страница сама по себе удобна в её редактировании,но я подчеркну: Если кто будет ставить себе,то указывайте оригинал сайта,вот так <style> Дизай Vk.Com </style>.
Если вас интересует как сдeлать кнопочки как в Вконтакте,обращайтесь в "PM"
Смотрим:
Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!
Все мои работы:
Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!
PHP:
<html>
<head>
<title> ВК </title>
<style>
body {
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(255, 255, 255);
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
direction: ltr;
font-family: "tahoma", "arial", "verdana", sans-serif, "Lucida Sans";
font-size: 11px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
}
body a {
color: #7295b2;
text-decoration: none;
font-family: "Tahoma";
font-size: 13px;
font-weight: 700;
}
body a:hover {
color: #5e86a4;
}
.scroll_fix_wrap {
direction: ltr;
text-align: left;
}
#global_prg {
position: absolute;
z-index: 400;
}
#page_layout {
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: relative;
width: 791px;
z-index: 6;
}
#page_header {
height: 40px;
}
#side_bar {
float: right;
margin-right: 5px;
padding-bottom: 10px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
width: 126px;
border-right-color: rgb(217, 224, 231);
border-right-style: solid;
border-right-width: 1px;
border-left-color: rgb(217, 224, 231);
border-left-style: solid;
border-left-width: 1px;
border-bottom-color: rgb(217, 224, 231);
border-bottom-style: solid;
border-bottom-width: 1px;
}
#page_header.p_head1 .back {
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(78, 114, 154);
background-image: url("http://s011.radikal.ru/i317/1201/68/3e9606562469.gif");
background-origin: padding-box;
background-position: 0px -43px;
background-repeat: repeat-x;
background-size: auto;
}
#page_header .back {
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(78, 114, 154);
background-image: url("http://vk.com/images/hat.gif");
background-origin: padding-box;
background-position: 0px -43px;
background-repeat: repeat-x;
background-size: auto;
height: 40px;
position: absolute;
width: 100%;
}
#page_header.p_head1 .left {
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(78, 114, 154);
background-image: url("http://s011.radikal.ru/i317/1201/68/3e9606562469.gif");
background-origin: padding-box;
background-position: 0px -1px;
background-repeat: repeat;
background-size: auto;
width: 150px;
}
#page_header .left {
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(78, 114, 154);
background-image: url("http://vk.com/images/hat.gif");
background-origin: padding-box;
background-position: 0px -1px;
background-repeat: repeat;
background-size: auto;
height: 40px;
left: 0px;
position: absolute;
width: 134px;
}
#page_header.p_head1 .right {
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(78, 114, 154);
background-image: url("http://vk.com/images/hatvk3.gif");
background-origin: padding-box;
background-position: 100% -1px;
background-repeat: repeat;
background-size: auto;
}
#page_header .right {
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(78, 114, 154);
background-image: url("http://vk.com/images/hat.gif");
background-origin: padding-box;
background-position: 100% -1px;
background-repeat: repeat;
background-size: auto;
height: 40px;
position: absolute;
right: 0px;
width: 10px;
}
#page_body {
float: left;
font-size: 11px;
margin-left: 10px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 15px;
padding-top: 0px;
width: 631px;
}
#header_wrap1 {
border-bottom-color: rgb(243, 243, 243);
border-bottom-style: solid;
border-bottom-width: 0px;
border-left-color: rgb(243, 243, 243);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(243, 243, 243);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(243, 243, 243);
border-top-style: solid;
border-top-width: 0px;
}
#header {
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(233, 237, 241);
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
border-bottom-color: rgb(217, 224, 231);
border-bottom-style: solid;
border-bottom-width: 0px;
border-left-color: rgb(217, 224, 231);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(217, 224, 231);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(217, 224, 231);
border-top-style: solid;
border-top-width: 0px;
color: rgb(96, 115, 135);
font-size: 11px;
font-weight: 700;
line-height: 140%;
padding-bottom: 7px;
padding-left: 10px;
padding-right: 10px;
padding-top: 7px;
position: relative;
}
#header1 {
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(233, 237, 241);
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
border-bottom-color: rgb(217, 224, 231);
border-bottom-style: solid;
border-bottom-width: 0px;
border-top-color: rgb(217, 224, 231);
border-top-style: solid;
border-top-width: 0px;
color: rgb(96, 115, 135);
font-size: 11px;
font-weight: 700;
line-height: 140%;
padding-bottom: 7px;
padding-left: 10px;
padding-right: 10px;
padding-top: 7px;
position: relative;
}
#header h1 {
font-size: 11px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: hidden;
overflow-y: hidden;
}
#header1 h1 {
font-size: 11px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: hidden;
overflow-y: hidden;
}
#wrap_between {
height: 0px;
overflow-x: hidden;
overflow-y: hidden;
}
#wrap2 {
border-bottom-color: rgba(100, 100, 100, 0.07843);
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgba(100, 100, 100, 0.07843);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgba(100, 100, 100, 0.07843);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgba(100, 100, 100, 0.07843);
border-top-style: solid;
border-top-width: 0px;
}
#wrap1 {
border-bottom-color: rgb(217, 224, 231);
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(217, 224, 231);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(217, 224, 231);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(217, 224, 231);
border-top-style: solid;
border-top-width: 0px;
}
#index, #ij_block {
line-height: 160%;
}
#index .content, #ij_block .content {
padding-bottom: 10px;
padding-left: 30px;
padding-right: 30px;
padding-top: 5px;
}
#side_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;
}
#side_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;
}
#side_bar ol li a:hover {
background-attachment: scroll;
background-clip: border-box;
background-color: #e6ecfa;
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
text-decoration: none;
text-shadow: 0px 1px 1px #FFF;
}
h2 {
border-bottom-color: rgb(218, 225, 232);
border-bottom-style: solid;
border-bottom-width: 1px;
color: rgb(69, 102, 142);
font-size: 13px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 3px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
}
</style>
</head>
<body>
<div class="scroll_fix_wrap" id="page_wrap">
<div>
<div class="scroll_fix" style="width: 1262px">
<div id="page_layout" style="width: 791px;">
<div id="page_header" class="p_head1 p_head_l0">
<div class="back"></div>
<div class="left"></div>
<div class="right"></div>
<div class="content">
<div id="top_nav" class="head_nav">
<a id="top_home_link" class="top_home_link fl_l" href="/"></a>
<div id="top_links">
<div class="fl_r" id="top_menu_wrap" style="display: none">
<a id="top_reg_link" class="fl_r top_nav_link" href="/join" style="display: none" onclick="return !showBox('join.php', {act: 'box', from: nav.strLoc}, {}, event)">регистрация</a>
</div>
<a class="fl_l top_nav_link" href="" id="top_back_link" onclick="return nav.go(this, event, {back: true})"></a>
</div>
</div>
</div>
</div>
<div id="side_bar" class="fl_l">
<div id="header1">
<h1 id="title">Меню</h1></div>
<br>
<ol>
<li>
<a href="">» Главная</a>
<a href="">» Форум </a><br><br>
<h2 style="padding-left: 6px">Моддинг</h2>
<a href=""> » Map </a>
<a href=""> » Mode </a>
<a href=""> » Scripts </a>
<a href=""> » Cmd </a>
</li>
</ol>
</div>
<div id="page_body" class="fl_r" style="width: 631px;">
<div id="header_wrap2">
<div id="header_wrap1">
<div id="header">
<h1 id="title">Добро пожаловать</h1>
</div>
</div>
</div>
<div id="wrap_between"></div>
<div id="wrap3">
<div id="wrap2">
<div id="wrap1">
<div id="content">
<div id="index">
<div class="content" style="padding-top: 20px;">
<div style="font-size: 14px;">
<b> Pawno-Info </b>
-
<i> Сайт о программировании в Pawno.
</i>
<br><br>
<h2> В чем мы отличаемся перед другими сайтами о <b>Pawno</b>?</h2>
<b style="color: #5e86a4">»</b> Вежливый,адекватный персонал. <br>
<b style="color: #5e86a4">»</b> Большой выбор работ как и для сервера,так и для сайта. <br>
<b style="color: #5e86a4">»</b> У нас на <b>Pawno-Info</b> Проводятся различные конкурсы,с денежными призами.
<br><br><br><br>
<h2> На Pawno-Info Можно найти:</h2>
<b style="color: #5e86a4">»</b> Графику сделанную в программе PhotoShop.<br>
<b style="color: #5e86a4">»</b> Web Дизайны,популярные движки для сайтов;форумов;блогов.<br>
<b style="color: #5e86a4">»</b> Интересные модификации для серверов Sa:Mp.<br>
<b style="color: #5e86a4">»</b> Красивые работы по Map'ингу.<br>
<b style="color: #5e86a4">»</b> Скрипты для сервера,которые будут привлекать игроков.<br>
<b style="color: #5e86a4">»</b> Также на нашем проекте имеются Читы/Хаки/Баги разных серверов.<br>
<b>Всё что выше перечисленно вы найдете в нашем <a href="pawno-ifo.ru">сайте</a>.</b>
<br><br><br><br><br>
<b style="font-size: 10px"> Дизайн VK.com <div style="color: #00bbff;text-shadow: 1px 1px 1px #e6e6e6"><marquee>Отредактированно KenJoker for Pawno-Info.Ru (c)</marquee></div> <br></b>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Последнее редактирование: