Home > Developer > Web Develop
The div css Dash Tutorial includes tutorials that explain the various styles of div dashed cases that often appear in the CSS tutorial.
This section introduces common CSS dashed lines and div tutorials. CSS dashed underline, list dotted line all done.
This is where the dashed border of the border property is border control. The following settings for CSS Heights (CSS height) and css widths (CSS width) are 350 pixels for easy viewing to demonstrate other meanings.
One or four edges are dashed borders
border:1px dashed #000; Black dashed border
Instance:
CSS code:. divcss5{border:1px dashed #000; height:50px;width:350px}
HTML code: <div class= "DIVCSS5" > My four-sided black dashed border </div>
This sets the border abbreviation to define the black dashed border of the DIVCSS5 selector with a four-sided border of 1px.
Two, the left is a dashed line:
CSS code:. divcss5-1{border-left:1px dashed #000; height:50px;width:350px}
HTML code: <div class= "divcss5-1" > My left is a black dashed border </div>
This sets the left side as a dashed black border
Three, the right is dashed:
CSS code:. divcss5-2{border-right:1px dashed #000; height:50px;width:350px}
HTML code: <div class= "divcss5-2" > My right is a black dashed border </div>
This sets the black dashed border to the right side
Four, the top edge (top) is a dashed line:
CSS code:. divcss5-3{border-top:1px dashed #000; height:50px;width:350px}
HTML code: <div class= "divcss5-3" > My top is a black dashed border </div>
This sets the top edge (upper edge) side as a black dashed border
Five, bottom edge (bottom) is dashed:
CSS code:. divcss5-4{border-bottom:1px dashed #000; height:50px;width:350px}
HTML code: <div class= "divcss5-4" > My bottom is a black dashed border </div>
This sets the bottom (bottom edge) side as a dashed black border
Six, any side is not a dashed line, the other three-sided dashed situation
Joins the right border without a dashed line and no edges, and the other three sides are dashed black borders
CSS code:. divcss5-5{border:1px dashed #000; border-right:0; height:50px;width:350px}
HTML code: <div class= "divcss5-5" > My right border has no edges and the other three sides are black dashed border instances </div>
This is done by first setting the object to a black 1px dashed border, followed by setting the edge to 0, which is equivalent to setting the border dashed property of 3 sides, but note the border property setting before and after the order.
The complete DIV+CSS code for the above example is as follows:
| <! DOCTYPE html> <meta charset= "gb2312"/> <title>css Dashed DIVCSS5 Instance Description <title>www.divcss5.com</title> <style> . divcss5{border:1px dashed #000; height:50px; width:350px} . divcss5-1{border-left:1px dashed #000; height:50px;width:350px} . divcss5-2{border-right:1px dashed #000; height:50px;width:350px} . divcss5-3{border-top:1px dashed #000; height:50px;width:350px} . divcss5-4{border-bottom:1px dashed #000; height:50px;width:350px} . divcss5-5{border:1px dashed #000; border-right:0;height:50px;width:350px} /* www.divcss5.com Instance */ </style> <body> Www.divcss5.com CSS Dashed Instance instance <br> <div class= "DIVCSS5" > My four edges for dashed border </div><br> <div class= "Divcss5-1" > My left is a dashed black border </div><br> <div class= "Divcss5-2" > My right side is black dashed border </div><br> <div class= "divcss5-3" > My top is a black dashed border </div><br> <div class= "Divcss5-4" > My bottom is a black dashed border </div><br> <div class= "divcss5-5" > My right border has no edges and the other three sides are black dashed border instances </div> </body> |
The above shows a dashed border of various colors, such as to learn more about CSS border (CSS border) can enter: http://www.divcss5.com/rumen/r120.shtml
2. Hyperlink dashed underline-TOPWe often set the text content to be linked or underlined with a dotted line, or the mouse moved to a linked text appears dashed underline, this how to achieve it, here is about CSS hyperlinks to the dashed underline.
One, with linked text with dashed underline
This is also the CSS style that controls the hyperlink a object through the CSS border border property.
Demo CSS Code:
a{border-bottom:1px dashed #111;} /* Here set the dotted underline below the text with the link */
a:hover{border:0;} /* This setting does not show a dashed line when the mouse is linked text */
Full div CSS Code:
| <! DOCTYPE html> <meta charset= "gb2312"/> <title>css Dashed Underline DIVCSS5 Instance Description </title> <style> a{border-bottom:1px dashed #111; text-decoration:none;} a:hover{border:0;} </style> <body> |
Description: Text-decoration:none; This is to remove the CSS underline (the hyperlink default comes with the underline attribute)
The above is a dashed underline for text with CSS hyperlinks.
When the mouse is placed on the linked text, a dashed underline appears.
This is similar to the above, just remove the underline for hyperlink A, and underline the dotted border below the CSS text when the mouse passes.
Corresponding CSS code:
A{text-decoration:none;}
a:hover{border-bottom:1px dashed #111;}
This is achieved, you might want to try the hyperlink underline instance.
Often when they touch CSS Li, they want this CSS list style to split the dotted line below each row
Here we only need to set the bottom border of Li to a dashed border.
First, we set up CSS code in the case of CSS initialization:
li{border-bottom:1px dashed #111;} You can implement Li's list-based content such as dashed-line-separated effects (a dashed border at the bottom of each Li content)
And we often meet Li's bottom dotted line is small as a point so small, and border is very difficult to achieve, this time we need a dotted line of the picture can (side 1 pixels wide 3 pixels of 1 pixel color picture can be achieved)
Corresponding CSS Li code:
Li{background:url (point picture Path) repeat-x 0 Bottom}
Here is no longer a detailed demonstration of our VIP also for everyone in detail and demonstrate the production of various Li CSS knowledge points.
Well, that's a good idea. You can also use a dashed line on the Div object to achieve horizontal dashed split lines by setting the dashed attribute on the HR horizontal label.
The following can be taken here:
To set a horizontal dashed line for a div:
. divcss5{height:1px; width:100%; border-bottom:1px dashed #000;}
Corresponding HTML code:
<div class= "DIVCSS5" ></div>
To set properties on the HR horizontal split line:
First, set the dashed attribute within the HR tab:
This shows that the size is the value of HR and one side is set to 1.
The second CSS property that defines HR in CSS code or CSS files
HR {border-top:1px dashed #00F;}
corresponding HTML within the HR header code:
<HR size=1>
Here is the set of HR border to the top or bottom of any one edge of 1 pixels of a blue dashed border, and set the HR size of 1, and the first value is roughly the same, the only difference is that when the HR tag appears in HTML, the HR tag attribute is set to CSS, if the page appears multiple times can reduce the amount of code.
All of the above CSS dashed line related to CSS borer, CSS underline, CSS background and other knowledge, I hope you can master a variety of methods to set the div dashed, dashed border, div CSS dashed underline method.
Go to: http://www.divcss5.com/shili/s296.shtml
Div+css Dashed Border | CSS dashed underline and dashed list tutorial
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
