- 博客(11)
- 收藏
- 关注
RSS订阅
1原创 scoped以及样式穿透的前世今生
scoped属性是前端开发中经常接触的一个样式属性。那么，我们应该怎么应用好这个属性，加快我们的工作进度呢？下面我会从以下几个方面来谈谈我工作中遇到的关于scope属性的问题。
2022-07-29 08:45:08
538
原创 前端自学整理——CSS仿小米商品栏
CSS仿小米商品栏商品栏已成为手机网站、电商网站甚至课程网站必不可少的一部分。为了练习CSS中的几个重要模块，这次选用小米商品栏作为练习对象。准备阶段观察盒子模型，根据网页布局的第一准则可以分析：有一个与浏览器同宽的大盒子，且有背景颜色有一个可视区的版心部分，版心部分分为两个模块：上面的“小米闪购部分”以及下面的商品部分小米闪购部分是一个左右浮动；盒子也是浮动模型开始搭建骨架结构部分，结构永远比样式重要。根据上面的分析可以得到<!DOCTYPE html><ht
2020-09-28 22:50:46
992
原创 HTML+CSS开发心得——仿新浪导航栏（一）
仿新浪导航栏（一）最近在学习CSS布局和HTML，这个部分给我的感觉是内容很多，虽然代码简单，不需要什么算法， 但是我们很难将盒子模型放在我们需要的位置上，再加上一些行高、边距、继承，让人如身在云里雾里。在学习网页的过程中，我们也要采取模块化学习的方法，一个模块一个模块学习，一步一步来。千万不能以为代码简单，就小瞧这门语言，其实它大有讲究。分析打开新浪导航栏，我们可以分析如下：一个大盒子与浏览器同宽一个通栏（可视区）的大盒子w可视区的大盒子里包括左右两个部分（fl+fr）左右两个部分的
2020-09-27 00:06:44
2674
原创 前端自学整理——CSS高级技巧
精灵图使用精灵图的目的一次加载完成所有图片，减少服务器接收和发送请求的次数，提高页面的加载速度使用方法：background-position字体图标使用方法：官网（icomoon.io）下载字体包将fonts文件解压至根目录下引入@font-face 样式在demo.html中复制相应字在样式内引入字体，与上面font-face一致代码：@font-face { font-family: 'icomoon'; src: url('../fonts
2020-09-26 22:25:13
125
原创 前端自学整理——CSS复习（三）
CSS定位为什么需要定位元素可自由在盒子中移动位置，并压住其他盒子当滚动窗口的时候，盒子是固定于屏幕某位置的定位的组成定位=定位模式＋边偏移定位模式positionstatic（静态定位）普通标准流，是元素默认的定位模式relative（相对定位）元素移动位置的时候，相对于其原来的位置移动相对定位特点：移动的时候参照的是原来标准流的位置标准流的位置仍然占有absolute（绝对定位）绝对定位特点：元素移动位置的时候，是相对于父元素来说的如果没有父元素或父元
2020-09-25 23:10:43
208
原创 前端自学整理——CSS复习（二）
CSS复习二——盒模型和浮动（附思维导图）盒模型的组成盒子的内边距padding（具体请见思维导图）内边距是指内容和盒子边框之间的距离- 如果盒子已经有了高度和宽度，此时指定内边框会撑大盒子特殊情况， 如果这个盒子，没有宽度(继承的默认和父元素一样大，无效) 则padding 不会撑开盒子盒子的边框border边框会影响盒子的实际大小在开发的过程中，测量盒子大小的时候，不量边框；如果量了边框需要在width或者height减去###盒子的外边距margin块级元素盒子水平居中：
2020-09-25 22:48:29
189
原创 前端自学整理——CSS复习（一）
CSS复习一为什么要引入CSS层叠样式表体现了结构与样式相分离的思想HTML控制网页结构，CSS修饰网页的样式CSS基本语法选择器{属性1：值1；属性2：值2；}示例：.nav a { display: inline-block; height: 33px; background: url(images/to.png) no-repeat; padding-left: 15px; color: #fff; line-height: 33px; font-size: 14
2020-09-25 22:28:46
206
原创 前端自学整理——HTML篇（三）
表格标签为什么要使用表格标签使数据的展示更加清晰，更有条理表格标签的基本语法还是从基础代码入手分析含义：<table border="1"><tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td></tr><tr> <td>row 2, cell 1</td> <td>row 2
2020-09-24 09:46:45
116
原创 前端自学整理——HTML篇（二）
HTML标签HTML语法规范HTML基本语法<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title></head><body> 我爱中国❤</body></html>这是一个最基本的html文件，如图所示，我们可以得到：...
2020-09-23 21:15:36
209
原创 前端自学整理——HTML篇（一）
前端基础及WEB基础知识网页什么是网页网页是由网页元素（音频、链接、文字、视频、图片等）组成的HTML文件什么是HTMLHTML(Hyper Text Markup Language)超文本标记语言，用于描述网页超文本指的是网页不仅仅是文本，其中还有链接、音频、图片等远比文本丰富的内容网页是怎么加载的前端开发人员用html语言描述网页，部署至服务器，浏览器向服务器请求html文件，并将html文件解析渲染给用户常用浏览器浏览器的种类浏览器是网页显示、运行的平台。常用的浏览
2020-09-23 20:01:23
298
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人