Html страница глазами разработчика приложений. Часть 1: «Подготовка»
Передо мной встала задача по обновлению текущего сайта одной компании, и в соответствии тренду выбор пал на landing page с поддержкой мультиязычности.
Посмотрев на реализации представленные в интернете я ужаснулась. В теле страницы куча текста! С такой разметкой же невозможно работать. А если надо поменять информацию? Это надо лезть в html, искать нужное, и менять в нескольких местах. Короче ужас! И я подумала что хорошо бы использовать базу данных, но это же обычная страница, и разворачивать ради нее целый сервер? и базу? как то перебор! Работая с Angular2 я подумала что было бы классно с его помощью создать страницу, но он очень тяжелый, и не подходит… И тут я вспомнила о его аналоге Vue.js. Легкая библиотека, для создания приложений. Я подумала: «А почему бы не создать сайт с помощью vue и добавить имитацию базы?».
Обдумав все за и против, посмотрев на другие подходы, мне захотелось внести немного «красоты» в html верстку.
Для объяснения подхода я решила сделать небольшую страничку, потому что выкладывание полного кода существующей страницы считаю слишком «тяжелым».
Но пришлось все равно разбивать статью на 2ве части, тут описывается только подготовка небольшой страницы и добавление меню для смены языка.
Итак, начнем!
Создадим папку в которой будем работать, далее в ней создадим папку «css» и туда добавим соответственно файл с нашими классами для странички: «style.css»
#main{
height:100%;
width:100%;
position:absolute;
top:0;
right:0;
opacity:1;
}
#wrapper{
float:left;
width:100%;
height:100%;
position: relative;
z-index:4;
}
.content-holder{
vertical-align: top;
float:left;
width:100%;
position:relative;
height:100%;
left: 0;
top: 0;
right: 0;
z-index: 2;
}
<---------------header--------------->
header {
position: fixed;
width: 100%;
z-index:22;
top:0;
left:0;
background:rgba(255,255,255,1);
box-shadow: 0 0 10px rgba(0,0,0,.1);
}
.transition{
-webkit-transition: all 500ms linear;
-moz-transition: all 500ms linear;
-o-transition: all 500ms linear;
-ms-transition: all 500ms linear;
transition: all 500ms linear;
}
.tr-header{
background:rgba(255,255,255,0.0);
border-bottom:1px solid rgba(255,255,255,0.4);
}
header.tr-header.sticky {
background:rgba(255,255,255,1);
box-shadow: 0 0 10px rgba(0,0,0,.1);
}
.header-height-emulator {
float: left;
width: 100%;
position: relative;
z-index: 1;
}
.container{
width:92%;
max-width:100%;
margin:20px auto;
position: relative;
zoom:1;
z-index:3;
}
.nav-holder {
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
position: relative;
top: 0;
left: 0;
width: 100%;
}
.scroll-nav {
float:right;
}
.scroll-nav li {
display:inline-block;
}
.scroll-nav li a {
background: #6dc77a;
float: left;
border-radius: 25px;
padding: 10px 22px;
font-weight: bold;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
border:2px solid rgba(255,255,255,0);
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
-ms-transition: all 200ms linear;
transition: all 200ms linear;
}
.scroll-nav li a:hover ,
.scroll-nav li.actscroll a {
border:2px solid rgba(255,255,255,1.0);
}
<---------------end header--------------->Далее создаем index.html (в основной папке) со следующим кодом:
My Company