微笑向日葵°-CSDN博客

微笑向日葵°

码龄6年

个人简介：新手小白，努力学习

IP 属地：江苏省

查看详细资料

个人成就

获得17次点赞
内容获得15次评论
获得65次收藏

TA的专栏

笔记
1篇
CSS
12篇
html
3篇
div+CSS
1篇

兴趣领域设置

数据结构与算法

数据结构
前端

javascriptcssvue.jsxhtml前端框架
后端

node.js
软件工程

性能优化
学习和成长

面试

创作活动更多

超级创作者激励计划

万元现金补贴，高额收益分成，专属VIP内容创作者流量扶持，等你加入！

搜TA的内容

CSS动画

什么是 CSS 动画？动画使元素逐渐从一种样式变为另一种样式。您可以随意更改任意数量的 CSS 属性。如需使用 CSS 动画，您必须首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。@keyframes 规则如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。要使动画生效，必须将动画绑定到某个元素。下面的例子将 “example” 动画绑定到 <div> 元素。动画将持续 4 秒钟，同时将 <div>.

发布博客 2021.03.16 ·

CSS过渡

CSS 过渡允许您在给定的时间内平滑地改变属性值。如何使用 CSS 过渡？如需创建过渡效果，必须明确两件事：您要添加效果的 CSS 属性效果的持续时间注意：如果未规定持续时间部分，则过渡不会有效果，因为默认值为 0。改变若干属性值下面的例子为 width 和 height 属性都添加了过渡效果，width 是 2 秒，height 是 3 秒：代码如下：<!DOCTYPE html><html><head><style> di

发布博客 2021.03.12 ·

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 ·

CSS中水平导航栏代码

发布资源 2021.03.11 ·

CSS导航栏中的垂直导航栏代码

发布资源 2021.03.11 ·

CSS导航栏

易用的导航对于任何网站都很重要。通过使用 CSS，您可以将无聊的 HTML 菜单转换为美观的导航栏。导航栏 = 链接列表导航栏需要标准 HTML 作为基础。在我们的实例中，将用标准的 HTML 列表构建导航栏。导航栏基本上就是链接列表，因此使用 <ul> 和 <li> 元素会很有意义。一、垂直导航栏创建背景色为灰色的基础垂直导航栏，并在用户将鼠标移到链接上时改变链接的背景色：代码如下：<!DOCTYPE html><html><he

发布博客 2021.03.11 ·

CSS组合器

1. CSS 中有四种不同的组合器：后代选择器 (空格)子选择器 (>)相邻兄弟选择器 (+)通用兄弟选择器 (~)2. 后代选择器 (空格)后代选择器匹配属于指定元素后代的所有元素。下面的例子选择 <div> 元素内的所有 <p> 元素：示例代码：<div> <p>div 中的段落 1。</p> <p>div 中的段落 2。</p> <section><p>di

发布博客 2021.03.10 ·

CSS 伪类

伪类用于定义元素的特殊状态。例如，它可以用于：设置鼠标悬停在元素上时的样式为已访问和未访问链接设置不同的样式设置元素获得焦点时的样式等等伪类的语法：selector:pseudo-class { property: value;}1. 锚伪类链接能够以不同的方式显示：/* 未访问的链接 */a:link { color: #FF0000;}/* 已访问的链接 */a:visited { color: #00FF00;}/* 鼠标悬停链接 */a:ho

发布博客 2021.03.10 ·

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 ·

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 ·

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 ·

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 ·

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 ·

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 ·

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 ·

HTML学习

HTML学习1.< hr /> 标签在 HTML 页面中创建水平线。2.< br />标签用来换行3.HTML格式化文本格式化标签< b> 定义粗体文本。< big> 定义大号字。< em> 定义着重文字。< i> 定义斜体字。< small> 定义小号字。< strong> 定义加重语气。< sub> 定义下标字。< sup> 定义上标字。< ins>

发布博客 2021.03.05 ·

CSS基础学习

CSS学习1.text-align 属性规定了元素中文本的水平对齐方式：2.text-decoration:none 表示超链接没有下划线

发布博客 2021.03.06 ·

CSS中px,em,rem单位的区别

CSS中px,em,rem单位的区别它们都是用于设置字体的大小以及盒子的宽高，但是px不会因为浏览器尺寸的改变而改变，而em和rem会因为浏览器尺寸的变化而变化pxpx像素（Pixel），它是显示屏上显示的每一个小点，为显示的最小单位。它是一个绝对尺寸单位，是不能变动的；在指定字体大小和元素的宽高的时候使用。像素是相对于显示器屏幕分辨率而言的。PX特点：IE无法调整那些使用px作为单位的字体大小；国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；Firefox能够调整px和

发布博客 2021.03.04 ·