- 博客(9)
- 收藏
- 关注
原创 前端自学整理——CSS仿小米商品栏
CSS仿小米商品栏商品栏已成为手机网站、电商网站甚至课程网站必不可少的一部分。为了练习CSS中的几个重要模块,这次选用小米商品栏作为练习对象。准备阶段观察盒子模型,根据网页布局的第一准则可以分析:有一个与浏览器同宽的大盒子,且有背景颜色有一个可视区的版心部分,版心部分分为两个模块:上面的“小米闪购部分”以及下面的商品部分小米闪购部分是一个左右浮动;盒子也是浮动模型开始搭建骨架结构部分,结构永远比样式重要。根据上面的分析可以得到<!DOCTYPE html><ht
2020-09-28 22:50:46 1007
原创 HTML+CSS开发心得——仿新浪导航栏(一)
仿新浪导航栏(一)最近在学习CSS布局和HTML,这个部分给我的感觉是内容很多,虽然代码简单,不需要什么算法, 但是我们很难将盒子模型放在我们需要的位置上,再加上一些行高、边距、继承,让人如身在云里雾里。在学习网页的过程中,我们也要采取模块化学习的方法,一个模块一个模块学习,一步一步来。千万不能以为代码简单,就小瞧这门语言,其实它大有讲究。分析打开新浪导航栏,我们可以分析如下:一个大盒子与浏览器同宽一个通栏(可视区)的大盒子w可视区的大盒子里包括左右两个部分(fl+fr)左右两个部分的
2020-09-27 00:06:44 2742
原创 前端自学整理——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 181
原创 前端自学整理——CSS复习(三)
CSS定位为什么需要定位元素可自由在盒子中移动位置,并压住其他盒子当滚动窗口的时候,盒子是固定于屏幕某位置的定位的组成定位=定位模式+边偏移定位模式positionstatic(静态定位)普通标准流,是元素默认的定位模式relative(相对定位)元素移动位置的时候,相对于其原来的位置移动相对定位特点:移动的时候参照的是原来标准流的位置标准流的位置仍然占有absolute(绝对定位)绝对定位特点:元素移动位置的时候,是相对于父元素来说的如果没有父元素或父元
2020-09-25 23:10:43 310
原创 前端自学整理——CSS复习(二)
CSS复习二——盒模型和浮动(附思维导图)盒模型的组成盒子的内边距padding(具体请见思维导图)内边距是指内容和盒子边框之间的距离- 如果盒子已经有了高度和宽度,此时指定内边框会撑大盒子特殊情况, 如果这个盒子,没有宽度(继承的默认和父元素一样大,无效) 则padding 不会撑开盒子盒子的边框border边框会影响盒子的实际大小在开发的过程中,测量盒子大小的时候,不量边框;如果量了边框需要在width或者height减去###盒子的外边距margin块级元素盒子水平居中:
2020-09-25 22:48:29 428
原创 前端自学整理——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 458
原创 前端自学整理——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 141
原创 前端自学整理——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 298
原创 前端自学整理——HTML篇(一)
前端基础及WEB基础知识网页什么是网页网页是由网页元素(音频、链接、文字、视频、图片等)组成的HTML文件什么是HTMLHTML(Hyper Text Markup Language)超文本标记语言,用于描述网页超文本指的是网页不仅仅是文本,其中还有链接、音频、图片等远比文本丰富的内容网页是怎么加载的前端开发人员用html语言描述网页,部署至服务器,浏览器向服务器请求html文件,并将html文件解析渲染给用户常用浏览器浏览器的种类浏览器是网页显示、运行的平台。常用的浏览
2020-09-23 20:01:23 445
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人