745 Итак, поехали!
Для начала создаём текстовый файл(блокнот). Переименовываем его в «Index.html» (без кавычек, не забудьте изменить расширение с .txt на .html). Далее создаём отдельный файл со стилями — это будет основа нашей кнопки, так как в этом файле будет храниться её внешний вид, который можно будет легко корректировать. Файл назовём «style.css» ( создаём его по тому же принципу, как и предыдущий файл с заменой расширения .txt на .css, имя прописываем без кавычек). Желательно переместить эти созданные файлы в отдельную папку, назовём её My First Button.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!--Начало разметки--> <html> <head> <!--Подключение второго файла со стилями Созданные нами файлы обязательно должны быть в одной папке--> <link href="style.css" rel="stylesheet" type="text/css"> <!--Заголовок страницы в браузере--> <title>Моя первая кнопка</title> </head> <body> <!--Разметка самой будущей кнопки--> <nodiv class="MyFirstButton"><a href="#">Это моя кнопка</a></nodiv> </body> </html> |
Теперь сохраните то, что написали и откройте файл «Index.html» в браузере (желательно пользоваться браузером Mozilla Firefox, Opera, Google Chrome, Safari). На экране должна появиться подчеркнутая надпись «Это моя кнопка». Немного не в тему, но вес же, а вы знаете Как скачать музыку с Вконтакте? Если нет, то заходите на toprat.ru.
Приступим к написанию разметки в файле «Index.html». Как только увидели её, открываем второй файл «Style.css»
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
Там пишем код: /* Наш класс, указанный в "Index.html" */ /* Поведение в спокойном состоянии */ .MyFirstButton a { /* Отображение на мониторе */ display: inline-block; /* Цвет фона кнопки, если не будет поддерживаться градиент */ background: #74d9b6; /* Градиент */ background: linear-gradient(to top, #3b9174, #74d9b6); background: -moz-linear-gradient(to top, #3b9174, #74d9b6); background: -webkit-linear-gradient(to top, #3b9174, #74d9b6); background: -o-linear-gradient(to top, #3b9174, #74d9b6); /* Размер шрифта */ font-size: 60px; /* Тип шрифта */ font-family: Arial, Verdana, Sans-serif; /* Цвет шрифта */ color: #ebebeb; /* Убираем подчеркивание текста */ text-decoration: none; /* Значение 4-х полей */ padding: 25px 45px 25px 45px; /* Рамка */ border: 10px solid #f5f5f5; /* Радиус закругления */ border-radius: 90px; -moz-border-radius: 90px; -webkit-border-radius: 90px; -o-border-radius: 90px; /* Тень */ box-shadow: 0 0 10px rgba(0,0,0,0.5); -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); -o-box-shadow: 0 0 10px rgba(0,0,0,0.5); } /* Поведение при наведении курсора */ .MyFirstButton a:hover { background: #74d9b6; background: linear-gradient(to top, #74d9b6, #3b9174); background: -moz-linear-gradient(to top, #74d9b6, #3b9174); background: -webkit-linear-gradient(to top, #74d9b6, #3b9174); background: -o-linear-gradient(to top, #74d9b6, #3b9174); } /* Поведение при клике */ .MyFirstButton a:active { background: #3b9174; } |
Не забывайте обновлять страницу браузера, если внесли изменение в код, а также сохраняйте эти изменения!
Удачи!
