- 博客(16)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 CSS动画
什么是 CSS 动画？动画使元素逐渐从一种样式变为另一种样式。您可以随意更改任意数量的 CSS 属性。如需使用 CSS 动画，您必须首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。@keyframes 规则如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。要使动画生效，必须将动画绑定到某个元素。下面的例子将 “example” 动画绑定到 <div> 元素。动画将持续 4 秒钟，同时将 <div>.
2021-03-16 09:40:18
172
原创 CSS过渡
CSS 过渡允许您在给定的时间内平滑地改变属性值。如何使用 CSS 过渡？如需创建过渡效果，必须明确两件事：您要添加效果的 CSS 属性效果的持续时间注意：如果未规定持续时间部分，则过渡不会有效果，因为默认值为 0。改变若干属性值下面的例子为 width 和 height 属性都添加了过渡效果，width 是 2 秒，height 是 3 秒：代码如下：<!DOCTYPE html><html><head><style> di
2021-03-12 14:47:03
348
原创 CSS 下拉菜单
使用 CSS 创建可悬停的下拉列表。1. 基础的下拉菜单创建当用户将鼠标移到元素上时出现的下拉框。代码如下：<!DOCTYPE html><html><head><style>.dropdown { position: relative; display: inline-block;}.dropdown-content { display: none; position: absolute; background-co
2021-03-11 16:24:07
904
原创 CSS导航栏
易用的导航对于任何网站都很重要。通过使用 CSS，您可以将无聊的 HTML 菜单转换为美观的导航栏。导航栏 = 链接列表导航栏需要标准 HTML 作为基础。在我们的实例中，将用标准的 HTML 列表构建导航栏。导航栏基本上就是链接列表，因此使用 <ul> 和 <li> 元素会很有意义。一、垂直导航栏创建背景色为灰色的基础垂直导航栏，并在用户将鼠标移到链接上时改变链接的背景色：代码如下：<!DOCTYPE html><html><he
2021-03-11 10:19:55
1456
原创 CSS组合器
1. CSS 中有四种不同的组合器：后代选择器 (空格)子选择器 (>)相邻兄弟选择器 (+)通用兄弟选择器 (~)2. 后代选择器 (空格)后代选择器匹配属于指定元素后代的所有元素。下面的例子选择 <div> 元素内的所有 <p> 元素：示例代码：<div> <p>div 中的段落 1。</p> <p>div 中的段落 2。</p> <section><p>di
2021-03-10 11:15:14
338
原创 CSS 伪类
伪类用于定义元素的特殊状态。例如，它可以用于：设置鼠标悬停在元素上时的样式为已访问和未访问链接设置不同的样式设置元素获得焦点时的样式等等伪类的语法：selector:pseudo-class { property: value;}1. 锚伪类链接能够以不同的方式显示：/* 未访问的链接 */a:link { color: #FF0000;}/* 已访问的链接 */a:visited { color: #00FF00;}/* 鼠标悬停链接 */a:ho
2021-03-10 11:13:37
584
原创 CSS对齐
1.居中对齐文本如果仅需在元素内居中文本，请使用 text-align: center;.center { text-align: center; border: 3px solid green;}效果如下：2.居中对齐图像如需居中图像，请将左右外边距设置为 auto，并将其设置为块元素：img { display: block; margin-left: auto; margin-right: auto; padding:20px 0;}效果如下：3.
2021-03-10 11:12:48
653
原创 CSS中级学习
一、CSS 布局 - display 属性display 属性规定是否/如何显示元素。Display: none;通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们默认情况下，< script> 元素使用 display: none;display取值和含义如下：1. display：inline将行内元素更改为块元素示例代码：<ul class="u1"> <li><a href="/html/def
2021-03-09 16:39:04
172
原创 display:none和visibility:hidden两者的区别
一、相同点display:none和visibility:hidden 都能把网页上的某元素隐藏起来二、不同点示例代码如下：<!DOCTYPE html><html> <head> <style> .hidden1 { display:none; } .hidden11 { display: inherit; } .hidden12 { display: block; } .hi
2021-03-09 11:07:47
2106
2
原创 CSS基础学习
CSS学习1.text-align 属性规定了元素中文本的水平对齐方式：2.text-decoration:none 表示超链接没有下划线
2021-03-06 12:05:44
216
1
原创 css实现表格奇偶行变色
代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .ta{ border-collapse: collapse; border-color: blue; width: 100%; } tr:nth-child(odd){ background-c
2021-03-05 17:32:05
3296
2
原创 html中表格数据过长时，如何用省略号（...)代替
代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .ta{ border-collapse: collapse; border-color: blue; table-layout:fixed; width: 100%; } td{ whit
2021-03-05 17:24:00
1578
1
原创 css中id和class的区别
1. id和class各是什么意思？id属性规定HTML元素的唯一id，它在HTML文档中必须是唯一的。class是用于规定元素的类名，目前class都是用于样式表中的类，它在HTML中不是唯一的，可以多次使用。2. id和class区别在哪里？语法上：id: <div id="a"></div>class：<div class="b"></div>命名上：id在css中以“#”命名class在css中用“.”命名
2021-03-05 16:36:07
772
2
原创 CSS图片居中显示不变形，只显示中间部分，图片上的文字居中显示
代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #div1{ width:100px; height:100px; position:relative; top:100px; left:100px; background-image: url
2021-03-05 09:18:30
798
3
原创 HTML学习
HTML学习1.< hr /> 标签在 HTML 页面中创建水平线。2.< br />标签用来换行3.HTML格式化文本格式化标签< b> 定义粗体文本。< big> 定义大号字。< em> 定义着重文字。< i> 定义斜体字。< small> 定义小号字。< strong> 定义加重语气。< sub> 定义下标字。< sup> 定义上标字。< ins>
2021-03-05 08:26:07
193
3
转载 CSS中px,em,rem单位的区别
CSS中px,em,rem单位的区别它们都是用于设置字体的大小以及盒子的宽高，但是px不会因为浏览器尺寸的改变而改变，而em和rem会因为浏览器尺寸的变化而变化pxpx像素（Pixel），它是显示屏上显示的每一个小点，为显示的最小单位。它是一个绝对尺寸单位，是不能变动的；在指定字体大小和元素的宽高的时候使用。像素是相对于显示器屏幕分辨率而言的。PX特点：IE无法调整那些使用px作为单位的字体大小；国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；Firefox能够调整px和
2021-03-04 14:13:25
176
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人