CSS
大炅Koss
The coming one!
展开
-
CSS : 网页引用Font Awesome图标
在网页设计的过程中,经常会遇到很多小图标。本人原以为会是在一张图片上可以截取到的,但在检查元素之后发现并不是用图像制作的。上图:首先,我们需要了解 FONTAWESOME 图标:FONTAWESOME 图标介绍(http://fontawesome.dashgame.com/)FONTAWESOME 图标(附码表)(http://www.bootcss.com/p/font-aw...原创 2020-02-05 18:16:37 · 947 阅读 · 0 评论 -
纯css : 实现图片左右切换效果(animation 属性、@keyframes 规则)
实现效果:几张图片依次轮流切换(不会放动图。。。。)思路:先设定一个播放的盒子A,要求盒子的宽和高与图片的大小一致;在设定一个容纳几张图片的盒子B,要求盒子的宽与所有图片的总宽一致,高度与图片一致;将图片横向排放在盒子B中,用float属性做定位;利用 animation 属性、@keyframes 规则 设置动画效果,实现切换的目的。具体代码:<div id="fra...原创 2020-02-13 11:55:05 · 6288 阅读 · 1 评论 -
css : 实现三角形的制作
实现原理:设置属性 width:0px; height:0px;设置三角形底部颜色:(分为两种情况) (1). 只有一条横竖边: 设置该边为:border -方向:长度 solid 颜色; 其他边设置为:border -方向:长度 solidtransparent; (2).有两条横竖边: 1>.斜边是在三角形的右边,...原创 2020-02-13 17:07:24 · 116 阅读 · 0 评论 -
css position的相关属性:
Position的常用属性有:absolute:绝对定位。相对于 static 定位以外的第一个父元素进行定位。relative:相对定位。相对于其正常位置进行定位。fixed:固定定位。相对于浏览器窗口进行定位。static:默认值,没有定位。元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。inherit:规定应该从...原创 2020-02-06 16:14:50 · 179 阅读 · 0 评论 -
CSS:实现矩形边缘有个往里凹的小半圆
怎样制作如上图形?首先可以看到是有两个部分组成,左边的小图,和右边往里凹的矩形。(暂时不说左边的情况了,具体看右边形状的设置)主要思路:构建一个矩形,再利用border-radius将他的左边部分设置为往里凹的状态。具体代码:<div id="tip-r"> <dd class="butt"> 我的福利 >...原创 2020-02-09 14:14:40 · 4170 阅读 · 5 评论 -
CSS:(::before 与::after)
在css中,::before 和::after是一个 伪类元素,代表生成的内容元素。利用::before可以把需插入的内容插入到元素的其他内容之前;利用::after可以把需插入的内容插入到元素的其他内容之后,并且默认内联显示。1. ::before 和 ::after需要使用content属性来指定内容的值。例如:<a href="#" class="e2">...原创 2020-02-05 19:02:00 · 264 阅读 · 0 评论 -
标签的分类------块标签,行标签,行内块标签
在使用一些标签时,有的会自动换行,有的会在一行显示,so:(注意了哦!!)常见的块标签,行标签,行内块标签一、块级标签<1> 特点: 1.独占一行,不和其他元素待在同一行 2.能设置宽高<2> 常见的块级标签:div, p, h1-h6, ul, li, dl, dt, dd二、行级标签<1> 特点: 1.能和其他元素...原创 2020-02-01 20:41:34 · 519 阅读 · 0 评论 -
CSS display的最常用法:
1.display:inline 将块级元素转化为行级元素,这时块级元素设置的宽高无效;2.display:block将行级元素转块级元素,这时原本的行级元素会变成块级元素独占一行,同时可以设置宽高; 比较常用于< a > < span >这两个标签——因为这两个标签非块元素,如果不用display:block定义一下,那么定义width、height等和长宽...原创 2020-02-06 13:49:17 · 171 阅读 · 0 评论 -
CSS :设置 当鼠标移到某一部分时,该部分隐藏的内容显示出来
首先,将所隐藏的内容的style样式里添加:display:none;再在样式的hover里添加:display:block;就OK了。原创 2020-02-09 14:19:37 · 1961 阅读 · 0 评论 -
CSS : 制作滚动条(overflow属性)
首先 了解一下overflow属性:overflow属性有四个值:visible (默认), hidden, scroll, 和auto。同样有两个overflow的姐妹属性overflow-y 和overflow-x,它们很少被采用。我们可以把页面中的每个元素看作在一个盒子里,通过css来控制这些盒子的各个属性。各属性的含义:Visible:当你不设置overflow属性的时候,会默...原创 2020-02-12 13:45:46 · 624 阅读 · 0 评论 -
记录css 学习过程中的problems:
1. 记录使用float:left;失效的原因:2. 搜素框的颜色:outline:颜色。例:3.制作如图字中间的竖杠 | :例:<span class="split"></span>.split{ width: 1px; height: 20px; float: left; }4.使用斜体标签(em)后,显示的字...原创 2020-02-01 18:37:54 · 129 阅读 · 1 评论