![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
xvzhengyang
这个作者很懒,什么都没留下…
展开
-
css实现分割线功能,各种各样的分割线(附效果图)
css hr 分割线原创 2022-07-08 18:11:07 · 14935 阅读 · 0 评论 -
div设置百分百高度实现
在html布局中body内第一个div盒子对象设置100%高度height样式,是无法成功显示100%高度的。这个是因为body高度默认值为自适应的,所以及时设置body第一个布局div高度为百分比也是无效的,因为div解析上级高度为0,自然div height 100%实际高度也为0。浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则,浏览器就会简单的让内容往下堆砌,页面的高度根本就无需考虑。因为页面并没有缺省的高度值,所以,当你让...原创 2021-04-19 19:27:06 · 2996 阅读 · 0 评论 -
使用canvas绘制连续折线并填充颜色
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>绘制连续折线</title> </head> <body> <div> <canvas id="canvas" width="" height=""></canvas> </div> <script type.原创 2021-03-16 23:04:37 · 700 阅读 · 0 评论 -
CSS中的表格2️⃣之合并/拆分单元格以及单元格中在存放表格(跨行或者跨列)
需求:在consequence中,增加了一条记录,并且重用了两个信息没有改变的单元格.也就是增加新行的时候,只需要列出要增加的不同的信息 consequence August 9 93 4242ft 7289 5/5 August 27 98 4/5 HTML中可以使用...原创 2019-03-05 22:20:02 · 2257 阅读 · 0 评论 -
CSS中的表格(一)
如何使用HTML来完成一个表格? <table>元素专门负责标记表格数据. <tr>每个tr元素构成表格中的一行 <th>每个th元素分别是某一列的表头;浏览器默认的会用粗体来表示表头. <td>每个td元素包含表格中的一个单元格,每个单元格分别构成一个单独的列;包含一个表格数...原创 2019-03-05 22:15:54 · 6015 阅读 · 1 评论 -
为列表增加一些样式
效果如下图,为列表ol或者ul添加标识符代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>为列表增加一些样式</title> <!-- 列表的主要属性是 list-style-type,利用这个属原创 2019-03-05 22:10:19 · 487 阅读 · 0 评论 -
关于..和img的一些记录
.. 是什么意思? ".."表示向上移动到父文件夹,换句话说对浏览器来讲,这就是父文件夹. 如果要向上两级文件夹而不只是一级该怎么办? "../../",用"/"分隔每一部分,这个我们叫做父文件夹的父文件夹 <img>元素:浏览器在页面中显示图像之前,必须先获取这个...原创 2019-03-05 21:57:57 · 210 阅读 · 0 评论 -
div与span的外边距
1.text-align会对块元素中的所有内联内容对齐;实际上text-align不仅仅是适用于文本,是对所有类型的内联元素对齐; 另外text-align属性只能在块元素上设置,如果直接在内联元素上使用那么是不起作用的.2.子孙选择器 2.1 用途:我们只想选择某些元素的子孙元素. 写法如下 div h2{...原创 2019-03-05 21:55:31 · 3643 阅读 · 0 评论 -
HTML中的浮动元素
浮动元素: 想要浮动一个元素,必须为这个元素设置一个宽度 1.放在首位 2.浮动元素脱离了正常的文档流,相当于悬浮在文档上;注意,下面例子中主内容也就是id为first的div仍然是占据着浏览器窗口的整个宽度,不过我们为他指定了一个外边距与浮动右边的元素一样宽,这样会减少内容的宽度,结果就得到一个漂亮的两栏页面.代码如下<!DOCTYPE html><htm...原创 2019-01-27 18:44:21 · 2009 阅读 · 0 评论 -
css中的text-align和子孙选择器
<!-- text-align:不仅仅是影响文本,实际上会对块元素中的所有内联内容对齐,包括图片; 另外需要记住,text-align属性只能用在块元素身上,对内联元素是没有影响的-->子孙选择器,如下图,h1的字体颜色为红色,但是可以通过是使用子孙选择器,改变子孙元素的字体颜色<!DOCTYPE html><html> &l...原创 2019-01-15 23:08:25 · 419 阅读 · 0 评论 -
css中的绝对定位
<!-- 1.绝对定位,脱离文档流,和浮动不同的是,内联元素不会围绕绝对定位元素 --> <!-- 2.绝对定位元素可以分层放置,若同一个位置上有多个绝对定位元素,可以有一个名为z-index的属性, 会指定它在一个虚拟z轴上的位置(上面的元素"更靠近你",z-index更大)--> <!-- 3.position的...原创 2019-01-15 23:08:38 · 208 阅读 · 0 评论 -
CSS中的表格三之表格中嵌套表格
代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表格中嵌套表格</title> <!-- 继续学习表格中嵌套表格 1.只需要在td中在放入一个table即可 --> &l原创 2019-03-05 22:23:27 · 2360 阅读 · 4 评论 -
form表单学习笔记一
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>实现交互</title> <!-- HTML表单如何工作 1.表单:是一个包含输入域的web页面,允许你输入信息 2.提交表单时,这些信息会打包并发送到一个Web服原创 2019-03-05 22:26:00 · 229 阅读 · 0 评论 -
form表单二之几种常见的表单
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>几种常见的表单</title> <!-- 文本输入 提交输入 单选按钮输入 复选框输入 1.文本输入: text <ipnu原创 2019-03-05 22:29:00 · 487 阅读 · 0 评论 -
CSS代码技巧
1.当class或者ID包含多个单词时,应使用连字符(-),CSS不区分大小写,因此不能使用驼峰式命名。同样,CSS中也不建议使用下划线连接的命名方式。/* 正确 */.footer-column-left { }/* 错误 */.footerColumnLeft { }.footer_column_left { }2.不要重复设置大多数CSS属性的值都是从D...转载 2019-07-02 23:37:29 · 194 阅读 · 0 评论 -
css过渡效果二
鼠标悬停看到动画过渡效果,旋转 缩放 平移以及透明度#box{ position: absolute; top: 100px; left: 100px; width: 200px; height: 200px; ...原创 2019-03-06 23:07:41 · 328 阅读 · 0 评论 -
CSS变换和过渡一
/* 鼠标处于悬停状态的时候,旋转45度 PS:效果没有过渡,看下一个html我们看下过渡效果*/<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS变换和过渡</title> <!--...原创 2019-03-06 23:08:02 · 176 阅读 · 0 评论 -
CSS属性选择器
顾名思义:属性选择器就是根据属性值来选择元素<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>属性选择器</title> <!-- 顾名思义:属性选择器就是根据属性值来选择元素 --> <原创 2019-03-06 23:08:17 · 401 阅读 · 0 评论 -
CSS 选择器按兄弟选择
根据兄弟元素来选择元素,例如,假设你希望只选择前面有一个<h1>元素的段落,可以使用下面这个选择器 h1+p{ font-style: italic; } /* 先写前面的元素,再写一个'+'(加号),然后是兄弟元素 */ /* 这里的就是: 这个选择器会选择所有紧跟在一个...原创 2019-03-06 23:08:25 · 1995 阅读 · 0 评论 -
css中的伪元素
伪元素:可以用来选择元素的某些部分,这些部分可能不便于包围在div或span中,也不方便用其他方法来选择. 例如 first-letter伪元素可以用来选择一个块元素中文本的第一个字母,这样就能创建诸如首字母大写和首字母 下沉等效果.另外可以使用first-line伪元素选择段落的第一行.效果图如下...原创 2019-03-06 23:08:35 · 170 阅读 · 0 评论 -
表单增加css样式
代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单增加CSS样式</title> <!-- --> <style type="text/css"&转载 2019-03-05 22:38:46 · 1148 阅读 · 0 评论 -
form表单中其他元素
详细见代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单中其他元素</title> <style type="text/css"> div { display: t原创 2019-03-05 22:33:10 · 490 阅读 · 0 评论 -
css中的流体与冻结设计
<!-- 1.布局锁定,当用户调整屏幕代大小的时候,设计仍然可以保持原样,称之为冻结布局 --> <!-- 2.凝胶布局,会锁定页面中的内容区的宽度,将其在浏览器中居中显示 --><!DOCTYPE html><html> <head> <meta charset="utf-8"> &转载 2019-01-13 22:40:26 · 210 阅读 · 0 评论 -
css中浮动demo例子展示
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>浮动demo</title> <!-- 1.例子中使用浮动,ad广告页面居右显示 2.内容区可以设置外边距,距离正好是浮动元素的宽度 3.但是我们可以发现原创 2019-01-13 22:38:15 · 328 阅读 · 0 评论 -
CSS 水平垂直居中:flex+justifycontent+algin-items
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>水平垂直居中:flex+justifycontent+algin-items</title> <style type="text/css">原创 2018-11-28 21:49:13 · 356 阅读 · 0 评论 -
CSS 水平垂直居中:使用absolue和transform
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>水平垂直居中:使用absolue和transform</title> <style type="text/css"> *{ m原创 2018-11-28 21:45:33 · 617 阅读 · 0 评论 -
CSS 垂直居中,使用absolute和transform
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>垂直居中,使用absolute和transform</title> <style type="text/css"> .parent{原创 2018-11-28 21:42:18 · 1564 阅读 · 0 评论 -
CSS 布局垂直居中:使用flex和align
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>垂直居中:使用flex和align</title> <style type="text/css"> .parent{ disp原创 2018-11-28 21:38:16 · 206 阅读 · 0 评论 -
CSS 水平居中:使用flex+margin
<!-- 1.通过css布局利器将flex将子框转换为flex item,在设置子框居中以达到居中 --><!-- 缺点是兼容性,低版本浏览器不兼容 --><!DOCTYPE html><html> <head> <meta charset="utf-8"> <title&g原创 2018-11-28 21:35:43 · 349 阅读 · 0 评论 -
水平居中:使用flex和justify-content
<!-- flex很强大,但是兼容性不是非常好,个人倒是比较喜欢flex --><!DOCTYPE html><html> <head> <meta charset="utf-8"> <!-- 同上,兼容性不是很好 --> <title>水平居中:使用flex和just原创 2018-11-28 21:32:40 · 1056 阅读 · 0 评论 -
css水平居中:使用absolute+transform
<!-- 1.父元素为相对布局,子元素为绝对布局 2.子元素设置left为50%;之后在向左移动自身的负50% --> <!-- 优点:居中元素不会对其他的产生影响, 弱点:transform属于css3内容,存在兼容性问题,高版本浏览器需要添加前缀 --> <!DOCTYPE html><html> <hea...转载 2018-11-28 21:27:53 · 1143 阅读 · 0 评论 -
css布局水平居中:使用inline-block+text-align
步骤: <!-- 使用inline-block+text-align --> <!-- 1.先将子框由块级元素改变为行内元素,在通过设置行内块元素居中以达到水平居中 --> <!-- 2.具体,对子框用display:inline-block,对父框设置text-align:center -->...转载 2018-11-28 21:23:00 · 1172 阅读 · 0 评论 -
css中的box-sizing
box-sizing:该属性有三个值,一个是content-box(default);一个是border-box,一个是padding-boxcontent-box:border和padding不计算入width(也就是width为100,border和padding分别为1和2,那么盒子总宽度是width+padding+border)border-box:border和padding是...原创 2018-11-28 21:17:16 · 128 阅读 · 0 评论 -
css属性width默认值width: auto与width: 100%区别
width: auto子元素(包括content+padding+border+margin)撑满整个父元素的content区域。子元素有margin、border、padding时,会减去子元素content区域相对应的width值父元素的content = 子元素(content + padding + border + margin ) width: 100%强制将子元...转载 2018-10-23 00:12:53 · 847 阅读 · 0 评论 -
CSS 全屏布局使用float和over-flow
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>全屏布局</title> <!-- 特点:1.滚动条不是全局滚动条,而是出现在内容区域,往往是主内容区域 2.浏览器变大时,撑满窗口 --> <转载 2018-11-28 21:57:23 · 10716 阅读 · 0 评论 -
CSS 全屏布局使用position
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>全屏布局使用position</title> <style type="text/css"> html, body, .p原创 2018-11-29 19:49:59 · 399 阅读 · 0 评论 -
HTML中的元素外边距
<!-- 一个元素嵌套到另一个元素,他们都有外边距,会折叠; 1.只要两个垂直外边据碰到一起就会折叠,即使是一个元素嵌套到另一个元素中也不例外;但是 如果外面的元素有一个边框,那么两个元素的外边距就不会碰到一起,这样就不会折叠;但是边框去掉就会折叠--> <!-- 浏览器:块元素,上下放置,外边距高度就是最大的外边...原创 2019-01-13 22:32:03 · 2708 阅读 · 0 评论 -
css中的标签选择器
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>id属性</title> <!-- 未完待续 --> <style type="text/css">原创 2019-01-13 22:13:02 · 279 阅读 · 0 评论 -
CSS表格显示如何工作
首先来看效果图 header content ad footer 代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS表格显示如何工作</title> <!-- CSS表格显示允许你在一个有行和原创 2019-01-13 21:52:26 · 1192 阅读 · 0 评论 -
CSS中的增加字体和颜色样式
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>增加字体和颜色样式:扩大你的词汇量</title> <style type="text/css"> em{ text-d原创 2019-01-13 10:10:16 · 1528 阅读 · 0 评论