html5 designing rich internet applications visualizing the web phần 3

Một yếu tố Mục được sử dụng để xác định nơi mà các tên công ty và NAVIGATION được đặt trên màn hình. CÔNG TYPhong cách có thể được chia sẻ giữa một số yếu tố, nếu bạn muốn họ có một phong cách chung. Ví dụ, ví dụ sau đây liệt kê năm yếu tố khác nhau rằng mỗi phong cách khác nhau nhưng tất cả cùng một màu sắc và font-gia đình. | 42 PROJECT 1 BUILDING A WEB SITE USING HTML5 BLOCKING ELEMENTS Customizing the NAVIGATION Element The NAVIGATION block contains the links that will be used in the site. The following HTML describes the links on the screen. navigation i d NavigationLink class navigationStyle a href Home a a href Products a a href news. html News a a href Contact Us a navigation The NAVIGATION element as with the HEADER element has two attributes id and class. The class attribute links to the CSS style navigationStyle. You will see in Figure that there is additional content around the NAVIGATION element. Figure The NAVIGATION element is placed on the left side of the page. A SECTION element is used to define where the company name and NAVIGATION are placed on the screen. section id navigation class leftSection p id CompanyName class companyNameStyle COMPANY NAME p navigation id NavigationLink style class navigationStyle a href Home a ahref Products a a href news. html News a a href Contact Us a navigation section PROJECT 1 BUILDING A WEB SITE USING HTML5 BLOCKING ELEMENTS 43 You can see from this code example that the SECTION element contains both P and NAVIGATION elements. Each element now accurately describes the different types of content on the screen. Customizing the Main SECTION Element The center area of the web page is reserved for the main content. The HTML for this section can be described as easily as follows section section Typically you will find that the main section of any web page will contain more content. The template page is going to be set up with two areas for additional content within the SECTION element as shown in Figure and the following code. How to Format Vertical Text A CSS3 feature called Transform is used to change the angle of the text from horizontal to vertical. Figure The SECTION element contains two ARTICLE elements. section div id .