CSS
关注
分享
扫一扫
万万君
Know more, do more, do better
展开
-
Bootstrap2 与 Bootstrap3使用上的区别
Bootstrap3中被修改的样式Bootstrap 2.xBootstrap 3.x.container-fluid.container.row-fluid.row.span*.col-md-*.offset*.col-md-offset-*.brand.navbar-brand.nav-collapse.navbar-collapse.nav-toggle.navbar-toggle.btn-n.转载 2020-06-07 12:02:44 · 258 阅读 · 0 评论 -
响应式Web设计怎么做
响应式Web设计介绍响应式 Web 设计 - Viewport设置 Viewport响应式 Web 设计 – 网格视图创建网格式布局响应式 Web 设计 – 媒体查询响应式 Web 设计 - 图片响应式 Web 设计 – 视频(Video)响应式 Web 设计 – 框架介绍响应式 Web 设计让你的网页能在所有设备上有好显示响应式 Web 设计只使用 HTML 和 CSS响应式 Web ...原创 2020-03-28 00:55:17 · 994 阅读 · 0 评论 -
CSS基础之属性选择器
CSS属性选择器[attribute] 选择器语法代码示例[attribute=value] 选择器语法代码实例[attribute~=value] 选择器语法代码实例[attribute|=value] 选择器语法代码实例[attribute^=value] 选择器语法代码实例[attribute$=value] 选择器语法代码实例[attribute*=value] 选择器语法代码实例CSS...原创 2020-03-27 23:41:33 · 227 阅读 · 0 评论 -
CSS基础之媒体类型（@media）样式
定义使用 @media，可以针对不同的媒体类型定义不同的样式。使用 @media， 可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。语法在内部样式定义中使用@media mediatype and|not|only (media feature) { CSS-Code;}在外部样式定义中使用<!-- ...原创 2020-03-27 22:47:17 · 2291 阅读 · 0 评论 -
使用CSS制作下拉菜单样式
制作tooltip显示形式代码示例<!DOCTYPE html><html><head> <meta charset="utf-8"> <style> .dropdown { position: relative; display: inline-block; } .dropdown-...原创 2020-03-26 23:32:19 · 1086 阅读 · 0 评论 -
CSS基础之导航栏
导航栏=链接列表导航条基本上都是一个无序的链接列表。垂直导航栏去掉列表ul默认style去掉列表的默认边距和填充设置，设置为0去掉链接a的默认下划线将链接以block块显示，让整体变为可点击链接区域（不只是文本），并且制定块元素一个60像素的宽度代码示例<!DOCTYPE html><html><head><style>u...原创 2020-03-26 22:59:10 · 285 阅读 · 0 评论 -
CSS基础之伪类
CSS伪类（Pseudo classes）是用来添加一些选择器的特殊效果。伪类属性选择器示例示例说明:linka:link选择所有未访问链接:visiteda:visited选择所有访问过的链接:activea:active选择正在活动链接:hovera:hover把鼠标放在链接上的状态:focusinput:focus选择元素...原创 2020-03-26 13:34:52 · 136 阅读 · 0 评论 -
CSS基础之组合选择器
CSS 组合选择器CSS 组合选择符可以让你直观的明白选择器与选择器之间的关系。CSS3 中包含了以下四种组合选择器：后代选择器（以空格分隔）子元素选择器（以**>**号分隔）相邻兄弟选择器（以**+**分隔）普通相邻兄弟选择器（以**~**分隔）后代选择器后代选取器匹配所有指定元素的后代元素。代码示例<!DOCTYPE html><html>...原创 2020-03-26 12:57:14 · 287 阅读 · 0 评论 -
CSS基础之尺寸属性
CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度和增加行间距。CSS 尺寸 (Dimension)属性属性描述height设置元素的高度line-height设置行高max-height设置元素的最大高度max-width设置元素的最大宽度min-height设置元素的最小高度min-width设置元素的最小宽度...原创 2020-03-25 22:21:15 · 317 阅读 · 0 评论 -
CSS 基础之Display与 Visibility属性
CSS display 属性和 visibility属性都可以用来隐藏某个元素。visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，仍然会影响布局。display:none也可以隐藏某个元素，且隐藏的元素不会占用任何空间，该元素原本占用的空间也会从页面布局中消失。利用Display来改变块和内联元素显示方式块元素h1-h6pdiv会占用...原创 2020-03-25 22:48:22 · 234 阅读 · 0 评论 -
CSS基础之定位和浮动属性
CSS 定位属性（Positioning）CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。元素可以使用的顶部，底部，左侧和右侧属性定位。属性说明说明bottom定义了定位元素下外边距边界与其包含块下边界之间的偏移auto，length， %，inheritclip剪辑一个绝对定位的元素sh...原创 2020-03-26 12:29:22 · 184 阅读 · 0 评论 -
CSS如何进行分组和嵌套定义
作用CSS 分组可以将具有相同样式的选择器进行分组，每个选择器用逗号分隔， 减少代码量。CSS 嵌套适用于选择器内部的选择器的样式代码示例<!DOCTYPE html><html><head><meta charset="utf-8"> <style>p,h2{ color:blue; text-align:...原创 2020-03-24 13:19:36 · 394 阅读 · 0 评论 -
CSS Margin和Padding属性
Margin（外边距）属性作用定义元素周围的空间接受任何长度单位、百分数值甚至负值清除周围的元素（外边框）的区域，margin没有背景颜色，是完全透明的可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性值得范围值说明auto设置浏览器边距（这样做的结果会依赖于浏览器）length定义一个固定的margin（使用像素，pt，em等）%...原创 2020-03-24 13:03:31 · 251 阅读 · 0 评论 -
CSS轮廓（outline）属性
所有outline属性属性说明值属性说明值outline在一个声明中设置所有的外边框属性outline-color,outline-style, outline-width,inheritoutline-color设置外边框的颜色color-name,invert,inheritoutline-style设置外边框的样式none,dotte...原创 2020-03-24 12:49:01 · 324 阅读 · 0 评论 -
CSS盒子模型
盒子模型示意图各个部分解释如下：Margin（外边距） - 清除边框区域。Margin没有背景颜色，它是完全透明Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响Content（内容） - 盒子的内容，显示文本和图像进一步了解盒子模型的内部结构请参考W3C描述。每个元素的宽度和...原创 2020-03-23 14:12:40 · 186 阅读 · 0 评论 -
CSS基础之表格样式的使用
所有的应用都在下面的示例中：<!DOCTYPE html><html><head><meta charset="utf-8"> <style>ul.a {list-style-type:circle;}ul.b {list-style-type:disc;}ul.c {list-style-type:square;}o...原创 2020-03-22 18:15:34 · 229 阅读 · 0 评论 -
CSS基础之列表样式
CSS列表属性属性描述list-style简写属性。用于把所有用于列表的属性设置于一个声明中list-style-image将图象设置为列表项标志list-style-position设置列表中列表项标志的位置list-style-type设置列表项标志的类型...原创 2020-03-22 18:10:06 · 167 阅读 · 0 评论 -
CSS使用链接属性
链接样式链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。四个链接状态是：– a:link - 正常，未访问过的链接– a:visited - 用户已访问过的链接– a:hover - 当用户鼠标放在链接上时– a:active - 链接被点击的那一刻代码示例<!DOCTYPE html><html><head><meta...原创 2020-03-22 17:46:16 · 622 阅读 · 0 评论 -
CSS基础之字体属性
先介绍一个在线自动生成CSS字体样式的一个工具，W3C出品，对于我这种小白来说很实用。在线生成字体CSS样式CSS字体属性CSS字体属性定义字体，加粗，大小，文字样式。属性描述font在一个声明中设置所有的字体属性font-family指定文本的字体系列font-size指定文本的字体大小font-style指定文本的字体样式font-v...原创 2020-03-22 17:27:06 · 232 阅读 · 1 评论 -
CSS基础之文本属性介绍
CSS 文本属性属性描述color设置文本颜色direction设置文本方向letter-spacing设置字符间距line-height设置行高text-align对齐元素中的文本text-decoration向文本添加修饰text-indent缩进元素中文本的首行text-shadow设置文本阴影text-t...原创 2020-03-22 16:20:22 · 175 阅读 · 0 评论 -
使用CSS背景
CSS 背景属性Property描述background简写属性，作用是将背景属性设置在一个声明中background-attachment背景图像是否固定或者随着页面的其余部分滚动background-color设置元素的背景颜色background-image把图像设置为背景background-position设置背景图像的起始位置...原创 2020-03-22 15:51:23 · 144 阅读 · 0 评论 -
插入CSS样式表
插入样式表的方法有三种:外部样式表内部样式表内联样式创建外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在HTML文档的头部（head标签中使用标签连接到样式表：<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>样式表应该以...原创 2020-03-22 15:13:45 · 262 阅读 · 0 评论 -
CSS之id和class选择器
在HTML元素中使用CSS样式表，需要在元素中设置"id" 和 “class” 属性id 选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用D属性只能在每个 HTML 文档中出现一次代码示...原创 2020-03-22 14:58:20 · 187 阅读 · 0 评论 -
CSS介绍
什么是CSSCSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题-外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一样式对网页中元素位置的排版进行像素级精确控制CSS层叠的优先级别样式层叠就是对一个元...原创 2020-03-22 11:43:31 · 223 阅读 · 0 评论