Home > Developer > Web Develop
The next section I plan to explain is the hyperlink and the style of the list, and then we make a navigation bar out, in fact, the navigation bar is very common, but we do this here is a little less perfect, and so after we finished the CSS and then perfect it.
Hyperlink *************
1. When we talk about pseudo-class, we have mentioned that a hyperlink can have link (normal state), visited (has been visited), hover (get mouse focus) Active (by mouse click) Such four states, we have set a different color before, using the selector: The form of a pseudo-class.
2. We can also use the Background-color to set its background color, we can use Text-decoration:none to go out of the hyperlink underline.
List **************
1. As we said before in HTML, the list is divided into sequential and unordered lists, and here we explain one of its properties: List-style-type.
What does the 2.list-style-type property mean, that is, the style of the list, and for unordered lists, you can use circle and square, respectively, with circles and squares as the beginning of the unordered list.
The 3.list-style-type property can also be set to uppercase Roman numerals with a value of Upper-roman and can also be set to lowercase letters with lower-alpha.
4. It also has a property of List-style-image: Using the image as the beginning of the list item, it needs to import a picture with a URL, which we'll talk about later.
Implement a navigation bar *************
1. First, let's start with an unordered list, and then add hyperlinks to them, because here I don't know where to connect, with # to represent an empty connection, below we create a new my.html code as follows:
<HTML><Head> <title>2014 Sinsing CSS Tutorial Summer edition</title> <Linkrel= "stylesheet"type= "Text/css"href= "My.css"></Head><Body> <ul> <Li><ahref="#">Sinsing</a></Li> <Li><ahref="#">Xiao Qian</a></Li> <Li><ahref="#">Xiao Nan</a></Li> <Li><ahref="#">Sin Yong</a></Li> <Li><ahref="#">Sinqiang</a></Li> </ul></Body></HTML>
2. Then create a new My.css file as follows:
ul {List-style-type: none;} a {text-decoration: none;} Li {display: inline;}3. Our horizontal navigation bar is completed, but it is too simple, it is simply a list of five connections, and horizontal arrangement, we go to the back to improve.
4. Here is a description of the Li attribute's display:inline that the format is inline, that is, it does not appear as a block-level element, is an inline element, which is arranged to the right rather than downward.
Summary *************
1. We've learned about the common styles of hyperlinks and lists in this section.
2. Then we made out a simple navigation bar, the reader can first to improve it, if the reader does not do, I do later.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
