css- все статьи тега ➜ страница 39


Как рассчитать CSS letter-spacing V. s. "отслеживание" в типографии?

У меня есть инструкции от графического дизайнера для макета, который определяет "трассы-100" для некоторых элементов. В CSS letter-spacing является эквивалентным свойством для "отслеживания". учитывая значение для отслеживания, как вы выражаете это как значение для CSS в пикселях? ...

Как нарисовать сектор круга в CSS?

ну, рисовать круг с чистым CSS легко. .circle { width: 100px; height: 100px; border-radius: 100px; border: 3px solid black; background-color: green; } как нарисовать сектор? Учитывая степень X [0-360] я хочу нарисовать сектор х градусов. Могу ли я сделать это с помощью чистого CSS? например: Спасибо + Пример спасибо, Джонатан, я использовал Первый способ. Если это кому-то помогает, вот пример функции JQuery, которая получает процент и рисует сектор. Сектор находится ...

Считается ли плохой практикой использовать абсолютное позиционирование?

Я разрабатывал веб-страницу, где я выкладывал доску для шахматной игры, а также пару лотков для фигур. Все это делается с помощью HTML (с jQuery для динамического обновления по мере игры). Где-то я понял, что использование абсолютного позиционирования элементов на странице считается плохой практикой, и что предпочтительнее использовать относительное позиционирование. после борьбы с относительным позиционированием слишком долго, я понял, что абсолютное позиционирование из элементов доски было бы ...

CSS для увеличения размера первого слова

Это меня немного озадачило. Я хочу сделать первое слово из всех абзацев в моем # content div в 14pt вместо значения по умолчанию для абзацев (12pt). Есть ли способ сделать это в прямом CSS или я оставил обертывание первого слова в промежутке, чтобы выполнить это? ...

Кнопка Twitter Bootstrap нажмите, чтобы переключить развернуть / свернуть текстовый раздел выше кнопки

Я недавно пришел через bootstrap, и я работаю над расширением примера героя. Я хочу добавить следующее поведение на мою страницу: при кнопку (т. е. элемент с селектором '.ряд.btn') нажата, я хочу иметь возможность переключаться между расширением / свертыванием части текста над кнопкой. вот как выглядит HTML: <html> <head> <title>Test Page</title> <!-- Le styles --> <link href="../assets/css/bootstrap.css" rel="stylesheet"> <style type ...

контур только на одной границе

Как применять вставка границы в HTML-элемент, но только на одной стороне его. До сих пор я использовал изображение для этого (GIF/PNG), которое я затем использовал бы в качестве фона и растягивал его (repeat-x) и немного удалял от верхней части моего блока. Недавно я обнаружил контур CSS свойство, которое отлично! Но, кажется, обходит весь квартал... Возможно ли использовать это свойство структуры, чтобы сделать это только на одной границе? Кроме того, если нет, у вас есть какой-нибудь CSS трюк ...

CSS: как выровнять по вертикали "метку" и "вход" внутри "div"?

рассмотрим следующий код: HTML: <div> <label for='name'>Name:</label> <input type='text' id='name' /> </div> CSS: div { height: 50px; border: 1px solid blue; } какой был бы самый простой способ поставить label и input в середине div (вертикально) ? ...

Внешний CSS против встроенного стиля разница в производительности?

мой друг сказал, что с помощью <div style=""></div> вместо сжатого css файла ставим как link href в головном разделе дает некоторое повышение производительности. Это правда? ...

Установка максимальной ширины для тела с помощью Bootstrap

