CSS
文章平均质量分 72
微笑向日葵°
新手小白,努力学习
展开
-
CSS过渡
CSS 过渡允许您在给定的时间内平滑地改变属性值。如何使用 CSS 过渡?如需创建过渡效果,必须明确两件事:您要添加效果的 CSS 属性效果的持续时间注意:如果未规定持续时间部分,则过渡不会有效果,因为默认值为 0。改变若干属性值下面的例子为 width 和 height 属性都添加了过渡效果,width 是 2 秒,height 是 3 秒:代码如下:<!DOCTYPE html><html><head><style> di原创 2021-03-12 14:47:03 · 394 阅读 · 0 评论 -
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 · 925 阅读 · 0 评论 -
CSS导航栏
易用的导航对于任何网站都很重要。通过使用 CSS,您可以将无聊的 HTML 菜单转换为美观的导航栏。导航栏 = 链接列表导航栏需要标准 HTML 作为基础。在我们的实例中,将用标准的 HTML 列表构建导航栏。导航栏基本上就是链接列表,因此使用 <ul> 和 <li> 元素会很有意义。一、垂直导航栏创建背景色为灰色的基础垂直导航栏,并在用户将鼠标移到链接上时改变链接的背景色:代码如下:<!DOCTYPE html><html><he原创 2021-03-11 10:19:55 · 1502 阅读 · 0 评论 -
CSS组合器
1. CSS 中有四种不同的组合器:后代选择器 (空格)子选择器 (>)相邻兄弟选择器 (+)通用兄弟选择器 (~)2. 后代选择器 (空格)后代选择器匹配属于指定元素后代的所有元素。下面的例子选择 <div> 元素内的所有 <p> 元素:示例代码:<div> <p>div 中的段落 1。</p> <p>div 中的段落 2。</p> <section><p>di原创 2021-03-10 11:15:14 · 367 阅读 · 0 评论 -
CSS 伪类
伪类用于定义元素的特殊状态。例如,它可以用于:设置鼠标悬停在元素上时的样式为已访问和未访问链接设置不同的样式设置元素获得焦点时的样式等等伪类的语法:selector:pseudo-class { property: value;}1. 锚伪类链接能够以不同的方式显示:/* 未访问的链接 */a:link { color: #FF0000;}/* 已访问的链接 */a:visited { color: #00FF00;}/* 鼠标悬停链接 */a:ho原创 2021-03-10 11:13:37 · 597 阅读 · 0 评论 -
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 · 701 阅读 · 0 评论 -
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 · 177 阅读 · 0 评论 -
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 · 2165 阅读 · 2 评论 -
CSS基础学习
CSS学习1.text-align 属性规定了元素中文本的水平对齐方式:2.text-decoration:none 表示超链接没有下划线原创 2021-03-06 12:05:44 · 229 阅读 · 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 · 3334 阅读 · 2 评论 -
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 · 797 阅读 · 2 评论 -
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 · 182 阅读 · 1 评论