Home > Developer > Web Develop
Reading css section 4 and section 4 of 2014 Xin Xing css in 2014
In the next section, I plan to explain the hyperlink and list styles, and then we will make a navigation bar. In fact, the navigation bar is very common, but we have not done so well here, after learning css, we can improve it.
* ************* Hyperlink *************
1. we have already talked about pseudo classes. A hyperlink can include link (normal), visited (already accessed), and hover (getting the mouse focus) active (being clicked by the mouse) in these four states, we have set different colors before, using the selector: pseudo class form.
2. We can also use background-color to set the background color. We can use text-decoration: none to remove the underline Of the hyperlink.
**************
1. As we mentioned earlier in HTML, the list is divided into ordered list and unordered list. Here we will explain one of its attributes: list-style-type.
2. what does the list-style-type attribute mean? It refers to the style type of the list. For Unordered Lists, circle and square can be used to start the unordered list with the circle and square respectively.
3. The list-style-type attribute can also be set to upper-roman with upper-case roman numerals, or lower-case letters with lower-alpha.
4. It also has a property: list-style-image: It starts with an image as a list item. It needs to use a url to import an image, which will be discussed later.
* ********** Implement a navigation bar *************
The pipeline code is as follows:
<Html>2. A new my.css file is created as follows:
ul{list-style-type: none;}a{text-decoration: none;}li{display: inline;}3. Our horizontal navigation bar is complete, but it is still too simple. It just lists the five connections and arranges them horizontally. We will complete it later.
4. Here, the display: inline of the li attribute indicates that the format is set to inline, that is, it does not appear as block-level elements, but is inline elements, that is, to the right rather than down.
*************
1. This section describes common Hyperlink and list styles.
2. Then we made a simple navigation bar, and the reader can complete it first. If the reader does not do it, I will do it 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
