Today, Baidu search engine found that the keyword ranking of "CSS + Div" fell from the first page to the fourth page, which is quite a pity. The reason should be that it has not been updated for a long time because the CSS + Div series of articles are not updated. The original planned tutorials can be updated together with the Netease homepage, but the homepage has been online in advance, however, Firefox cannot be fully adapted. I have taught some CSS + Div experts. They gave me the answer: learn from the simplest CSS attributes. Sort out study notes and grow with more CSS + Div fans.
In the course of Netease homepage revision, it is most commonly used to set a Border border on the DIV layer. It is like a table that can wrap styles, text, and images. Border border properties mainly learn border style attributes (border-style), Border Width attributes (border-width), border color attributes (border-color ), these three attributes can be diversified for the entire border or single-side frame. By means of anatomical learning, each attribute is decomposed to better learn the basic attributes and learn how to use them easily.
1. Border style attributes (border-style ),It is used to set the style of the top, bottom, and left borders. The specific parameter values are as follows:
None (no border), dotted (Dot-line border), dashed (broken line border), solid (straight-line border), double (double-line border), groove (groove Border) ridge, inset, and outset. The following uses the most common straight-line border as an example. The code reference is as follows:
<HTML>
<Head>
<Title> Xu guoping's blog </title>
<Style type = "text/CSS">
. Apple {border-style: solid ;}
</Style>
</Head>
<Body>
<Div class = "apple"> learn CSS + Div (09) based on Huludao: Strengthen border attributes </div>
</Body>
</Html>
2. Border Width attribute (border-width ),It is used to set the width of the upper, lower, and left borders. The specific parameter values include:
Medium (default), thin (fine than medium), thick (coarse than medium), length unit value; available absolute length unit (CM, mm, in, PT, PC) or the unit of relative length (EM, ex, PX) is used ). I prefer pixel units. The following code uses a straight-line 1-pixel border as an example:
<HTML>
<Head>
<Title> Xu guoping's blog </title>
<Style type = "text/CSS">
. Apple {border-style: solid; border-width: 1px ;}
</Style>
</Head>
<Body>
<Div class = "apple"> learn CSS + Div (09) based on Huludao: Strengthen border attributes </div>
</Body>
</Html>
3. border color attributes (border-color ),It is used to set the color of the top, bottom, and left borders. For the color value, refer to the color palette. The example uses the straight-line 1 pixel red border as an example. The code reference is as follows:
<HTML>
<Head>
<Title> Xu guoping's blog </title>
<Style type = "text/CSS">
. Apple {border-style: solid; border-width: 1px; border-color: red ;}
</Style>
</Head>
<Body>
<Div class = "apple"> learn CSS + Div (09) based on Huludao: Strengthen border attributes </div>
</Body>
</Html>
It should be very easy to break down these three attributes. The last attribute example can easily combine the previous two attributes. In fact, such writing is too detailed, and the code can be simplified using a comprehensive writing method.
. Apple {border-style: solid; border-width: 1px; border-color: red ;}
Written as <span style = "color: Red">. Apple {border: 1px solid red ;}</span>
The above Border border attribute is the unified setting of the top, bottom, and left borders, of course, can also be set separately. For example, for the right border, you only need to change the parameter value to: border-right, border-right-width, border-right-style, and border-right-color. The following is an example,
<HTML>
<Head>
<Title> Xu guoping's blog </title>
<Style type = "text/CSS">
. Apple {border-top: 1px solid red; border-Right: 2px Double blue; border-bottom: 1px solid red; border-left: 2px Double blue ;}
</Style>
</Head>
<Body>
<Div class = "apple"> learn CSS + Div (09) based on Huludao: Strengthen border attributes </div>
</Body>
</Html>
To enhance the border attribute, I thought I should master some basic knowledge from my own time, because the most important thing about these codes is to learn to use them. It is useless to simply look at the code and learn to write the code by myself, in this way, you can find the wrong Writing Method and correct some common writing methods to speed up the process of writing code manually. In the next lesson, I want to share my personal learning notes on font attributes!
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
