随笔分类 - HTML5 & CSS3
前端，HTML5，css3
摘要：像素简介 1.基本概念 像素 屏幕是由一个一个发光的小点构成，这一个个小点就是像素 分辨率：1920 x 1080 说的就是屏幕中小点的数量 在前端开发中像素分成两种情况讨论，css像素和物理像素 物理像素，上述所说的小点点就属于物理像素，凡是截图工具量出来的都是物理像素。 css像素，编写网页时我
阅读全文
摘要：弹性盒简介 1、基本概念 弹性盒 flex（弹性盒、伸缩盒） 是css中的又一种布局手段，它主要用来代替浮动来完成页面的布局（不用考虑高度塌陷问题） flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变 弹性容器 要使用弹性盒，必须先将一个元素设置为弹性容器 我们通过display 来设
阅读全文
摘要：less 简介 less是一门css的预处理语言 less是一个 css 的增强版，通过less可以编写更少的代码实现更强大的样式 在less中添加了许多的新特性：像对变量的支持、对mixin的支持... less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，所以浏览器无法直
阅读全文
摘要：变形：平移、旋转与缩放 变形就是指通过 css 来改变元素的形状或位置 变形不会影响到页面的布局 transform用来设置元素的变形效果 1、平移 注意：这里的x y z轴是以图片正面为准，图片旋转x y z轴也跟着旋转。且图片的中点为坐标轴零点！ translateX() 沿着由方向平移 tra
阅读全文
摘要：过渡与动画 1、过渡 过渡（transition） 通过过渡可以指定一个属性发生变化时的切换方式 通过过渡可以创建一些非常好的效果，提升用户的体验 属性值 transition-property：指定要执行过渡的属性 多个属性间使用,隔开； 如果所有属性都需要过渡，则使用all关键字； 大部分属性都
阅读全文
摘要：设置网站图标 (在标题栏和收藏栏) 网站图片一般都放在根目录下,名字一般都叫 favicon.ico 图标的存放位置和引用方法 放在根目录下 引用方法 <linkrel="icon"href="favicon.ico"> 项目压缩 项目在上线的时候有个重要的东西访问速度，项目加载的速度越快用户的体验
阅读全文
摘要：小米商城 实现目标 实现代码 CSS /* 主页index.html的样式 */ /* 顶部导航条外部容器 */ .top-bar-wrapper { width: 100%; height: 40px; /* 垂直居中 */ line-height: 40px; background-color:
阅读全文
摘要：表格 1、表格 在现实生活中，我们经常需要使用表格来表示一些格式化数据： 课程表、人名单、成绩单... 同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格 行和列 在table中使用tr表示表格中的一行，有几个tr就有几行 在tr中使用td表示一个单元格，有几个 td就有几个单元格
阅读全文
摘要：猫眼电影 实现目标 实现代码 <!DOCTYPE html> <html lang=""> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial
阅读全文
摘要：雪碧图与渐变 1. 雪碧图 解决图片闪烁的问题： 可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示响应的图片 这样图片会同时加载到网页中就可以有效的避免出现闪烁的问题 这个技术在网页中应用十分广泛，被称为CSS-Sprite，这种图我们称为雪碧图 雪碧
阅读全文
摘要：背景 1. PS 的基本设置 工欲善其事，必先利其器 在介绍背景之前，首先需要做好准备工作：安装 PS 与基本设置 这里就不详细介绍 PS 的安装了，因为网上一抓一大把，主要介绍 PS 的基本设置 左侧工具栏 调成 2 列，更方便使用 右侧工具栏 不需要的视图统统关掉 修改单位为像素 由于一般默认的
阅读全文
摘要：整体效果 实施目标 效果 代码 <!DOCTYPE html> <html lang=""> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia
阅读全文
摘要：字体 1. 字体相关的样式 我们前面讲过字体的两个属性 color用来设置字体颜色 font-size字体的大小 em 相当于当前元素的一个font-size rem 相对于根元素的一个font-size 当然，字体的属性并不止这些 2. font-family font-family 字体族（字体
阅读全文
摘要：定位的简介 需求分析 按照我们之前所学知识，可以怎么实现呢？ 应该来说不难，很容易实现 .box2 { width: 200px; height: 200px; background-color: yellow; /* 左外边距、上外边距 */ margin-left: 200px; margin-
阅读全文
摘要：## referrer 图片引用保护协议,关闭它服务器端可显示网页图片 <meta name="referrer" content="never"> ## float(大局用浮动，细节微调用定位) 文字并不能随盒子的交叠而交叠，它始终显示在盒子不交叠的部分。 如果一个盒子设置了float那么文字就不
阅读全文
摘要：
解决高度塌陷和外边距重叠（父随子margin-”仅限上下“移动）问题，after（完美解决float中的高度塌陷问题），befor（完美解决外边距重叠问题）。
.clearfix::before,
.clearfix::after {
content: "";
display: table;
clear: both;
}
阅读全文
解决高度塌陷和外边距重叠（父随子margin-”仅限上下“移动）问题，after（完美解决float中的高度塌陷问题），befor（完美解决外边距重叠问题）。
.clearfix::before,
.clearfix::after {
content: "";
display: table;
clear: both;
}
阅读全文
摘要：浮动 1. 浮动的简介 通过浮动可以使一个元素向其父元素的左侧或右侧移动 使用float属性来设置于元素的浮动 none 默认值，元素不浮动 left 元素向左浮动 right 元素向右浮动 注意 元素设置浮动以后，水平布局的等式便不需要强制成立 元素设置浮动以后，会完全从文档流中脱离，不再占用文档
阅读全文
摘要：盒模型补充 1. 盒子大小（box-size) 默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定 box-sizing用来设置盒子尺寸的计算方式（设置 width 和 height 的作用） .box { width: 200px; height: 200px; background-co
阅读全文
摘要：实战练习 1. 京东图片列表 开发准备 本来我们是想直接右键图片另存为的，但是发现并没有该选项，应该是京东对图片做了一定的限制 不过，这不妨碍我们获取这些图片，当然你也可以采用截图的方式获取，这里我们采用另外一种方式 通过 F12 可以看到，img元素的src属性，我们将三张图片的这些地址 copy
阅读全文
摘要：盒模型 1. 文档流（normalflow） 网页是一个多层的结构，一层摁着一层 通过 CSS 可以分别为每一层来设置样式，作为用户来讲只能看到最顶上一层 这些层中，最底下的一层称为文档流 文档流是网页的基础我们所创建的元素默认都是在文档流中进行排列 对于我们来元素主要有两个状态 在文档流中 不在文
阅读全文
浙公网安备 33010602011771号