Home > Developer > Web Develop
Use CSS to beautify the product list along with Xin Xing.
To be honest, I have been paying a lot of attention to CSS recently. It's just because I like CSS and I feel like a painter's painting. I use enthusiasm and passion to explore it, without the benefit, I feel like a kind of enjoyment and a sense of accomplishment. Well, today I will share with you the step of beautifying the product list with CSS, leave a message if you have any suggestions.
First, let's take a look at the following:
If you really don't like this style, you can click Close in the upper right corner to save yourself from getting upset. Well, first create an HTML file with the content written as follows:
<Html> Then we create a new an.css file. The first step we need to do is to first kill the dots in the list and write the following code:#news ul{list-style-type: none;}At this point:
Next, we will display the date to the right, just add a floating, as shown below:
#news ul{list-style-type: none;}#news ul li span{float: right;}
At this point:
So how can we make it to the left? It's very easy. Just set a size for our news and add a border. Let's add the following code:
#news{width: 300px;height: 100px; border: 1px solid purple;}#news ul{list-style-type: none;}#news ul li span{float: right;}
We find that it overflows, and the following is displayed:
So what should we do? We can set the margin of the list. We can set it to 0, and the code will look like the following:
#news{width: 300px;height: 100px; border: 1px solid purple;}#news ul{list-style-type: none;margin: 0px;padding: 0px;}#news ul li span{float: right;}Then our results look like this:Then let's set the font of the hyperlink first. I personally like to put the font work in the last step, because I feel that it is the part with the least impact. We Add the following code:
#news{width: 300px;height: 100px; border: 1px solid purple;}#news ul{list-style-type: none;margin: 0px;padding: 0px;}#news ul li span{float: right;}.list li a{color: #777777;text-decoration: none;}.list li a:hover{color: #336699;text-decoration: none;}
The effect is as follows:
Next, let's modify the font, beautify the css file format, and close the job. The final css file:
#news{width: 300px;height: 100px; border: 1px solid purple;}#news ul{list-style-type: none;margin: 0px;padding: 0px;}#news ul li strong {color: #777777;}#news ul li span{float: right;color:#777777;}.list li a{color: #777777;text-decoration: none;}.list li a:hover{color: #336699;text-decoration: none;}And then the last one:
It's done here. I don't know what to say, but I can only say: I am Xin Xing, delivering warmth.
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
