- 博客(14)
- 收藏
- 关注
RSS订阅原创 自学前端十四天~
有了弹性盒和怪异盒的基础，今天跟着做了一个支付宝页面的小案例。感觉很有意思。安利一个网站iconfont-阿里巴巴矢量图标库：里面有各种我们平时要用到的小图标，免费下载就很nice！先来看一下咱们今天要做的这个页面整体分header、section和footer三部分headerheader部分是几个<i>标签，里面用src引入了在阿里巴巴矢量图标库下载的图标，看起来像图，其实是字体样式，还引入了一个<span>标签来写“账单”这个文字。将hea.
2022-03-30 20:14:43
322
原创 自学前端第十三天~
怪异盒模型之前每次设置好盒子的内边距或者是边框后都需要将其宽度和高度减去对应的距离。这样计算感觉很麻烦，所以就有了怪异盒模型，和之前的普通盒模型不同，加上怪异盒模型的属性在设置内便于和边框时只会压缩内部内容的宽和高，对外部盒子的宽和高不会造成影响。box-sizing:content-box 默认值，普通盒模型，计算时如果加了边框和内边距需要在宽和高上减去对应宽度高度。box-sizing:border-box 怪异盒模型，压缩内部内容宽和高,保证盒子即使加了内边距或者边框，宽度和高度也不会变化
2022-03-29 21:18:30
290
原创 自学前端第十二天~
还是css3的一些新增的内容。接上次没有学完的伪类选择器，以及一些阴影和圆角的设置。结构伪类选择器用来在设置了相同标签时方便选择区分。<style> /* 选中第一个孩子 */ li:first-child{ background-color: yellow; } /* 选中最后一个孩子 */ li:last-child{ background-color
2022-03-28 21:34:35
506
原创 自学前端十一天~
今天学习了HTML5、CSS3这些升级的属性。HTML5和HTML的区别：HTML5已经远远超越了标记语言的范畴，它的设计目的是在移动设备上支持多媒体，和HTML比起来，深度和广度上都做了进一步提升，HTML5相比于html的声明更为简单，方便记忆，所以HTML5要比HTML更有利于程序员的快速阅读和开发。此外，两者结构语义也有所不同。HTML没有结构语义化的标签，通常以<divid="header"></div>来命名，HTML5则增加了很多语义化的标签，比如：<he
2022-03-24 20:43:44
1591
原创 自学前端第十天~
今天在昨天自适应的基础上学习了一些常用的页面布局，两栏布局、三栏布局，以及表单进阶的一些属性。两栏布局就是将页面划分成左右两块的布局，一般来说左边是固定宽度的导航栏，右边是自适应宽度的内容。首先需要清除默认的边距，设置窗口自适应，然后对于左边盒子设置200px的固定宽度和100%的高度并使之左浮动，因为盒子是块级元素，必须设置浮动两个盒子才能并列。右边盒子设置100%的高度，和200px的左边距来“见缝插针”，因为浮动的盒子会影响后面的盒子，在空间足够的情况下能够并列排放。<style&
2022-03-23 23:27:42
379
原创 自学前端第九天~
学习了层级、锚点、精灵图、高度宽度以及窗口自适应、伪元素这些知识点。层级在设置了兄弟相对定位时，如果两个盒子有相交的部分，将会遵循后来者居上的原则，后面的盒子会把前面盒子与之重合的部分覆盖上。在上面的盒子比下面的盒子层级高，这就是层级。如下图：红色盒子先进行设置，相对于自己的之前的位置进行向下和向右的偏移。然后再设置后面的绿色盒子，绿色盒子将会把红盒子盖住一部分，如果想要将红盒子显示在上面，需要用到z-index这个属性。设置数字值，越大表示层级越高，可以设置负值。两个盒子如果都设置了z-index
2022-03-22 22:05:06
300
原创 第八天了，做一个静态页面
昨天没有怎么学新知识，想着做一个静态页面把之前学的东西串连一下，复习一下。就找到了天空之城这个首页，感觉页面不算难，下面这个是我截得一部分。这个页面做的大致分header、banner、body三部分，因为下面还有一些内容没有做，就没有footer部分，header是最上面的部分，又分为最左边的logo图片、中间的导航栏nav、最右边的搜索以及登录注册。做之前首先要把图片素材准备好，包含logo图、中间的大图部分、下面的小图。都是在原网站下载下来的。首页右击按检查，点击左上方的箭头图标，就能
2022-03-19 18:53:48
260
原创 自学前端第七天~
每天学一点新知识，今天学了css里面关于定位的知识。之前设置模块要设置很多外边距和内边距，感觉学了定位就简单很多。定位有相对定位、绝对定位、固定定位、粘性定位。可以方便设置模块在页面的位置，方便固定位置。相对定位：position: static 默认值，不支持top、left、bottom、right位置position：relative 相对于自己本来的位置偏移,和top、left、bottom、right位置搭配使用<style> div{
2022-03-17 21:36:54
60
原创 自学前端第六天~
今天同一样的也是一些属性。浮动属性：用来布局模块，主要使div这种独占一行的盒子可以水平排列左浮动：float：left右浮动：float：right清浮动：clear：left 不允许左边有浮动对象 clear：right不允许右边有浮动对象 clear：both不允许左右有浮动对象溢出属性主要针对一些内容比较多，目标区域装不下的一些溢出属性设置。overflow：visible 显示溢出，超出目标区域显示overflow：hidden 溢出隐藏，超出内容隐藏
2022-03-17 12:20:59
77
原创 自学前端第五天~
今天开始学盒子模型了，感觉有点绕，有挺多还不明白的地方。先记录下我学到的东西吧！盒子这个模型有边框border、内边距padding、外边距margin属性。边框可以设置宽度、样式和颜色，内边距和外边距都是有上下左右四个方向的。一个盒子就像一个装着电脑的快递盒，边框就相当于快递盒的厚度、样式、颜色。内边距就是电脑和快递盒之间的距离，而外边距就是快递盒之间的距离。边框border：值有宽度、样式（solid实线 、 double双线、dashed虚线、dotted点状线）、颜色,如果直接用bord
2022-03-15 19:10:46
101
原创 自学前端第四天~
学了几天前端，感觉css虽然不是很复杂，但是要记得东西好多，还是记录下来，以备之后随时复习。第四天学习了很多css的属性：文字属性、列表属性、背景属性、浮动属性。文字属性font-size：用来定义文字大小，谷歌浏览器字体默认16px。font-family：用来定义字体，比如宋体、楷体、微软雅黑。。。谷歌浏览器默认字体是微软雅黑。字可以设置多个字体，用逗号隔开，第一个字体若不支持会使用第二个字体，以此类推。font-wight：用来定义字体粗细，值可以是数字，100、400、700、9
2022-03-14 20:45:48
168
原创 自学前端第三天~
第三天已经开始学习css样式啦，了解到样式的定义可以在三个位置，行内定义、内部定义以及外部定义，外部定义就是要新建一个css的文件，把样式在css文件里面定义，然后用<link rel="stylesheet" type="text/css" href="./css/01.css">，link标签把样式导入html文件里面。内部定义就是在html内的一对<head></head>标签里面去加<style></style>标签，在style标签里面定
2022-03-12 15:32:47
920
原创 自学前端第二天
今天主要学习了列表标签、表格标签、表单、图片标签、超链接1.列表标签：列表分有序列表、无序列表以及自定义列表有序列表外层标签用<ol></ol>,内层只能用<li></li>，而li内可以嵌套各种标签。有序标签有type和start属性：type:1,a,A,i,Istart:开始位置，取值只能是一个数字无序列表外层标签用<ul><...
2022-03-10 22:49:28
185
原创 自学前端第一天~
今天主要学习了html5的一些基本标签，包含对文字和段落作用的一些标签。标签分为双标签和单标签，常见的单标签:br、hr<h1></h1> ~ <h6></h6>标题标签（数字越大，设置字体越小） <p></p>段落标签 <br>换行标签 <strong></strong>加粗 <em></em>倾斜 <del></del>...
2022-03-10 19:07:07
241
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人