CSS
CSS
_Lilly
有谁在快乐地坚持信仰
还有谁在快乐地继续coding
展开
-
用CSS画圆和三角形
圆形的原理不必多说,三角形的原理是使用border,border呈扇形向外展开,当width为0时,就是三角形,可以给四个方向的border设置不同的颜色,查看效果图就能一目了然。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <me原创 2022-04-10 15:17:55 · 295 阅读 · 0 评论 -
Bootstrap 移动设备 响应式图像
移动设备<meta name="viewport" content="width=device-width, initial-scale=1.0">width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览,那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。 initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。原创 2017-07-04 11:05:30 · 1595 阅读 · 0 评论 -
css实现背景透明文字不透明
我们所说的设置透明度实际上是设置不透明度使用opacity会导致背景和图片都透明,在此处不合适<!DOCTYPE html><html><head><meta charset="utf-8"><title>css3的rgba</title><style>*{ padding: 0; margin: 0;}body{ padding: 50px;}.demo原创 2017-10-15 13:29:26 · 11241 阅读 · 0 评论 -
使用float:left不能移到最左边
使用clear:both;原创 2017-06-18 20:47:37 · 2587 阅读 · 0 评论 -
CSS(3)
类 特定程度 属性杂烩汤原创 2017-02-03 15:18:14 · 224 阅读 · 0 评论 -
CSS(2)
继承、覆盖继承、类原创 2017-02-02 22:24:37 · 196 阅读 · 0 评论 -
CSS 为页面加一点样式(简单的属性及<link>)
CSS中的每个语句包括一个场所(如卧室),以及这个场所的一个属性(如窗帘或地毯),还要运用这个属性的一个样式(如颜色)。 Bedroom{ drapes:blue; } 推荐一本小书——《CSS Pocket Reference》规则:p{ 其中整体为规则,p所在的位置为选择器。CSS规则要放在原创 2017-01-29 21:01:13 · 560 阅读 · 0 评论 -
一个关于height的错误
当页面设置的height,但是其包含的内容超过了这个长度,页面内容展示将出错,比如正常页面如下 height小于内容块长度时,内容被折叠原创 2018-03-06 17:17:18 · 508 阅读 · 0 评论 -
CSS立体实现
做项目时需要做一个能够翻转盒子,实质上是由立方体压缩而来,大致效果如图重要属性perspective:设置元素被查看位置视图transform-style:设置元素所处的是3D空间还是平面transform:实现文字或图像的变形处理:缩放(scale)、倾斜(skew)、移动(translate)、旋转(rotate)transform-origin:调整坐标原点代码...原创 2018-02-24 17:50:35 · 579 阅读 · 0 评论 -
Grid布局
网格容器的属性 属性 值 display grid 、inline-grid、subgrid grid-template-columns grid-template-rows grid-template-areas grid-column-gap 网格间距 grid-row-gap 网格间距 g原创 2018-01-08 21:46:39 · 403 阅读 · 0 评论 -
HTML/CSS重要知识集合(一)
HTML/CSS知识总结与复习原创 2017-11-04 00:24:00 · 348 阅读 · 0 评论 -
flex布局
阮一峰专家的教程超棒转载 2017-06-19 20:35:00 · 182 阅读 · 0 评论 -
div和span
**将一个页面划分为逻辑区**<div></div>*在页面中要使用<div>,但不能滥用要为<div>增加id例如:增加边框#elixirs{border-width:thin;border-style:solid;border-color:#007e7e;}处理elixirs的宽度:width属性允许你指定元素内容区的宽度,设置宽度有多种不同方法: 1、直接用像素 2、如果使用百原创 2017-03-20 21:28:54 · 559 阅读 · 0 评论 -
盒模型
调整整个页面上文本的行高line-height:1.6em;(em /px /百分数)合模型 每个盒子由一个内容区以及可选的内边距、边框和外边框组成。内容区(content area):包含文本或图像 内边距(padding):透明的 边框(border) 外边框(margin)所有的元素都被当做盒子class属性 在.html文件中<p class="guarantee">打开对应的.c原创 2017-02-16 22:09:10 · 276 阅读 · 0 评论 -
布局与定位
使用流块元素,流是从上到下的对于内联函数,流是从左上方流到右下方,特别的,文本是内联函数的一种特殊情况,浏览器会把他分解成适当大小的内联元素,以适应给定的空间。关于流和合模型还需要知道。。。。。。 浏览器并排放置两个内联元素时 它会对这些元素之间创造足够到外边距浏览器上下放置两个块元素时 浏览器上下放置两个块元素时,会折叠他们的外边距,他们的共同外边距为两个外边距中较大的那个外边距大小。原创 2017-03-21 13:44:32 · 323 阅读 · 0 评论 -
定位
position用来设定元素的定位类型,有absolute(绝对定位)、relative(相对定位)、static(静态定位,默认值)、fixed(固定定位)四种。 static:默认。位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明)。 relative:位置被设置为 relative 的元素,可转载 2017-05-02 13:06:50 · 277 阅读 · 0 评论 -
css动画
有一个重要的属性 animation 语法animation: name duration timing-function delay iteration-count direction;值 描述animation-name 规定需要绑定到选择器的 keyframe 名称。。animation-duration 规定完成动画所花费的时间,以秒或毫秒计。animation-timing原创 2017-05-19 23:18:39 · 623 阅读 · 0 评论 -
css3-transform
<!DOCTYPE html><html><head><style> div{width:100px;height:75px;background-color:yellow;border:1px solid black;}div#div2{transform:rotate(30deg);-ms-transform:rotate(30deg); /* IE 9 */-mo原创 2017-05-19 23:32:26 · 214 阅读 · 0 评论 -
outline
定义和用法 outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 注释:轮廓线不会占据空间,也不一定是矩形。 outline 简写属性在一个声明中设置所有的轮廓属性。 可以按顺序设置如下属性: outline-color outline-style outline-width<!DOCTYPE html PUBLIC "-//W3C//DTD X原创 2017-05-21 17:22:34 · 11121 阅读 · 0 评论 -
三栏式布局中的tips
虽然是一个很简单的题目,但是由于自己布局定位没有学好,简单的页面做了几个小时,但是也是有收获的,下面我来分析一下我在做页面时遇到的问题以及收获。首先:三栏式布局最好不要用css表格,因为框框太多,容易糊涂 三栏式布局 一、绝对定位法:左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。首先需要三个div,将左右两边的div的posi原创 2017-05-22 20:59:24 · 286 阅读 · 0 评论 -
伪元素
伪元素原创 2017-07-02 11:08:16 · 320 阅读 · 0 评论 -
增加字体和颜色样式
梗概用font-family属性定制页面中使用的字体body{ font-family:Verdana,Geneva,Arial,sans-serif; }用font-size属性控制字体的大小body{ font-size:14px;}3.用color属性设置字体颜色body{ color:silver;}4.用text-decoration属性为文本增原创 2017-02-05 21:03:40 · 2025 阅读 · 0 评论