Валерьянка
Дата: Пятница, 12.08.2016, 18:44 | Сообщение # 1
ТОП БАРЫГА
Сообщений: 201
Статус: Offline
http://cheat-master.ru/forum/130-632743-1< ----- В данной теме все уроки по CSS Первый урок - "Как сделать кнопку с HTML–ссылкой"
Добавьте следующий код в ту область, куда вы хотите вставить кнопку. Мы будет использовать новый код. Код
<HTML>
Измените ссылку. В данный момент код указывает на домашнюю страницу сайта http://cheat-master.ru/. Замените его на URL-ссылку страницы, к которой вы желаете перейти по щелчку. Отредактируйте текст кнопки. В данном случае на ней указано следующее: «CheatMaster». Вы можете поменять название кнопки по своему усмотрению. Вот что должно получиться : Второй урок - "Как сделать бегущую строку в HTML"
Параметры которые будем использовать: <Marquee> - специальный тег для создания бегущей строки. width="число/процент" - задает ширину бегущей строки в пикселях/процентах height="число/процент" - задает высоту бегущей строки в пикселях/процентах. bgcolor="цвет" - задает цвет фона контейнера. behavior="параметр"- Он задает поведение бегущей строки. direction="параметры" - задает направление движения бегущей строки. scrollamount="число" - скорость движения бегущей строки. scrolldelay="число" - задает задержку между шагами бегущей строки в миллисекундах. При использование бегущий строки используют тег - <Marquee> если честно использовать бегущую строку уже не модно, но я так не думаю) Можно сделать на JS ( сайт будет перегружать ) . Атрибуты и параметры <marquee> width="число/процент" Код
width="240px" - задает ширину в 240 пикселей;
Пример:
width="40%" -
width="100%" -
--------------------------------------------------------------------------------------------------------------------------------------------------
height="число/процент" Код
height="400px" - задает высоту в 400 пикселей;
-------------------------------------------------------------------------------------------------------------------------------------------------
bgcolor="цвет" Код
<marquee width="40%" height="20" behavior="alternate" bgcolor="#DCDCDC">Cheat-Master</marquee>
Тут все просто даже объяснять не нужно -------------------------------------------------------------------------------------------------------------------------------------------------
behavior="параметр" - это один из самых важных атрибутов бегущий строки. Он задает поведение бегущей строки. alternate - бегущая строка перемещается циклично: справа налево, далее слева направо (бегает между краями) Код
<marquee width="400" height="50" behavior="alternate">CheatMaster</marquee>
scroll - бегущая строка перемещается за пределы области в том направлении, которое указывает атрибут direction (с параметром), а далее циклично повторяется. Код
<marquee width="400" height="50" behavior="scroll" direction="left">CheatMaster</marquee>
slide - очень похож на scroll, однако в конце строка останавливается и больше не повторяется. Код
<marquee width="400" height="50" behavior="slide" direction="right">CheatMaster</marquee>
direction="параметры" - задает направление движения бегущей строки. down - движение сверху вниз. Код
<marquee width="400" height="50" behavior="scroll" direction="down">CheatMaster</marquee>
up - движение снизу вверх. Код
<marquee width="400" height="50" behavior="scroll" direction="up">CheatMaster</marquee>
left - движение справа налево. Код
<marquee width="400" height="50" behavior="scroll" direction="left">CheatMaster</marquee>
right - движение слева направо. Код
<marquee width="400" height="50" behavior="scroll" direction="right">CheatMaster</marquee>
scrollamount="число" - скорость движения бегущей строки. Число задает количество пикселей, на которое переместиться объект за один такт. Код
<marquee width="400" height="50" crollamount="10">CheatMaster</marquee>
scrolldelay="число" - задает задержку между шагами бегущей строки в миллисекундах. Код
<marquee width="400" height="50" scrolldelay="500"></marquee>
И напоследок приведу еще один пример связан с Img бег. строки Код
<marquee width="400" height="50"
<img src="img/smailik.jpg">
</marquee>
Третий урок - "Простое модальное окно на HTML5"
[b]HTML часть [/b]
Пользоваться данным элементом очень легко, нужно лишь в нужном месте написать: Код
<dialog id="window">
<h3>Привееет! c вами Валерьянка</h3>
<p>уроки по HTML : http://cheat-master.ru/forum/130-632567-1 </p>
<p>уроки по СSS : http://cheat-master.ru/forum/130-632743-1#3941432</p>
<button id="exit">Закрыть</button>
</dialog>
<button id="show">Чит-Мастер.Ру</button>
[b]Javascript часть [/b]
А с учетом HTML структуры, на странице мы увидим лишь кнопку «Показать». Для отображения диалогового окна нужно использовать JavaScript: Код
(function() {
Полный код: Код
<!Doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 диалоговое окно</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="demo-wrapper">
<div class="html5-dialog">
<dialog id="window">
<h3>Привееет! c вами Валерьянка</h3>
<p>уроки по HTML : http://cheat-master.ru/forum/130-632567-1 </p>
<p>уроки по СSS : http://cheat-master.ru/forum/130-632743-1#3941432</p>
<button id="exit">Закрыть</button>
</dialog>
<button id="show">Чит-Мастер.Ру</button>
</div>
</div>
<script type="text/javascript">
(function() {
var dialog = document.getElementById('window');
document.getElementById('show').onclick = function()
{
dialog.show();
};
document.getElementById('exit').onclick = function()
{
dialog.close();
};
})();
</script>
</body>
</html>
Вывод: Четвертый урок - "Выпадающее горизонтальное меню с поиском на CSS3 и HTML5"
HTML часть Элементы списка, которые содержат обычные ссылки и не имеют никакого идентификатора или класса; #settings внутри которого изображения как ссылки;#search содержит поле для поиска и кнопку отправки текста;#options содержит ссылку и список( с классом .subnav), который работает как выпадающее меню.Код
<ul class="nav">
<li id="settings">
<a href="#"><img src="images/settings.png"></a>
</li>
<li>
<a href="#">Чит-Мастер</a>
</li>
<li>
<a href="#">Валерьянка</a>
</li>
<li id="search">
<form action="" method="get">
<input name="search_text" id="search_text" placeholder="Поиск читов..." type="text">
<input name="search_button" id="search_button" type="button">
</form>
</li>
<li id="options">
<a href="#">Мои уроки</a>
<ul class="subnav">
<li><a href="#">Html</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Халява</a></li>
</ul>
</li>
</ul>
CSS часть Базовые стили: Код
* {
Навигация и вид списка Код
.nav {
Здесь задали фон для меню, а также расположили горизонтально элементы списка. Ссылки в меню Код
.nav li a {
Поле поиска Код
#search {
Выпадающая часть Код
#options a {
Вот что должно получиться :
Пятый урок - "Как прижать блок к низу"
HTML структура Рассмотрим всё на простой структуре из 3-х блоков: Код
<head>
<meta charset="UTF-8">
<title>Как прижать блок к низу | Валерьянка</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/normalize.css">
</head>
<body>
<div id="container">
<div id="header">
<div class="content">
<h1 class="title">
CHEAT-MASTER
</h1>
</div>
</div>
<div id="body">
<div class="content">
<p> Уроки от Валерьянки, HTML + CSS </p>
</div>
<div id="footer">
<div class="content">
<p class="pInFooter">http://cheat-master.ru/forum/130-632567-1 - УРОКИ HTML</p>
</div>
</div>
</div>
<a href="http://cheat-master.ru/forum/130-632567-1" class="backToSitehereBtn">
<i class="fa fa-chevron-circle-left"></i> <span>К урокам</span>
</a>
</body>
</html>
Стили CSS Код
html,
Если не получается выполнить один из уроков : Вы можете обратиться ко мне за помощью VK Маагазин аккаунтов - http://cheat-master.ru/shop/user/505313/goods http://cheat-master.ru/forum/111-636271-1 https://vk.com/rider_bmxer
Сообщение отредактировал Валерьянка - Понедельник, 15.08.2016, 12:30
