clip:rect矩形剪裁功能
rect(30px 200px 200px 20px)
rect(top right bottom left)
参数：top right bottom left分别指最终剪裁可见区域的上边，右边，下边与左边。而所有的数值都表示位置，且是相对于原始元素的左上角而言的。
说明：裁剪矩形上边距上边的距离是30px 裁剪矩形右边距左边的距离是200px 裁剪矩形下边距上边的距离是200px 裁剪矩形左边距左边的距离20px
:not
li a:hover:not(.action){ /* a标签没有被选中的类名为action不会变背景颜色 */
background-color: #111;
}
.action{
background-color: #4caf50;
}
<li><a href="javascript:;" class="action">主页</a></li>
<li><a href="javascript:;">新闻</a></li>
screen
@media screen and (max-width:600px) { /* 如果屏幕宽度小于600px */
.topnav li.right,li{ /* 权重 */
float: none; /* 取消浮动效果 */
}
}
overflow
- overflow: scroll; 滚动栏一直存在
- overflow: hidden; 超过范围就隐藏
- overflow: auto; 如果不超出范围滚动条不显示 超出必显示
- overflow: visible; 默认 超出范围不隐藏
float
float:left 左浮动效果
float:right 右浮动效果
clear:right 清除右浮动效果
overflow: auto 清除浮动效果
line-height
.center p {
line-height: 1.5; /* 字体高度的1.5倍 */
display: inline-block;
vertical-align: middle;
}
兄弟选择器 单选
-
div+p 选取与div平级的兄弟p标签,如果有两个兄弟p标签，选中第一个p标签 ，而不是子类p标签
-
div+p+p 选取与div平级的兄弟p标签,如果有两个兄弟p标签，选中第二个p标签 ，而不是子类p标签
div+p{
background-color:yellow;
}
div{
border: 1px solid red;
}文章标题
DIV 内部标题
DIV 内部段落。
DIV 之后的第一个 P 元素。
DIV 之后的第二个 P 元素。
兄弟选择器 多选
-
div~p 选取同级的全部兄弟p标签
div~p{
background-color:yellow;
}
伪类 :lang 引用 quotes
q:lang(no){ /* lang定义了q元素的值为lang =“no” */
quotes: "~" "~";
}
<p>一些文本 <q lang="no">我们已经引入了</q> 一些文本.</p>
<!-- 输出结果 一些文本 ~我们已经引入了~ 一些文本. -->
获取焦点 focus
input:focus{
background-color:yellow;
}
姓: <input type="text" name="fname" /><br>
名: <input type="text" name="lname" /><br>images/pig1.gif
首字母 first-letter
-
font-size:xx-small; 小号字体
-
font-size:xx-large; 大号字体
p:first-letter {
color:#ff0000;
font-size:xx-small;
}今天我回家吃饭，结果发现家里的鱼被水淹死了
伪类前添加元素 before
-
单词 pseudo-element 伪类
-
:before{} 之前添加元素
-
:after{} 之后添加元素
h1:before {content:url(images/pig1.gif);}
h1:after {content:url(images/pig1.gif);}
响应式导航栏
-
如果屏幕宽度小于900px，导航栏顶部为水平导航栏 大于900px导航栏在右边，且固定的小于400px会变为垂直导航栏
-
布局文件
响应式导航实例
如果屏幕宽度小于900px，导航栏顶部为水平导航栏 大于900px导航栏在右边，且固定的
小于400px会变为垂直导航栏
试着重置浏览器窗口
-
导航栏顶部为水平导航栏 大于900px导航栏在右边
{
margin: 0;
padding: 0;
}
ul.slidenav{ / 垂直导航栏 /
list-style: none;
width: 25%;
background-color: #f1f1f1;
position: fixed; / 固定定位 /
height: 100%;
overflow: auto;
}
ul.slidenav li a{
display: block;
color: black;
padding: 8px 16px;
text-decoration: none;
}
ul.slidenav li a.active{ / 被选中 /
background-color: #555;
color: white;
}
ul.slidenav li a:hover:not(.active){
background-color: #555;
color: white;
}
.content{ / 内容标签 */
margin-left: 25%;
padding: 1px 16px;
height: 1000px;
} -
屏幕宽度小于900px，导航栏顶部为水平导航栏
@media screen and (max-width:900px) { /* 屏幕最大宽度900px */
ul.slidenav{
width: 100%;
height: auto;
position: relative;
}
ul.slidenav li a{
float: left;
padding: 15px;
}
div.content{
margin-left: 0;
}
} -
屏幕宽度小于400px会变为垂直导航栏
@media screen and (max-width:400px) {
ul.slidenav li a{
text-align: center;
float: none;
}
}
下拉菜单
-
核心原理:先让父类包含的子类隐藏,使用伪类:hover让鼠标移到父类上显示子类元素
-
实例代码
- 主页
- 新闻
- 下拉菜单
链接1 链接2 链接3 链接4 链接5
鼠标移到下拉菜单上
链接显示下拉菜单中
效果图:
图标文字 iconfont
- 首先在https://icomoon.io/ 选取和制作iconfont图标
- 下载解压得到的 font文件
使用步骤
- 打开demo.html文件.
- 在项目中声明iconfont文件
- 使用方法：
- 字体文件目录
第一种方法 <span>?</span>
-
声明iconfont
@font-face { /电脑中没有的字体，需要在这里声明/
font-family: ‘icomoon’;
src: url(‘font/icomoon/fonts/icomoon.eot?7tgo5f’);
src: url(‘font/icomoon/fonts/icomoon.eot?7tgo5f#iefix’) format(‘embedded-opentype’),
url(‘font/icomoon/fonts/icomoon.ttf?7tgo5f’) format(‘truetype’),
url(‘font/icomoon/fonts/icomoon.woff?7tgo5f’) format(‘woff’),
url(‘font/icomoon/fonts/icomoon.svg?7tgo5f#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
font-display: block;
} -
设置css样式
span{
font-family: “icomoon”; /一定要和声明的font-family: "incomoon"相同 否则没有效果;/
font-size: 100px;
color: hotpink;
} -
html代码布置
?
第二种方法 伪元素添加
-
声明iconfont
@font-face { /电脑中没有的字体，需要在这里声明/
font-family: ‘icomoon’;
src: url(‘font/icomoon/fonts/icomoon.eot?7tgo5f’);
src: url(‘font/icomoon/fonts/icomoon.eot?7tgo5f#iefix’) format(‘embedded-opentype’),
url(‘font/icomoon/fonts/icomoon.ttf?7tgo5f’) format(‘truetype’),
url(‘font/icomoon/fonts/icomoon.woff?7tgo5f’) format(‘woff’),
url(‘font/icomoon/fonts/icomoon.svg?7tgo5f#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
font-display: block;
} -
设置样式
div::after{ /伪元素选择器/
font-family: “icomoon”;/一定要和声明的font-family: "incomoon"相同 否则没有效果;/
content: “e9e0”;
font-size: 100px;
color: yellow;
} -
html布局
阿里巴巴iconfont
-
需要在此网站上https://www.iconfont.cn/ 下载iconfont包
-
声明字体和样式
@font-face {
font-family: ‘iconfont’;
src:
url(‘阿里巴巴/alibaba/iconfont.woff2?t=1642771478703’) format(‘woff2’),
url(‘阿里巴巴/alibaba/iconfont.woff?t=1642771478703’) format(‘woff’),
url(‘阿里巴巴/alibaba/iconfont.ttf?t=1642771478703’) format(‘truetype’);
}
.iconfont { /定义使用 iconfont 的样式/
font-family: “iconfont” !important;
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} -
html布局
引入阿里巴巴iconfont.css文件
-
引入 iconfontcss
-
使用类名调用iconfont字体
<a href="javascript:;" class="action"><i class="iconfont icon-guatongche"></i></a>
按钮下拉菜单
4个参数 border-color: green turquoise deeppink darkblue ;
小三角
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #1496bb 10px;
提示框淡入效果
-
首先将div 的opacity=0 使用动画过度由不透明那到透明
div{
/* 淡入 - 1秒内从 0% 到 100% 显示: */
opacity: 0;
transition: opacity 1s;
}div:hover{
opacity:1;
}
字母小写变大写
- text-transform: uppercase; /* 大写 */
only
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}
opacity
img:hover{
opacity:1.0;
filter:alpha(opacity=100); /* 适用 IE8 及其更早版本 */
}
媒体类型
- @media screen{} 屏幕
- @media print{} 打印
- @media screen,print{}
选择器
-
属性选择器
[title]{ /* 下面的例子是把包含标题（title）的所有元素变为蓝色： */
color: blue;
}Hello world
-
属性选择器
[title=runoob]{
border:5px solid green;
} -
属性选择器 多值
[title~=hello]{ /* 包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值 */
color:blue;
}Hello world
Hello CSS students!
-
包含指定值的lang属性的元素样式
[lang|=en]{ /* 包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值: */
color:blue;
}Hello!
Hi!
Ello!
-
标签属性选择器
input[type=“button”]{
width:120px;
margin-left:35px;
}
获取焦点 focus
input[type=text]:focus {
background-color: lightblue;
}
调整大小
- resize: vertical; 垂直的
css计数 counter
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "第 " counter(section) "章: ";
}
css计数 section subsection
-
实例
菜鸟教程(runoob.com) HTML 教程:
HTML 教程
CSS 教程
Scripting 教程:
JavaScript
VBScript
XML 教程:
XML
XSL
注意: IE8 需要指定 !DOCTYPE 才可以支持该属性。
表单css计数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") ": "; /* 例如 1.1 1.2 */
}
</style>
</head>
<body>
<ol> <!-- 一级 -->
<li>item</li>
<li>item
<ol><!-- 二级 -->
<li>item</li>
<li>item</li>
<li>item
<ol> <!-- 三级 -->
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
<ol>
<li>item</li>
<li>item</li>
</ol>
<p><b>注意:</b> IE8 需要指定 !DOCTYPE 才可以支持该属性。</p>
</body>
</html>
<!-- 计数器也可用于列表中，列表的子元素会自动创建。这里我们使用了 counters() 函数在不同的嵌套层级中插入字符串: -->
内容分为三段
-
传统方式
.column{
float: left;
width: 33.33%;
} -
伸缩布局 flex
.row{
display: flex; /* 伸缩布局模式 这个盒子就会拥有弹性 可弹性盒子 */
}
.column{
flex: 1; /子盒子占分数为1/
}
扫一扫
1932
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
