css- все статьи тега ➜ страница 10
Две колонки flex-box макет
Мне нужно создать макет, который будет содержать список элементов в двух столбцах. Как я показал ниже: .container { border: 1px solid red; height: 300px; display: flex; flex-direction: column; justify-content: flex-start; flex-wrap: wrap; } .item { border: 1px dashed blue; height: 50px; } <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="i ...
Border-Radius для DIV элемента не работает в IE8
The -moz-border-radius:10px; -webkit-border-radius:10px; свойства элемента DIV не работают в IE8, но это прекрасно работает в Firefox и google chrome. Пожалуйста, предоставьте мне, если у вас есть какое-либо решение по этому вопросу. ...
Div бок о бок
Итак, я пытался поставить div рядом здесь, но у меня закончились варианты. <div id='body'> <div id='header'> </div> <div id='container'> <div id='navigation'></div> <div id='content'> <div id='shoutout-box'></div> </div> </div> </div> Я хочу, чтобы заголовок охватывал всю ширину браузера, в то время как контейнер должен отображаться под заголовком. Навигация должна идти параллельно с контентом ...
Размытие за всплывающим окном при загрузке страницы проблема
Я работаю на сайте с всплывающим окном, единственное, чего мне не хватает, - это эффект размытия, когда это всплывающее окно появляется. Это всплывающее окно будет отображаться каждый раз, когда страница загружается, поэтому я нашел отличный код размытия здесь на SO. Хотя этот код предназначен для функции, где эффект размытия отображается кнопкой. Из-за этого я изменил код, так что вместо кнопки он теперь onLoad, который запускается из тега body. Единственная проблема заключается в том, что пя ...
Настройка атрибутов стиля CSS с помощью thymeleaf
Как задать свойство background тега стиля с разрешенным url-адресом thymeleaf. У меня есть <div style="background:url('<url-to-image>')"></div> Есть ли эквивалент <img th:src="${@/<path-to-image>}"> для установки атрибутов стиля в thymeleaf. ...
Bootstrap col-md-offset - * не работает
Я пытаюсь добавить класс Bootstrap offset в свой код для достижения выравнивания по диагонали следующим образом: Но я не знаю, какое смещение мне следует использовать. Я пробовал пару смещений, чтобы достичь этого, но безрезультатно.Текст покрывает весь джамботрон.Вот мой код Html: <div class="jumbotron"> <div class="container"> <div class="row"> <div> <h2 class="col-md-4 col-md-offset-4">Browse.</h2 ...
Создание треугольника в css с градиентным фоном
Я пытаюсь создать треугольник в css с градиентным фоном. У меня пока не было никакого успеха. Есть ли способ сделать это, чтобы вызвать этот эффект, видимый на изображении ниже. (Треугольник, прикрепленный к неправильному окну ошибки пароля.) Дизайн в Photoshop Это дизайн, который у меня есть до сих пор в HTML и CSS. Вот css, который у меня есть для треугольника на данный момент. .error-triangle { wwidth: 0; height: 0; border-top: 10px solid transparent; border-botto ...
CSS Media Query и Javascript/jQuery не совпадают
В моем CSS у меня есть медиа-запрос, такой как: @media (min-width: 800px) { /* styles */ } А затем в моем jQuery я нацеливаюсь на ширину окна и выполняю некоторые действия. Edit: согласно ответам ниже, я изменил эту функцию, но мои JS и CSS все еще не выровнялись. Проблема была исправлена с помощью функции Modernizr, как указано в принятом ответе. $(window).resize(function() { var viewportWidth = $(window).width(); if (viewportWidth >= 800) { // do something } }); ...
CSS3 эффект перехода с onclick
Я работаю над CSS3 и как бы застрял на одной проблеме. Проблема заключается в следующем: У меня есть изображение, которое изначально находится в левой части экрана: .box img{ margin-left:0; -webkit-transition:1s; } Теперь, при наведении, когда я хочу, чтобы эффект имел место, т. е. переместите изображение 500px слева, когда я наведу курсор на изображение, следующий код: .box img:hover{ margin-left:500px; -webkit-transition:1s; } Это работает просто идеально. Единственная проблема за ...
Как удалить CSS-класс из ячейки jqGrid?
Можно добавить класс CSS в ячейку jqGrid, используя метод setCell, как показано ниже. grid.setCell(rowId, "ColumnName", "", "my-style-class"); Учитывая, что этот метод, по-видимому, способен только добавлять CSS-классы, как можно удалить CSS-класс из ячейки jqGrid? ...
Динамическое изменение атрибута стиля элемента с помощью JavaScript
У меня есть определенная таблица стилей для div. Теперь я хочу изменить один атрибут div динамически, используя js. Как я могу это сделать? document.getElementById("xyz").style.padding-top = "10px"; Правильно ли это? ...
Как использовать обратную косую черту в свойстве содержимого css?
Я пытаюсь добавить обратную косую черту после каждого элемента списка, но не могу заставить его работать. Это работает, если я использую трубу или прямую косую черту, но не обратную косую черту. Я искал код сущности-символа для использования, но не смог найти его для обратной косой черты. Есть ли решение? #navigation ul.nav > li:after{ content: " "; } Спасибо! ...
Jquery изменение переменной по клику
Верно, я бы хотел, чтобы при нажатии кнопки (или в данном случае какого-то текста) Jquery показывал тег div, содержащий изображение, затем через 2 секунды изображение исчезало, а затем отображался текст. Все это прекрасно работает, однако я хочу, чтобы это сработало только один раз. Я решил сделать это с помощью переменной и оператора if, поэтому переменная изменяется от 0 до 1, а затем кнопка не может быть нажата снова из-за изменения переменной. Или, по крайней мере, это плохо сформулировано в ...
Bootstrap 3 "btn-group" неадаптивное поведение на небольших экранах
Существует ли способ bootstrap 3 для обработки небольших размеров экрана для "btn-group"? Группа кнопок помещается в <td> и оборачивается в <div class="btn-group">: Выглядит нормально, пока вы не измените его размер до Как сделать их стойкими? Я попытался добавить класс btn-group-justified. Но это дает в результате кнопки полной ширины и выглядит еще хуже при перенастройке до небольшого размера экрана. P. S> у меня есть идея, как ее реализовать добавив полный набор каст ...
Стоит ли создавать отдельный CSS-файл для каждой HTML-страницы?
Я создаю личную домашнюю страницу. У меня есть 4 HTML-страницы и только один CSS-лист, связанный для всех страниц. То есть внутри одного CSS-файла я настроил макет для всех разных страниц. [На самом деле, каждая страница имеет практически одинаковый макет, только содержание и их стиль выглядят по-разному. И мой сайт не является таким уж продвинутым.] Это хорошая практика? Или я должен создать отдельный CSS для каждой страницы? Пример того, что у меня есть сделано: Страница-1.html: <l ...
Как динамически изменять в materialize CSS framework
Я только начал использовать фреймворк materialize css. Теперь materialize преобразует любой тег select в набор элементов ul и li. Раньше, используя JQuery, я мог сделать это: var $selectDropdown = $("#dropdownid"); $selectDropdown.empty(); $selectDropdown.html(' '); var value = "some value"; $selectDropdown .append($("<option></option>").attr("value",value).text(value)); Мой html-это просто пример тега select: Раньше это работало. Теперь это не удается. Какова была бы Альтер ...
Загрузка шрифтов с помощью Webpack и font-face
Я пытаюсь загрузить шрифт в мой CSS-файл с помощью @font-face, но шрифт никогда не загружается. Это моя структура каталогов. Затем в webpack.config.js у меня есть загрузчик, чтобы получить шрифты. var path = require('path'); var webpack = require('webpack'); module.exports = { devtool: 'eval', entry: [ "./index.js" ], output: { path: __dirname+"/build", filename: "main.js" }, plugins: [ new webpack.NoErrorsPlugin(), new webpack.HotModuleReplacementPlugin(), ...
настройка выпадающего списка автозаполнения
Я используюjquerys autocomplete виджет, но у меня есть несколько проблем, пытаясь стиль окна, которые выпадают, когда вы ищете что-то. Я пытаюсь немного сдвинуть коробку вниз и изменить цвет границы/bg, но некоторые JS добавляют некоторые встроенные стили, которые переопределяют мои .CSS-стили. Но я не могу его найти. Я основал свой на этом. <ul class="ui-autocomplete ui-menu ui-widget-content" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 11; display: block; ...
как написать настольное приложение, которое использует HTML и CSS для пользовательского интерфейса и python / perl/c++ / java для обработки?
Различные языки имеют различные наборы инструментов GUI, но это выглядит очень трудно достичь привлекательных пользовательских интерфейсов так хорошо, как мы можем, используя HTML и CSS с меньшими усилиями. Я не делаю свое приложение на javascript, так как сомневаюсь, что у него есть все необходимые библиотеки, и я хочу сделать это на python. Как использовать движки рендеринга, такие как gecko, webkit и т. д. В python? Которые будут более приспособлены для работы с Python?.Есть только движок р ...
Меньше, медиа-запросы и производительность
Я недавно начал работать с LessCSS, и у меня был довольно большой успех в отношении того, насколько чистым и читаемым стал мой CSS. Однако я не думаю, что использую меньшее в полной мере. Я сейчас в процессе кодирования моего первого полностью отзывчивого сайта, используя меньше, и я обеспокоен производительностью и скоростью. Следует отметить, что я не придерживаюсь методологии "точки останова" - я масштабирую вещи вверх и вниз, пока они не сломаются, а затем пишу CSS, чтобы исправить их; ч ...