Jump to content

Страница как консоль


crautcher
 Share

Recommended Posts

может мне кто сверстать супер простую страничку - на всю страницу техтарея , сразу под ней инпут текст и с лева кнопка отправить , как чаты. Хочу чтоб было всё черное , а букви зеленые ? вам на 5 минут работы , а я час бится буду

Link to comment
Share on other sites

ах да , может кто еще искать чет подобное будет :


<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<STYLE type="text/css">
body {background-color:#000000;}
.chat {
background: #000000;
border: 4px solid #54ff00;
overflow: auto;
width: 100%;
height: 95%;
padding:2px,4px,1px,0px;
font-size:1.5em;
font-family:arial,sans-serif;
color:#54ff00;
}
.chat:hover {
background: #101010;
border: 4px solid #00ff00;
}
input.text {
background: #000000;
border: 4px solid #f0fff0;
width: 93%;
height: 5%;
font-family:arial,sans-serif;
color:#54ff00;
}
input.text:hover {
border: 4px solid #54ff00;
}
.css3-button {
display: inline-block;
zoom: 1; /* хак IE7 для display: inline-block*/
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); /* CSS3: тень для текста */
-webkit-border-radius: .5em; /* CSS3: закругление границ для Safari, Chrome */
-moz-border-radius: .5em; /* CSS3: закругление границ для FireFox */
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); /* CSS3: тень элемента для Safari, Chrome */
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); /* CSS3: тень элемента для FireFox */
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
font: bold 14px/100% Georgia;
}
.css3-button:hover {
text-decoration: none;
}
.css3-button:active {
position:relative;
top:1px;
left: 1px;
}
.blue {
color: #54ff00;
border: solid 1px #54ff00;
background: #000000;
background: -o-linear-gradient(#000000, #0078a5); /* CSS3: фон с градиентом для Opera 11+ */
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)); /* CSS3: фон с градиентом для Safari, Chrome */
background: -moz-linear-gradient(top, #000000, #0078a5); /* CSS3: фон с градиентом для FireFo 3.6+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5'); /* CSS3: фон с градиентом для IE */
}
.blue:hover {
background: #007ead;
background: -o-linear-gradient(#0095cc, #00678e);
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #0095cc, #00678e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
color: #fff;
}
</style>
</head>
<body>
<div width=100% height=100%>
<div class="chat">
БОТ: Привет<br>
ВЫ: Превет бот,ты такой бот!<br>
БОТ: Я знаю )<br>
</div>
<input class="text" type=”text” name=”msg” />
<a class="css3-button blue">сказать</a>
</div>
</body>
</html>

Link to comment
Share on other sites

 Share

  • Обсуждения

    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy