Div border 1px solid ccc: 1px solid #CCC; · GitHub

Leave a Comment / Разное / By /

Использование CSS стилей для формы оплаты — Возможности PayKeeper

PayKeeper позволяет использовать настраиваемую форму оплаты. Это может понадобиться, если

  • Необходим собственный дизайн формы оплаты
  • Необходимо передавать в PayKeeper дополнительную информацию о плательщике
  • Необходима собственная сложная логика инициализации оплаты
  • Стандартная форма PayKeeper не удовлетворяет вашим требованиям и вы хотите ее заменить

С помощью CSS стилей форме можно придать любое необходимое оформление.

Ниже, представлены несколько примеров форм.

.input_type { padding:8px; border:1px solid #ccc; display:block; border-bottom:1px solid #ccc; width:25% } .sub_btn { background-color: #f44336; border: none; color: white; padding: 15px 32px; text-align: center; display: inline-block; font-size: 16px; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

. input_type {

    padding:8px;

    border:1px solid #ccc;

    display:block;

    border-bottom:1px solid #ccc;

    width:25%

}

.sub_btn {

    background-color: #f44336;

    border: none;

    color: white;

    padding: 15px 32px;

    text-align: center;

    display: inline-block;

    font-size: 16px;

}

Непосредственно сама форма:

<form method=’POST’ action=’https://demo.paykeeper.ru/create’ > Фамилия Имя: <input type=’text’ name=’clientid’ value=»/> <br /> Введите номер заказа: <input type=’text’ name=’orderid’ placeholder=’Оставьте сообщение здесь’/> <br /> Телефон: <input type=’text’ name=’client_phone’ value=»/> <br /> Электронный адрес: <input type=’text’ name=’client_email’ placeholder=’[email protected]’ value=»/> <br /> Введите сумму оплаты: <input type=’text’ name=’sum’ value=’1’/> <br /> <input type=’submit’ value=’Перейти к оплате’ /> </form>

1

2

3

4

5

6

7

8

<form method=’POST’ action=’https://demo. paykeeper.ru/create’ >

Фамилия Имя: <input type=’text’ name=’clientid’ value=»/> <br />

Введите номер заказа: <input type=’text’ name=’orderid’ placeholder=’Оставьте сообщение здесь’/> <br />

Телефон: <input type=’text’ name=’client_phone’ value=»/> <br />

Электронный адрес: <input type=’text’ name=’client_email’ placeholder=’[email protected]’ value=»/> <br />

Введите сумму оплаты: <input type=’text’ name=’sum’ value=’1’/> <br />

<input type=’submit’ value=’Перейти к оплате’ />

</form>

Другой пример верстки выполненный с помощью фреймворка Bootstrap.

Подключаем фреймворк через CDN:

<link rel=»stylesheet» href=»https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css» integrity=»sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO» crossorigin=»anonymous»> <script src=»https://stackpath. bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js» integrity=»sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh3IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy» crossorigin=»anonymous»></script>

<link rel=»stylesheet» href=»https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css»

integrity=»sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO» crossorigin=»anonymous»>

 

<script src=»https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js»

integrity=»sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh3IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy» crossorigin=»anonymous»></script>

<form method=’POST’ action=’https://demo.paykeeper.ru/create’ > <div> Введите номер заказа: <input type=’text’ name=’orderid’ placeholder=’Оставьте сообщение здесь’/> <br /> </div> <div> Укажите электронный адрес: <input type=»email» name=’client_email’ placeholder=’test@example.

com’ value=»/> <br /> </div> <div> Выберите сумму оплаты: <select name=’sum’> <option>100</option> <option>200</option> <option>300</option> </select> </div><br /> <input type=’submit’ value=’Перейти к оплате’ /> </form>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<form method=’POST’ action=’https://demo.paykeeper.ru/create’ >

<div>

Введите номер заказа: <input type=’text’ name=’orderid’ placeholder=’Оставьте сообщение здесь’/> <br />

</div>

<div>

Укажите электронный адрес:

<input type=»email» name=’client_email’ placeholder=’[email protected]’ value=»/> <br />

</div>

<div>

Выберите сумму оплаты:

<select name=’sum’>

<option>100</option>

<option>200</option>

<option>300</option>

</select>

</div><br />

<input type=’submit’ value=’Перейти к оплате’ />

 

</form>

 

 

 

Какую CSS-методологию вы предпочитаете? / Песочница / Хабр

Всем доброго дня!

Каждый, кто когда-либо занимался вёрсткой веб-страниц, помнит, что раньше трава была зеленее мы не сильно обращали внимание на то, какие названия классам даём (ну создал я тег <div class=«a b»>текст</div>, я же помню, что «a» задаёт красный цвет текста, а «b» — жирное начертание), какие идентификаторы (id) и как часто используем, сколько уровней вложенности у наших селекторов (. page nav .logo img.alt:hover) и т.д. Главное — чтобы сайт выглядел похожим на свой макет.

Всё изменилось, когда сайты превратились в интернет-сервисы, над пользовательскими интерфейсами стали трудиться целые команды разработчиков, появились мобильные версии и адаптивная вёрстка, возникло желание многократного использования кода, стали популярны CSS-препроцессоры (Less, Sass, Stylus), постпроцессоры (PostCSS), сборщики проектов (Gulp, Webpack) и т.д.

И тут на выручку пришли CSS-методологии. Данные методологии являются просто наборами правил, которым нужно следовать при вёрстке. То есть, они говорят: «Называй класс так, и никак иначе», или «А вот этот класс добавь в файл N и помести в папку M». Благодаря CSS-методологиям все разработчики, работающие над одним проектом, будут понимать друг друга и использовать одни и те же инструменты.

Теперь давайте определим, какая CSS-методология понятна лично вам больше всего. Рассмотрим 4 самые популярные методологии.

Методология #1

HTML-код:

<div>
  <div>
    . ..
  </div>
</div>

CSS-код:

.button {
  display: inline-block;
  box-sizing: border-box;
  padding: 5px 10px;
  width: 250px;
  border: 1px solid #ccc;
}
.button_active {
  background-color: green;
  color: #fff;
}
.button__text {
  font-size: 18pt;
}

Методология #2

HTML-код:

<div>
  <div>
    ...
  </div>
</div>

CSS-код:

.button {
  display: inline-block;
  box-sizing: border-box;
  padding: 5px 10px;
  width: 250px;
  border: 1px solid #ccc;
}
.green {
  background-color: green;
  color: #fff;
}
.text {
  font-size: 18pt;
}

Методология #3

HTML-код:

<div>
  <div>
    ...
  </div>
</div>

CSS-код:

.button {
  display: inline-block;
  box-sizing: border-box;
  padding: 5px 10px;
  width: 250px;
  border: 1px solid #ccc;
}
. is-active {
  background-color: green;
  color: #fff;
}
.button-text {
  font-size: 18pt;
}

Методология #4

HTML-код:

<div>
  <div>
    ...
  </div>
</div>

CSS-код:

.Bd {
  border-width: 1px;
  border-style: solid;
}
.Bdc\(\#ccc\) {
  border-color: #ccc;
}
.Bgc\(green\) {
  background-color: green;
}
.Bxz\(bb\) {
  box-sizing: border-box;
}
.C\(\#fff\) {
  color: #fff;
}
.D\(ib\) {
  display: inline-block;
}
.Fz\(18pt\) {
  font-size: 18pt;
}
.Px\(10px\) {
  padding-left: 10px;
  padding-right: 10px;
}
.Py\(5px\) {
  padding-top: 5px;
  padding-bottom: 5px;
}
.W\(250px\) {
  width: 250px;
}

Какая из представленных 4-х CSS-методологий вам больше всего нравится?

Вы можете посмотреть названия методологий, скрывающихся под этими номерами:

Названия методологий

Методология #1 — БЭМ (BEM, ru.

bem.info/methodology)
Методология #2 — OOCSS ( github.com/stubbornella/oocss/wiki )
Методология #3 — SMACSS ( smacss.com )
Методология #4 — Atomic CSS ( acss.io )

