Создаём сокращатель URL. Часть 1.
Теория - вещь нужная. Без теории никуда. Но, если вы будете просто её знать, вы врядли сможете что-нибудь сделать на практике. Вот именно это я и хочу исправить, так что сегодня я начинаю цикл статей, в которых мы с вами пошагово создадим сокращатель URL.
Как это будет работать
У нас будет текстовое поле и кнопка. В поле будет вводиться какой-нибудь url(например, http://test.com/), а на выходе мы будем получать строку примерно такого вида: http://наш_домен.ru/1njcht/ Кликнув по данной ссылке, мы перейдём на test.com. Также, в базу данных будет занесено значение 1njcht и соотвествующий ему адрес test.com.
В этой статье мы не будем заниматься программированием, а создадим HTML разметку и CSS стили для неё. Итак, давайте же начнём.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Сокращатель URL</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h1 class="title">Сокращатель URL</h1>
<form action="shorten.php" method="post">
<input type="url" name="url" placeholder="Введите URL" autocomplete="off">
<input type="submit" value="Сократить">
</form>
</div>
</body>
</html>
В разметке нет ничего сложного, кроме того, что мы используем здесь поле типа url и новые атрибуты, появившиеся в html5, но всё это мы уже изучали в предыдущих статьях, и это не должно вызывать трудностей. Перейдём теперь к стилям CSS.
body {
font: 0.9em Tahoma, sans-serif;
}
.title {
font-weight: normal;
}
.container {
width: 100%;
max-width: 600px;
text-align: center;
margin: 0 auto;
}
input {
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
margin: 0;
}
input[type="url"] {
width: 300px;
}
input[type="url"]:focus {
border: 1px solid blue;
}
input[type="submit"] {
padding: 9px;
transition: all .3s;
}
input[type="submit"]:hover {
box-shadow: 0 0 3px #faf;
transition: all .3s;
}
Стили пояснять тоже нет смысла, т.к. абсолютно всё вы здесь уже должны знать.
Итак, это всё. Вот какая красивая форма у нас получилась!
На этом я заканчиваю первую статью. Увидимся в следующей!
-
Создано 26.04.2014 20:20:33
-
Михаил Русаков
Комментарии (3):
Зачем нужен класс title, если можно применить к h1! Зачем container, если есть body!
Ответить
а вдруг там будут ещё блоки или куча h1 которым нужен другой стиль либо наоборот,всем одинаковый,а этому первому -другой?)
Ответить
Доброго времени суток всем! Вот у меня этот блок из css input[type="url"]:focus { border: 1px solid blue; } // border: 1px solid blue; // не сработал, то есть, нет голубого бордера, даже при увеличении 10px нет.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.