一：边界圆角 
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>边界圆角</title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: orange; } /*单角设置*/ .box { /*一个固定值: 横纵*/ border-top-left-radius: 100px; /*两个固定值:横 纵*/ border-top-left-radius: 100px 50px; /*百分比赋值*/ border-top-left-radius: 100%; } /*整体赋值*/ .box { /*不分方位(横纵)*/ /*左上为第一个角,顺时针,不足找对角*/ /*border-radius: 10px 100px 50px;*/ /*区分横纵*/ /*1./前控制横向,后控制纵向*/ /*2.横向又可以分为1,2,3,4个值,纵向毅然*/ border-radius: 10px 100px 50px / 50px; /*左上横10 右上横100 右下横50 左下横100 / 纵向全为50*/ /*所有最多可以赋值8个值*/ } </style> </head> <body> <div class="box"></div> </body> </html>
二：a_img_list标签
1、基本使用
2、属性
3、其他应用场景
4、锚点
5、img 使用
6、list 列表
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>a_img_list</title> <style type="text/css"> /*reset操作: a标签一些默认属性的清除*/ a { color: #333; text-decoration: none; outline: 0; } </style> </head> <body> <!-- 一.基本使用 --> <!-- 超链接标签:a --> <!-- 双/行/单一类型标签 --> <a href="https://www.baidu.com">前往百度</a> <a href="./05_边界圆角.html">前往边界圆角页面</a> <!-- ./或省略代表当前文件所在路径,可以访问与该文件同路径下的所有文件及文件夹 --> <a href="./temp/temp.html">前往temp页面</a> <!-- 二.属性 --> <!-- title:鼠标悬浮的文本提示 --> <!-- target:_blank,新开空白标签位来打开目标页面 --> <a href="http://sina.com.cn" title="新浪网" target="_blank">前往新浪</a> <!-- 三.其他应用场景 --> <!-- mailto | sms | tel --> <a href="mailto:zero@163.com">信息给zero</a> <!-- 四.锚点 --> <!-- a与a href="#锚点名" -- name="锚点名" --> <!-- a与标签 href="#锚点名" -- id="锚点名" --> <a href="#tag">前往底部</a> <!-- 测试锚点请tab --> br * 100 <!-- 设置一个锚点 --> <!-- .bottom做底部布局的区域 --> <div class="bottom"> <a name="tag"></a> <!-- <i id="tag"></i> --> <!-- <div id="tag"></div> --> ... </div> <!-- 五.img使用 --> <!-- src可以连接本地及网络图片 --> <!-- alt:资源加载失败时的文本提示 --> <!-- title:图片的文本信息(鼠标悬浮时展示) --> <!-- <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537511739499&di=f5f2763fe54c8ea4d89b2fafe0569c84&imgtype=0&src=http%3A%2F%2Fimg.alicdn.com%2Fimgextra%2Fi1%2FTB2IZbxogmTBuNjy1XbXXaMrVXa_%2521%25212754890204.jpg_400x400.jpg" alt="雪纳瑞" title="一览雪纳瑞风姿"> --> <!-- 六.list列表 --> <!-- reset操作 --> <style type="text/css"> ol, ul { margin: 0; padding: 0; list-style: none; } </style> <!-- 有序列表 --> <ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> <!-- 无需列表:常用 --> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> </body> </html>
三：伪类选择器
伪类可以单独出现，
位置伪类分为两种：
1、先匹配位置，再匹配类型
2、先确定类型，再匹配位置
a标签的三大伪类：
1、内容伪类
2、位置伪类
3、取反伪类
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style type="text/css"> a { color: #333; text-decoration: none; } /*:link为一个整体,代表超链接的初始状态*/ a:link { color: orange; } /*:hover鼠标悬浮*/ a:hover { color: green; /*鼠标样式*/ cursor: pointer; } /*:active活动状态中(被鼠标点击中)*/ a:active { color: red; } /*:visited访问过的状态*/ a:visited { color: cyan; } /*普通标签运用: :hover :active*/ .box { width: 200px; height: 200px; background-color: red; } .box:hover { background-color: orange; cursor: pointer; } .box:active { width: 400px; border-radius: 50%; } /*内容伪类*/ .txt:before { content: "我是前缀~~~" } .txt:after { content: ">>>我是后缀" } /*伪类可以单独出现*/ /*:after { content: "呵呵" }*/ /*位置伪类*/ /*1.位置从1开始*/ /*2.*/ /*先匹配位置,再匹配类型: 找到所有结构下的第2个标签,如果刚好是div,那么匹配成功*/ /*body a-baidu div01*/ div:nth-child(2) { color: green; } /*先确定类型,再匹配位置*/ /*先将页面中所有div找出,在匹配那些在自己结构层次下的第二个div*/ div:nth-of-type(2) { color: cyan; } /*2n*/ /* div ooo div ooo div ooo div ooo div */ /*3n*/ /* div div ooo div div ooo div div ooo */ /*3n - 1*/ /* div ooo div div ooo div div ooo div */ /*取反伪类*/ /*:not([d]) { color: red; } body.body { color: orange; }*/ span:not([d]) { color: red; } </style> </head> <body class="body"> <!-- 1.a标签的四大伪类 --> <a href="./123.html">访问页面</a> <a href="https://www.baidu.com">访问过页面</a> <div class="box">box</div> <!-- 2.内容伪类 --> <div class="txt">原来的文本</div> <!-- 3.位置伪类 --> <div class="wrap"> <span>span01</span> <div>div01</div> <div>div02</div> </div> <!-- 4.取反伪类 --> <span d>12345</span> <span dd>67890</span> </body> </html>