CSS三角强化、CSS3初始化、CSS3新特性
CSS三角强化巧妙运用
把上边框宽度调大
左边下边的边框宽度设置0
.box1 {
width: 0;
height: 0;
/*把上边宽度调大一些 实线 颜色改成透明色*/
/*border-top: 100px solid transparent;*/
/*左边下边边框宽度设置成0 实线 颜色改成透明*/
/*border-bottom: 0 solid transparent;*/
/*border-left: 0 solid transparent;*/
/*右边边框宽度设置小点 实线 颜色改成可以看见的*/
/*border-right: 50px solid red;*/
/*符合写法*/
border-color: transparent red transparent transparent;
border-width: 100px 50px 0 0;
border-style: solid;
}
CSS初始化
浏览器的样式重新改一下
每个网页都有CSS初始化,保证浏览器的兼容性
看body可以看出来
CSS3的提高导读
HTML5新特性：
都有兼容性的问题
新的表单
input type vaule
https://www.w3cschool.cn/html5/html5-input.html
新的表单属性
required 不能为空
placeholder 提https://www.w3cschool.cn/css3/css3-selector.html示文本 变化颜色
input::placeholder {
color: red
}
autofocus 自动获取焦点
autocomplete 默认自动打开的 记住之前输入的内容
multiple 上传多个文件
新的标签 语义化的标签
主要是针对搜索引擎会更好 可以多次使用
header 头部标签 nav 导航栏标签 article 文章标签 section 定义文档某个区域 aside 侧边栏标签 footer 尾部标签 audio 音频标签 <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 </audio> 属性挺多https://www.w3cschool.cn/htmltags/tag-audio.html video 视频标签 <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持 video 标签 </video> 属性挺多https://www.w3cschool.cn/htmltags/tag-video.html
CSS3新特性
ie9+才支持 新增选择器：https://www.w3cschool.cn/css3/css3-selector.html 属性选择器 结构伪类选择器 https://www.w3cschool.cn/css3/css3-selector.html 伪元素选择器 https://www.w3cschool.cn/css_series/css_series-pwkt24q2.html
强化三角练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三角强化制作</title>
<style>
.box1 {
width: 0;
height: 0;
/*把上边宽度调大一些 实线 颜色改成透明色*/
/*border-top: 100px solid transparent;*/
/*左边下边边框宽度设置成0 实线 颜色改成透明*/
/*border-bottom: 0 solid transparent;*/
/*border-left: 0 solid transparent;*/
/*右边边框宽度设置小点 实线 颜色改成可以看见的*/
/*border-right: 50px solid red;*/
/*符合写法*/
border-color: transparent red 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>
标签新特性
<!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;
}
section[class$=data] {
color: grey;
}
/* *号是包含指定值的每个元素 */
/*section[class*=data]*/
/*结构伪类选择器*/
ul li:first-child {
background-color: deeppink;
}
ul li:last-child {
background-color: lime;
}
/*可以是数字 关键字 公式*/
ul li:nth-child(2) {
background-color: #ff3d29;
}
/*偶数*/
ul li:nth-child(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>侧边标签</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>
<div>我是打酱油的</div>
<section class="icon1-data">我是哥斯拉</section>
<section class="icon2-data">我是哥斯拉</section>
<section class="icon">我是你把</section>
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ul>
<ol>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ol>
<section>
<p>熊大</p>
<div>熊二</div>
<div>光头强</div>
</section>
</body>
</html>
伪元素
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>