создание моего первого сайта с Twitter Bootstrap и экспериментировать с жидкими макетами. Я установил свой контейнер, чтобы быть жидким, теперь содержимое внутри занимает всю ширину страницы и адаптируется как изменение размера браузера. дизайн, над которым я работаю, был создан для максимальной ширины ~950px. Я проверил variables.less и responsive.less, и загрузочная документация, я не могу понять, как это сделать. Я также попытался добавить следующее К моему style.css: body { max-width: ...

Встроенная форма, вложенная в горизонтальную форму в Bootstrap 3

Я хочу построить форму в Bootstrap 3 следующим образом: мой сайт (не приведенная выше ссылка) просто обновляется из Bootstrap 2.3.2, и формат больше не является правильным. Я не могу найти ни одного документа об этом типе формы на getbootstrap.com. может кто-нибудь сказать мне, как это сделать? Только "имя пользователя" будет в порядке. спасибо. PS есть аналогичный вопрос, но он использует Bootstrap 2.3.2. ...

'col-xs - *' не работает в Bootstrap 4

Я не сталкивался с этим раньше, и мне очень трудно найти решение. При наличии столбца, равного medium в bootstrap, например: <h1 class="text-center">Hello, world!</h1> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <h1>vicki williams</h1> </div> </div> </div> выравнивание текста работает нормально: но при создании столбца, равного extra small вот так: ...

Изменение изображения при наведении с помощью CSS / HTML

у меня есть эта проблема, когда я установил изображение для отображения другого изображения при наведении мыши, однако первое изображение все еще появляется, а новое не меняет высоту и ширину и перекрывает другое. Я все еще довольно новичок в HTML/CSS, поэтому я, возможно, пропустил что-то простое. Вот код: <img src="LibraryTransparent.png" id="Library"> #Library { height: 70px; width: 120px; } #Library:hover { background-image: url('LibraryHoverTrans.png'); height: 70p ...

Как удалить пространство желоба для конкретного div только-bootstrap

система сетки Bootstrap по умолчанию использует 12 столбцов с каждой пядью имея сточную канаву 30px как ниже. желоба-это пустое пространство между колонками. ширина желоба, кажется, между 20px-30px. Предположим, что это 30px здесь. Я хочу удалить пространство желоба для конкретного div, так что не будет никакого пространства желоба в строке. Каждый пролет будет рядом друг с другом без желоба. проблема в том, что если я удалю маржа 30px (желоб) он оставляет 360px (12*30) в конце строки. учит ...

Как установить высоту тела с помощью прокрутки переполнения

я столкнулся с проблемой при установке высоты tbody ширина переполнения прокрутки. <style> tbody{ height:50px;display:block;overflow:scroll } </style> <h3>Table B</h3> <table style="border: 1px solid red;width:300px;display:block"> <thead> <tr> <td>Name</td> <td>phone</td> </tr> </thead> <tbody style='h ...

Размер фона с SVG хлюпнул в IE9-10

у меня есть набор div с фоновым изображением: <div>Play Video</div> со следующим CSS: div { background-image: url('icon.png'); background-image: url('icon.svg'), none; background-size: 40px 40px; background-repeat: no-repeat; background-position: 90% 50%; padding: 20px; width: 150px; } размер фона соблюдается в Firefox, Safari и Chrome. В IE8 SVG заменяется файлом PNG. Однако в IE9 и IE10 файл SVG значительно уменьшен. Проблема, похоже, связана с шириной и высотой div. Если я д ...

используя текст-выровнять по центру в элемент colgroup

у меня есть таблица на моей странице, Я использую colgroups для форматирования всех ячеек в этом столбце таким же образом, хорошо работает для цвета фона и все. но, похоже, не может понять, почему центр выравнивания текста не работает. он не выравнивает текст по центру. пример: <table id="myTable" cellspacing="5"> <colgroup id="names"></colgroup> <colgroup id="col20" class="datacol"></colgroup> <colgroup id="col19" class="datacol"></colgroup& ...

margin-top не работает с clear: оба

<div style="float: left;">Left</div> <div style="float: right;">Right</div> <div style="clear: both; margin-top: 200px;">Main Data</div> почему margin:top для "основных данных" не работает в коде выше? ...

Как удалить подсказку "нет выбранного файла" из файла, введенного в Chrome?

Я хотел бы удалить подсказку "нет выбранного файла" из файла ввода в Google Chrome (я вижу, что подсказка не отображается в Firefox). обратите внимание, что я говорю не о тексте внутри поля ввода, а о подсказке, которая появляется при наведении курсора мыши на ввод. Я пробовал это без удачи: $('#myFileInput').attr('title', ''); ...

Сделайте видео-плакат HTML5 таким же размером как само видео

кто-нибудь знает, как изменить размер видео-плаката HTML5 таким образом, чтобы он соответствовал точным размерам самого видео? вот jsfiddle, который показывает проблему:http://jsfiddle.net/zPacg/7/ вот этот код: HTML: <video controls width="100%" height="100%" poster="http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_orange_rectangle.png"> <source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" /> <source src="http://demo. ...

Может ли фоновое изображение быть больше, чем сам div?

у меня есть нижний колонтитул div с шириной 100%. Это около 50px высокий, в зависимости от его содержания. можно ли дать этому # footer фоновое изображение, которое переполняет этот div? изображение около 800x600px, и я хочу, чтобы он был расположен в левом нижнем углу нижнего колонтитула. Он должен работать как фоновое изображение для моего сайта, но я уже установил фоновое изображение на моем теле. Мне нужно другое изображение, расположенное в левом нижнем углу мой сайт и # нижний колонтитул ...