CSS
关注
分享
扫一扫
CSS样式
小k铁柱
铁柱在努力
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
css+js仿element ui 的select 选择器
效果如下所示静态：点击：样式是element ui 的，实现过程大抵是HTML元素是由两部分组成，input 部分 和 下拉菜单 部分点击input 输入框实现实现下拉菜单的显示与隐藏点击下拉菜单item时隐藏下拉菜单...原创 2020-11-10 19:08:54 · 618 阅读 · 1 评论 -
animation 轮播图/文字滚动
轮播图使用CSS3 的animation 和 tranform 特性 做了一个轮播图 <!-- tranform 实现轮播图 --> <div class="container"> <ul class="imgScroll"> <li><a href="#"><img src="img/黑暗.jpg"/></a></li> <li><a href="#">原创 2020-08-13 15:06:37 · 1102 阅读 · 0 评论 -
前端基础知识
刚刚的面试题赶紧拿小本本记起来。css3新特性有哪些？参考新选择器：nth-child(n) 选择器的第n个子元素nth-of-type(n) 选择器的“特定类型” 的第n个子元素这两个的区别：p:nth-child(2) 父元素的第二个子元素，且是p元素p:nth-of-type(2) 父元素的第二个p元素:frist-child 选择器的第一个子元素:frist-of-type 相当于 :nth-of-type(1)E:empty 选择没有子元素的每个E元素文本：tex原创 2020-08-10 17:05:14 · 181 阅读 · 0 评论 -
CSS 水平垂直居中
在css 里，居中很容易，但垂直居中就不是那么容易。margin负值法已知容器大小负的外边距可以让元素往相反的方向定位，长度单位要统一，我统一同 rem，负值是容器的一半 <div class="container"> <div class="content"> I am the content that need to be centred. </div> </div> .container { width:转载 2020-08-10 16:40:17 · 143 阅读 · 0 评论 -
CSS布局--Grid网格布局
css 真是越来越丰富多彩了，flex 布局已经够强大了，现在还出现了Grid 网格布局。so colorful~做个小练习熟悉一下Grid <div class="wrapper"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">原创 2020-08-04 17:23:53 · 477 阅读 · 0 评论 -
CSS 布局
最近一直在用框架，甚至都快忘记css 怎么使用布局了，赶紧记录一篇比较完整的布局。基础知识网页中的三种布局模型流模型浮动模型（float）层模型（相对定位relative，绝对定位absolute，固定定位fixed (z-index属性)）网页布局的几种方式一列布局一列布局相对简单，设置宽高背景，也可以让内容撑开盒子。两列布局两列布局用得比较多，七种实现左侧固定，右侧自适应两栏布局的方法双inline-block 方案 <div class="wrapper">原创 2020-08-02 19:23:49 · 152 阅读 · 0 评论 -
html文档加载中效果实现
使用的bootstrap的spinner，效果参考Bootstrap spinners使用到的知识有setTimeout，window.onload，position固定定位fixed截了图，背景颜色是灰色html样式来自bootstrap<div id="loading"> <div class="spinner-border text-primary" role="status"> <span class="sr-only">Loa原创 2020-07-13 17:26:06 · 726 阅读 · 0 评论 -
CSS 3D transform画立方体
用CSS画了个立方体。主要用的transform 属性。Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>3D transform</title> <style> .container { margin: 50px; p原创 2020-05-26 23:29:54 · 238 阅读 · 0 评论 -
css 遮罩 （点击图片显示遮罩层和链接）
废话不多说了，我先上效果图。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>鼠标移入图片显示遮罩层和文字</title> <style> .img_div { position: relative; width: 300px; height: 300px; } img { position:原创 2020-05-23 00:34:38 · 1376 阅读 · 0 评论 -
html 中的路径
background-image: url(img/头像1.jpg)上述代码是从当前代码开始找，它最后得出的路径是css/img/头像1.jpg但其实img这个文件夹是和css同级的，所以我需要回到上一级。background-image: url(../img/头像1.jpg)上述才是正确写法。相对.css所在的目录而言：“…/”表示上一级目录开始“./”表示当前同级目录开始“/”表示根目录开始。...原创 2020-05-21 22:59:43 · 188 阅读 · 0 评论 -
修改input标签的placeholder属性的字体颜色
问题描述：想修改input的placeholder属性的字体颜色，在input这个选择器里怎么也没用。解决::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; }:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #909; }::-moz-placeholder { /* Mozilla Firefox 19+ */ colo原创 2020-05-20 15:10:51 · 448 阅读 · 0 评论 -
html 和 body 标签的高度（如何让div占满全屏）
问题描述：想让下面的header元素高度为100%，奈何设置了height： 100%；之后没作用。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title></title> <link href=原创 2020-05-20 11:43:00 · 19191 阅读 · 4 评论