Кто давно читает мои шпаргалки, наверно обратили внимание,что коды я выделяю разными способами.
Вот так будет выглядеть этот скролл и работу его посмотреть можно
![](https://3.bp.blogspot.com/-W1kGd8LcEEc/U187R40ulII/AAAAAAAAEcM/B_KtTr0juc4ferkHd7DkI0Z5jHbdcPkPA/s320/2014-04-29%2B11-16-23%2B2014-04-29%2B11-16-01%2B%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582%2B%25D1%258D%25D0%25BA%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B0.png%2B-%2B%25D0%25AF%25D0%25BD%25D0%25B4%25D0%25B5%25D0%25BA%25D1%2581.%25D0%2594%25D0%25B8%25D1%2581%25D0%25BA.png)
Так что если вам понравился этот вариант давайте начнём. Заходим в ШАБЛОН-ИЗМЕНИТЬ HTML находим строку. Как это легко сделать прочитайте здесь. И над ней вставляем следующий код
#lightbdrs-code {
width: 400px;
margin: 10px auto;
overflow: auto;
height: 200px;
padding:0 20px;
background-color:#4E4E4E;
border:solid #0099FF 3px;
box-shadow:0 0 10px 2px #000 inset;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2eEBFkr7icKRsFIsG3n2QcMyZaqFe8lU_smYGf_Lwp7XxKDrRsllE7mMqRjCzXmSlDRS2GLQXz4wD4yLryE9xJQMiN-cJSs4YYl6zg3liLguHwXa4rU4egx8Vny24hRWLB_f8_kD_APo/s1600/bg.png);
}
#lightbdrs-code:hover {
border-color: #333;
box-shadow:0 0 5px 2px #000 ;
}
#lightbdrs-code code {
font-size : 12px;
color : #000000;
font-family: "Courier New", Courier, monospace;
line-height: 20px;
font-weight: bold;
}
width: 400px;
margin: 10px auto;
overflow: auto;
height: 200px;
padding:0 20px;
background-color:#4E4E4E;
border:solid #0099FF 3px;
box-shadow:0 0 10px 2px #000 inset;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2eEBFkr7icKRsFIsG3n2QcMyZaqFe8lU_smYGf_Lwp7XxKDrRsllE7mMqRjCzXmSlDRS2GLQXz4wD4yLryE9xJQMiN-cJSs4YYl6zg3liLguHwXa4rU4egx8Vny24hRWLB_f8_kD_APo/s1600/bg.png);
}
#lightbdrs-code:hover {
border-color: #333;
box-shadow:0 0 5px 2px #000 ;
}
#lightbdrs-code code {
font-size : 12px;
color : #000000;
font-family: "Courier New", Courier, monospace;
line-height: 20px;
font-weight: bold;
}
Теперь, когда вы захотите скрыть часть текста или кода вам понадобиться просто вставить в нужное место вот это-
<div style="background:#fff; width:460px;margin: 10px auto;height: 227px;padding:1px ;box-shadow:0 0 10px 2px #000 inset;border-radius:10px; ">
<div id="lightbdrs-code">
<code>
здесь ваш текст
</code></div></div>
Как это сделать. Перейдите в редакторе сообщений в режим HTML
И вместо текста , который я выделила красным цветом вставляйте то, что задумали. Хочу дать небольшой совет. Последний код лучше всего сохранить у себя в блокноте или в черновике в сообщениях. Все значения в этом коде которые выделены зелёным при желании можно поменять.
Обращаю ваше внимание ещё на один момент. Во время написания сообщения выглядеть это будет так
![](https://2.bp.blogspot.com/-GJsWdSGv8AY/U19FhB3Z3VI/AAAAAAAAEcM/ZebhvIQfMUsRi17vmCsbgnQAK6riySXmQ/s320/2014-04-29%2B11-20-02%2B2014-04-29%2B11-19-46%2B%25D0%25A1%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%25D1%2588%25D0%25BE%25D1%2582%2B%25D1%258D%25D0%25BA%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B0.png%2B-%2B%25D0%25AF%25D0%25BD%25D0%25B4%25D0%25B5%25D0%25BA%25D1%2581.%25D0%2594%25D0%25B8%25D1%2581%25D0%25BA.png)
Пусть это вас не смущает. При просмотре и публикации всё будет в надлежащем виде.
Если будут вопросы обращайтесь. На этом в сегодняшней шпаргалке поставим точку.
хотите оформить подписку на новые шпаргалки
Та-ак, еще подкинула тему для размышлений))) Как это все освоить?
ОтветитьУдалитьИрина, с твоим упорством возможно всё. Спасибо за комментарий.
ОтветитьУдалитьЗначит упираюсь по сильнее и... начинаю думать)
ОтветитьУдалитьДобрый вечер, Вика! Когда я в коде меняю размеры, меняется только внешняя серая рамка, а внутреннее поле остаётся прежним. Никаких других значений для изменения размеров не просматривается. Что нужно сделать, чтоб менялось и рамка и поле? спасибо..
ОтветитьУдалитьЛариса Нужно поиграться со значениями padding:0 20px;По часовой стрелке(верх,право, низ , слева. Тут об этом http://htmlbook.ru/css/padding
ОтветитьУдалитьСпасибо, Виктория!!
УдалитьНе за что Лариса.
Удалить