![]() |
---|
|
Скругленные углы таблицы при помощи CSS
Одна из самых распространённых проблем при вёрстке макетов является создание закруглённых углов у таблиц и блоков на страницах и приходиться их рисовать, а затем, совершая «танцы с бубном» прикреплять их на страницу, да ещё и следить за кроссбраузерностью вёрстки. Попытаемся решить эту проблему только с помощью CSS. Конечно самый простой способ - это нарисовать эти самые углы и вставить их в таблицу. либо в отдельные блоки. Но в любом случае их нужно рисовать, и в добавление ко всем файлам на вашем сайте, будут лежать ещё и графические файлы ваших элементов оформления. Для примера воспользуемся табличной вёрсткой, но тут главное понять сам процесс, тогда и в случае вёрски с помощью слоёв не будет проблем. И так, как уже было сказано, можно делать так: < table>
Возьмём div объект и попытаемся создать округлую форму, используя только правила CSS. По умолчанию, каждый элемент имеет определённую высоту, в зависимости от типа вашего браузера. По этому, очень важное для нас свойство приобретает правило overflow, и для запрета отображения размерности контейнера, ему следует придать значение hidden. Но можно сделать это всё более продвинуто, избегая использования лишних рисунков, например с помощью JavaScript или CSS. При этом, использование JavaScript, влечёт за собой применение довольно больших и тяжёлых скриптов, так, что уж лучше даже использовать изображения скруглённых углов. А вот вслучае использования CSS представляется достаточно возможностей небольшими затратами построить нужную форму объекта. Для того, чтобы создать закруглённый угол с помощью CSS, необходимо использовать ряд независимых в плане разметки веб-страниц объектов. Ими могут выступать div, span, b, i и многие другие объекты, которые не имея внутри себя никакого контента, не подчиняются никакому правилу "по умолчанию" и не отображаются на странице. < style type="text/css">
< /div>
Пользуйтесь на здоровье. C наступающим новым годом !!!
Если хотите не упустить данный урок, добавьте его в закладки:
Рейтинг: ![]()
чет не очень понятный урок!!!!!!!
чесно, не оч(( Оставить комментарий: |
|
---|
|