python 46 边界圆角 、a_img_list标签 、伪类选择器
一：边界圆角
<!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="#锚点名" -- >-->
<a href="#tag">前往底部</a>
<!-- 测试锚点请tab -->
br * 100
<!-- 设置一个锚点 -->
<!-- .bottom做底部布局的区域 -->
<div class="bottom">
<a name="tag"></a>
<!-- <i >-->
<!-- <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>
伪类的分类
以上是 python 46 边界圆角 、a_img_list标签 、伪类选择器 的全部内容， 来源链接： utcz.com/z/388301.html
