首页
Python
Java
前端
数据库
Linux
Chatgpt专题
开发者工具箱
css专题
【阅读】《Head First HTML 与 CSS》 第二章——深入了解超文本
这一章同样也没有什么新的东西,我是扫着看的。。。写写bullet point加深一下印象吧 想从一个页面链接到另一个页面时,要使用<a>元素<a>元素的href属性指定了链接的目标文件<a>元素的内容是链接的标签。这个标签就是你在网页上看到的链接文本。默认的,这个标签会有下划线,只是这个是可以单击的。单击一个链接时,浏览器会加载href属性中指定的Web页面可以链接到相关文件夹中的文件,也可
阅读更多...
【阅读】《Head First HTML 与 CSS》第一章——认识HTML
HTML:超文本标记语言(hypertext marker language) web就是由它来创建的 web服务器的作用:接收请求并查找请求资源,还要发回去 web浏览器的作用:接收那个资源并显示出来 注意:浏览器会忽略HTML文档中的制表符、回车和大部分空格 要记住:元素=开始标记+内容+结束标记所有结束标记都有一个"/" CSS的作用:告诉浏览器页面中的元素如何来显示 对了当我看
阅读更多...
【阅读】《head first HTML与CSS》——前言
嘻嘻~刚刚看完《head first JSP & Servlet》现在有开始看HTML的了,好奇怪,感觉自己读反了。。。JSP应该是进阶才是的呢 如何才能更好的去学习这一本书呢?把这本书看作是一个大老虎好了,人们认为大老虎会对自己的生命产生威胁,所以就很深刻地记住了大老虎,同样把学习新知识当作是面对一个大老虎就更深刻的记下这个知识(如果你记不下你就会被老虎吃掉) 还有就是尽一切可能让大脑活动起
阅读更多...
HTML+CSS练习小项目——百叶窗
前言:在学习完HTML和CSS之后,我们就可以开始做一些小项目了,本篇文章所讲的是新手可以练习的小项目——百叶窗 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客 先让我们看一下效果:(总代码在文章的最后,读者可以先复制进行体验!) 那么我们如何去实现这样的小案例呢?先看一下我们要实现百叶窗的步骤:
阅读更多...
css中的@media用法总结
1、head标签中引入 //语法: @media mediatype and | not | only (media feature) { css-code; } //也可以针对不同的媒体使用不同的stylesheets: <!--<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mysty
阅读更多...
初识CSS样式表
背景介绍: 接触了新闻发布系统,这也是自己第一个B/S的项目,从之前的拖拽空间,随意布局到如今的HTML总会有很多的新鲜、棘手和挑战,但是无论是何种形式都离不开基本的步骤:做前台、做后端。可以说一个整齐、美观的界面是离不开CSS的修饰的,当然它只是对网页做美观的冰山一角,其他的还会有JavaScript,PHP等适用于不同条件下的技术。学习到如今对于刚刚接触的CSS样式表做一个总结。
阅读更多...
CSS预处理器Sass的奥秘与实战指南
CSS预处理器Sass的奥秘与实战指南 Sass基础:为何选择Sass?基本概念优势概览 Sass实战:从安装到应用安装与配置基础示例高级技巧 性能与安全性考量结语:持续探索与实践 在前端开发的世界里,CSS无疑是构建网页外观与风格的基石。然而,随着项目规模的增长,纯CSS编写变得日益复杂,难以维护。这时,CSS预处理器应运而生,其中最闪耀的明星当属Sass(Syntactica
阅读更多...
CSS三大选择器
CSS三大选择器 1 元素选择器2 id选择器3 class选择器 1 元素选择器 说明 根据标签名确定样式的作用范围语法为 元素名 {}样式只能作用到同名标签上,其他标签不可用相同的标签未必需要相同的样式,会造成样式的作用范围太大 代码 <head><meta charset="UTF-8"><style>input {display: block;width: 80p
阅读更多...
css单元格固定宽度大小,超过部分使用省略号表示
/*white-space: nowrap 保证文本内容不会自动换行,如果多余的内容会在水平方向撑破单元格。overflow: hidden 隐藏超出单元格的部分。text-overflow: ellipsis 将被隐藏的那部分用省略号表示。*/.b {width: 100px;overflow: hidden;text-overflow: ellipsis;white-space: no
阅读更多...
css设置滚动条的样式
/* 滚动条样式 *//* 定义滚动条整体的宽度和轨道的背景颜色 */::-webkit-scrollbar {width: 10px;/* 对于垂直滚动条的宽度 */height: 10px;/* 对于水平滚动条的高度,可选 */}/* 定义滚动条轨道的样式 */::-webkit-scrollbar-track {background-color: rgba(0, 0, 0, 0.1);/*
阅读更多...
【前端】CSS基础(4)
文章目录 前言1、CSS常用属性1.1 文本属性1.1.1 文本对齐1.1.2 文本装饰1.1.3 文本缩进1.1.5 行高 前言 这篇博客仅仅是对CSS的基本结构进行了一些说明,关于CSS的更多讲解以及HTML、Javascript部分的讲解可以关注一下下面的专栏,会持续更新的。 链接: Web前端学习专栏 下面我对这个专栏的内容进行几点说明: 适合每一个前端0基础的小
阅读更多...
css层叠样式表——基础css面试题
1、css样式来源有哪些? 內联样式-<a style="color:red"></a>内部样式-<style></style>外部样式-写在独立.css文件中的浏览器用户自定义样式浏览器默认样式 2、样式优先级问题 不同级别下: !important作为style属性内联方式-1000id选择器-100类选择器、伪类选择器-10元素选择器-1通配符选择器-0浏览器自定义或继承 相同级别
阅读更多...
js实现html节点、CSS样式、事件的动态添加以及html覆盖层的添加
(一)js实现html节点、CSS样式、事件的动态添加 ①场景描述:我们需要动态获取后台数据并将这些数据以列表方式展示,其中列表存在自己的列表样式,每个item都存在自己的点击事件.....那么在这种情况下我们是不是就需要用到动态添加节点的模式去处理呢? ②代码记录如下: $.ajax({url : "***.action",type : 'post',dataType : 'js
阅读更多...
样式表单MIME 类型 “text/plain“ 不是 “text/css“问题处理
样式表单www.*.com/static/js/*.css未载入,因为它的 MIME 类型 "text/plain" 不是 "text/css"。 原因是服务器返回的MIME类型为 "text/plain",而预期应该是 "text/css"。MIME类型是一种标准,用于定义文件在互联网上传输时的类型和格式。当浏览器接收到一个资源时,它会检查该资源的MIME类型来确定如何处理这个资源。 在这个
阅读更多...
【前端】CSS基础(3)
文章目录 前言1. CSS常用元素属性1.1 字体属性1.1.1 字体1.1.2 字体大小1.1.3 字体颜色1.1.4 字体粗细1.1.5 文字样式 前言 这篇博客仅仅是对CSS的基本结构进行了一些说明,关于CSS的更多讲解以及HTML、Javascript部分的讲解可以关注一下下面的专栏,会持续更新的。 链接: Web前端学习专栏 下面我对这个专栏的内容进行几点说明:
阅读更多...
webpack5零基础入门-14提取css为单独文件
1.背景 Css文件目前被打包到JS文件中,当JS文件加载时,会尝试创建一个style标签来生成样式,这样对于网站来说,会出现闪屏的现象,用户体验不好。我们应该是单独的Css文件,通过link标签来加载性能才好。 2.下载包 npm install --save-dev mini-css-extract-plugin 3.在webpack.config.js中引入 4.去掉style
阅读更多...
【积少成多】各种js或者jquery或者html或者css等微知识------持续更新!
一、attr("src"," ") 属性在ios端图片切换异常问题。 当我们让一个图片显示/隐藏的时候,如果用到这种方法: $(".aaa").attr("src","../images/logo.png");-----显示 $(".aaa").attr("src"," ");-----隐藏 在ios端可能会出现图片隐藏的时候并没有隐藏掉。 解决方法: 隐藏时用此种写法: $(".a
阅读更多...
【备用】标准CSS引用自定义字体格式
如题,本文为备用篇章。 自定义CSS引用字体样式如下: @font-face {font-family: 'myfont';src: url('myfont-webfont.eot');src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),url('myfont-webfont.woff') format('wo
阅读更多...
前端已死? Bootstrap--CSS组件
目录 Bootstrap 下载 Bootstrap--全局CSS样式 栅格系统 栅格参数 正常显示 实例 代码演示: 排版 代码演示 表格 代码演示 表单 代码演示 等等...(文档很清晰了) Bootstrap--组件 结合演示:(页面) Bootstrap Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTM
阅读更多...
css多种布局方式
css多种布局方式 简介标准流布局(主要依赖margin\padding)浮动布局(float)定位布局(position)弹性布局(flex)网格布局(grid)多列布局(column)响应式布局(百分比、vw、rem、em、calc等)参考 简介 常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等,我会从文档流,容器,效果这些角度介
阅读更多...
学习uni-app期间css样式的导入、单位属性和ui工具关系
css单位属性 css中单位有: px :屏幕像素 vw:屏幕宽度 vh :屏幕高度 rpx :响应式 px,一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准,750rpx 恰好为屏幕宽度。屏幕变宽,rpx 实际显示效果会等比放大,但在 App(vue2 不含 nvue) 端和 H5(vue2) 端屏幕宽度达到 960px 时,默认将按照 375px 的屏幕宽度进行计算,具体配置参考
阅读更多...
html特殊字符的html,js,css写法汇总
⇠ 箭头类 符号UNICODE符号UNICODEHTMLJSCSSHTMLJSCSS⇠⇠\u21E0\21E0⇢⇢\u21E2\21E2⇡⇡\u21E1\21E1⇣⇣\u21E3\21E3↞↞\u219E\219E↠↠\u21A0\21A0↟↟\u219F\219F↡↡\u21A1\21A1←←\u219
阅读更多...
常用的CSS Hack技术集锦
常用的CSS Hack技术集锦 CSS dwqs 2014-10-05 12:06 1,982 人阅读 0评论 (网络整理) 一、什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程,就叫CSS Hack。
阅读更多...
【前端】CSS基础(2)
文章目录 前言1、CSS选择器1.1选择器的功能1.2 选择器的种类1.2.1 基础选择器1.2.1.1 标签选择器1.2.1.2 类选择器1.2.1.3 id选择器1.2.1.4 通配符选择器1.2.1.5 伪类选择器 1.2.2 复合选择器1.2.2.1 后代选择器1.2.2.2 子选择器1.2.2.3 并集选择器 前言 这篇博客仅仅是对CSS的基本结构进行了一些说明
阅读更多...
css超出部分省略(单行、多行,多种方法实现)
HTML <p class="text">这是一行测试数据,这是一行测试数据,这是二行测试数据,这是一行测试数据,这是三行测试数据,这是四行测试数据</p> 1.单行 .text{width: 200px;border: 1px solid #000000;white-space: nowrap; /* 控制元素不换行 */overflow: hidden; /* p标签超出
阅读更多...
TailwindCSS在vite项目中的安装与使用
一、Tailwind CSS工作原理 Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件和任何其他类名称模板,生成相应的样式,然后将它们写入静态 CSS 文件。它快速、灵活且可靠 — 具有零运行时间。 二、安装必要依赖 Vite创建的项目默认集成了PostCSS,而TailwindCSS本身就是一个PostCSS插件,所以直接使
阅读更多...