• Как заставить WebStorm автоматически заворачивать длинные строки?

    loratokareva
    @loratokareva
    html верстальщик
    я не помню с какой такой идеи я влепил птичку в View|Active Editor| Use Soft Wraps


    Долго билась с проблемой переноса длинных строк.
    Народ, вот оно!!!

    098c12011fbd4d368e2bf93f301ece00.jpg

    Всем добра)
    Ответ написан
    Комментировать
  • Знаю основы HTML CSS, но верстать не получается. Как преодолеть баръер?

    m77x
    @m77x
    Консультант
    Преодолеть барьер очень просто:
    1) загрузить и установить PSPad
    2) открыть и написать первые два тега <html></html>
    сразу возьмите за правило - парные теги писать сразу
    3) в середине этих тегов напишите еще пару тегов:
    <head></head>
      <body></body>

    1 В начале сотворил Бог небо и землю.
    2 Земля же была безвидна и пуста, и тьма над бездною, и Дух Божий носился над водою.
    3 И сказал Бог: да будет свет. И стал свет.
    4 И увидел Бог свет, что он хорош, и отделил Бог свет от тьмы.
    5 И назвал Бог свет днем, а тьму ночью. И был вечер, и было утро: день один.

    в блоке тегов head
    напишите еще пару тегов style
    и у вас получится:
    <html>
      <head>
        <style>
        </style>
      </head>
      <body></body>
    </html>

    И задайте как Бог ваш свет, т.е. в CSS поиграйтесь с цветами и "фокусами"
    <html>
      <head>
        <style>
    * {
    	word-wrap: break-word;
    	margin: 0px;
    	padding: 0px;
    }
    
    html, body{
    	width: 100%;
    	height: 100%;
    	margin:0;
    	padding:0;
    }
    
    body {
    	position: fixed;
    	background: linear-gradient(top, #418ac7 0%, #fafeff 100%);
    	background: -moz-linear-gradient(top, #418ac7 0%, #fafeff 100%);
    	background: -o-linear-gradient(top, #418ac7 0%, #fafeff 100%);
    	background: -ms-linear-gradient(top, #418ac7 0%, #fafeff 100%);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#418ac7), color-stop(100%,#fafeff));
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#418ac7), to(#fafeff));
    	background: -webkit-linear-gradient(top, #418ac7 0%, #fafeff 100%); 
    	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#418ac7', endColorstr='#fafeff');
    }
    
        </style>
      </head>
      <body></body>
    </html>

    Теперь пора создавать "землю" ))
    в style измените css body добавьте картинку вашей Земли:
    body {
    	background: #635328 url('http://img.urodaizdrowie.pl/wp-content/uploads/2013/03/globe.jpg') fixed top center no-repeat;
    	-o-background-size: 100% 100%;
    	-webkit-background-size: 100% 100%;
    	-khtml-background-size: 100% 100%;
    	-moz-background-size: 100% 100%;
    	background-size: 100% 100%;
    }

    теперь озвучьте ваш проект, что-то написав на своей странице, но сразу возьмите за правило, любой текст, должен быть читаемым. Поэтому надо задать цвет. И не просто цвет, но и тень (иначе текст может слится с фоновой картинкой).
    в css добавьте для текста оформление:
    p {
       color: white;
       text-shadow: 0 0 2px #000;
    }

    Используйте резко контрастирующие цвета текста и обводки, например черный текст - белая обводка, белый текст - черная обводка, желтый текст - синяя обводка.
    ну и так далее…
    Верстка это творчество, лишь слегка притянуто к математике ))
    Всего вам доброго, новый Бог!
    Ответ написан
    3 комментария
  • Знаю основы HTML CSS, но верстать не получается. Как преодолеть баръер?

    xmoonlight
    @xmoonlight
    https://sitecoder.blogspot.com
    1. Задача/проблема
    2. Гугл
    3. Практика
    4. GOTO 1
    Ответ написан
    Комментировать