TAILIEUCHUNG - The CSS Anthology: 101 Essential Tips, Tricks & Hacks- P18

The CSS Anthology: 101 Essential Tips, Tricks & Hacks- P18:Apart from writing books like this one, I write code. I make my living by building web sites and applications as, I’m sure, many readers of this book do. I use CSS to complete jobs every day, and I know what it’s like to struggle to make CSS work when the project needs to be finished the next morning. | CSS Positioning and Layout 317 The markup for this example is as follows. The top-left and bottom-left images are included in the document itself within top and bottom divs chapter09 DOCTYPE html PUBLIC - W3C DTD XHTML Strict EN http TR xhtml1 DTD html xmlns http 1999 xhtml lang en-US head title Rounded corners title meta http-equiv Content-Type content text html charset utf-8 link rel stylesheet type text css href head body div class rndbox div class rndtop img src alt width 30 height 30 div p Lorem ipsum dolor sit amet consectetuer adipiscing p div class rndbottom img src alt width 30 height 30 div div body html The top-right and bottom-right images are included as background images in the CSS for the divs with the classes rndtop and rndbottom chapter09 excerpt .rndbox background C6D9EA width 300px font Verdana Arial Helvetica sans-serif color 000033 .rndtop background url no-repeat right top .rndbottom background url no-repeat right top .rndbottom img Download at 318 The CSS Anthology display block .rndbox p margin 0 0 Together the images markup and CSS create a curved box like the one shown in Figure . Lorem ipsum dolor sit amet consectetuer adipiscing Figure . A curved box created by using markup and images Solution 3 Using JavaScript Adding markup and images to your code can be an unattractive option especially if you have a lot of boxes requiring rounded corners. To deal with this problem many people have come up with solutions that use JavaScript to add the rounded corners to otherwise square boxes. The beauty of this is that even if users have JavaScript disabled they see a perfectly usable site it merely lacks the additional style of the curved edges. Various methods have been devised to achieve rounded corners using JavaScript but here we ll look at just one NiftyCube as it s .

• Đồ họa - Thiết kế - Flash
• thiết kế web
• giáo trình flash cơ bản
• kĩ thuật cắt html
• giáo trình photoshop
• css cơ bản
• Thiết kế trang web
• hướng dẫn Thiết kế trang web
• kinh nghiệm Thiết kế trang web
• tài liệu Thiết kế trang web
• cẩm nang Thiết kế trang web
• kỹ thuật Thiết kế trang web
• Bài giảng Thiết kế Web
• Đại cương Thiết kế Web
• Tổng quan Thiết kế Web
• Môn học Thiết kế Web
• Mục tiêu Thiết kế Web
• Giáo trình Thiết kế giao diện web
• Thiết kế và quản lý website
• Thiết kế giao diện web
• Nhận dạng các trang web
• Cấu trúc trang web
• phương pháp thiết kế trang Web
• kỹ thuật thiết kế Web
• thiết kế web nhanh
• thực hành thiết kế web
• thiết kế web đẹp
• tài liệu về thiết kế web
• thủ thuật thiết kế web
• mẹo dùng web
• học thiết kế web
• Thiết kế web động
• tài liệu Thiết kế web động
• hướng dẫn Thiết kế web động
• kinh nghiệm Thiết kế web động
• cẩm nang Thiết kế web động