palindrom
-
Posts
10 -
Joined
-
Last visited
-
Days Won
1
Content Type
Profiles
Forums
Calendar
Store
Posts posted by palindrom
-
-
Доброго времени.
Давайте начнём со второго вопроса. Для того, чтобы получилось то, о чём вы пишите, в стилевой файл нужно добавить вот эти строки:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
И соответственно в html- файле к вашему div - у приписать класс .clearfix.Вот так:
.....
<div class="content-post">
<div class="clearfix">
<p>lorum ipsum</p>
</div>.....
Всё, теперь отступы идут от параграфа к div- у.
По первому вопросу уточните, для чего вам нужно, чтобы "content-wrapper" растягивался по высоте?
Может быть вы хотите сделать прилипающий подвал? -
mouseee, за цвет кнопок при наведении мышью отвечает псевдокласс :hover.
Например,
a:hover {
color: green;
}Вместо тега <a> можно стилизовать практически любой компонент... Всё уже зависит от вашего подхода.
Рекомендую покопаться в стилевом файле и понять, где именно применяется нужный псевдокласс и там
уже вписать свои параметры.
К цвету под кнопками меню можно обратиться через идентификатор#header-menu-wrap {
background: green;
position: relative;}
Также рекомендую обратиться к этому ресурсу. Там можно найти открытые вебинары и курсы по нашей тематике,
то есть WordPress, азам веб-программирования итд... -
Доброго времени.
Хочу добавить ещё, что html5-теги призваны улучшить читабельность кода в целом, улучшить индексируемость
поисковыми системами итд...Их иногда используют даже без стилизации, исключительно для улучшения кода, а уже посредством вложенных
div-ов производят модификации...Советую посмотреть бесплатные вебинары о html5 тут.
-
Настройки в my.js вынесены исключительно для удобства и улучшения читабельности кода.
Советую также обратить внимание на порядок расположения библиотек и вашего скрипта.
Также отслеживайте в консоли ошибки и предупреждения! Обратите внимание на то, что все ли стили, скрипты, библиотеки корректно подгружаются?
- 1
-
Дмитрий12, для новичка отлично. Продолжайте в том же духе.
От себя посоветую изучать "EMMET". Он позволяет сокращать время набора html и css...
И конечно же начинайте изучать препроцессор для css, например less. Он тоже поможет как сократить, так и улучшить читабельность кода.
-
Доброго времени.
Slick - отличный слайдер с кучей настроек, только успевай подставлять значения. Да, конечно нужно немного поразбираться, даже что-то
перевести для того, чтобы понять смысл параметров.Так как сам разбирался с ним, то выкладываю небольшой код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>
</head>
<body>
<div class="slider">
<div class="item"><img src="img1.jpg" alt=""></div>
<div class="item"><img src="img2.jpg" alt=""></div>
<div class="item"><img src="img3.jpg" alt=""></div>
</div><script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script src="my.js"></script>
</body>
</html>
В "my.js" задаёте параметры работы слайдера:
$(document).ready(function(){
$('.slider').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear'
});
});- 1
-
Вот эти стили нужно редактировать.
Цвет кнопок в меню:
#header-menu > li {
font: normal 14px arial;
margin: 0 0 0 5px;
background-color: red;
}Цвет кнопки:
(Кнопка кстати уже простилизована, добавлена фоновая картинка, так что пока не понимаю для чего вам изменение цвета кнопки)
#top_search button {
background: url(images/sprite_master.png) -38px top no-repeat;
border: 0;
cursor: pointer;
display: block;
float: right;
width: 23px;
height: 23px;
background-color: red;}
Цвет шрифта:#header-menu > li > a {
color: #fff;
line-height: 16px;
padding: 9px 10px 10px;
} -
Добрый вечер.
Посмотрел ваш сайт, в файле style.css нашел вот этот класс, поменял цвет на нужный... По аналогии можно найти всё остальное,
используя хромовский инспектор.
/* Navigation Menu */
.main-navigation {
margin-top: 24px;
margin-top: 1.714285714rem;
text-align: center;
background-color: #4c66a4;
}
-
Добрый день.
Соглашусь, что начинающему изучать веб разработку лучше всего поискать хорошие курсы, где дадут определённые начальные знания.
А параллельно, конечно можно начинать штудировать HTML/CSS и по ходу чтения, экспериментов задавать вопросы, а возможно просто
искать ответы в сети.От себя порекомендую вот эти курсы. Там много открытых видео как раз по работе с HTML/CSS, что нужно начинающему + есть бесплатный
курс по азам программирования. Сам начинал с этих курсов и получил крепкие знания, так что советую!
Как сделать border как на рисунке
in HTML Coding
Posted
Доброго времени.
Думаю, что такой вариант подойдёт:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
legend{
text-align: center;
}
</style>
</head>
<body>
<fieldset>
<legend>Personal Info</legend>
<label>First Name: <input type="text" name="fname" size="30"></label><br>
<label>Last Name: <input type="text" name="lname" size="30"></label>
</fieldset>
</body>
</html>