Здравствуйте, с вами снова я, Bew2, это воторой урок по CSS от меня, и сегодня мы пройдём на практике первый урок. Ниже представлен полностью закоментированный дизайн. Если кому-то нужен файл с графикой : profiwm.ru/zc/file3105
- - - - - - - - - - - - - - - -
body{background: #FFF; /*задаём белый фон сайта*/ max-width: 650px; /*задаём максимальную ширину сайта*/
font-family: arial; /*задаём тип шрифта*/ font-size: 12px; /*задаём размер шрифта*/ }
.head{ text-aling: conter; /*делаём логотип, текст по центру*/ background: url(/img/head.jpg); /*фон логотипа*/ padding: 10px; /*высота дива*/ }
a:link, a:active, a:visited, a:hover{text-decoration: none; /*убираем украшение текста*/ color: #696969; /*задаём цвет ссылкам*/
padding: 3px; /*делаем их в стиле тача*/ }
textarea{ /*задаём параметры для поля ввода*/ background: #696969; /*задаём фон*/ border: 1px solid #000; /*задаём рамку*/
border-radius: 9px; /*закругляем углы*/
color: #FFF; /*и шрифт введёный делаем белым*/ }
input[type=submit] { /*настраиваем кнопки на js*/
border-radius: 10px; /*закругляем*/ width: 57px; /*задаём ширину*/ }
input[type=text], input[type=password] { /*настраиваем поля ввода*/ background: #696969; /*настраиваем фон*/ border: 1px solid #000000; /*задаём рамку*/
border-radius: 17px; /*закругляем*/
color: #FFF; /*и задаём цвет шрифта при вводе*/ }
.div2{background: #696969 url(/img/img1.jpg) repeat-x; /*задаём фон, и разрешаем повторение картинки только по горизонтали*/
border-radius: 7px; /*закругляем углы*/
color: #FFF; /*задаём цвет шрифта*/
padding:8px; /*задаём высоту дива*/ }
.div2 a{ color: #FFF; /*цвет ссылок*/ }
.div3, .div4{background: #FFF url(/img/img2.jpg) repeat-x; /*задаём фон*/
border-left: 1px dotted #696969; /*задаём левую рамку*/ border-right: 1px dotted #696969; /*задаём правую рамку*/
border-bottom: 1px dotted #696969; /*и нижнюю*/
border-radius: 7px; /*закругляем углы*/
color: #696969; /*задаём цвет шрифта*/
padding: 5px; /*высота дива*/ }
.div5{background: #FFF url(/img/img2.jpg) repeat-x; /*фон*/ border-bottom: 1px solid #696969; /*нижняя рамка*/
border-left: 1px solid #696969; /*левая рамка*/
color:#696969; /*цвет текста*/
padding-left: 6px; /*отступ текста слева на 6px*/ }
.div6{background: #696969 url(/img/img2.jpg) repeat-x; /*фон*/
color: #696969; /*цвет текста*/
padding: 6px; /*высота дива*/ }
.div7{background: #FFF; /*фон*/
border-left: 1px dotted #696969; /*левая рамка*/ border-right: 1px dotted #696969; /*правая рамка*/
border-bottom: 1px dotted #696969; /*нижняя рамка*/
color: #696969; /*цвет текста*/
padding: 5px; /*высота дива*/ }
.div8{}
.div9{background: #FFF url(/img/img2.jpg) repeat-x; /*фон*/
border-left: 1px dotted #696969; /*левая рамка*/ border-right: 1px dotted #696969; /*правая рамка*/
border-bottom: 1px dotted #696969; /*нижняя рамка*/
border-radius: 7px 7px 0px 0px; /*закругляем углы*/
color: #696969; /*цвет текста*/
padding: 5px; /*высота дива*/ }
.div10{}
- - - - - - - - - - - - - - - -
В этой статье я познакомил вас с textarea{} и input[type=]{} думаю понятно, что с ними надо работать практически так же, как и с обычным дивом. Если хотим задать всем полям для ввода одно значение, то [type=] писать не нужно. Естественно это не всё в CSS , но для написания первого дизайна, информации вам хватит.
- - - - - - - - - - - - - - - -
© Bew2
profiwm.ru/us109
icq: 22549038
- - - - - - - - - - - - - - - -