Как разделить footer, header и основу?

360
08 июня 2022, 03:00

Кто в этом хорошо разбирается, подскажите как что сделать, хоть что-то из этого, с оставшимся (ну или поняв принцип работы), постараюсь сам сделать/доделать.
Сайт разрабатывается на сайте uCoz, Шаблон №1815, надеюсь скинутые мною коды именно те, что относятся к этим вопросам (к основным)

Как сайт выглядит сейчас:

И как он должен выглядеть (грубо говоря, ибо так-то остается ещё много нюансов, которых нужно поменять)

div[id^=uNMenuDiv] a{color:#fff;font-weight:400;text-transform:uppercase}
.uMenuRoot>li>a:hover,div[id^=uNMenuDiv] a.uMenuItemA,li.navItemMore:hover{color:#eca4ff}
div[id^=uNMenuDiv] ul li ul li a.uMenuItemA,div[id^=uNMenuDiv] ul li ul li a:hover span{color:#6141e0}
.main-menu{width:50%}
ul.uMenuRoot{display:-ms-inline-flexbox;display:inline-flex;padding:0;overflow:hidden;width:100%;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0;height:52px;position:relative}
ul.uMenuRoot>li{text-align:center;height:inherit}
ul.uMenuRoot li a{max-height:52px}
ul.uMenuRoot li .overflow a,ul.uMenuRoot li a{padding:0 20px;-ms-flex-pack:center;justify-content:center;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:100%}
ul.uMenuRoot li .overflow a{max-height:none}
.uMenuRoot li a:hover,a.uMenuItemA,li.navItemMore:hover{text-decoration:none;cursor:pointer}
.nav_menu_toggler{min-height:52px;padding:0 20px;display:-ms-flexbox;display:flex;color:#fff;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}
#catmenu li:hover>ul{position:absolute;width:220px;left:auto;top:100%;right:0;z-index:8;display:block;padding:0;border-radius:30px;background-color:#e992ff}
#catmenu li ul li a{padding:16px 15px;font-size:13px;font-weight:400}
#catmenu li ul li a span{display:block;width:100%;padding:0}
.menu_tog{position:absolute;top:calc(50% - 7px);font-size:20px;right:0;cursor:pointer;color:#fff;line-height:.8}
.main-menu #catmenu ul ul ul{top:-1px;right:100%}
:root .nav_menu_toggler,_:-ms-fullscreen{height:52px}
:root ul.uMenuRoot,_:-ms-fullscreen{-ms-flex-wrap:nowrap;flex-wrap:nowrap}
.main-menu .overflow li.uWithSubmenu .menu_tog,.main-menu li.uWithSubmenu li.uWithSubmenu .menu_tog{right:auto;left:5px;transform:rotate(90deg)!important;color:#fff}
:root li .uWithSubmenu i.menu_tog,_:-ms-fullscreen{width:16px;top:25%}
:root .main_wrapper,_:-ms-fullscreen{height:auto}
:root #casing:after,_:-ms-fullscreen{content:"";display:table;clear:both}
footer .wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;min-height:63px}
footer .wrapper p:first-child{padding-right:20px}
.mobile-menu-list,.show-menu{display:none}
.show-menu{color:#333;transition:all .3s}
ul.uMenuRoot>li ul li{box-shadow:0 5px 38px rgba(187,37,242,.3);border:1px solid rgba(220,123,249,.46);border-radius:20px;background-color:#e78eff;position:relative}
#catmenu li.uWithSubmenu:hover i{color:#6141df}
.slide-one{width:100%;margin:0 auto;max-width:1920px}
.slide-one .item{height:619px}
.slide-one .owl-carousel .owl-item .item:before{content:"";position:absolute;bottom:0;left:0;width:100%;height:100%;z-index:1;transition:all .3s}
.slide-one .owl-carousel .owl-item .item:hover:before{background-image:linear-gradient(0deg,rgba(29,3,46,.85) 0,transparent)}
.slide-one .item .movie-poster{overflow:hidden;position:relative;background-color:#6e4abd;transition:all .3s;height:100%}
.slide-one .item .movie-poster img{transition:all .3s;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transform-style:preserve-3d}
.slide-one .item:hover .movie-poster img{transform:scale(1.3);opacity:.5}
.slide-one .item .movie-details{position:absolute;bottom:0;left:0;width:100%;z-index:2;color:#fff;padding:90px 29px 30px;transition:all .3s;-webkit-timing-function:ease-in-out;animation-timing-function:ease-in-out;background-image:linear-gradient(0deg,rgba(29,3,46,.85) 0,transparent)}
.slide-one .item:hover .movie-details{background-image:none}
.slide-one .item:hover .movie-details .movie-name{padding-bottom:62px}
.slide-one .item .movie-details .movie-name{animation-timing-function:ease-in-out;transition:all .3s}
.slide-one .item .movie-details .movie-title a{color:#fff;font-family:Raleway Bold;font-size:17px;font-weight:700;line-height:22px;letter-spacing:-.17px}
.slide-one .item:hover .movie-details .movie-title a{color:#6e4abd}
.slide-one .item .movie-details .sub-title{font-family:Roboto;color:#fff;font-size:15px;font-weight:400;line-height:22px}
.slide-two{background:#6e4abd url(/.s/t/1815/img-eff.png) bottom no-repeat;background-size:cover}
.slide-five h2,.slide-four h2,.slide-three h2,.slide-two h2{padding:34px 0 39px;font-size:20px;font-weight:700;line-height:33px;font-family:Raleway Bold;margin:0;letter-spacing:2px;color:#fff}
.slide-five h2:after,.slide-four h2:after,.slide-three h2:after,.slide-two h2:after{content:"";display:block;margin-top:14px;width:67px;height:5px;border-radius:21px;background-color:#fff}
.slide-five h2,.slide-four h2,.slide-three h2{color:#fff}
.slide-five h2,.slide-three h2{color:#4791ff}
footer,header{background-color:#1e1e1e;box-shadow:0 6px 8px rgba(87,52,163,.26)}
<?if($PAGE_ID$='sitePage1')?>
<style>
div.wrapper {background:#2d2d2d}
div.slide-five {background:#151515}
footer, header {background:#2d2d2d}
{background-color: #2d2d2d}
</style>
<main class="promo-landing">
    <div class="slide-five">
        <div class="wrapper">
            <h2>Список Обновлений</h2>
<header>
 <div class="wrapper">
 <div class="logo"><img src="https://huoyuhao.clan.su/shuo_yuhao.png" alt=""><br></div><div class="logo"><a class="logo-lnk" href="$HOME_PAGE_LINK$" title="Главная">$SITE_NAME$</a></div>
 
 <div class="mobile-menu-list">
 <div class="show-menu material-icons" id="show-menu">menu</div>
 </div>

Answer 1

Перейдите в Панель управления (/admin) > Управление дизайном > Таблица стилей (CSS)
Там в самый низ напишите следующий код:

.slide-five {
  padding-top: 20px;      /* Отступ сверху */
  padding-bottom: 40px;   /* Отступ снизу */
  box-sizing: border-box; /* Чтобы отступы "съедали" размер */
}
READ ALSO
Значение с html select в php переменную

Значение с html select в php переменную

есть страница на которой я обновляю информацию блока div (#updatediv) по нажатию клавиши(опустошаю и подгружаю php код с файла допустим updatephp)

266
python websocket parsing mysql

python websocket parsing mysql

Всем привет! Помогите с кодомВопрос такой: могу ли я как то транслировать эти данные в mysql (mysql не принципиален, можно и другую БД)? Данные идут...

284
Двойное освобождение памяти С++

Двойное освобождение памяти С++

Недавно начал использовать vector в С++, столкнулся с ошибкой:

284
Несколько окон. Qt

Несколько окон. Qt

Вообщем, не понимаю как правильно создавать второе окноЕсть функция addTimer(), как метод класса главного окна MainWindow

225