Авторский знак. Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.

июнь 2021
Пн Вт Ср Чт Пт Сб Вс
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


Чувашия-это моя Россия

Легко и быстро меняем структуру страницы.

Не так и сложно получить требуемую страничку, разукрашенную в тот вид, который как Вам кажется необходим при создании сайта. Тут надо сказать следующее. Давным-давно умные люди доказали, что если на страничке сайта используется более трех цветов, то на такой страничке сайта глаза быстро устают и в принципе быстро надоедает. Поэтому когда комбинируете с цветами, тогда лучше располагать на странице два-три основных цвета и полутона близкие к основным цветам. Не каждому дан талант творчества и игра воображения, иногда лучше и быстрее просмотреть галерею шаблонов и на их основе сделать подходящее оформление для своей странички сайта, так бывает проще, быстрее. Иначе Вы затратите уйму времени, но результат окажется плачевным.

Когда с Вами начинали подбирать структуру страницы сайта, Вам говорил, что будем выбирать с тремя колонками, с верхним и нижним блоками. Что из более сложной структуры в простую структуру превратить не стоит труда, так на самом деле есть.

Вот и хочу Вам продемонстрировать как страница сайта можно легко превращать по своему хотению. На предыдущей странице получили две разные странички сайта. Вот из одной из них сделаем страничку с одной центральной колонкой, верхний и нижний блоки ужмем до ширины центральной.

                 @charset "utf-8";
                 /* CSS Document */

                   body {
	                       background: #FFFFFF;
	                       background-image: url(../fon/bkgnd.jpg);
	                       margin: 0;
                              }
                   div#nav {
	                        width: 70%;
		                    position: relative;
		                    left: 15%; 
		                    background: #F5F5F8;
		                    background-image: url(../fon/b14.jpg);
		                    border-bottom-style: double; 
		                      padding-top: 50px;
		                     padding-bottom: 50px;
		                    font-family: Georgia, "Times New Roman", Times, serif;
		                     font-size: 28px;
		                    color: #636;
		                    text-align: center;
                                }
                   table  {
	                       width: 100%;
	                       height: 72%;
	                        border-spacing: 0 0;
	                       }
                   td#tdleft {
	                         width: 15%;
		                      font-family: "Arial Black", Gadget, sans-serif;
		                     font-size: 14px;
		                     margin: 25px;
		                     padding: 5px;
		                     text-align: center;
	                               }
                   td#tdcenter  {
	                          width: 70%;
	                          background: #FCDC99; 
	                        }
                   td#tdright   {
	                          width: 15%;
	                                }
                   div#copy  {  
	                          width: 70%;
		                       position: relative;
		                       left: 15%; 
		                        background: #FCF;
		                       background-image: url(../fon/09.jpg);
		                        padding-top: 20px;
		                        padding-bottom: 20px;
		                       font-family: Verdana, Geneva, sans-serif;
		                       font-size: 18px;
		                       color: #FFF;
		                       text-align: center;
		                       margin: -1px; 
	                              }

Как быстро и просто можно переделывать структуру страницы сайта, если использовать каскадные таблицы стилей. Сравните, не так много изменений произошло. В теле body ничего не затронули, какой фон страницы бесплатного сайта был - такой и остался. Ширину центральной колонки страницы бесплатного сайта не изменили ( хотя одним росчерком можно изменить из 70% в любой другой формат, допустим 85%).

И так изменения у нас произошли в верхнем блоке страницы. Смотрите в блок div#nav. Тут строка width: 70%; задает ширину блока такой же как у центральной колонки страницы. Строка position: relative; подготавливает базу отсчета для сдвига блока, так он у нас сузился и переместился влево. Строка left: 15%; сдвигает верхний блок на 15% ширины левой колонки и совмещает верхний блок с центральной колонкой страницы сайта. Строка background: #FCF; появляется для того, чтобы в случае по каким-либо причинам нет возможности вызвать картинку для замощения блока, то блок будет окрашен в этот цвет. Строка background-image: url(../fon/09.jpg); вызывает кусочек рисунка и оформляет блок. Все остальное в верхнем блоке остается также.

В левой колонке страницы сайта убрали фон и раскраску. Так как рамку уже убрали строкой border-spacing: 0 0; в table, то у нас исчезает левая колонка страницы сайта td#tdleft; остается всего лишь надпись " Левая колонка".

В центральной колонке страницы бесплатного сайта ничего не меняем, она какая была - такой и осталась.

В правой колонке страницы сайта убираем фон и раскраску, тут также нет рамки и поэтому правая колонка исчезает; остается всего лишь надпись " Правая колонка".

Для справедливости надо сказать левую и правую колонки страницы сайта просто сделали прозрачной, безцветной. Для того чтобы полностью снивелировать эти блоки, необходимо во-первых убрать все надписи, рисунки и любой символ из этих блоков; во-вторых ширину width: 0; сделать нулевой или эти строчки совсем убрать из блока, или полностью убрать td#tdleft и td#tdright.

В подвале у нас появляются строки width: 70%; position: relative; left: 15%;, для чего они нужны Вы уже знаете. Вот и все.


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную   назад   дальше   вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: