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 ...
随机推荐
- view.getParent()与view.getRootView()
顾名思义,getParent就是获取view的父亲节点,而getRootView是寻找当前的view层次中处在最顶层的view,可理解为找出该view实例所在的view层次的根view. 如果这个vi ...
- Shell基本运算符
原生bash不支持简单的数学运算,但是可以通过其他命令来实现,例如 awk 和 expr,expr 最常用. expr 是一款表达式计算工具,使用它能完成表达式的求值操作. 例如,两个数相加(注意使用 ...
- 浅谈SOCKS5代理与HTTP代理的应用区别
[1]什么是SOCKS5协议. SOCKS是一种网络传输协议,主要用于客户端与外网服务器之间通讯的中间传递.SOCKS是"Sockets”的缩写. 当防火墙后的客户端要访问外部的服务器时,就 ...
- 【原】Pchart生成图片
学习网址: http://wiki.pchart.net/doc.introduction.html http://pchart.sourceforge.net/index.php
- 最基础的rpm命令
rpm -ivh package.rpm 安装一个rpm包 rpm -ivh --nodeeps package.rpm 安装一个rpm包而忽略依赖关系警告 rpm -U package.rpm 更新 ...
- RESTful API 学习【第1篇】
一. 什么是RESTful REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移” REST从资源的角 ...
- Linux系统学习之 一：新手必须掌握的Linux命令1
2018-10-03 16:04:12 一.常用系统工作命令 1.wget 命令 作用:用于在终端中下载网络文件. 格式:wget [参数] 下载地址 参数及作用: -b : 后台下载模式 -d:显示 ...
- 深入浅出了解HTTP协议
深入浅出了解HTTP协议
- Java基础之构造方法及其应用
构造方法是一种特殊的方法,它是一个与类同名且无返回值类型(连void也不能有)的方法. 对象的创建就是通过构造方法来完成,其功能主要是完成对象的初始化. 当类实例化一个对象时会自动调用构造方法.构造方 ...
- mybatis源码阅读-执行器StatementHandle和ParameterHandler(五)
StatementHandle 类图 各个实现类的作用 SimpleStatementHandler 用于使用Statement操作数据库(不会使用参数化查询?) PreparedStatementH ...