CSS
关注
分享
扫一扫
文章平均质量分 84
CSS用于优化网页样式
我心向阳iu
CSDN专家博主、阿里云开发者社区专家博主、51CTO社区专家博主、360书馆认证博主、知乎掘金B站等平台受邀作者。
如遇开发、程序等需求，博客首页下拉加入公众号，私信博主
展开
-
CSS动画——行走的小人
展示html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <li原创 2021-07-15 08:48:16 · 3652 阅读 · 0 评论 -
CSS代码书写规范
文章目录首先感谢乖乖老师悉心提点CSS代码格式空格规范选择器规范属性规范CSS书写顺序CSS书写规范使用CSS缩写属性去掉小数点前的“0”简写命名16进制颜色代码缩写连字符CSS选择器命名规范不要随意使用Id为选择器添加状态前缀CSS命名规范（规则）常用的CSS命名规则注释的写法:Id的命名:1)页面结构2)导航3)功能注意事项：CSS样式表文件命名首先感谢乖乖老师悉心提点阳光拥抱着雨露，绿树拥抱着鲜花。乖乖老师细心的培养和指导就像一抹暖阳，照亮了我人生的旅途 。在这里祝愿老师儿童节快乐，青春永驻！原创 2021-06-06 14:15:58 · 2700 阅读 · 0 评论 -
CSS代码书写规范
http://www.divcss5.com/rumen/r50787.shtmlhttps://www.cnblogs.com/oc-bowen/p/6441794.html原创 2021-06-01 21:14:45 · 3119 阅读 · 1 评论 -
QQ Tim背景案例
展示代码原创 2021-01-19 23:13:53 · 4047 阅读 · 1 评论 -
Flex 布局教程：语法篇
Flex 布局教程：语法篇一、Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */原创 2020-10-12 22:43:18 · 4112 阅读 · 0 评论 -
几行代码解决京东购物界面
文章目录完整项目界面展示GIF界面代码index.htmlindex.css（中间主要部分）base.css（头部，尾部）normal.css图片资源完整项目https://download.csdn.net/download/weixin_45525272/12596801界面展示GIF界面代码index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-07-10 10:24:03 · 9363 阅读 · 0 评论 -
CSS W3C 统一验证工具
CSS W3C 统一验证工具CssStats是一个在线的 CSS 代码分析工具网址是：http://www.cssstats.com/W3C 统一验证工具：更全面的，神奇的验证 http://validator.w3.org/unicorn/ ☆☆☆☆☆因为它可以检测本地文件哦！！css 代码压缩http://tool.chinaz.com/Tools/CssFormat.aspx这里也推荐一个非常好的网站可以模板下载 网站测权重https://www.chinaz.com/原创 2020-07-10 10:17:09 · 4094 阅读 · 0 评论 -
CSS——CSS网站优化三大标签(title，description，keyword)
SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”！SEO是指通过对网站进行站内优化、网站结构调整、网站内容建设、网站代码优化等)和站外优化，从而提高网站的关键词排名以及公司产品的曝光度。 简单的说就是，把产品做好，搜索引擎就会介绍客户来。我们现在阶段主要进行站内优化。网页title 标题title具有不可替代性，是我们的内页第一个重要标签，是搜索引擎了解网页的入口，和对网页主题归属的最佳判断点。建议：首页标题：网站名（产品名）- 网站的介原创 2020-07-10 10:09:53 · 6297 阅读 · 0 评论 -
CSS——引入ico图标
引入ico图标<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> 注意：它不是iconfont字体哦 也不是图片。位置是放到 head 标签中间。后面的type=“image/x-icon” 属性可以省略。（我相信你也愿意省略。）为了兼容性，请将favicon.ico 这个图标放到根目录下。下载及转换ico图标网站（方便）我们可以自己做的图片，转换为 ico图标，原创 2020-07-09 14:41:22 · 6071 阅读 · 0 评论 -
CSS——web字体与CSS字体图标
文章目录web字体字体格式字体图标字体图标优点字体图标使用流程设计字体图标上传生成字体包下载兼容字体包字体引入到HTML第一步：在样式里面声明字体： 告诉别人我们自己定义的字体第二步：给盒子使用字体第三步：盒子里面添加结构追加新图标到原来库里面web字体字体格式不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。1、TureType(.ttf)格式.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、C原创 2020-07-09 14:34:24 · 4322 阅读 · 0 评论 -
CSS——CSS滑动门及其应用（制作微信导航栏） ※
滑动门先来体会下现实中的滑动门,或者你可以叫做推拉门：滑动门出现的背景制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。核心技术核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度,原创 2020-07-03 21:57:58 · 7456 阅读 · 1 评论 -
CSS——CSS精灵技术（sprite）※
文章目录CSS精灵技术（sprite） 小妖精 雪碧精灵技术产生的背景精灵技术本质精灵技术的使用制作精灵图注意事项结束语：精灵图案例CSS精灵技术（sprite） 小妖精 雪碧精灵技术产生的背景图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的原创 2020-07-03 21:18:42 · 4492 阅读 · 0 评论 -
CSS高级技巧——鼠标样式，轮廓，文本域防拖拽，vertical-align 垂直对齐，文字溢出问题
CSS高级技巧CSS用户界面样式所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 防止表单域拖拽鼠标样式cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。cursor : default 小白(就是普通是鼠标指针) | pointer 小手 | move 移动 | text 文本鼠标放我身上查看效果哦：<ul> <li styl原创 2020-07-03 20:50:44 · 4843 阅读 · 0 评论 -
CSS——CSS元素的显示与隐藏
文章目录元素的显示与隐藏display 显示visibility 可见性overflow 溢出溢出案例案例：播放图标的显示元素的显示与隐藏在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！display 显示display 设置或检索对象是否及如何显示。disp原创 2020-07-03 12:50:20 · 4522 阅读 · 0 评论 -
CSS——浮动布局改错题
文章目录题目错误代码解析正确代码题目错误代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" cont原创 2020-07-03 08:43:37 · 4307 阅读 · 0 评论 -
CSS——CSS定位※ ( position )
文章目录定位(position)为什么要用定位？元素的定位属性静态定位(static)相对定位relative(自恋型)绝对定位absolute (拼爹型)1.父级没有定位2.父级有定位3.子绝父相 ※※绝对定位的盒子水平/垂直居中代码示例固定定位fixed(认死理型)叠放次序（z-index）四种定位总结定位模式转换顺丰案例定位(position)background-position 背景定位如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。PS: 定原创 2020-07-03 08:04:03 · 4554 阅读 · 0 评论 -
PS基本操作介绍与下载
文章目录学习视频教程破解版PS下载 以及 视频教程相关素材链接Photoshop基本使用PS界面组成：图层操作(重点)图层编组图层上下位置移动Photoshop 切图切片工具辅助线和切片使用及清除切图插件学习视频教程http://2565.replace.favo.tyouai.com/破解版PS下载 以及 视频教程相关素材链接链接：https://pan.baidu.com/s/1qCE2jGR1Oh85VYan0XZqlg提取码：5oe8Photoshop基本使用PS界面组成：ctrl原创 2020-07-02 22:26:23 · 4641 阅读 · 0 评论 -
CSS——CSS浮动与清除浮动
文章目录浮动普通流(normal flow)浮动(float)什么是浮动？浮动详细内幕特性float 浮 漏 特现在就可以用float实现一些基本页面布局了链接清除浮动为什么要清除浮动清除浮动本质※ 清除浮动的方法1.额外标签法2.父级添加overflow属性方法3.使用after伪元素清除浮动4.使用before和after双伪元素清除浮动浮动普通流(normal flow)这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。前面我们说过，网页布局的核心，就是用CSS来摆放盒子原创 2020-07-02 17:17:15 · 5115 阅读 · 0 评论 -
CSS——网页版心和布局流程
阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。布局流程为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：1、确定页面的版心（可视区）。2、分析页面中的行模块，以及每个行模块中的列模块。3、制作HTML结构 。4、CSS初原创 2020-07-02 16:12:51 · 11060 阅读 · 0 评论 -
盒子综合案例——德云社十八愁与宠物知识栏
文章目录1.德云新闻案例效果图源代码（图片我放在最下哈）2.宠物知识栏案例源代码3.图片资源1.德云新闻案例效果图源代码（图片我放在最下哈）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>十八愁绕口令</title> <style type="text/css"> *{margin: 0;padding: 0;}原创 2020-06-30 10:54:10 · 5396 阅读 · 0 评论 -
Sublime Text3去掉css输入分号后的自动提示
如果一不行就用第二种方法一打开Sublime默认设置文件：‘Perferences->Package Settings->SublimeCodeIntel->Setting - Defalut’找到：“codeintel_enabled_languages”: 这一项，把里面的 “HTML” 删掉就可以了。OK，重启就可以了，完美解决，如果年后编写其他的，去掉对应的语言就好了。方法二（我找到了没有代码里面，然后用的方法一）打开Preferences -> Package原创 2020-06-30 09:41:37 · 4419 阅读 · 0 评论 -
CSS——CSS权重计算测试题
1<title>第1题</title> <style type="text/css"> #father #son{ color:blue; } #father p.c2{ color:black; } div.c1 p.c2{ color:red; } #father{ color:green !important; /* 继承的权重为0 */ } </styl原创 2020-06-29 22:32:31 · 4769 阅读 · 0 评论 -
CSS——CSS盒子模型（重点※）
是你的温柔导论看透网页布局的本质盒子模型（Box Model）盒子边框（border）盒子边框写法总结表表格的细线边框圆角边框(CSS3)内边距（padding）外边距（margin）外边距实现盒子居中文字盒子居中图片和背景区别清除元素的默认内外边距外边距合并相邻块元素垂直外边距的合并嵌套块元素垂直外边距的合并content宽度和高度盒子模型布局稳定性盒子阴影盒子基本训练案例导航栏案例※新闻内容布局美化案例※导论其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无原创 2020-06-29 22:18:26 · 14600 阅读 · 5 评论 -
CSS——CSS 背景应用
文章目录基本属性背景图片(image)背景平铺（repeat）背景位置(position)背景附着背景简写背景透明(CSS3)背景图方位案例基本属性CSS 可以添加背景颜色和背景图片，以及来进行图片设置。background-color背景颜色background-image背景图片地址background-repeat是否平铺background-position背景位置background-attachment背景固定还是滚动背景的合写（复合属性原创 2020-06-29 20:41:13 · 4457 阅读 · 1 评论 -
CSS——CSS 三大特性（理论）
文章目录CSS层叠性CSS继承性CSS优先级CSS特殊性（Specificity）总结：层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。一般情况下，如果出现样式冲突，则会按照CSS书写的顺序原创 2020-06-29 20:00:08 · 4564 阅读 · 0 评论 -
CSS——CSS书写规范
空格规范【强制】 选择器 与 { 之间必须包含空格。示例： .selector { }【强制】 属性名 与之后的：之间不允许包含空格，：与属性值之间必须包含空格。示例：font-size: 12px;选择器规范【强制】 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。示例：/* good */.post,.page,.comment { line-height: 1.5;}/* bad */.post, .page, .comment原创 2020-06-29 19:51:37 · 4162 阅读 · 0 评论 -
CSS——CSS标签显示模式（display）
文章目录标签的类型(显示模式)块级元素(block-level)行内元素(inline-level)块级元素和行内元素区别行内块元素（inline-block）标签显示模式转换 display案例：显示模式转换标签的类型(显示模式)HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：块级元素(block-level)每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。 霸道常见的块元素有<h1>~&原创 2020-06-27 10:19:07 · 5108 阅读 · 0 评论 -
CSS——CSS复合选择器（重中之重 ☆）
文章目录CSS复合选择器交集选择器并集选择器后代选择器子元素选择器伪类选择器链接伪类选择器CSS复合选择器复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。交集选择器交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。记忆技巧：交集选择器 是 并且的意思。 即…又…的意思比如： p.one 选择的是： 类名为 .one 的 段落标签。 用的相原创 2020-06-27 10:03:04 · 5084 阅读 · 0 评论 -
CSS——CSS字体样式属性和CSS外观属性
爱是朝朝暮暮的相守CSS字体样式属性font-size:字号大小font-family:字体注意CSS Unicode字体font-weight:字体粗细font-style:字体风格font:综合设置字体样式 (重点)CSS外观属性color:文本颜色line-height:行间距text-align:水平对齐方式text-indent:首行缩进text-decoration 文本的装饰简单案例CSS字体样式属性font-size:字号大小font-size属性用于设置字号，该属性的值可以使用相对长原创 2020-06-26 22:07:36 · 5522 阅读 · 0 评论 -
CSS——多类名选择器，id选择器，通配符选择器
文章目录多类名选择器案例id选择器id选择器和类选择器区别案例通配符选择器案例多类名选择器我们可以给标签指定多个类名，从而达到更多的选择目的。注意：样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。各个类名中间用空格隔开。多类名选择器在后期布局比较复杂的情况下，还是较多使用的。<div class="pink fontWeight font20">亚瑟</div><div class="font20">刘备</d原创 2020-06-26 21:22:31 · 6751 阅读 · 0 评论 -
CSS——标签选择器，类选择器
文章目录选择器（重点）CSS基础选择器标签选择器（元素选择器）类选择器类选择器小案例小案例 制作一个简易Google图标选择器（重点）要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。CSS基础选择器标签选择器（元素选择器）标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者原创 2020-06-26 21:04:00 · 5717 阅读 · 0 评论 -
CSS——CSS基础知识
文章目录CSS的发展历程CSS 网页的美容师CSS初识引入CSS样式表（书写位置）内部样式表行内式（内联样式）外部样式表（外链式）三种样式表总结（位置）CSS样式规则外链案例内链案例CSS的发展历程从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生原创 2020-06-26 20:55:55 · 8179 阅读 · 0 评论