Search the Community
Showing results for tags 'class'.
Found 12 results
-
Доброго времени суток. Я начинающий в изучении JavaScript. Во время моих уроков я столкнулся с проблемой, которую не могу решить уже 4 дня. Она состоит в том, что при первом клике значок переворачивается на 180 градусов направо, а по следующему клику он должен крутиться в реверсе. В чем я допустил ошибку? Вот код, который я использовал в письменном виде: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <button id="animStart" onclick="itemSpin();itemSpinRev();"><span id="burger">☰</span></button> <script type="text/javascript"> function itemSpin(normal) { animStart.classList.add('anim'); var start = getMilliseconds(ms); var spinner = getMilliseconds(ms) - start; if(spinner >= 400) { animStart.classList.remove('anim'); // animStart.classList.add('animate'); // // animStart.classList.toggle('animate'); } }; function itemSpinRev(reverse) { animStart.classList.add('animate'); var start = getMilliseconds(); var reverse = getMilliseconds() - start; if(reverse >= 400) { animStart.classList.remove('animate'); } }; </script> </body> </html> body { background: #4f5a6e; margin: 0; padding: 0; } #animStart { position: absolute; background-color: #4f5a6e; margin-left: 10px; margin-top: 10px; border: none; font-size: 20px; cursor: pointer; outline: none; } #animStart.anim { animation-name: spin; animation-duration: 0.4s; animation-timing-function: linear; } #animStart.animate { animation-name: spin; animation-duration: 0.4s; animation-timing-function: linear; animation-direction: reverse; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(180deg); } }
-
Подскажите плиз! Почему я создаю в HTML тег " " в него закладываю "UL" и LI, а в "LI" текст которому хочу придать нужное изображение. В CSS делаю селектор - .menu, прописываю туда правила, но почему то это не влияет на LI, что бы изменить текст, мне приходится прописывать правила непосредственно для "LI". в чем причина?, и как сделать так что бы правила для блока .menu распространялись на текст внутри его? Ведь LI я хотел добавить еще в некоторые блоки уже с другими правилами. <!DOCTYPE html> <html lang="en"> <head> <title>MySite</title> <meta charset="utf-8"> <link rel="stylesheet" href="text/style.css"> </head> <body> <header class="page-header--home"> <div class="menu"> <ul> <li>Группа творчества</li> <li>Статьи</li> <li>Форум</li> <li>Видео</li> <li>Вход</li> </ul> </div> </header> </div> <div class="avtorizacia"> <input type="submit" name="Поиск"> </div> </body> </html> body{ background-image: url(..//img/MS3.jpg); max-width: 1920px; margin: 0; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } .page-header--home{ position: relative; background-image: url(..//img/MS4.jpg); width: 1920px; height: 80px; margin-top: 0px; } ul{ position: relative; margin: 0px; } li{ display: inline; font-size: 32px; font-family: "Tahoma"; font-weight: 800; color: #45a8ff; margin: 0px; margin-top: 5px; margin-left: 80px; margin-right: 80px; } .avtorizacia{ position: relative; background-color: rgba(31, 16, 16, 0.75); max-width: 80px; height: 250px; margin-top: 100px; }
-
Дан код: <style> a { display: inline-block; margin-left: 5px; } .loli { height: 75px; width: 100%; display: inline-block; background-color: #0099cc; left: 600px; } .loli ul { padding: 0; margin: 0; font-size: 0; overflow: hidden; text-align: center; } .loli ul li { display: inline-block; list-style: none; font-size: 36px; } .loli ul li a { color: #fff; text-decoration: none; height: 75px; line-height: 75px; padding: 0 15px; position: relative; z-index: 10; } .loli ul li a:hover { color: black; } .loli ul li a::before { content: " "; position: absolute; left: 0; top: -25px; width: 100%; height: 150px; transform: rotate(14deg); background-color: rgba(255, 255, 255, 0.3); opacity: 0; z-index: -1; } .loli ul li a:hover::before { opacity: 1; background-color: #fff; } .menu li ul li { padding-right: 15px; background: #0099cc; } .menu li ul { position: absolute; display: none; z-index: 10; margin-left: -18px; } .menu li:hover ul { display: block; } .menu li ul li { display: block; } </style> <div class="loli"> <div class="menu"> <ul> <li><a href="">Главная</a></li> <li><a href="">Новости</a> <ul class="menu"> <li class="menu"><a href="">Расписание</a></li> </ul> </li> <li><a href="">О группе</a> <ul class="menu"> <li class="menu"><a href="">Профессия</a></li> <li><a href="">Успеваемость</a></li> </ul> </li> <li><a href="">Здание</a> <ul class="menu"> <li class="menu"><a href="">Расписание</a></li> </ul> </li> <li><a href="">Контакты</a> <ul class="menu"> <li class="menu"><a href="">Расписание</a></li> </ul> </li> </ul> </div> </div> Как мне сделать, чтобы класс "меню" не затрагивал класс "лоли"?
-
Здравствуйте, меня зовут Игнат, и я люблю писать код без кавычек. Собственно: https://jsfiddle.net/066hbnxf/ - на Хром и Опера без кавычек срабатывает только первый класс. Может, с HTML5 пришёл новый метод перечисления классов, или это "недопилили"?
-
Добавляю class к изображению которая находятся в div и в css добавляю нужный код и не работает . Помогите ! ———--HTML—————— <div class="content"> <img src="images/home.png" class="lol"> </div> ————-CSS—————- .content .lol { margin: 0 auto; position: absolute; top: 0; left: 190px; } ————————— Где ошибка ? Помогите ...
-
Здравствуйте. Допустим у нас есть 2 списка с 5 пунктами и 50. Каждому пункту нужно задать свое фоновое изображение. Что вы будете использовать - :nth-child или class (или свой вариант) и почему? Интересует вопрос производительности.
-
css глобальный стиль через класс и позиционирование элемента через id.
valdemark posted a question in HTML Coding
Собстевенно, есть сайт, в нем много страниц на которых содержатся (в разных местах) повторяющиеся элементы (кнопки, формы, чекбоксы, div и т.п.) со стилем заданным (css) через class, а позиционируются на станице эти элементы через id. Правильно ли это? Если нет, то как сделать правильно? Пример: <!DOCTYPE html><html> <head> <title>!DOCTYPE</title> <meta charset="utf-8"> <link href="main.css" rel="stylesheet" media="all"> </head> <body> <div id="id" class="class"> <p>Разум — это Будда, а прекращение умозрительного мышления — это путь. Перестав мыслить понятиями и размышлять о путях существования и небытия, о душе и плоти, о пассивном и активном и о других подобных вещах, начинаешь осознавать, что разум — это Будда, что Будда — это сущность разума, и что разум подобен бесконечности.</p> </div> </body> </html>Файл css: .class{text-align:center;font-family:verdana;font-size:14px;width:400px;background:yellow;}#id{margin-top:50px;margin-left:100px;}Собственно жду ответов -
Ребята, всем привет! Занимаюсь версткой проекта, адаптивного, и потребовалось сделать так, чтобы при разрешении экрана менее 700 пикселей, у одного элемента менялся класс. (при этом у него задано 2 класса, что-то типа: class="one two") Изменить нужно именно второй класс "two". Через @media - не вариант, мне конкретно нужно присвоить новый класс элементу. Понимаю, что это нужно сделать средствами js, но как - ума не приложу.. Очень буду рад за подсказку! Понимаю, что вопрос нубовский, но очень надеюсь на вашу помощь..
-
Приветствую, друзья! Столкнулся на днях с серьёзной проблемой - не работают классы у 2 элементов. Соответственно к ним не применяются стили. HTML-валидатор в этих местах фиксирует ошибки: Line 17, Column 54: Attribute сlass not allowed on element form at this point. Line 27, Column 27: Attribute сlass not allowed on element div at this point. Собственно код: HTML <!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="style.css"><title>Анкета CSSSR</title></head><body><div class="wrapper"> <span class="csssr-logo"></span> <span class="stamp"></span> <div class="content"> <h1> ДЕЛО</h1> <form method="post" сlass="top" action="/"> <p>Полное ФИО<input name="" type="text"></p><br> <p>Год рождения<input name="" type="text"></p><br> <p> Место жительства<input name="" type="text"></p><br> <p>Скайп<input name="" type="text"></p><br> <p>Почта<input name="" type="text"></p><br> <p>Выпускник htmlacademy.ru Да<input name="" type="radio"> Нет<input name="" type="radio"></p> </form> <h2>Практические навыки</h2> <p>* Отметьте только те технологии и типы задач, с которыми вы хорошо знакомы. Отсутсвие опыта отнюдь не означает, что у вас меньше шансов стать нашим сотрудником. Это означает, что вы будете получать те задачи, с которыми гарантировано будете справляться.</p> <div сlass="bottom"></div> </div> </div></body></html>CSS /* Сбросы*/*{ padding: 0; margin: 0;}img{ border: 0;}/* Стили для body*/body{ background: #797979; width: 100%;}/* Стили для wrapper*/.wrapper{ background: url(pattern.jpg); margin:0 auto; width: 90%; min-height:500px; position:relative; overflow:hidden;}.csssr-logo{ position: absolute; top: 4%; left: 3.6%; height: 51px; width: 143px; background: url(img/img-left.png) no-repeat;}.stamp{ position: absolute; top:3.1%; right:5%; height: 106px; width: 253px; background: url(img/stamp.png) no-repeat;}.content{ /*background: grey;*/ min-height:300px; margin: 13% 9.5% 0;}.content h1{ margin:0 auto; text-indent: 9999px; background: url(img/delo.jpg) no-repeat; width: 217px; height:111px;}.top_form{ margin-top: 28px;}.bottom{ background:#F00; min-width: 100px; min-height: 100px; }Кто-то сталкивался с подобной проблемой? Прошу помощи.
-
Доброго всем времени суток! В последнее время все чаще слышу (в основном, на Хабре), что оформлять элементы следует только с помощью классов, но никак не с помощью идентификаторов. Учился я основам верстки давно, во всех книжках тогда предлагалось верстать так: если одинаковых элементов более одного, то используем класс. Если один на страницу - id. В связи с чем такие изменения в сознании?
-
На этом форуме несколько раз я получил ответы на свои вопросы , надеюсь сообщество и в этот раз не пройдет стороной . какая разница между <div id="moz"> и <div class="moz"> Спасибо.
-
Здравствуйте! Помогите, пожалуйста, решить проблему. Для ol li задан класс: ol li{border-bottom:1px dotted #ccc;} Как убрать border у 10-го по счёту li? Всю голову уже сломал... Кто знает, подскажите, пожалуйста...