html — Проблема с границей: 1px solid #CCC для моего #site .home .stats .views li

Задавать вопрос

спросил

Изменено 8 лет, 9 месяцев назад

Просмотрено 302 раза

Я пытаюсь сделать границу: 1px сплошной #CCC для моего #site .home .stats .views li{} , но это не работает нормально.

Мой дизайн ломается, как вы можете видеть на моем изображении:

Здесь у меня есть код без рамки: http://jsfiddle.net/jcak/L7qy4vh5/2/

И я хочу, чтобы моя структура была такой, как вы видите на скрипка, но с рамкой в ​​моем

#site . home .stats .views li {} .

Я уже пытаюсь сделать все математические подсчеты, чтобы попасть правильно, но моя структура всегда нарушает границу: 1px.

Можете ли вы помочь мне понять, как я могу дать границу, не нарушая моей структуры?

Мой HTML:

 

    <дел>
        <дел>
            <дел>
                 
Статистика сайта
 
                <дел>
                    <ул>
                        
  • 
                            1000
                            Статистика
                        
    • 
                        
  • 
                            1000
                            Статистика
                        
    • 
                        
  • 
                            1000
                            Статистика
     
    
                        
    • 
                    
                    <ул>
                        
  • 
                            1000
                            Статистика
                        
    • 
                        
  • 
                            1000
                            Статистика
    • 
                        
  • 1000
                            Статистика
                        
    • 
                    
                    <ул>
                        
  • 
                            1000
                            Статистика
                        
    • 
                        
  • 
                            1000
                            Статистика
    • 
                        
  • 1000
                            Статистика
                        
    •