Вопросы с тегом «css»

Как выровнять все тело html по центру?

93 html  css 

Я пытаюсь вставить div в любую часть тела и сделать его position: absoluteотносительным ко всему документу, а не к родительскому элементу с расширением position: relative.

93 html  css  css-position 

Я хочу сделать divпалку в верхней части экрана без какого-либо влияния на другие элементы, а ее дочерний элемент в центре. .parent { display: flex; justify-content: center; position: absolute; } <div class="parent"> <div class="child">text</div> </div> Запустить фрагмент кодаСкрыть результатыРазвернуть фрагмент Когда я добавляю position: absoluteстроку, она justify-content: centerстановится недействительной. Конфликтуют ли …

93 css  react-native  flexbox 

Обратите внимание, не на панель «Стили» (я знаю, что в данном контексте выделено серым цветом - не применяется), а на следующую панель, панель «Вычисленные свойства». Что означает, когда вычисляемое свойство отображается серым цветом? Пример:

93 css  google-chrome  google-chrome-devtools 

Мне нужно найти способ изменить свойства CSS: hover с помощью JavaScript. Например, предположим, что у меня есть этот HTML-код: <table> <tr> <td>Hover 1</td> <td>Hover 2</td> </tr> </table> И следующий код CSS: table td:hover { background:#ff0000; } Я хотел бы использовать JavaScript для изменения свойств при наведении курсора <td>, скажем, на …

93 javascript  html  css  dhtml 

Можно ли изменить основной цвет начальной загрузки в соответствии с цветом бренда? В моем случае я использую бумажную тему bootswatch.

93 css  twitter-bootstrap  twitter-bootstrap-3  bootstrap-4 

Кажется, здесь проблема с моей страницей: http://www.lonewulf.eu При наведении курсора на миниатюры изображение немного сдвигается вправо, и это происходит только в Chrome. Мой css: .img{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5; display:block; border:1px solid #121212; } .img:hover{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); -moz-opacity: 1; opacity: 1; -khtml-opacity: 1; display:block; …

92 css  image  google-chrome  hover  opacity 

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

92 css  twitter-bootstrap  css-position  fluid-layout 

Вот в чем проблема. У меня есть изображение: <img alt="alttext" src="filename.jpg"/> Обратите внимание, что высота или ширина не указаны. На некоторых страницах я хочу показывать только миниатюры. Я не могу изменить html, поэтому использую следующий CSS: .blog_list div.postbody img { width:75px; } В результате (в большинстве браузеров) страница состоит из …

92 javascript  css  internet-explorer  image  internet-explorer-6 

Я хочу использовать один шрифт под названием «Алжирский» на всем моем веб-сайте. Итак, мне нужно изменить все теги HTML, и я не хочу писать другой код для разных тегов, например: button{font-family:Algerian;} div{font-family:Algerian;} Метод, описанный ниже, также крайне не рекомендуется: div,button,span,strong{font-family:Algerian;}

92 html  css  fonts  font-face 

У меня есть такой код: <footer class="row"> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 1</li> <li>Text 2</li> <li>Text 3</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 4</li> <li>Text 5</li> <li>Text 6</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 7</li> <li>Text 8</li> <li>Text 9</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 10</li> <li>Text …

92 html  css  twitter-bootstrap  twitter-bootstrap-3  responsive-design 

Есть ли способ реализовать функцию обратного вызова в случае анимации css3? В случае анимации Javascript это возможно, но не найти способа сделать это в css3. Один из способов, который я мог увидеть, - это выполнить обратный вызов после продолжительности анимации, но это не гарантирует, что он всегда будет вызываться сразу …

92 javascript  css  frontend 

Я пытаюсь удалить 2 файла CSS, которые блокируют рендеринг на моем сайте - они отображаются в Google Page Speed ​​Insights. Я использовал разные методы, ни один из которых не увенчался успехом. Но недавно я нашел сообщение о Thinking Async, и когда я применил этот код: <script async src="https://third-party.com/resource.js"></script>он устранил проблему. …

92 html  css  asynchronous 

Как добавить несколько компонентов с помощью метода css-in-js для добавления классов в компонент реакции? Вот переменная классов: const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spacious: { padding: 10 }, }); Вот как я это использовал: return ( <div className={ this.props.classes.container }> Вышеупомянутое работает, но …

92 css  reactjs  material-design  material-ui  jss 

вот что у меня есть скрипка ul { display: flex; justify-content: flex-start; flex-direction: row; align-items: center; width: 100%; height: 100px; background: #333; padding: 15px; } ul li { padding: 15px; margin: 5px; background: #efefef; border: 1px solid #ccc; display: inline-block; list-style: none; } #item-1 { height: 50px; } #item-2 { …

92 html  css