![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
Abenazhan
这个作者很懒,什么都没留下…
展开
-
CSS2选择器
css选择器右6种,html选择符,类选择符,ID选择符,关联选择符,组合选择符,伪元素选择符 ①html选择符: html选择符使用html标签,改变指定标签的样式,任何的html标记都可以是个css选择符,只要带有相同标记的html标记全部改变 用于相同html标记相同样式 语法结构: html标记{ 属性:值; } 例:...原创 2017-05-30 03:37:02 · 240 阅读 · 0 评论 -
CSS2html与css连接方式
①内联样式表在任意一个html中使用style属性,在style属性中使用样式<p style="font-size:1; color:red; ">哈哈</p>只针对本格段落有效,其他无效②嵌入样式表:使用html的<style></style>标记将css嵌入到html中<head><style...原创 2017-05-30 03:35:51 · 534 阅读 · 0 评论 -
CSS2字体和文本属性
direcation:文本阅读方向属性:取值:ltr | rtl解释:文本方向从左到右(默认)| 文本方向从右到左font:字体 用于同时定义font-size,font-variant,font-weight,font-style,line-height,和font-familyfont-size:字体大小...原创 2017-05-30 03:37:34 · 464 阅读 · 0 评论 -
CSS2布局属性
border:用于同时设置border-width,border-style,border-colorborder-bottom:设置下边框宽度,样式颜色border-bottom-color:下边框颜色属性:取值:red | #ff0000 | rgb(255,0,0) | transparent解释:red | #ff0000 | rgb(255,0,0)...原创 2017-05-30 03:39:01 · 285 阅读 · 0 评论 -
CSS2列表属性
display:显示及显示样式属性:取值:none | block | inline | inline-block | list-item | run-in |table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group |t...原创 2017-05-30 03:40:32 · 434 阅读 · 0 评论 -
CSS2位置属性
clip:设置对象可视区域属性:取值:shape | auto解释:元素形状rect (top, right, bottom, left) | 不应用剪裁(默认)height:对象的高度属性:取值:auto | 2px | 2%解释:自动(默认) | 设定值,单位像素,厘米 | 包含它的块级对象的百分比高度width:对象的宽度...原创 2017-05-30 03:41:20 · 321 阅读 · 0 评论 -
CSS2伪类及其他属性
:link:未被访问过的<a>标签的样式属性:color:颜色设置链接在点击时候的颜色background-color:背景颜色,颜色设置在点击时候背景颜色border:边框设置:visited:表示已访问过的<a>标签的样式属性:color:颜色设置链接在点击时候的颜色background-color:背景颜色,颜色设置在点击时候背景颜色b...原创 2017-05-30 03:42:02 · 398 阅读 · 0 评论 -
调用icon
网址:http://www.iconfont.cn/代码复制到meta头文件的引用中,例:<link rel='stylesheet' href='//at.alicdn.com/t/font_317409_hxsyduzv73dnp14i.css' type='text/css' media='all' />html代码:引用素材编码,写样式:<i class="iconf...原创 2018-05-10 16:00:14 · 731 阅读 · 0 评论 -
css布局——flex布局
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}Webkit 内核的浏览器display: -webkit-flex;设为 Flex 布局以后,子元素的float、cle...转载 2018-05-17 09:30:33 · 594 阅读 · 0 评论 -
css布局——BFC、IFC
常见的FC有:1.BFC(块格式化上下文)【1】根元素,即HTML元素【2】float的值不为none【3】overflow的值不为visible【4】display的值为inline-block、table-cell、table-caption【5】position的值为absolute或fixed 规则:1.BFC的区域不会与float box重叠。2.BFC就是页面上的一个隔离的独立容器,...原创 2018-05-17 09:34:39 · 15740 阅读 · 0 评论 -
css布局——GFC
GFC又称为网格布局术语:【网格容器(Grid Container)】 最外层div设置为display:grid;最外层就是网格容器。【网格项(Grid Item)】内部子元素就是网格【网格线(Grid Line)】组成网格线的分界线。分为横网格线,列网格线。【网格轨道(Grid Track)】相邻的网格线组成的网格轨道,也就是行或列。【网格单元(Grid Cell)】相邻的行网格线和列网格线...转载 2018-05-17 10:00:41 · 1177 阅读 · 0 评论 -
CSS——精灵图
background-size<div class="bg">背景图片</div><style>.bg{background:url("1.png") -57px 0;}</style>背景图片按照坐标来定位pc端,wap端,背景图片满屏:小程序背景图片满屏: 背景图片固定不动 视觉差:background-attachment:fixed;背景图片...原创 2018-05-17 10:01:59 · 374 阅读 · 0 评论 -
手机自适应
样式代码: 类名要相同! @media only screen and (max-width : 320px) { }屏幕小于320px执行的样式。原创 2018-05-14 13:30:40 · 261 阅读 · 0 评论 -
css遮罩
<div> <div class="cp"> <ul class="cp1"> {zso:prolist (row='6' parentid='69')} <a href="[arcurl]" > <li class="cp2&原创 2019-01-07 11:39:05 · 640 阅读 · 0 评论 -
CSS2基本语法
选择器:用于找到Html标签,对应给样式。属性:属性名和属性值组成的属性名和值用:隔开多个属性之间用;隔开结构:选择器 { 属性名:属性值;}注释:/* */基本单位:%:百分比in:英寸cm:厘米mm:毫米em:1em 等于当前的字体尺寸,2em 等于当前字体尺寸的两倍。ex:一个 ex...原创 2017-05-30 03:35:04 · 330 阅读 · 0 评论 -
CSS2背景属性
background:用于设置background-color,background-image,background-repeat,background-attachemnt,background-position属性background-color:背景颜色属性:取值:red | #ff0000 | rgb(255,0,0) | transparent...原创 2017-05-30 03:38:14 · 469 阅读 · 0 评论 -
css表格间隙,分割线
祛除表格中间的间隙: table{border-collapse:collapse;}虚线:1.hr{border:1px dotted #5B5B5B;}鼠标移动显示详细信息小标签:如果是超级链接:标题如果是图片:原创 2017-08-12 14:26:53 · 5733 阅读 · 0 评论 -
CSS2浏览器兼容
使用非IE编写代码,非IE浏览器符合W3C标准非IE浏览器:符合W3C标准的:IE浏览器:不符合W3C标准:非IE浏览器外观大于IE浏览器例:<style>.box{width:250px!important;width:300px;height:270px!important;height:300px;border:5px solid blue;padd...原创 2017-05-30 03:42:55 · 363 阅读 · 0 评论 -
CSS2 left与padding-left区别
div1设置绝对位置posution:absolute div2设置相对位置position:relative div2设置left:20px div2左边框相对于div1左边框距离20px div1设置padding-lleft:20px; 设置内边距,留白 div2设置margin-left:20px; 外边距div2与div1之间...原创 2017-05-30 03:43:49 · 1385 阅读 · 0 评论 -
CSS透明属性
opacity:设置元素的不透明级别属性:value | inherit取值:规定不透明度,从 0.0 (完全透明)到 1.0(完全不透明)|父元素继承IE8 以及更早的版本支持替代的 filter 属性。例如:filter:Alpha(opacity=50)使用大于0小于100的数值兼容所有浏览器的透明度设置:filter:alpha(opacity=50); ...原创 2017-05-30 03:44:20 · 449 阅读 · 0 评论 -
DIV+CSS登陆页面练习
<html><head><title>登陆</title><style>#hh{width:300px;//设置div宽度300像素height:200px;//设置div高度200像素background:yellow;//设置背景颜色,黄色position:absolute;//设置绝对位置...原创 2017-05-31 10:48:21 · 2453 阅读 · 1 评论 -
DIV+CSS页面布局练习
<html><head><style>body{text-align:center;}div.qq{width:960px;height:1500px;background:yellow;margin:0 auto;text-align:left;}//定义整个页面居中div.llz{width:750px;height:400px...原创 2017-05-31 10:52:30 · 2410 阅读 · 0 评论 -
DIV+CSS首页布局练习
新建外部样式,html中设置<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >表示文件格式,在加入<link rel="stylesheet" type="text/css" href="css/hh.css"> 引入外部css链接最先布局一个最外面的层,设置宽度960像素,临时高度800像...原创 2017-05-31 10:53:17 · 5304 阅读 · 0 评论 -
DIV+CSS首页布局练习 代码
index.html<html><head><meta http-equiv="Content-Type"content="text/html;charset=utf-8" ><title>标准首页布局</title><link rel="stylesheet"type="text/css" href="c...原创 2017-05-31 10:54:48 · 2270 阅读 · 1 评论 -
CSS中隐藏内容的3种方法
1、使用display:none来隐藏所有内容display:none可以让网页中所有内容不显示,如代码、文字、链接、图片、div层,是推荐的内容隐藏方式。2、使用visibility:hidden来隐藏内容visibility:hidden和display:none可以隐藏的内容几乎一样,但唯一区别是它虽然隐藏了内容,但被隐藏掉的内容仍旧占据空间,这段隐藏了内容却保留空间的位置会在...转载 2017-05-31 10:55:22 · 789 阅读 · 0 评论 -
层的隐藏
效果:鼠标移动到当前层,显示出另一个隐藏的层 逻辑:设置两个层在同一个位置,隐藏层设置属性display:none;,鼠标移动上去设置伪类元素属性display:block; 设置位置的时候,可以先设置所在的外层为相对位置,相当于固定个盒子,里面层设置绝对位置,这个绝对位置就是相对于刚设置的盒子的位置,利用top ,left进行位置固定。 HTML代码: <div...原创 2017-06-03 09:52:56 · 787 阅读 · 0 评论 -
使用列表写导航栏
先清除li的样式,list-style:none;设置块状显示,可以调整居中。index.html <div class="dh"><ul><li><a href="http://www.baidu.com">商会首页</a></li><span></span&...原创 2017-06-03 09:58:48 · 705 阅读 · 0 评论 -
文字在底部显示
1.display:table-cell;按照单元格显示 vertical-align:bottom;底边对齐 2.使用相对和绝对定位设置文字的位置。 <div id=“aa”><p id=”bb“>哈哈哈</p></div><style>#aa{width:100%;heigh...转载 2017-06-03 09:59:58 · 1817 阅读 · 0 评论 -
头部标记
让IE符合W3C标准: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 规定文件类型 <meta http-equiv="Content-Type" cont...转载 2017-06-03 09:57:36 · 362 阅读 · 0 评论 -
手机网站
方法:在网页头部加上这样一条meta标签:<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />解释:width=device-width :宽度等于设备屏幕的宽度...转载 2017-06-03 10:07:02 · 287 阅读 · 0 评论 -
Css布局的小问题合集
1.给整个按钮链接的时候,<a>标签在div外层,<a>设置属性:display:block;并且设置宽和高,宽高等于div的宽高,否则整行都是链接。2.图片高度跟随者浏览器放大缩小:max-width:200px;添加一个最大高度。3.鼠标移动到图片上缓慢放大:transform: scale(1.1, 1.1);transition: all 1s ease 0s;...原创 2018-05-16 16:39:12 · 153 阅读 · 0 评论