CSS基础
橘九。
进击的小白
展开
-
12.CSS基础_浮动(float)深入理解
浮动想学好,一定要知道三个性质。接下来讲一讲。性质1:浮动的元素脱标脱标即脱离标准流。我们来看几个例子。证明1:上图中,在默认情况下,两个div标签是上下进行排列的。现在由于float属性让上图中的第一个标签出现了浮动,于是这个标签在另外一个层面上进行排列。而第二个还在自己的层面上遵从标准流进行排列。证明2:一个span标签不需要转成块级元素,就能够设置宽度、高度了。所以能够证明一件...原创 2019-10-18 17:28:52 · 333 阅读 · 0 评论 -
11.CSS基础_浮动(float)_导航栏
一般情况下导航栏都会使用到浮动的知识,这一节写一个简单的导航栏,代码如些:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>导航栏</title> <style type="text/css"> .menu{ wid...原创 2019-10-18 16:27:21 · 390 阅读 · 0 评论 -
10.CSS基础_浮动(float)
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>浮动</title> <...原创 2019-10-18 14:11:02 · 263 阅读 · 0 评论 -
9.CSS基础_标准文档流块级元素和行内元素
标准文档流宏观地讲,我们的web页面和photoshop等设计软件有本质的区别:web页面的制作,是个“流”,必须从上而下,像“织毛衣”。而设计软件,想往哪里画个东西,都能画。标准文档流的特性(1)空白折叠现象:无论多少个空格、换行、tab,都会折叠为一个空格。比如,如果我们想让img标签之间没有空隙,必须紧密连接:<img src="images/0.jpg" /><...原创 2019-10-18 11:22:51 · 348 阅读 · 0 评论 -
8.CSS基础_定位(position)
这一节我们来看一下定位,CSS中的定位使用来布局的熟练应用对页面美化有很好的帮助,下面就进行详细介绍:定位分为:静态定位,相对定位,绝对定位,固定定位这四种,定位有不同的参数,例如:left、right、top、bottom、z-index等。1、静态定位(static)一般的标签元素不加任何定位属性都属于静态定位,在页面的最底层属于标准流。先定义三个div不进行任何位置定义:...原创 2019-10-18 10:46:43 · 124 阅读 · 0 评论 -
7.CSS基础_盒子模型实践_写登录页面
写了一个简单的登录页面样式:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>登录页面</title> <style type="text/css"> body{ background: url(323263.jpg...原创 2019-10-17 23:04:08 · 865 阅读 · 0 评论 -
6.CSS基础_盒子模型简介
在使用CSS进行网页布局时,我们一定离不开的一个东西————盒子模型。盒子模型,顾名思义,盒子就是用来装东西的,它装的东西就是HTML元素的内容。或者说,每一个可见的 HTML 元素都是一个盒子,下面所说的盒子都等同于 HTML 元素。这里盒子与 中的盒子又有点不同,这里的盒子是二维的。盒子的组成一个盒子由外到内可以分成四个部分:content(内容):最内部的HTML元素的实际内容;...原创 2019-10-17 22:56:26 · 202 阅读 · 0 评论 -
5.CSS基础_选择器2
1. 属性选择器:通过元素的属性进行选择;选择带name属性的li标签;<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>属性选择器</title> <style type="text/css"> li[nam...原创 2019-10-17 18:59:09 · 260 阅读 · 0 评论 -
4.CSS基础_选择器1
CSS选择器:就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器。CSS的选择器分为两大类:基本选择题和扩展选择器。基本选择器:标签选择器:针对一类标签ID选择器:针对某一个特定的标签使用类选择器:针对你想要的所有标签使用通用选择器(通配符):针对所有的标签都适用(不建议使用)1、标签选择器:选择器的名字代表html页面上的标签标签选择器,选择的是页面上所...原创 2019-10-16 23:08:52 · 86 阅读 · 0 评论 -
3.CSS基础_文本格式
常用文本样式:color:设置文字颜色:red color: red;font-size:设置文字大小 font-size:12px;font-family:设置文字字体- font-family:'微软雅黑';font-style:设置文字是否倾斜 font-style: normal; 不倾斜 font-style: italic; 倾斜...原创 2019-10-16 22:52:50 · 91 阅读 · 0 评论 -
2.CSS基础_CSS背景
CSS 背景属性用于定义HTML元素的背景。CSS 属性定义背景效果:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position背景:设置背景色:backgroud-color设置背景色,这个属性接受任何合法的颜色值。body {background-co...原创 2019-10-16 21:40:32 · 105 阅读 · 0 评论 -
1.CSS基础_CSS介绍和引用
前面一部分简单学习了一下html部分,这个部分来看一下css;,这个部分都是总结常用和基础部分,深入的暂不总结;HTML和CSS具体什么区别呢?HTML:页面结构,可以把它看做一个文档,定义展示页面的内容结构;CSS:页面表现,元素大小,颜色,位置,隐藏或者显示,部分动画效果;JavaScript:页面行为:部分动画效果,页面与用户交互,页面功能;CSS介绍和引用:CSS概述:C...原创 2019-10-16 18:20:05 · 115 阅读 · 0 评论