CSS
关注
分享
扫一扫
seaalan
这个作者很懒，什么都没留下…
展开
-
CSS - Jquery操作样式
1 直接添加style添加一个css属性$(".channel").css({ "position": "static" });添加多个css属性$(".channel").css({ "position": "fixed", "width": "100%", "top": "0" });2 添加删除class定义一个class.channel-fixed { position...原创 2020-02-20 13:58:53 · 121 阅读 · 0 评论 -
CSS - flex
div { display: flex; /* 定义容器为弹性布局 */ flex-direction:column; /* 定义主轴为垂直方向 */ align-items: center; /* 定义子元素垂直居中 */ justify-content: center; /* 定义子元素水平居中 */ flex-wrap: wrap; /* 换行，第一行在上方 */}...原创 2020-02-19 16:25:48 · 142 阅读 · 0 评论 -
CSS - 透明度
1. rgba 推荐 background-color: rgba(0, 0, 0, 0.3); color: #fff;2. opacity 文字也会透明 background-color: rgb(0, 0, 0); opacity: 0.3; color: #fff;原创 2020-02-19 13:18:21 · 1368 阅读 · 0 评论 -
CSS - 响应式图片
1 max-width<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...原创 2020-02-18 15:33:49 · 1210 阅读 · 0 评论 -
CSS布局 - 左列定宽，右列自适应
1 float margin-left<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...原创 2020-02-18 11:55:56 · 356 阅读 · 0 评论 -
CSS布局 - 水平垂直居中
1 table-cell<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...原创 2020-02-18 11:40:10 · 151 阅读 · 0 评论 -
CSS布局 - 垂直居中
1 line-height vertical-align<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...原创 2020-02-17 18:02:42 · 122 阅读 · 0 评论 -
CSS布局 - 水平居中
1 text-align<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...原创 2020-02-17 16:56:55 · 131 阅读 · 0 评论 -
CSS - 常识 - float
使块元素在一行显示。float: left;.section1 { float: left;}<div> 使块元素在一行显示。float: left;</div><div> <section class="section1">section1</section> <section cla...原创 2019-04-29 12:24:37 · 194 阅读 · 0 评论 -
CSS - 行内元素水平居中
方法一：父级设置 text-align : center;.parent { text-align: center;}.parent > div{ text-align: left;}<div class="parent"> <div>行内元素水平居中方法一：父级设置 text-align : center;</div&g...原创 2019-04-29 11:39:58 · 10174 阅读 · 0 评论 -
CSS - 常识 - 行内和块元素
行内元素：特点：①不换行；②不可设置大小；③大小由内容决定（宽度即为内容的宽度）常用行内元素：span, a, label, input, img, textarea, select, button, strong不常用行内元素：small, u, i, em, abbr, big, cite, sub, sup, q行内元素水平居中的两种方法：① 父级设置 text-align : ...原创 2019-04-29 11:34:15 · 340 阅读 · 0 评论 -
CSS - margin负值
margin-left和margin-right设置负值会增加元素的宽度 （该元素没有设定width属性或width:auto）。margin-top设置负值不会增加元素高度，只会产生向上的位移。margin-bottom设置负值不会产生位移，只会减小元素供CSS读取的高度。文档流只能是后面的流向前面的，即文档流只能向左或向上流动，不能向下或向右移动。对浮动元素的影响：可以改变元素的布局...原创 2019-04-01 16:25:08 · 461 阅读 · 0 评论 -
CSS - 布局
浮动布局使用DIV元素来进行浮动布局，因为DIV元素上没有任何特性。为什么使用浮动，为了使块级元素能够水平排列。因为如果不使用浮动，则块级元素默认是垂直排列，而改为行级元素又无法调整宽高和边距，所以我们采用浮动，来使两个块级元素水平排列。清除浮动：clear:left;定位布局静态定位：position: static; (添加top、left不起作用)相对定位：position...原创 2019-04-01 11:55:39 · 105 阅读 · 0 评论 -
CSS - Position定位
用途：Div+CSS进行网站布局时，进行定位。Position属性有四个值：static：这种定位是默认的，一般没什么实际的作用。fixedabsolute：经常用到，绝对定位，脱离文档流，使用left，right，top，bottom等属性进行绝对定位。相对于父元素进行偏移。只有设置了left，right，top，bottom等属性，才会脱离文档流。relative：经常用到，相对定...原创 2018-12-27 11:07:55 · 136 阅读 · 0 评论 -
CSS - angular-ui-bootstrap标签库
网址：https://github.com/angular-ui/bootstrapBootstrap图标库里面分为了三类内容：Font Awesome：Bootstrap专用图标字体，Font Awesome 中包含的所有图标都是矢量的，也就可以任意缩放，避免了一个图标做多种尺寸的麻烦。CSS对字体可以设置的样式也同样能够运用到这些图标上了。Simple Icons：收集众多网站的...原创 2018-11-19 17:50:47 · 760 阅读 · 0 评论 -
CSS - Bootstrap中的CSS类
排版类.lead ------- 使段落突出显示.small ------- 设定小文本 (设置为父文本的 85% 大小).text-left ------- 设定文本左对齐.text-center ------- 设定文本居中对齐.text-right ------- 设定文本右对齐.text-muted ------- 本行内容是减弱的.text-primary ------- ...原创 2018-12-26 18:28:51 · 238 阅读 · 0 评论 -
CSS - Bootstrap中的表格
<table class="table table-hover"> <caption>基本的表格布局</caption> <thead> <tr> <th sort>名称</th> <th>城市<原创 2018-12-27 13:02:27 · 184 阅读 · 0 评论 -
CSS - Bootstrap中的表单
<form role="form"> <div class="form-group"> <label for="name">输入框</label> <input type="text" class="form-control" placehold原创 2018-12-27 15:26:37 · 134 阅读 · 0 评论 -
CSS - Bootstrap中的按钮
<!-- 标准的按钮 --><button type="button" class="btn btn-default">默认按钮</button><!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --><button type="button" class="btn btn-primary"&原创 2018-12-27 15:36:30 · 317 阅读 · 0 评论 -
CSS - Bootstrap中的图片
<img src="/wp-content/uploads/2014/06/download.png" class="img-rounded"><img src="/wp-content/uploads/2014/06/download.png" class="img-circle"><img src="/wp-content/uploads/2原创 2018-12-27 15:38:26 · 336 阅读 · 0 评论 -
CSS - 使用总结
CSS文件结构无论如何，首先定义一个重置文件reset.css。为了方便定义一个变量文件cariables.css。定义公共文件component.css。其他按照模块划分的CSS文件。写CSS步骤实现整个页面布局，从外到内分块，无非是上中下、左中右。添加、调整特殊的内容CSS 。有用的建议当你有了设计图之后，开始于一个空白页。 “页面包括页面的页眉，标题，页面示例，页...原创 2018-12-28 11:14:19 · 110 阅读 · 0 评论 -
CSS - SCSS
scss引入其他文件@import "./variables.scss";scss变量$primary-color: rgb(3, 166, 106);嵌套ul{ li{ a{ } }}/*以上相当于编译后的CSS*/ul { } ul li { } ul li a { }a{ &amp;:hover{ }...原创 2018-12-28 17:30:35 · 1149 阅读 · 0 评论