Внешний вид формы:
Код формы:
<div id='auth_login_form'> <form action='' method='POST'> <h3>Authentication required</h3> <div id='error_msg'/> <p>Please enter your username/password</p> Username: <input type='text' name='username' size='20'/><br/> Password: <input type='password' name='password' size='20'/><br/> <input type='submit' value='Enter'/> </form> </div>
Воспользуемся возможностями CSS и добавим в таблицу стилей описание блока auth_login_form:
#auth_login_form {
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -90px;
width: 300px;
height: 180px;
text-align: center;
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
border: 1px solid;
# experiments only for Firefox and Safari/Webkit
border-radius: 7px;
-webkit-box-shadow: #888 3px 3px 3px;
}Основную работу по расположению формы в центре экрана выполняют position, top, left, margin-left, margin-top, width, heigth переменные. Расположением текста и элементов, а также параметры шрифтов внутри формы управляются text-align, font-family, font-size.
На что хотелось бы обратить внимание, так это на возможности border-radius и -webkit-box-shadow.
border-radius: позволяет округлить углы в блоках, указывая радиус округления. Раньше для этого нужно было использовать изображения, которые размещались в углах формы и создавали видимость округления. border-radius поддерживается в Firefox, Safari/Webkit.
-webkit-box-shadow: еще одна интересная возможность это добавление тени к блоку. Можно управлять цветом и размером тени. Поддерживается в Safari/Webkit.
Получить более детальную информацию об этих переменных можно на сайте CSS3 http://www.css3.info/preview/.
Еще один вариант решения, это использование таблиц:
<body> <table width="100%" height="100%"> <tr> <td align="center" valign="middle">The text is in center of screen.</td> </tr> </table> </body>
для поддержки теней в Mozilla Firefox: -moz-box-shadow
ОтветитьУдалить