Triangle clever use of CSS strengthen
The top border width modulation large
border width to the left below the set 0
{.box1
width: 0;
height: 0;
/ * the larger top width modulated color to the transparent color solid line * /
/ * border-Top: Solid transparent 100px; * /
/ * on the left lower side is set to 0 the solid border width transparent color to line * /
/ * border-bottom: 0 solid transparent; * /
/ * border-left: 0 solid transparent; * /
/ * set the right border width dot color to the solid line can be seen * /
/ right border-*: 50px Red Solid; * /
/ * written comply * /
border-Color: Red transparent transparent transparent;
border-width: 50px 0 0 100px;
border-style: Solid;
}
CSS Initialization
Browser style again changed about
every page has a CSS initialization, we ensure browser compatibility
see body can be seen
CSS3 improved REVIEW
HTML5 new features:
There are compatibility issues
new form
input type vaule
https://www.w3cschool.cn/html5/html5-input.html
New Form Properties
required can not be empty
mention https://www.w3cschool.cn/css3/css3-selector.html placeholder text color changes shown
INPUT :: {placeholder
Color: Red
}
The autofocus automatically obtains focus
autocomplete automatically opened before the default input remember the contents of
multiple upload multiple files
The new label semantic tags
mainly would be better for search engines can be used multiple times
header header tags nav navigation bar label article tag section define an area of the document aside sidebar tag footer tail tag audio audio tag <audio Controls> <Source src = "horse.ogg" of the type = "audio / OGG"> < source src = "horse.mp3" type = "audio / mpeg"> your browser does not support the audio element. </ audio> Properties lot https://www.w3cschool.cn/htmltags/tag-audio.html Video Video Tag <Video width = "320." height = "240" Controls> <Source the src = "movie.mp4" = of the type "video / MP4"> <Source src = "movie.ogg" of the type = "video / OGG"> your browser does not support the video tag </ video> attribute a lot https: //www.w3cschool.
CSS3 new features
ie9 + is supported New Selector: https: //www.w3cschool.cn/css3/css3-selector.html attribute selector structure pseudo class selector https://www.w3cschool.cn/css3/css3-selector.html pseudo-element selector https://www.w3cschool.cn/css_series/css_series-pwkt24q2.html
Strengthening exercises Triangle
<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<Meta charset = "UTF-. 8">
<title> Production triangular reinforcing </ title>
<style>
.box1 {
width: 0;
height: 0;
/ * the larger top width modulation transparent color to color solid line * /
/ * border-Top: solid transparent 100px; * /
/ * left bottom border width set to the transparent color to the solid line 0 * /
/ * border- bottom: 0 solid transparent; * /
/ * border-left: 0 solid transparent; * /
/ * set the right border width dot color to the solid line can be seen * /
/ * border-right: 50px Red solid; * /
/ * in line with the wording * /
border-Color: Red transparent transparent transparent;
border-width: 100px 50px 0 0;
border-style: solid;
}
.price {
width: 160px;
height: 24px;
border: 1px solid red;
margin: 0 auto;
text-align: center;
line-height: 24px;
}
.price .quicklyKill {
position: relative;
float: left;
width: 80px;
height: 100%;
background-color: red;
font-weight: 700;
color: #fff;
margin-right: -8px;
}
.price .triangle {
position: absolute;
width: 0;
height: 0;
right: 0;
top: 0;
border-style: solid;
border-width: 24px 10px 0 0;
border-color: transparent white transparent transparent;
}
.price .originalPrice {
text-decoration: line-through;
font-size: 14px;
color: grey;
}
.prev {
/*首行缩进2字的距离*/
text-indent: 2em;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="price">
<span class="quicklyKill">
¥999.99
<i class="triangle"></i>
</span>
<span class="originalPrice">¥1680.99</span>
</div>
</body>
</html>
Label new features
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
header {
background-color: deeppink;
width: 50%;
margin: 0 auto;
text-align: center;
}
input::placeholder {
/*默认值是红色*/
color: red;
}
/*输入的值是红色*/
input[placeholder]{
color: red;
}
input[type=text] {
color: red;
}
input[type=password] {
Color: DeepPink;
}
div [class icon ^ =] {
Color: DeepPink;
}
sectionTop [class $ = Data] {
Color: Gray;
}
/ * * value specified number containing each element * /
/ * sectionTop [class * Data =] * /
/ * class selector dummy structure * /
UL Li: First-Child {
background-Color: DeepPink;
}
UL Li: {Last Child-
background-Color: Lime;
}
/ * may be a digital key formula * /
UL Li: Child-Nth (2) {
background-Color: # ff3d29;
}
/ * even number * /
UL Li: Child-Nth (the even) {
background-color: #b9ffa7;
}
/*奇数*/
ul li:nth-child(odd) {
background-color: yellowgreen;
}
ol li:nth-child(2n+1){
background-color: magenta;
}
section div:nth-of-type(1) {
background-color: #5bffbb;
}
/*section div:nth-last-of-type(3){*/
/* background-color: #ffff75;*/
/*}*/
</style>
</head>
<body>
<header>头部</header>
<nav>导航标签</nav>
<article>文章标签</article>
<section>定义文档某个区域</section>
<aside> Side tabs </ aside>
<footer>尾部底部标签</footer>
<!--<input type="text" required="required" placeholder="输入中文..." autofocus="autofocus" autocomplete="on">-->
<input type="text" value="" id="num1">
<input type="password" value="" id="num2">
<audio src=""></audio>音频标签
<video src=""></video>视频标签
<br>
<div class="icon1">1</div>
<div class="icon2">2</div>
<div class="icon3">3</div>
<div class="icon4">4</div>
<div class="icon5">5</div>
<li> I was the first two children </ li>
<li> I was the first one child </ li>
<ul>
<section class = "icon"> I was you </ section>
<Section class = "icon2-the Data"> I am a Godzilla </ section>
<Section class = "icon1-the Data"> I am a Godzilla </ section>
<div> I was soy sauce </ div>
<li> I am the third child </ li>
<li> I was the first of four children </ li>
<li> I was the first of five children </ li>
<li> I am the sixth child </ li>
<li> I was the first of seven children </ li>
<li> I was the first of eight children </ li>
</ ul>
<OL>
<li> I was the first one child </ li>
<li > I was the first two children </ li>
<li> I am the third child </ li>
<li> I was the first of four children </ li>
<li> I was the first of five children </ li>
<li> I was the first of six children </ li>
<li> I was the first of seven children </ li>
<li> I was the first of eight children </ li>
</ OL>
<section>
<the p-> Bears large </ P>
<div> bears two </ div>
<div> strong head </ div>
</section>
</body>
</html>
Pseudo-element
https://www.w3cschool.cn/css_series/css_series-pwkt24q2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div.arrow:before, div.arrow:after {
content: ' ';
height: 0;
width: 0;
top: 100px;
left: 255px;
position: absolute;
border: 10px solid transparent;
}
div.arrow-top:before {
border-bottom-color: #fff;
z-index: 2;
top: 102px;
}
div.arrow-top:after {
border-bottom-color: #333;
z-index: 1;
}
div.arrow-right:before {
border-left-color: #fff;
z-index: 2;
left: 297px;
top: 104px;
}
div.arrow-right:after {
border-left-color: #333;
z-index: 1;
left: 300px;
top: 104px;
}
div.arrow-bottom:before {
border-top-color: #fff;
top: 107px;
left: 330px;
z-index: 2;
}
div.arrow-bottom:after {
border-top-color: #333;
top: 110px;
left: 330px;
z-index: 1;
}
div.arrow-left:before {
border-right-color: #fff;
top: 103px;
left: 355px;
z-index: 2;
}
div.arrow-left:after {
border-right-color: #333;
top: 103px;
left: 352px;
z-index: 1;
}
</style>
</head>
<body>
<div class="arrow arrow-top"></div>
<div class="arrow arrow-right"></div>
<div class="arrow arrow-bottom"></div>
<div class="arrow arrow-left"></div>
</body>
</html>