纯css
文章平均质量分 60
零基础,学会使用css……
CHH5431
公众号:xssy5431 小拾岁月
展开
-
网格布局之跨行越列
参考链接:https://mp.weixin.qq.com/s/xStfSmewncTW49N0Y_Vhow原创 2024-06-22 18:27:35 · 331 阅读 · 0 评论 -
网格布局之网格线编号定位
参考链接:https://mp.weixin.qq.com/s/es3wDHV2dByH1tM3OCUfTA。原创 2024-06-19 15:32:21 · 279 阅读 · 0 评论 -
网格布局之重复轨道
参考链接:https://mp.weixin.qq.com/s/NiIl4zG6gYdWvfASt8p8BQ原创 2024-06-19 15:28:30 · 281 阅读 · 0 评论 -
网格布局之初步入门
参考链接:https://mp.weixin.qq.com/s/j8n7vnHjbLmlU5SfJnq1xg。原创 2024-06-19 15:25:12 · 439 阅读 · 0 评论 -
常用的CSS样式搜集(持续更新中)
常用的CSS样式搜集(持续更新中)PC端1. 滚动条美化::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); border-radius: 0;}::-webkit-scrollbar { -webkit-appearance: none; width: 5px; height: 5px; // ...原创 2019-10-11 18:27:12 · 358 阅读 · 0 评论 -
页面元素尺寸忽大忽小
在一些网站中,为了引起用户的注意,部分元素忽大忽小,一下代码可以简易实现其效果,供小白参考。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>页面元素忽大忽小效果</title> <style type="text/css">...原创 2018-05-11 21:59:31 · 925 阅读 · 2 评论 -
布局“负数”的妙用——少年自负凌云笔(未完待续)
布局中巧妙运用&amp;quot;负数&amp;quot;简介在我们日常的网页布局中,我们鲜少使用负 margin 与 padding ,殊不知,我们可以利用它们解决很多布局的问题,达到极好的视觉体验。负值的应用场景标签的水平垂直居中去除列表的右边距去除列表末尾元素的border-bottom自适应布局三栏等高google reader自适应渐变圆角按钮1、标签的水平垂直居中网页设计中,元素的水平居中...原创 2018-11-08 15:03:56 · 420 阅读 · 1 评论 -
a标签伪类的使用
a标签的伪类伪类的作用:link =&amp;amp;gt; 向未被访问的链接添加样式。:visited =&amp;amp;gt; :visited 向已被访问的链接添加样式。:hover =&amp;amp;gt; :hover 当鼠标悬浮在元素上方时,向元素添加样式。:active =&amp;amp;gt; :active 向被激活的元素添加样式。即鼠标按下时的样式。代码举例HTML文件&a原创 2018-11-04 21:15:03 · 4925 阅读 · 1 评论 -
身无彩凤【双飞翼】,心有灵犀一点通。
双飞翼布局一、页面布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&qu原创 2018-11-02 14:43:58 · 1049 阅读 · 0 评论 -
Less语法学习-未完待续
Less语法学习Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。变量说明:声明变量的时候,使用@开头,并且对于声明的变量,可以进行运算。注意:变量实际上是“常量”,因为它们只能定义一次。举例如下:@nice-blue: #5B83AD;@light-blue...原创 2018-10-24 23:00:44 · 492 阅读 · 0 评论 -
基于Bootstrap的网页开发
基于Bootstrap的网页开发 Bootstrap是用于前端开发的工具包,提供了优雅的HTML和CSS规范,并基于jQuery开发了丰富的Web组件。Bootstrap是移动设备优先的,它针对移动设备的样式融合了框架的每个角落,使得只需要通过简单的代码,便可以实现漂亮的响应式布局。备注:使用的初始化css文件是normalize.css;1、基本模板<!DOCTYPE htm...原创 2018-10-15 21:11:58 · 5326 阅读 · 0 评论 -
三栏布局
题目:假设高度已知,请写出三栏布局,其中左栏、右栏宽度各为300px,中间自适应。答题的时候,我们应该做以下分析:1、题干的要求真的是字面那么简单吗?2、答案应该怎么写?技巧在哪里?3、为了展示自己的能力,应该写几种方法?具体代码:<!DOCTYPE html><html lang="en"><head> <meta c...原创 2018-10-11 21:44:55 · 324 阅读 · 0 评论 -
常见网站底部友情链接代码示例
公司的官网底部大多都有友情链接,一下代码为简单底部布局,仅供初学者参考。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>底部友情链接</title> <style type="text/css"&原创 2018-05-11 21:21:22 · 31009 阅读 · 3 评论 -
响应式网站设计(5)-部分css样式复习
样式1:box-shadow语法:box-shadow: h-shadow v-shadow blur spread color inset;box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。值 描述 h-shadow 必需。水平阴影的位置。允许...原创 2018-08-22 15:43:09 · 331 阅读 · 0 评论 -
响应式网站设计(3)-meta标签,条件注释,H5新增标签说明(持续更新中)
meta标签在网站制作的时候,我们经常接触meta标签,但是却往往忽略它们,常见的meta标签的意义,说明如下: <!--utf-8要最先声明,在head的第一行--> <meta charset="UTF-8"> <!--content="ie=edge"表示强制以最新的IE浏览器模式渲染页面--> <meta h...原创 2018-08-22 09:19:25 · 657 阅读 · 0 评论 -
vue项目笔记(6)-使用stylus
vue中使用stylus1、stylus的安装,具体方法:运行以下命令npm install stylus --savenpm install stylus-loader --save2、组件中使用的时候,需要声lang="stylus"<style lang="stylus" scoped></style>3、stylus中使用变量(以背景颜...原创 2018-08-09 21:24:29 · 1445 阅读 · 0 评论 -
vue项目笔记(4)-常用的基础样式(reset.css与border.css)
reset.css不同浏览器对相同标签的显示效果,有时候往往不同,那么在做项目的时候就需要对基本的样式进行设置,以达到在不同浏览器下显示效果是相同的,reset.css的作用就在于此。所有,大家很有必要收藏一下,在做项目的时候直接使用即可。具体代码:@charset "utf-8";html { background-color: #fff; color: #000...原创 2018-08-09 19:53:21 · 6287 阅读 · 4 评论 -
css标签水平垂直居中的4种常用方法及适用场景
标签的水平垂直居中,在面试及日常项目中非常常见,常用的4种方法如下:方案一:已知标签宽高,标签绝对定位,4个方向的值均为0,并设置margin: auto;注意:IE7及之前版本不支持;方案二:已知标签宽高,使用负margin值,其值为标签宽度的负一半;方案三:标签绝对定位,left与top值设置为50%,并做transform偏移-50%,-50%方案四:父级转变为弹性盒子,主轴...原创 2018-07-18 21:33:03 · 3964 阅读 · 0 评论 -
纯css实现鼠标移入逐渐高亮
本例子主要使用transition来实现鼠标移入之后,标签逐渐高亮,存在渐进的过程。具体的做法:将background-color,color等属性,作为一个动画来执行。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>鼠标移入文本高亮显示</title..原创 2018-05-02 20:22:09 · 11497 阅读 · 1 评论