css
Czy_NARI
这个作者很懒,什么都没留下…
展开
-
如何用hover实现下拉菜单
需要注意的是 菜单需要设置position:absolute;另外就是hover设置切记 .nav ul li:hover span { display: block; text-decoration: none; }是有hover下面的span。<!Doctype html>&...转载 2018-08-31 15:36:58 · 1626 阅读 · 0 评论 -
布局方案分析
完成两个div的左右布局,其中第一个div的宽度为200px,第二个div的宽度设置为剩余的宽度。1、在不考虑ie低版本的兼容性的前提下,是可以使用弹性盒子来完成的。<div style="width: 100%;display:-webkit-box;display: -moz-box; margin-top:20px ;"> <div clas...原创 2018-09-07 15:23:57 · 247 阅读 · 0 评论 -
文档流、脱离文档流分析
文档流是文档中可显示对象在排列时所占用的位置。文档流简述编辑将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序,该在什么位置就在什么位置,也可以按照上面的意思理解,自上而下,自左到右的顺序)详细说明编辑比如网页的div标签它默认占用的宽度位置是一整行,p标签默认占用宽度也是一整行,因为div标签和p标签是块状...转载 2018-09-06 17:07:38 · 1022 阅读 · 1 评论 -
1、position用法技巧,2、CSS 属性 选择器,3、CSS 选择器
CSS 媒体类型媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等。 媒体类型一些 CSS 属性只设计了某些媒体。例如 voice-family 属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如, font-size 属性可用于屏幕和印刷媒体,但有不同的值。屏幕和纸上的文件不同,通常需要一个更大的字体,sans-se...转载 2018-09-06 14:54:53 · 224 阅读 · 0 评论 -
1、CSS 提示工具(Tooltip),2、box-sizing: border-box;的作用,3、实例2 - 图像的透明度 - 悬停效果,4、CSS 图像拼合技术,
CSS 提示工具(Tooltip)本文我们为大家介绍如何使用 HTML 与 CSS 来创建提示工具。提示工具在鼠标移动到指定元素后触发,先看以下四个实例:基础提示框(Tooltip)提示框在鼠标移动到指定元素上显示:HTML 代码:<style>/* Tooltip 容器 */ .tooltip { position: relative; display: ...转载 2018-09-06 13:57:51 · 488 阅读 · 0 评论 -
CSS content 属性 CSS counter-increment 属性 CSS counter-reset 属性
利用该三个属性可以构建列表前面的标签在分为h1为标题1,h2为标题2content 可以利用before为标签为标题前面添加内容counter-increment 可以使得h1和h2标题每用一次就实现一次增加counter-reset可以使得h1标签每次调用的时候讲子标题序号重置 <style>body {counter-reset:section;}h...转载 2018-09-09 10:50:51 · 472 阅读 · 0 评论 -
1、CSS Float(浮动),2、CSS 布局 - 水平 & 垂直对齐,3、CSS 伪类(Pseudo-classes),4、导航栏
清除浮动 - 使用 clear元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。使用 clear 属性往文本中添加图片廊:实例.text_line { clear:both; }可以看到中间的标签的样式加入了清除浮动属性之后,就单独成为块元素独占一行了。加入没有这个浮动清除属性。 ...转载 2018-09-05 20:05:14 · 768 阅读 · 0 评论 -
1、分组选择器, 2、尺寸 (Dimension)属性,3、Display(显示) 与 Visibility(可见性),4、CSS Display - 块和内联元素,5、CSS Position(定位
为了尽量减少代码,你可以使用分组选择器。每个选择器用逗号分隔。在下面的例子中,我们对以上代码使用分组选择器:实例h1,h2,p { color:green; }尝试一下 »嵌套选择器它可能适用于选择器内部的选择器的样式。在下面的例子设置了三个样式:p{ }: 为所有 p 元素指定一个样式。 .marked{ }: 为所有 class="marked" 的元素指...转载 2018-09-05 16:08:33 · 250 阅读 · 0 评论 -
1、CSS 盒子模型,2、边框样式,3、CSS 轮廓(outline),
CSS 盒子模型(Box Model)所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model):不同部分的说明:Margin(外边距) ...转载 2018-09-05 15:26:57 · 5799 阅读 · 0 评论 -
1、CSS height 属性,2、Flex 布局教程:实例篇,3、CSS 链接,4、CSS display 属性,5、表格,
2、Flex 布局教程:实例篇http://www.ruanyifeng.com/blog/2015/07/flex-examples.htmlCSS 语法justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;属性值值 描述 测试 f...转载 2018-09-05 14:33:54 · 155 阅读 · 0 评论 -
字体
字体系列font-family 属性设置文本的字体系列。font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体。注意: 如果字体系列的名称超过一个字,它必须用引号,如Font Family:"宋体"。多个字体系列是用一个逗号分隔指明:实例p{font-family:"Times New Roman", Times...转载 2018-09-05 10:31:57 · 275 阅读 · 0 评论 -
CSS-选择器
除了教程中的id选择器和class选择器,另还有元素选择器、属性选择器、包含选择器、子选择器和CSS3中新增的兄弟选择器,以下带上ID选择器和类选择器一起举例。 1.ID 选择器(ID selector,IS):使用 # 标识selector,语法格式:#S{...}(S为选择器名)。例:id为name的标签会匹配下面的样式 <style>#name{ color:r...转载 2018-09-05 09:05:55 · 133 阅读 · 0 评论 -
CSS 属性
background-attachment何指定一个固定的背景图像:body{ background-image:url('smiley.gif');background-repeat:no-repeat;background-attachment:fixed;}尝试一下 »标签定义及使用说明background-attachment设置背景图像是否固定或者随着页面的...转载 2018-09-07 19:37:12 · 135 阅读 · 0 评论 -
CSS3 框大小
CSS3 框大小CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。属性 chrome IE box-sizin...转载 2018-08-31 16:58:18 · 224 阅读 · 0 评论 -
li+li:before是什么意思
样式里有:ul.breadcrumb li+li:before { padding: 8px; color: black; content: "/\00a0";}然后页面出现:原理是这样的:每两个li的组合,第二个li之前加上该css。在第二个li后面加上一个其他的标签。<h2>面包屑导航</h2><ul class...原创 2018-08-31 16:51:51 · 6653 阅读 · 0 评论 -
display: inline-block;为什么会撑开父div
在导航栏里设置css padding: 14px 16px; display: inline-block;就会出现被父撑开。但是单独一个就不行。原创 2018-08-31 16:20:59 · 1556 阅读 · 1 评论 -
如何用hover实现下拉菜单
和float是兄弟在我们写样式的时候会发现使用float和absolute的时候,会发现都会出现高度塌陷的问题,和脱离文档流的情况,而且你如果设置了的话就会表现出类似于display:inline-block的表现形式,所以我们可以用这两个对比着记。跟随性这个是在设置了absolute之后,我们的这个元素如果在某个元素之前的话就会居高临下,好像是浮在他后面的元素上面,后面的元素会占据这...转载 2018-08-31 16:05:00 · 967 阅读 · 0 评论 -
高度设置为100%无效的解决办法
In specific, all percentage-based sizes must inherit from parent block elements, and if any of those ancestors fail to specify a size, they are assumed to be sized at 0 x 0 pixels具体地讲,所有基于本分比的尺寸...原创 2018-09-07 16:56:26 · 1947 阅读 · 0 评论