Đang chuẩn bị nút TẢI XUỐNG, xin hãy chờ
Tải xuống
Dưới đây là làm thế nào bạn có thể thêm padding để quản lý phong cách của bạn.Thay đổi giá trị của bán kính biên giới sẽ thay đổi kích thước của biên giới. Ví dụ:Có điều khiển khác, bạn có thể thêm vào yếu tố Video của bạn., các yếu tố Video HTML5 trưởng thành,n. | 114 PROJECT 2 APPLYING CSS3 TO YOUR WEB DESIGN Creating a Menu with CSS Having a menu system is a common feature for all web sites. For your new HTML5 web site there is no reason why you too cannot have a cool menu system. The current navigation uses just text but with a little more effort we can create an elegant CSS solution. The screenshot in Figure 2.13Proj shows what the new menu will look like. Figure 2.13Proj A 100 CSS menu system. The new menu is now more graphically pleasing and comes with submenus that can link to different web sites. Believe it or not this menu is not created with JavaScript or Flash. It is all CSS. There are three main elements to this menu HTML content Images to create the button effects Lots of CSS Let s start by looking at the HTML. The current menu looks as follows. navigation id NavigationLink style class navigationStyle a href default.html Home a a href products products.html Products a a href news news. html News a a href contactUs.html Contact Us a navigation You cannot add submenus to this structure. To add submenus you need to control how the content is listed on the page. Fortunately HTML has the LIST element that allows you to PROJECT 2 APPLYING CSS3 TO YOUR WEB DESIGN 115 easily indent lists. Using CSS you will see how to show and hide top- and second-level list elements Figure 2.14Proj . Your new HTML will look like the following. navigation id NavigationLink style class navigationStyle section class menu ul li a class left_nosub href default. html Home a li li a class center_hassub href products products.html Products a ul li a href products project.html Current Projects a li li a href products clients.html Clients a li li a href products archives.html Archives a li li a href products ideas.html Submit An Idea a li ul li li a class center_hassub href news news. html News a ul li a href news article.html Articles a li li a href news timeline.html Timeline a li ul li li a class right_nosub href contactUs. html Contact Us a
