有关CSS
叫我邱球球
Be the best you can be!
展开
-
ID选择器和类选择器
什么是ID选择器呢ID选择器的作用是 根据指定的id名称,找到对应的标签,然后设置属性。原创 2017-02-06 00:05:51 · 996 阅读 · 0 评论 -
学习CSS的样式基础
今天一个大神告诉我 学习编程要稳扎稳打,不能求快。欲速则不达。从CSS样式代码插入的形式来看基本可以分为以下三种:内联式、 嵌入式、外部式。----------------------------------------分割线-----------------------------------------先介绍一下内联式:所谓的内联式就是把CSS代码放在现有的HTML标签中(cs原创 2017-02-26 18:13:48 · 319 阅读 · 0 评论 -
CSS选择器
学习CSS就必须得学习选择器。那么什么是选择器呢?其实之前就已经在博客里说过。每一条CSS样式声明都由两部分组成,形式如下选择器{样式;}在{}之前的那一部分就是所谓的选择器。“选择器”指明了{}中的样式所作用的对象,也就是样式作用于网页中的哪些元素。例如: 后代选择器 p{ font-family原创 2017-02-27 15:30:49 · 263 阅读 · 0 评论 -
div和span标签
有的小白看到我写的博客的时候可能会有一些疑惑:为什么在学习css的时候要补充两个HTML中的标签呢?这是因为这两个标签往往需要配合css标签来使用,所以在前面学习HTML的时候并没有很重视学习这两个标签。-----------------------------------------------------分割线--------------------------------------原创 2017-02-27 16:55:32 · 579 阅读 · 0 评论 -
定位流之绝对定位
之前学习到的相对定位中,我们已经知道相对定位是不脱离标准流的。相对定位是根据原有的位置来定位的。而我们今天学习的绝对定位的元素是脱离标准流的。绝对定位的元素是不区分块级元素和行内元素以及行内块级元素的。所有的元素都可以设置宽高。------------------------------分割线---------------------------------绝对定位:①默认情况原创 2017-03-06 16:45:12 · 634 阅读 · 0 评论 -
针对于盒子模型的一些知识点
我们学习了盒子模型之后,或许还有一些人对盒子模型里面的一些小知识点有一些忽略。今天就带着大家一起回顾一下盒子模型中容易被混淆的知识点:-------------------------------------分割线----------------------------------------①在盒子模型中,内容的宽度和高度:通过我们标签的width 和 heigh原创 2017-03-08 18:58:50 · 552 阅读 · 0 评论 -
一些重要但琐碎的知识点
首先是与浮动相关的:①浮动的元素不会盖住浮动的元素,浮动的元素只会盖住标准流的元素。②浮动之前的元素在标准流的第二行,那么浮动之后,他也占标准流的第二行。----------------------------------------分割线----------------------------------------对于继承性来说:并不是所有的属性都是可以继承原创 2017-03-05 21:06:50 · 508 阅读 · 0 评论 -
伪元素选择器
感冒终于有点想好的意思了。。。赶快来学习。。。。我是不是个好孩纸。。。今天来看伪元素选择器。伪元素选择器就是给指定的标签内容前面或者后面添加一个子元素。先设置一个div,其中的内容是 抵制萨德我们的目标是在“抵制萨德”的前面加上一个内容“我爱中国”,在“抵制萨德”的后面也添加一个内容“从我做起”。那么利用伪元素选择器的代码是: 伪元素选原创 2017-03-14 16:34:40 · 497 阅读 · 0 评论 -
【a】标签的伪类选择器
今天我们来学习一下a标签的4个伪类选择器:①a:link选择器:修改从未被访问过的a标签样式。②a:visited选择器:修改已经被访问过的a标签样式。③a:active选择器:修改链接被长按时的样式。④a:hover选择器:修改鼠标悬停在a标签上的样式。举个栗子: a标签伪类选择器 .box1:link{原创 2017-03-15 19:53:13 · 4697 阅读 · 0 评论 -
CSS之【过度模块】
当我们学习完伪类选择器之后,我们可以写如下的代码: 过度模块 div{ width: 100px; height: 30px; background-color: red; }div:hover{ width: 300px;}原创 2017-03-16 13:04:57 · 695 阅读 · 0 评论 -
CSS之【基础的2D转换模块】
2D转换需要用到 transform属性。transform本身就是改变的意思,所以2D转换可以实现一些转换,比如:旋转(rotate)、平移(translate)、缩放(scale)等-------------------------------------------分割线--------------------------------------①旋转的格式:tran原创 2017-03-16 21:10:08 · 481 阅读 · 0 评论 -
关于利用position定位在页面正中心的问题(还有一个z-index的知识点)
扯点没有用的:今天做项目的时候,突然发现了一个问题:position定位还没有完全掌握。为什么这么说呢?因为今天我想把一个登录框不依靠js居中于整个页面,我没有任何思路。切入正题:关于position定位,有个很重要的点:定位定的只是一个框框的左上角。当我们用了position:absolute之后,这个框框就具备的绝对定位的能力。如果我们用了left:50原创 2017-05-03 22:40:32 · 2133 阅读 · 2 评论 -
定位流之相对定位
定位流的分类:1.相对定位2.绝对定位3.固定定位4.静态定位今天呢,先来学习一下相对定位。----------------------------------分割线-----------------------------------1.什么是相对定位呢:相对于自己之前在标准流的位置来移动。相对定位不脱离标准流,会继续在标准流中占用一份空间。相对定原创 2017-03-05 15:52:03 · 614 阅读 · 0 评论 -
CSS之【动画模块】
我们单刀直入讲步骤:第一步:告诉系统要执行哪一个动画:animation-name:pingyi(动画名称可以任意起一个);第二步:告诉系统我们要创建一个名称叫做pingyi的动画@keyframes pingyi{from{margin-left:0;}to{margin-left:500px;}}第三步:告诉系统动画持续的时长:ani原创 2017-03-18 13:03:19 · 503 阅读 · 0 评论 -
外边距的垂直方向上的合并现象
补充一个属性知识点:overflow属性:如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为.---------------------------分割线--------------------------在此之前我们都学习了margin属性,这是一个外边距属性。水平方向上的外边距是可以叠加的。这是怎么个意思呢?例如:原创 2017-03-03 16:35:42 · 576 阅读 · 0 评论 -
边框属性
什么是边框?边框就是环绕在标签宽度和高度周围的线条。只要是个标签就能给他设置一个边框。---------------------------------------分割线------------------------------------------边框属性的格式:①连写(同时设置四条边的边框):border:边框的宽度 边框的样式 边框的颜色;例如:原创 2017-02-27 19:42:27 · 440 阅读 · 0 评论 -
内边距属性
之前在学习HTML的时候就已经说过了什么是内边距。所谓的内边距就是 内容和边框之间的距离。-----------------------------------------------------分割线------------------------------------------------------语法格式:①非连写:padding-top: ;paddi原创 2017-02-28 11:51:16 · 886 阅读 · 0 评论 -
一个简单的静态的分页界面
话不多说,先上个效果图:接下来是代码:(利用边框属性做的,相信你们看完之后一定会理解的) 分页 .page a{ border: 1px solid #ff9600; padding: 5px 5px; text-decoration: none;原创 2017-02-28 12:24:12 · 2542 阅读 · 0 评论 -
CSS第一课
HTML中有好多东西如果没有CSS或者JS的铺垫是理解不完全的。因此从今天开始我要开始初步学习CSS啦!-------------------------------------我是分割线---------------------------------------那么我们为什么要用CSS呢?下面简单来阐述一下通过标签来修改样式的缺点:①需要记忆哪些标签具有哪些属性,如果这个标签没原创 2017-01-19 18:22:20 · 414 阅读 · 0 评论 -
CSS之文字属性
今天我们来学习一下CSS中的一些文字属性1.规定文字样式的属性格式:font-style:****;取值:normal(正常)italic(倾斜)2.规定文字粗细的属性格式:font-weight:****;取值:①单词的取值:bold(加粗)bolder(比加粗更粗)②数字的取值:100-900之间的整百数(使用的比较少)3.规定文原创 2017-01-20 10:48:34 · 509 阅读 · 0 评论 -
:hover选择器知识点
①:hover选择器。鼠标滑过会有颜色。例如: 分页 .page a:hover{ border: 1px solid #ff9600; padding: 5px 5px; text-decoration: none; color: black原创 2017-02-28 18:07:05 · 538 阅读 · 0 评论 -
有关于背景的一些东西
①如何设置背景颜色?在CSS中,background-color就是专门设置背景颜色的。例如: 背景 .box{ background-color: red; width:300px; height:300px; }原创 2017-02-28 18:47:21 · 466 阅读 · 0 评论 -
浮动
CSS中把元素分为三种:块级元素:独占一行,并且可以设置宽高。行内元素:不独占一行,不可以设置宽高。行内块级元素:不独占一行,可以设置宽高-------------------------------------------------------------分割线-----------------------------------------------------------原创 2017-03-01 16:38:23 · 617 阅读 · 0 评论 -
CSS继续开车
在CSS中,可以用/*......*/来标记注释-------------------------分割线--------------------------文字属性的缩写font:style weight size family; 注意点:①style和weight可以省略,但是size和family不可以省略②style 和 weight 的顺序可以调整但是size 和 fa原创 2017-01-26 10:01:47 · 293 阅读 · 0 评论 -
CSS之颜色控制属性
在CSS中怎样修改文字颜色呢?格式如下:color:值;几种常见的取值方式:①通过英文单词来赋值red(红色)等等,这些在W3Cschool可以找到,但是英文单词能够表达的颜色是有限制的,并不是所有的颜色都能够通过英文单词来表达。②通过rgb赋值rgb也就是三原色,r(red),g(green),b(blue)格式:rgb(,,)其中每一个数字分别显示r,g原创 2017-01-26 11:02:11 · 1020 阅读 · 0 评论 -
CSS之标签选择器
什么是所谓的标签选择器呢?标签选择器的作用:根据指定的标签名称,在当前界面找到所有该名称的标签,来设置属性。格式:标签名称{属性:值;}注意点:①标签选择器选中的所有的标签,而不能选中其中的某一个标签。②只要是HTML中的标签,都可以作为标签选择器。举一个栗子: CSS之初体验 h1{原创 2017-01-26 14:58:02 · 874 阅读 · 0 评论 -
由中间向两边渐变的分割线
原理是使用css3的渐变背景,再将高设为分割线的高度.title{ position:relative; text-align:center;}.title:before, .title:after { content: ""; width: 40%; height: 1px; position: absolute; top: 50%; }转载 2017-05-19 16:03:30 · 3240 阅读 · 0 评论