随笔分类 -  HTML与CSS

鼠标点击更换图片、文字颜色和“毛玻璃"效果
摘要：鼠标点击之后更换图片及文字颜色，以达到特殊的样式效果 同时设置两张图片，第一张为默认 给第二张图片设置class,并设置display属性为none(不显示也不占据空间) 当鼠标点击之后，设置第一张图片的display为none,同时设置第二张为可见 改变字体颜色同理，如上图 背景的透明度及毛玻璃样 阅读全文
posted @ 2020-05-19 18:07 铁憨憨coderz 阅读(345) 评论(0) 推荐(0)
flex布局
摘要：两个概念： 开启了flex布局的元素叫做flex container flex container里面的直接子元素叫做flex items 设置display属性开启flex布局： flex: flex container以块级元素（block-level）形式存在 inline-flex: fle 阅读全文
posted @ 2020-05-19 18:03 铁憨憨coderz 阅读(162) 评论(0) 推荐(0)
css属性之盒子模型与背景设置
摘要：内容（content）的相关属性 补充： 标准盒子模型： content+padding+border+margin（例如：盒子宽度为：width+border*2+padding*2+margin*2 标准宽度不包含margin） IE盒子模型： content包含border与padding ( 阅读全文
posted @ 2020-05-19 17:55 铁憨憨coderz 阅读(1711) 评论(0) 推荐(0)
HTML5的新增视频音频属性
摘要：语义化元素（了解）：只是将元素语义化，实际上只是一个块级元素，没有其它特性 媒体元素：audio与video的属性一致 如果浏览器不支持视频的播放格式，那可以使用<source>标签来指定多个视频格式，浏览器会依次寻找支持的格式来播放（只播放一个） 阅读全文
posted @ 2020-05-19 17:30 铁憨憨coderz 阅读(165) 评论(0) 推荐(0)
形变（transform) 过渡 (transition) 动画（animation）3D转换
摘要：transform（形变） translate scale 改变缩放的原点 rotate skew 倾斜 transition（过渡） 形变与过渡一般一起使用 animation（动画） 用keyframes定义动画 调用动画 更复杂的动画效果 更多的动画属性 3D转换 旋转要配合透视与位移才能实现 阅读全文
posted @ 2020-05-01 16:33 铁憨憨coderz 阅读(574) 评论(0) 推荐(0)
定位（position）与浮动（float)
摘要：视口：所能直接看到的网页 画布： 所有的包括未被滚动出来的网页 标准流（normal flow）：默认情况元素都按标准流布局，从左往右，从上到下，不存在层叠） 脱标元素：绝对定位/浮动是block元素，但是是脱标元素，即使是block元素也只会包裹内容，而不会占据一整行 position stati 阅读全文
posted @ 2020-05-01 16:26 铁憨憨coderz 阅读(305) 评论(0) 推荐(0)
HTML的列表、表格、表单及display属性
摘要：HTML列表表格及表单 列表 有序列表ol 无序列表ul 定义列表dl dt(列表中每一项的项目名) dd(列表中每一项的具体描述) 表格 table tr 表格中的行 td 行中的单元格 边框合并属性 border-collapse: collapse tbody 表格的主体 caption 表格 阅读全文
posted @ 2020-03-24 20:31 铁憨憨coderz 阅读(796) 评论(0) 推荐(0)
CSS选择器与伪类伪元素
摘要：css选择器 1.属性选择器 为带有相同属性的所有元素设置样式： 2.组合选择器（重要） 后代选择器 div span { } 表示对div元素下的所有span元素生效（包括直接、间接子元素） div p span { } 表示对div元素里的p元素里的span元素生效（直接或间接） 子代选择器 d 阅读全文
posted @ 2020-03-20 18:31 铁憨憨coderz 阅读(252) 评论(0) 推荐(0)
CSS文本与字体的属性
摘要：css文本与字体的属性 文本属性 text-decoration（文字装饰线）的属性 text-tabsform(设置文字大小写转换)：用的比较少 text-indent 用于对第一行内容的缩进 text-align用于设置元素内容在元素中的水平对齐方式（默认左对齐） 字体属性 font-size设 阅读全文
posted @ 2020-03-20 18:21 铁憨憨coderz 阅读(262) 评论(0) 推荐(0)
HTML基本元素与css的三种引入
摘要：基本元素 字符实体 有一些字符是预留的，必须替换为字符实体才能正确显示 例子： 字符实体&nbsp；代表空格 即为 字符实体&amp；nbsp;代表空格 span标签 span标签是行内元素，本身并无特殊效果，但方便使用选择器对其中的内容进行样式格式化 a标签 href属性： 所要跳转的目标链接，如 阅读全文
posted @ 2020-03-20 18:11 铁憨憨coderz 阅读(196) 评论(0) 推荐(0)