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="#锚点名" -- 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>
伪类的分类
python 46 边界圆角 、a_img_list标签 、伪类选择器的更多相关文章
- a标签伪类选择器以及伪元素:hover的案例
1.通过我们的观察发现a标签存在一定的状态1.1默认状态, 从未被访问过1.2被访问过的状态1.3鼠标长按状态1.4鼠标悬停在a标签上状态 2.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修 ...
- a标签伪类选择器+过度模块
a标签的伪类选择器 1.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修改a标签不同状态的样式的. 2.格式: 1):link 修改从未被访问过状态下的样式. 2):visited 修改被访问 ...
- HTML连载64-a标签伪类选择器的注意点与练习
一.a标签的伪类选择器注意点 (1)a标签的伪类选择器可以单独出现,也可以一起出现.也就是可以设置多个状态的样式. (2) a标签的伪类选择器如果一起出现,那么有严格的顺序要求,编写的顺序必须要遵守原 ...
- js进阶 10-11/12 表单伪类选择器的作用
js进阶 10-11 表单伪类选择器的作用 一.总结 一句话总结:能想到用伪类选择器来解决问题.如果能一次记住自然是最棒的. 1.表单伪类选择器分为哪两类? 表单元素和表单属性,表单元素例如inpu ...
- python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- CSS学习笔记-03- 过渡模块之前奏篇 a标签的伪类选择器
CSS3 2D转换CSS3 3D转换CSS3 过渡CSS3 动画 CSS3 的四大金刚. 想要实现酷炫的视觉效果,上面4个是必须要掌握的.学习之前,先复习一下 视觉盛宴的前菜 :a标签的伪类选择器 铛 ...
- a标签伪类的LOVE HATE原则
a标签伪类的LOVE HATE原则 a标签有四个伪类,分别是: a:link 未访问的链接 a:visited 已访问的链接 a:hover 鼠标移动到链接上 a:active 选定的链接 遇到的问题 ...
- python 之 前端开发（基本选择器、组合选择器、 交集与并集选择器、序列选择器、属性选择器、伪类选择器、伪元素选择器）
11.3 css 11.31 基本选择器 11.311 id选择器 根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性 <!DOCTYPE html> <html ...
- 前端（六）—— 伪类选择器：a标签的伪类、内容伪类、索引伪类、取反伪类
a标签的伪类.内容伪类.索引伪类.取反伪类 一.a标签的四大伪类 :link:未访问状态 :hover:悬浮状态 :active:活跃状态 :visited:已访问状态 四大伪类也可用于其他标签 &l ...
随机推荐
- 脚本添加删除nginx配置中的内容
[root@nodejs script]# more editnginx.sh #!/bin/bash # function back_check(){ # 备份配置和覆盖配置文件 cp -rf /e ...
- centOS7创建python虚拟环境
参考: 非常棒的2篇博客 https://www.centos.bz/2018/05/centos-7-4-%E5%AE%89%E8%A3%85python3%E5%8F%8A%E8%99%9A%E6 ...
- Linux内核中_IO,_IOR,_IOW,_IOWR宏的用法与解析
ref from : http://blog.csdn.net/zhuxiaoping54532/article/details/49680537 main 在驱动程序里, ioctl() 函数上传送 ...
- uva 10048 Audiophobia UVA - 10048
题目简介 一个无向正权图,求任意两个节点之间的路径里最短的路径长度. 直接Floyd解决,就是注意要把Floyd的DP式子改一下成 G[i][j]=min(G[i][j],max(G[i][k],G[ ...
- 一个电商项目的Web服务化改造2：现有项目的5个问题
最近一直在做一个电商项目,需要把原有单系统架构的项目,改造成基于服务的架构,SOA. 有点挑战,做完了,会有很大进步, 1.现有项目的问题 1.1代码风格不统一 不同的 ...
- 【1657: [蓝桥杯][算法训练VIP]】统计单词个数
[链接] 我是链接,点我呀:) [题意] 题意 [题解] 设dp[i][j]表示前i个字符分成j个部分的最多匹配单词个数. 则dp[i][j] = dp[prei][j-1] + get_num(pr ...
- （40）. springboot + devtools（热部署）【从零开始学Spring Boot】
我们之前在在()Spring Boot热部署[从零开始学Spring Boot] (http://412887952-qq-com.iteye.com/blog/2291518 )讲过通过使用spri ...
- python编码小记
Python编码小记 标签(空格分隔): 编程 python 1.list类型remove()操作 列表对象执行remove()函数后,会自动退出循环,所以如果想利用一个单独的for循环删除列表中多个 ...
- Java 学习（7）：java 日期时间 & 正则表达式
目录 --- 日期时间 --- 正则表达式 日期时间:java.util 包提供了 Date 类来封装当前的日期和时间. Date 类提供两个构造函数来实例化 Date 对象. 构造函数:用于初始化对 ...
- 一个手机图表(echarts)折线图的封装
//定义一组颜色值,按顺序取出 var colorGroup = ["#6ca3c4","#76bfa3","#ea8f7a"," ...