• Как настроить Nginx config на Open server?

    MobiLux
    @MobiLux
    https://lysak.github.io
    в папке \OSPanel\userdata\config и в файле Nginx-{версия}_vhost.conf.
    Нужно добавить или раскомментировать строку в location / :
    location / {
    try_files $uri $uri/ /index.php?$query_string;
    }
    Ответ написан
    2 комментария
  • Как сверстать каталог товаров на flex?

    @sv1979
    Front-end developer
    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
      <style type="text/css">
    	  .wrap {
    		  display: flex;
    		  flex-direction: row;
    		  align-items: flex-start;
    	  }
    	  aside {
    		  flex: 0 0 calc( 30% - 30px );
    		  padding: 15px;	
    	  }
    	  .sidebar {
    		  background-color: green;
    		  min-height: 90vh;
    		  padding: 15px 0 15px 15px;
    	  }
    	  .catalog{
    		  flex: 1 0 70%;
    		  display: flex;
    		  flex-direction: row;
    		  flex-wrap: wrap;
    		  align-items: stretch;
    	  }
    	  .cell {
    		  padding: 15px;
    		  flex: 0 0 calc( 25% - 30px );
    		  min-width: 300px;
    		  display: flex;
    		  flex-direction: row;
    	  }
    	  .cell_inside {
    	  	background-color: yellow;
    		flex: 1;
    		padding: 15px;
    		min-height: 140px;//Just in case you dont have enough content
    	  }
    	  aside + .catalog .cell {
    		  flex: 0 0 calc( 33% - 30px );
    	  }
      </style>
    </head>
    <body>
    <div class="wrap">
    	<aside><!-- Remove aside element if you don't have sidebar -->
    		<div class="sidebar">
    			Contrary to popular belief, Lorem Ipsum is not simply random text. Contrary to popular belief, Lorem Ipsum is not simply random text. 
    		</div>
    	</aside>
    	
    	<div class="catalog">
    		<div class="cell">
    			<div class="cell_inside">
    				Contrary to popular belief, Lorem Ipsum is not simply random text. 
    			</div>
    		</div>
    		<div class="cell">
    			<div class="cell_inside">
    				Contrary to popular belief, Lorem Ipsum is not simply random text. Contrary to popular belief, Lorem Ipsum is not simply random text.
    			</div>
    		</div>
    		<div class="cell">
    			<div class="cell_inside">
    				Contrary to popular belief, Lorem Ipsum is not simply random text. 
    			</div>
    		</div>
    		<div class="cell">
    			<div class="cell_inside">
    				Contrary to popular belief, Lorem Ipsum is not simply random text. 
    			</div>
    		</div>
    		<div class="cell">
    			<div class="cell_inside">
    				Contrary to popular belief, Lorem Ipsum is not simply random text. Contrary to popular belief, Lorem Ipsum is not simply random text.
    			</div>
    		</div>
    		<div class="cell">
    			<div class="cell_inside">
    				Contrary to popular belief, Lorem Ipsum is not simply random text. 
    			</div>
    		</div>
    		<div class="cell">
    			<div class="cell_inside">
    				Contrary to popular belief, Lorem Ipsum is not simply random text. 
    			</div>
    		</div>
    	</div>
    </div>
    </body>
    </html>


    5a60368067de7443338396.png
    Ответ написан
    2 комментария
  • Как осуществить подключение нескольких шрифтов в css?

    Zoxon
    @Zoxon
    Веб-разработчик
    @font-face {
    font-family: "PT Serif";
      src: url("../fonts/ptserif-normal.eot");
      src: local('☺'), 
      url("../fonts/ptserif-normal.eot?#iefix") format("embedded-opentype"), 
      url("../fonts/ptserif-normal.woff") format("woff"),
      url("../fonts/ptserif-normal.ttf") format("truetype"), 
      url("../fonts/ptserif-normal.svg#PT Serif") format("svg");
    
      font-weight: normal;
      font-style: normal;
    }
    
    @font-face {
      font-family: "PT Serif";
      src: url("../fonts/ptserif-bold.eot");
      src: local('☺'), 
      url("../fonts/ptserif-bold.eot?#iefix") format("embedded-opentype"), 
      url("../fonts/ptserif-bold.woff") format("woff"), 
      url("../fonts/ptserif-bold.ttf") format("truetype"), 
      url("../fonts/ptserif-bold.svg#PT Serif") format("svg");
    
      font-weight: bold;
      font-style: normal;
    }
    
    @font-face {
      font-family: "PT Serif";
      src: url("../fonts/ptserif-italic.eot");
      src: local('☺'), 
      url("../fonts/ptserif-italic.eot?#iefix") format("embedded-opentype"), 
      url("../fonts/ptserif-italic.woff") format("woff"), 
      url("../fonts/ptserif-italic.ttf") format("truetype"), 
      url("../fonts/ptserif-italic.svg#PT Serif") format("svg");
    
      font-weight: normal;
      font-style: italic;
    }
    
    @font-face {
      font-family: "PT Serif";
      src: url("../fonts/ptserif-bolditalic.eot");
      src: local('☺'), 
      url("../fonts/ptserif-bolditalic.eot?#iefix") format("embedded-opentype"), 
      url("../fonts/ptserif-bolditalic.woff") format("woff"), 
      url("../fonts/ptserif-bolditalic.ttf") format("truetype"), 
      url("../fonts/ptserif-bolditalic.svg#PT Serif") format("svg");
    
      font-weight: bold;
      font-style: italic;
    }


    В font-weight можно использовать не ключевые слова, а цифры

    100 Ultra Light
    200 Thin
    300 Light
    400 Regular, Normal
    500 Roman
    600 Medium, SemiBold
    700 Bold
    800 Heavy, ExtraBold
    900 Black

    При использовании указывать font-weight и font-style, в зависимости от их комбинаций будет выбран нужный файл шрифта

    UPD: Если вам не нужно поддерживать совсем уж древние браузеры IE8 (eot) и Android 4.3 (ttf) то достаточно подключить только woff и woff2.
    Svg нужен для Safari версии ниже 5.1

    Подробнее смотрите на caniuse.com

    Хорошая статья на эту тему nicothin.pro/page/web-fonts

    @font-face { 
      font-family: 'Web font'; 
      src: url('webfont.woff2') format('woff2'), 
           url('webfont.ttf')  format('truetype'), /* Только если нужна поддержка старых Android, иначе закомментировать */ 
           url('webfont.woff') format('woff'); 
      font-weight: normal; 
      font-style: normal; 
    }
    Ответ написан
    4 комментария
  • Можно на пальцах объяснить, про суть localhost и порты?

    pi314
    @pi314
    Президент Солнечной системы и окрестностей
    Если человек, не знакомый с арифметикой захочет понять, что означает "два плюс три равно пять", ему недостаточно объяснить, что такое "два", или что такое "плюс"! Так же и тут. Для понимания, что такое localhost, сначала нужно понять, что такое хост вообще, что такое сеть, что такое имя хоста, что такое сервер, как это все связано с адресами и номерами портов, а те - с, собственно, одним конкретным компом (который, в зависимости от контекста, могут называть и "хостом", и "сервером", и "localhost"). Так что, на всякий случай:

    Комп, подключенный к сети, называют хостом. К нему обращаются по уникальному адресу или имени. Одному имени (т.е. одному хосту) могут соответствовать несколько разных адресов.

    Когда к хосту обращаются по имени, это имя сначала разрешается в адрес хоста, по которому, собственно, и происходит обращение. В сети этим обычно занимается DNS (который, кстати говоря, тоже является сервером... но это уже другая история, которая сейчас не так важна для понимания сути), но если DNS нет, соответствие имен-адресов можно прописать в файле hosts на самом хосте. Если некое имя хоста и там не прописано, обратиться к нему по имени не удастся... хотя прямое обращение по адресу будет работать.

    Сервер - это программа, отвечающая на запросы из сети. Комп, на котором она выполняется, также называют "сервером". Причем, даже если выполнение программы приостановлено (например, проводят профилактику или программа-сервер упала), этот комп все равно будут называть "сервером", ибо он предназначен, в основном, для выполнения этой программы.

    На одном компе (=хосте, сервере) может одновременно выполняться несколько разных программ-серверов. Для того, чтоб обратиться к конкретной из них (адрес-то у всех один и тот же!), в протоколе TCP/IP используются разные номера портов.

    Если на компе запущен, например, HTTP сервер (= Webserver, например, Nginx или Apache), он "слушает" порт 80, а если не запущен, порт 80 никто не слушает, и если обратиться к такому хосту (= серверу, компу) по его адресу в порт 80, никакого ответа не придет... хотя сам хост и будет доступен.

    Для разных общеизвестных типов программ-серверов (в этом случае также говорят о "сервисах" или же "протоколах", что в данном контексте практически одно и то же) принято использовать общеизвестные номера портов, а для наиболее распространенных (как тот же HTTP) можно даже не указывать номер порта при обращении, как мы обычно и делаем в строке броузера, т.к. клиент автоматически использует номер порта по умолчанию, в данном случае 80. Но, в принципе, любой сервис можно (переконфигурировав) использовать на любом порту... если, конечно, в этом есть смысл. Единственно, что нельзя - одновременно использовать разные серверы на одном порту.

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

    localhost - "общеизвестное" имя компа для самого себя и ему соответствует IP адрес 127.0.0.1. Это - общепринятая договоренность, которую просто нужно знать. Если говорят "установить сервер на localhost", это означает "установить на тот самый комп, с которого и обращаться к этому серверу".
    Ответ написан
    1 комментарий