html5+css
关注
分享
扫一扫
文章平均质量分 84
远方0905
分享一些自己知道的东西
展开
-
HTML5和css新特性
HTML5和CSS3新特性原创 2022-09-26 18:04:28 · 103 阅读 · 0 评论 -
盒模型与BFC
盒子模型原创 2022-09-26 15:38:11 · 103 阅读 · 0 评论 -
CSS中的2D转换
语法:transform:translate(x,y);或者分开写transfrom:translateX(n);只移动X轴的话transfrom:translateY(n);只移动Y轴的话重点来了定义2D转换中的移动，沿着X和Y轴移动元素translate最大的优点:不会影响到其他元素的位置translate中的百分比单位是相对于自身元素的translate:(50%,50%)...原创 2019-11-10 03:18:54 · 178 阅读 · 0 评论 -
border边框跟display块元素的使用
border:边框边框的三要素:粗细 线性 颜色上边框为实线(红色1 像素) 右边框为点线示边框(蓝色1像素)下边框为破折线式(绿色1像素) 左边框为 实线(设置粗细为5像素 黑色) 上面的需求以给出那么如何做出来呢？先让我们看看语法格式：粗细线性颜色wight1solidrde;border:粗细、线型、颜色border:wight 1solid ...原创 2019-11-05 09:45:43 · 1039 阅读 · 0 评论 -
选择器
刚才走路听到了一段对话。不禁让我陷入沉思。路人甲：谁特么知道啥叫属性选择器！路人乙：妈妈我要学css， 学，认真学，今天学 属性选择器。以上两位主人公都提到了属性选择器，那到底啥是选择器呢？属性选择器的作用又有哪些呢?**属性选择器它是与标签的属性名和属性值有关 ，属性选择器是通过标签的属性名和属性值来匹配元素。 比如说这里有个标签a 标签，他有个值widht=“400”,<a ...原创 2019-10-30 23:47:57 · 464 阅读 · 1 评论 -
3D转换。
我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。特点1、近大远小2、物体后面遮挡不可见当我们在网页上构建3D效果的时候参考这也特点就能产出3D效果三维坐标系 其实就是指立体空间，立体空间是由三个轴共同组成。x轴:水平向右 x右边为正 左为负值Y轴 垂直向下 y下是正 y上是负值Z轴 垂直屏幕 往外面是正值 往里面是负值。3D位移:translate 3...原创 2019-11-12 17:36:15 · 308 阅读 · 0 评论 -
移动web开发基础知识(上)
移动端基础1.4 移动端手机调试的方法Chrome Dectools(谷歌浏览器)的模拟手机调试搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器使用外网服务器，直接IP或者域名访问。特点移动端浏览器我们主要对于webkit内核进行兼容开发的移动端主要针对于手机端用户移动端的碎片化严重 分辨率和屏幕尺寸大小不一。用谷歌浏览器模拟手机界面进行调试2、视口:就...原创 2019-11-13 21:35:51 · 361 阅读 · 1 评论 -
CSS3圆角矩形
今天要说的是圆角矩形语法规则border-radius: 左上右上右下左下;head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compat...原创 2019-11-09 00:15:39 · 2749 阅读 · 1 评论 -
动画
今天来给大家将一个图片的放大效果。首先里面准备了一个父盒子，然后给父盒子里面加的图片，给图片设置 鼠标经过进行缩放，用scale元素，最后给图片添加一个过渡效果。代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="v...原创 2019-11-11 09:02:32 · 187 阅读 · 0 评论 -
css中如何运用选择器
选择器4、1 选择器选择器是指通过一定的语法规则选取到对应的HTML标记，然后给这个对应的HTML标记设置样式选择器分为四大类基本选择器通用选择器格式 *{属性:值;}含义:通用选择器，将匹配HTML所有标签，不建议使用,给大型网站增加负担。例子*{margin:0px;}*{clolor:blue;/给文本设置成蓝色/}标签选择器格式 标签名{属性:值;}含义 ：...原创 2019-11-03 23:42:48 · 161 阅读 · 0 评论 -
css中的margin属性
在说一下margin中的坍塌现象。margin的坍塌现象1、在标准的文档流中 竖直方向的margin值不会增加 它会取较大的值。2、横着方向是没有margin的塌陷现象。3、浮动元素他是没有margin的塌陷现象的。垂直： 竖直方向的margin值不会增加 它会取较大的值<!DOCTYPE html><html lang="en"><head>...原创 2019-11-03 01:51:13 · 1188 阅读 · 0 评论 -
css之盒子模型
别人的盒子我的盒子(css中的盒子模型)别人家的盒子咱也不知道，咱也不敢问 ，我就带你们了解一下我的盒子(css中的盒子模型)。盒子 :盒子是用来储存物品的我们可以将一个盒子理解为 一个快递的包裹，有内容 +有填充物 +纸盒子。一个盒子的组成部分:在css中的一个盒子的组成部分内容(content)+内填充(padding)+边框(border)+外边距(margin)一个盒子...原创 2019-11-01 14:25:53 · 1073 阅读 · 0 评论 -
css的语法规则
1、1css层叠样式表 或者级联样式表。1、2 CSS的主要作用它主要用来给HTML网页来设置外观或者样式。外观或者样式:HTML网页中的文字的大小、颜色、字体，网页的背景颜色、背景图案！1、3 书写CSS的语法规则H1 {clolor:red;font-size:14px;}选择器 属性 声明1、CSS代码是由选择器和一对括号组成。2、大括号里面是由一条一条的声明语句组成...原创 2019-10-28 00:57:53 · 2123 阅读 · 1 评论 -
css代码的书写形式
1、1css层叠样式表 或者级联样式表。1、2 CSS的主要作用它主要用来给HTML网页来设置外观或者样式。外观或者样式:HTML网页中的文字的大小、颜色、字体，网页的背景颜色、背景图案！1、3 书写CSS的语法规则H1 {clolor:red;font-size:14px;}选择器 属性 声明1、CSS代码是由选择器和一对括号组成。2、大括号里面是由一条一条的声明语句组成...原创 2019-11-11 10:32:04 · 4294 阅读 · 2 评论 -
css position定位
什么是定位?定位将盒子定位在某一个位置 自由的漂浮在其他盒子的上面–（css离不开定位 特别是最后的JS特效）定位是用来布局，它是由两部分组成定位= 定位模式 + 边偏移先说一下什么是边偏移.简单说，我们定位的盒子 是通过边偏移来移动位置的在CSS中，通过 top、 bottom、left和right属性定义元素的边偏移边偏移属性示例描述toptop: 80...原创 2019-11-06 22:39:44 · 224 阅读 · 0 评论 -
z-index 结构伪类，border-collapse
这个属性主要是用来合并表格的边框线其值位:collapse border-ollapse:collapse;E:first-of-type 指定类型E的第一个。E:last-of-type 指定类型E的最后一个。E:nth-of-typea(n)指定类型E的第n个。::before 在元素内部的前面插入内容。::after 在元素内部的后面插入内容。的灵活运用，可以参照进行修改。这是查找关键词五的倍数。原创 2019-11-07 19:47:01 · 398 阅读 · 0 评论 -
文字阴影,盒子阴影。
text-shadow:水平阴影 垂直阴影 模糊距离 阴影颜色注释:text-shadow 属性向文本添加一个文本或多个阴影，该属性是逗号分割的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定 省略的长度是0h-shadow | 必需，水平引用的位置，允许负值v-shadow | 必需垂直阴影的位置，允许负值blur| 可选模糊的距离cololr |可选阴影的颜色文本阴影...原创 2019-11-08 00:43:03 · 254 阅读 · 0 评论 -
通俗易懂flex布局2
flex -warp 设置子元素是否换行在默认情况下，项目都排在一条线(又称轴线 上 ) flex-warp 属性定义，flex布局中默认是不换行的。属性值说明flex-nowrap默认值不换行wrap换行flex-nowrap: flex默认子元素是不换行的 如果装不开 就会缩小子元素的大小flex-warp 换行:如果我想让 一个盒子即水平居中 又垂...原创 2019-11-16 23:44:24 · 1091 阅读 · 0 评论 -
通俗易懂flex
flex 布局是一种非常简单 快速 有效的布局方式，他能让我的网页写起来更简单。传统布局： 兼容性好 ，布局繁琐 局限性不能再移动端很好的布局。Flex 弹性布局: 操作方便，布局简单，移动端应用很广泛。PC端浏览器支持情况较差 。不支持或者部分支持，IE11或更低的版本。建议:1、如果是PC端页面布局，我们还是传统布局2、如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使...原创 2019-11-16 19:59:01 · 703 阅读 · 0 评论 -
什么是盒模型
原创 2022-02-08 15:34:35 · 559 阅读 · 0 评论 -
css之浮动案例。
浮动浮动可以实现让多个元素排在同一行，并且给这些元素设置宽度与高度！浮动可以让元素脱离标准文档流 就可以实现让多个元素排在同一行，并且可以设置宽高浮动:他是通过一个(float)浮动属性来实现 float left 向左浮动 向左移动 float right 向右移动浮动元素的特性1.浮动元素它可以脱离标准文档流 他不再占用空间了2.我们可以把浮动元素理解为 “漂”浮动元素他的层级要比标准文档流里面的元素层级要高，它们会将标准文档流中的元素给压盖住3.浮动元素他会向左或者向右移动。4.浮动元原创 2019-11-01 13:39:28 · 1275 阅读 · 0 评论