Beautify Web page elements
1.span Tags
Focus on prominent words, wrapped in span s
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #title1{ font-size: 50px; } </style> </head> <body> Welcome to Learning <span id="title1">Java</span> </body> </html>
2. Font Styles
<!-- font-family: Typeface font-size: font size font-weight: Font thickness color : Font color --> <style> body{ font-family: "Arial Black", Kai Typography; color: #a13d30; } h1{ font-size: 50px; } .p1{ font-weight: bolder; } </style>
3. Text Styles
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Story Introduction</h1>
<p class="p1">
The peaceful and tranquil realm of Yuan Pan, every 333 years, there will always be a mysterious and terrifying rebirth of the anomalous creature, which is Quebec!Every time Quebao appears, it will bring great disasters to the realm of Yuan Pan!Even the heavenly gods are on the run.With the full force from both worlds, Quebab was wiped out one after another, but always reappeared in a 333-year cycle.In 1664 Quebah's era, after an over-precise calculation of the celestial nerves, it was destructively hit immediately before Quebah came to life.But no one expected that a new generation of Quebec had successfully escaped a fatal blow because of a mistake.Soon Quebec and the Divine Alliance of Territories both detected signs that Quebec was still alive.Therefore, finding Quebec, completely eliminating Quebec, once again became the ultimate goal of the warriors everywhere.
</p>
<p>
In remote veterinary nest villages, barbarians and barbarians work hard every day to acquire chivalrous tattoos that symbolize success and glory, but upset the chickens and dogs in the villages they live in.The villagers racked their brains to drive them away.One day, a conscription order to eliminate Quebab suddenly spread to Wawo Township. The village chief took the opportunity to encourage barbarians and barbarians to join the army.However, in a world where everything is spoken on the basis of tattoos, a fake tattoo of a barbarian, not to mention joining the army, is not even qualified to live in a shop.The discriminated barbarbarian decided to mix up the giant warship that was about to leave to destroy Quebec, directly challenge Quebec and exchange his blood for the highest honor.
</p>
<p class="p3">
Since there's no help, come let us kiss and part;Nay, I have done, you get no more of me,And I am glad, yea glad with all my heartThat thus so cleanly I myself can free;Shake hands forever, cancel all our vows,And when we meet at any time again,Be it not seen in either of our browsThat we one jot of former love retain.Now at the last gasp of Love's latest breath,When, his pulse failing, Passion speechless lies,When Faith is kneeling by his bed of death,And Innocence is closing up his eyes,Now if thou wouldst, when all have given him over,From death to life thou mightst him yet recover.
</p>
</body>
</html>
-
colour
-
How text is aligned
<style> /*Color: RGB 0~F Hexadecimal RGBA A(Transparency: 0~1 */ /*text-align: Typography, Center*/ h1{ color:rgba(0,255,0,0.5); text-align: center; } </style>
-
text-indent
.p1{ text-indent: 2em; }
.p3{ background: chartreuse; height:300px;/*Background (block) height*/ line-height: 300px;/*Row Height*/ /*Line height and block height align to center a single line of text*/ }
-
Underline
text-decoration: underline;/*Underline*/ text-decoration: line-through;/*strikethrough*/ text-decoration: overline;/*Overline*/ /*a Underline labels (hyperlinks)*/ a{ text-decoration: none; }
-
Text Picture Horizontal Alignment
vertical-align: middle;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img,span{ vertical-align: middle; } </style> </head> <body> <p> <img src="images.PNG" alt=""><!--Note the path where the pictures are stored--> <span>image</span> </p> </body> </html>
-
Total Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
Color:
Word
RGB 0~F
RGBA A: 0~1
text-align: typesetting, centering,
text-indent: 2em; indentation of first line of paragraph
height: 300px;
line-height: 300px;
Row height, consistent with block height, centers up and down
-->
<style>
h1{
color: rgba(0,255,255,0.9);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: #2700ff;
height: 300px;
line-height: 300px;
}
/*Underline*/
.l1{
text-decoration: underline;
}
/*Medium dash*/
.l2{
text-decoration: line-through;
}
/*Underline*/
.l3{
text-decoration: overline;
}
/*Underline hyperlinks*/
a{
text-decoration: none;
}
/*<!--*/
/*Horizontal alignment~Reference, a, b*/
/*-->*/
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<a href="">123</a>
<p class="l1">1231231</p>
<p class="l2">1231231</p>
<p class="l3">1231231</p>
<h1>Story Introduction</h1>
<p class="p1">
The peaceful and tranquil realm of Yuan Pan, every 333 years, there will always be a mysterious and terrifying rebirth of the anomalous creature, which is Quebec!Every time Quebao appears, it will bring great disasters to the realm of Yuan Pan!Even the heavenly gods are on the run.With the full force from both worlds, Quebab was wiped out one after another, but always reappeared in a 333-year cycle.
</p>
<p>
In remote veterinary nest villages, barbarians and barbarians work hard every day to acquire chivalrous tattoos that symbolize success and glory, but upset the chickens and dogs in the villages they live in.The villagers racked their brains to drive them away.One day, a conscription order to eliminate Quebab suddenly spread to Wawo Township. The village chief took the opportunity to encourage barbarians and barbarians to join the army.However, in a world where everything is spoken on the basis of tattoos, a fake tattoo of a barbarian, not to mention joining the army, is not even qualified to live in a shop.The discriminated barbarbarian decided to mix up the giant warship that was about to leave to destroy Quebec, directly challenge Quebec and exchange his blood for the highest honor.
</p>
<p class="p3">
Since there's no help, come let us kiss and part;Nay, I have done, you get no more of me,And I am glad, yea glad with all my heartThat thus so cleanly I myself can free;Shake hands forever, cancel all our vows,And when we meet at any time again,Be it not seen in either of our browsThat we one jot of former love retain.Now at the last gasp of Love's latest breath,When, his pulse failing, Passion speechless lies,When Faith is kneeling by his bed of death,And Innocence is closing up his eyes,Now if thou wouldst, when all have given him over,From death to life thou mightst him yet recover.
</p>
<p>
<img src="images.PNG" alt="><!--Note the path to store the picture-->
<span>image</span>
</p>
</body>
</html>
4. Shadows
/*text-shadow: Shadow Color, Horizontal Offset, Vertical Offset, Shadow Radius*/ #price{ /*Note the positive and negative values of the offset*/ text-shadow: #3cc7f5 10px -10px 2px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>book</title> <style> #price{ text-shadow: red 2px -2px 0px; } </style> </head> <body> <p id="price"> Price: 99 yuan </p> </body> </html>
5. Hyperlink pseudo-classes
Master: a:hover
/*Default color*/ a{ text-decoration: none; color: #000; } /*The state of the mouse hovering (just remember: hover)*/ a:hover{ color: orange; font-size: 50px; }
Here's an example of a hyperlink pseudoclass by looking for a picture of yourself:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>book</title> <style> /*Set the initial default color*/ a{ text-decoration: none; color: black; } /*Settings for mouse hovering over label a*/ a:hover{ color:chartreuse; } </style> </head> <body> <a href="#"> <img src="a.jpg" alt=""> </a> <p> <a href="#">Coding efficiency, Java Development Manual</a> </p> <p> <a href="#">Author: Teacher Alone</a> </p> </body> </html>
Move the mouse over the label a and you will see the effect!
More glamorous version:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>book</title> <style> /*Set the initial default color*/ a{ text-decoration: none; color: black; } /*Settings for mouse hovering over label a*/ a:hover{ color:chartreuse; /*Set the size of the font that the mouse hovers over label a*/ font-size: 50px; } /*When mouse click is not released*/ a:active{ color:hotpink; } </style> </head> <body> <a href="#"> <img src="a.jpg" alt=""> </a> <p> <a href="#">Coding efficiency, Java Development Manual</a> </p> <p> <a href="#">Author: Teacher Alone</a> </p> </body> </html>
6. List
If you don't understand it here, look down and see an example below to see how to use it.
/*ul li*/ /* list-style: none Remove Origin circle Hollow circle decimal number square Square */ /*ul{*/ /*background: #a0a0a0;*/ /*}*/ ul li{ height: 30px; list-style: none; text-indent: 1em; }
7. Background
Background can set either color or background picture
Find your own pictures here and do the following tests
<style> div{ width: 1000px; height: 700px; border: 1px solid red;/*Border: Thick and thin font color*/ background-image: url("images/tx.jpg"); /*The default is repeat for all tiles*/ } .div1{ /*tile horizontally*/ background-repeat: repeat-x; } .div2{ /*Tile Vertically*/ background-repeat: repeat-y; } .div3{ /*no-repeat*/ background-repeat: no-repeat; } </style>
Combine lists and backgrounds, for example:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>List Style</title> </head> <body> <h2 class="title">All Categories</h2> <ul> <li><a href="#">books</a> <a href="#">Audio and Video</a> <a href="#">Digital Goods</a></li> <li><a href="#">Household Electric Appliances</a> <a href="#">Mobile phone</a> <a href="#">Digital</a></li> <li><a href="#">Computer</a> <a href="#">To work in an office</a></li> <li><a href="#">Home Furnishing</a> <a href="#">home decoration</a> <a href="#">Kitchen utensils</a></li> <li><a href="#">Clothing Shoes and Hats</a> <a href="#">Makeup protectors</a></li> <li><a href="#">Gift box</a> <a href="#">Clocks and watches</a> <a href="#">Jewellery</a></li> <li><a href="#">Food and beverage</a> <a href="#">Health Food</a></li> <li><a href="#">lottery</a> <a href="#">travel</a> <a href="#">Charging</a> <a href="#">Ticketing</a> </li> </ul> </body> </html>
Make these interfaces look better and more human:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>List Style</title> <link href="css/style.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="nav"> <h2 class="title">All Categories</h2> <ul> <li><a href="#">books</a> <a href="#">Audio and Video</a> <a href="#">Digital Goods</a></li> <li><a href="#">Household Electric Appliances</a> <a href="#">Mobile phone</a> <a href="#">Digital</a></li> <li><a href="#">Computer</a> <a href="#">To work in an office</a></li> <li><a href="#">Home Furnishing</a> <a href="#">home decoration</a> <a href="#">Kitchen utensils</a></li> <li><a href="#">Clothing Shoes and Hats</a> <a href="#">Makeup protectors</a></li> <li><a href="#">Gift box</a> <a href="#">Clocks and watches</a> <a href="#">Jewellery</a></li> <li><a href="#">Food and beverage</a> <a href="#">Health Food</a></li> <li><a href="#">lottery</a> <a href="#">travel</a> <a href="#">Charging</a> <a href="#">Ticketing</a> </li> </ul> </div> </body> </html>
/*Set background color and size*/ #nav{ width: 300px; background: chartreuse; } .title{ font-size: 18px; font-weight: bold; text-indent: 1em; line-height: 35px; /* Color, picture, picture position, tiling */ /*Title arrow picture, note the path where the picture is stored*/ background: #ff3ee0 url("../../images/d.gif") 270px 10px no-repeat; } ul li{ height: 30px; list-style: none; text-indent: 1em; /*List arrow pictures, note the path where the pictures are stored*/ background-image: url("../../images/r.gif"); background-repeat: no-repeat; background-position: 236px 2px; } a{ text-decoration: none; font-size: 14px; color: #000; } a:hover{ color: #ff1e2c; text-decoration: underline; } /*ul li*/ /* list-style: none Remove Origin circle Hollow circle decimal number square Square */ /*ul{*/ /*background: #a0a0a0;*/ /*}*/
After reading this example, you should have a better understanding of the list and background above.
8. Gradient
background-color: #FFFFFF; background-image: linear-gradient(115deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%)
You can come down and find some examples to practice, mainly to master this writing grammar.
