首页 / css样式

#

css样式

#

4907次浏览 37人互动

此刻你想和大家分享什么

热门最新

07-11 23:37

湖南信息学院 Java

前端HTML & CSS完整知识点总结

从零基础到进阶，全面掌握前端基础技术  📖 目录  HTML基础知识 CSS基础知识 HTML5新特性 CSS3新特性 响应式设计 性能优化 最佳实践 常见问题  HTML基础知识 1. HTML文档结构 HTML（HyperText Markup Language）是构建网页的标准标记语言。 基本文档结构 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport"...

点赞评论收藏

分享

2024-06-07 11:28

南京大学前端工程师

你是怎么理解CSS盒子模型的?

这是一道非常高频的css基础面试题，但是很多同学在面试时候都回答不完整。老规矩，点赞收藏，加个关注支持一下，给我一分钟，理想哥教大家该怎么满分回答这个问题如果我是求职者，我会这么回答：在HTML文档中，所有元素都可以理解为一个个矩形的盒子，这个盒子由四个部分组成：content、padding、border、margincontent是实际的内容展示区，boreder是边框，padding是内边距，margin是外边距。在CSS中，可以使用box-sizing 属性定义盒子模型，当值为 content-box 时，表示W3C 标准盒子模型，值为border-box时，表示IE 怪异盒子模型，值...

查看1道真题和解析

点赞评论收藏

分享

02-25 19:26

中北大学前端工程师

求前端代码指导！！！

就是大概是第一张图片和第二张图片完全覆盖在一起，然后一开始显示第一张图片，然后有一个遮罩层一样的特效从右往左滑动，滑动的时候第二张图片也慢慢的跟着特效滑动到的地方显示出那一部分的东西来。用纯css怎么做呀。。。孩写一下午了写不出来。。。dd求解

点赞评论收藏

分享

2023-05-16 10:34

CSS3 多媒体查询

什么是多媒体查询？多媒体查询是 CSS3 的一个特性，它可以让你根据不同的媒体类型和设备特征来应用不同的样式规则。例如，你可以针对屏幕、打印机、语音等媒体类型，或者针对视口宽度、高度、方向、分辨率等媒体特征来定制你的网页或应用程序的外观和布局。²多媒体查询的语法如下： @media not|only mediatype and (expressions) { /* CSS 代码... */ } 其中，not 和 only 是可选的逻辑运算符，用于否定或限定整个查询。mediatype 是指定的媒体类型，如 screen 或 print。expressions 是指定的一个或多个媒体特征，如 w...

CSS3美学：网页设计新...

点赞评论收藏

分享

2024-10-21 14:10

中国地质大学（北京）算法工程师

掌握HTML与CSS：构建网页的基础

在当今数字化的时代，创建一个吸引人的网页已成为个人和企业展示自我的重要方式。而构建网页的基石，便是HTML（超文本标记语言）和CSS（层叠样式表）。无论你是一个刚刚踏入编程世界的初学者，还是希望巩固基础知识的开发者，理解这两者将帮助你打开网页设计的大门。本文将带你深入探索HTML的元素及结构，以及如何运用CSS为你的网页增添魅力。准备好开始你的网页开发之旅了吗？让我们一起揭开这个神秘的面纱吧！  HTML HTML，即 HyperText Markup Language（超文本标记语言），是构建网页的基础语言。HTML 的作用是定义网页的内容和结构。 元素 元素：由标签和内容组成。例如，&lt...

点赞评论收藏

分享

2023-05-18 09:22

CSS3过渡

CSS3过渡 CSS3过渡是一种实现元素从一种样式逐渐变化为另一种样式的效果的技术。它可以让网页的动画效果更加流畅和自然，而不需要使用Flash或JavaScript。在本文中，我们将介绍CSS3过渡的基本概念和用法。 过渡的原理 要使用CSS3过渡，我们需要指定两个要素：  要添加过渡效果的CSS属性 过渡效果的持续时间  例如，我们可以为一个div元素的width属性添加过渡效果，让它在2秒内从100px变为300px： div { width: 100px; height: 100px; background: red; transition: width 2s; /* 过渡属性和持续时...

CSS3美学：网页设计新...

点赞评论收藏

分享

2024-06-13 13:18

集美大学产品经理

SCSS基本使用：解锁CSS预处理器的高效与优雅

在前端开发的浩瀚宇宙中，CSS始终扮演着至关重要的角色，赋予网页生命与美感。然而，随着项目规模的膨胀，传统的CSS编写方式逐渐显露出其局限性——重复代码、维护困难、缺乏逻辑性等问题日益凸显。为应对这些挑战，CSS预处理器应运而生，而其中最为耀眼的明星之一便是SCSS（Sassy CSS）。本文将带你深入SCSS的世界，从基础概念到高级实践，全方位解析其魅力所在，让你的样式书写更加高效、灵活且易于维护。 一、SCSS初探：从CSS到预处理的飞跃 1.1 SCSS基础概念 SCSS，作为Sass（Syntactically Awesome Style Sheets）的一种语法风格，是一种CSS扩展...

HTML前端网站开发

点赞评论收藏

分享

2023-05-17 15:19

CSS3新的UI方案

文本新增属性 opacity：属性设置一个元素的透明度级别。0为完全透明，1为完全不透明 rgba函数：rgba(red, green, blue, alpha)。前三个参数值范围 0 ~ 255或 0% ~ 100%，alpha透明度范围为0~1 text-shadow: h-shadow v-shadow blur color;属性连接一个或更多的阴影文本。 direction: 文字排版方向，ltr或rtl;需搭配unicode-bidi: bidi-override;一起使用。二者皆属于CSS2 text-overflow: clip|ellipsis|"string"|initial...

CSS3美学：网页设计新...

点赞评论收藏

分享

2024-08-22 11:48

集美大学产品经理

css中的var变量定义

概述 在CSS中，变量是一个非常实用的工具，它们能够帮助我们更有效地管理和重复使用各种样式。这些变量（也被称为CSS自定义属性）使我们能够为特定的值赋予一个名字，然后在样式表中的任何地方重复使用这个名字。==CSS变量以两个破折号-- 开始==，这让我们可以轻松地将它们与常规属性区分开来。这篇文章会带你了解如何定义和使用CSS-Var变量，以及它们在编写样式时的优势。 为什么要在css中使用变量？ css，不应该就是写写前端样式的吗，怎么还扯上变量了？变量这种东东不应该在js里写吗？我相信刚刚接触css变量的朋友肯定有这方面的疑惑。 但是随着前端的发展，越来越复杂的交互、动画，css中也需要更...

HTML前端网站开发

点赞评论收藏

分享

2024-08-22 11:45

集美大学产品经理

SCSS基本使用：解锁CSS预处理器

在前端开发的浩瀚宇宙中，CSS始终扮演着至关重要的角色，赋予网页生命与美感。然而，随着项目规模的膨胀，传统的CSS编写方式逐渐显露出其局限性——重复代码、维护困难、缺乏逻辑性等问题日益凸显。为应对这些挑战，CSS预处理器应运而生，而其中最为耀眼的明星之一便是SCSS（Sassy CSS）。本文将带你深入SCSS的世界，从基础概念到高级实践，全方位解析其魅力所在，让你的样式书写更加高效、灵活且易于维护。 一、SCSS初探：从CSS到预处理的飞跃 1.1 SCSS基础概念 SCSS，作为Sass（Syntactically Awesome Style Sheets）的一种语法风格，是一种CSS扩展...

HTML前端网站开发

点赞评论收藏

分享

2023-07-21 15:10

广州软件学院前端工程师

题解 | #设置文字颜色#

要将所有 <p> 标签的文字设置为红色，你可以使用嵌入样式的方式在 HTML 文件的 <head> 标签中添加一个 <style> 块。 以下是示例的 HTML 代码： <!DOCTYPE html> <html> <head> <style> p { color: red; } </style> </head> <body> <p>这是一段红色文字。</p> <p>这也是一段红色文字。</p> </body> &l...

题解 | 前端刷题

点赞评论收藏

分享

2023-07-21 14:41

广州软件学院前端工程师

题解 | #设置盒子宽高#

你可以使用下面的 HTML 代码来创建一个带有指定样式的 div 元素，其中类为 "box"： <div class="box">  </div>  接下来，你可以使用 CSS 来为名为 "box" 的 div 元素设置宽度、高度、内边距和外边距： .box { width: 100px; height: 100px; padding: 20px; margin: 10px; }  在上面的代码中，我们为类为 "box" 的 div 元...

题解 | 前端刷题

点赞评论收藏

分享

2023-07-21 14:38

广州软件学院前端工程师

题解 | #按要求写一个圆#

你可以使用 CSS 的 border-radius 属性将 HTML 模块的 div 元素设置为一个半径为 50px 的圆形，并使用 border 属性将边框设置为 1px 的黑色实线。 以下是示例的 CSS 代码： .module { width: 100px; height: 100px; border-radius: 50px; border: 1px solid black; }  在上面的代码中，假设模块的宽度和高度都为 100px，你可以根据实际情况进行调整。 border-radius: 50px; 设置了圆角半径为 50px。要注意，当只提供一个值时，border-radius...

题解 | 前端刷题

点赞评论收藏

分享

2023-07-21 14:35

广州软件学院前端工程师

题解 | #CSS选择器——伪元素#

在 CSS 中，伪元素是用来在选中的元素之前或之后插入额外的内容，并且可以通过样式来装饰它们。伪元素通过使用双冒号 (::) 或单冒号 (:) 作为前缀来定义，并且可以在选择器中与元素选择器一起使用。 伪元素有两个常见的类型：::before 和 ::after。它们分别用于在选中元素的内容之前和之后插入额外的内容。 使用伪元素时，需要设置其 content 属性来定义要插入的内容。这可以是文本、图片、生成的内容等等。伪元素的 display 默认为 inline，但通常会将其设置为 block 或 inline-block，以便能够对其进行样式上的调整。 除了 ::before 和 ::af...

题解 | 前端刷题

点赞评论收藏

分享

2023-07-21 14:14

广州软件学院前端工程师

题解 | #CSS选择器——伪类选择器#

一开始我的答案是 <ul> <li>1</li> <li style="background:rgb(255, 0, 0)">2</li> <li>3</li> <li style="background:rgb(255, 0, 0)">4</li> </ul>  使用了 CSS 伪类选择器 :nth-child() 来选择指定位置的元素。 nth-child(n) 可以选择位于父元素下的第 n 个子元素。 在示例中  ul li:nt...

题解 | 前端刷题

点赞评论收藏

分享

玩命加载中

创作者周榜

更多

热议话题

更多

牛客网
牛客网在线编程
牛客网题解
牛客企业服务