阶段一：前端基础开发

阶段一：前端开发基础学习

web标准的构成

三部分： 结构（html)、表现(css)、行为(js)

相对路径与绝对路径

相对路径：

下一级路径 / 图像位于html文件下一级

上一级路径 ../ 图像文件位于html文件上一级

绝对路径：\ 文件在电脑的那个具体位置

​ 在网络中的具体地址

超链接标签a

属性：target=" " _self 当前窗口打开页面 _blank 新窗口打开页面

锚点链接：点我们点击的链接，可以快速定位到页面中的某个位置

用法：在链接文本href属性中，设置属性值为#名字的形式，如image-20210117180456158

​ 找到目标位置，里面添加一个id属性=刚才知道的名字，如:

第二季

取消掉a标签的下划线： text-decoration: none

阻止链接跳转

image-20210103171727724

鼠标移上去变成十字架：cursor:move

table

是单个表格 是表头

input表单元素

属性 属性值 描述

checked checked 规定此input元素首次加载时应当被选中

maxlebgth 正整数 规定输入字段的字符的最大长度

image-20201216172541602

放在了D盘里面

CSS

文字小技巧

想要文字垂直居中： 字体行高等于盒子的 高------height=line-height

让文字不加粗： font-weight:400;

背景知识 background

background里面的图片相对于img来说好控制一点。

background-position 属性：

image-20201216175741980

background-repeat 属性：

image-20201216180015798

固定一个背景图片：

image-20201216182330509

背景的符合属性：

image-20201216211829821

image-20201216211945343

背景颜色半透明

image-20201216212250954

背景的渐变色

颜色要是没出现，就一定要添加浏览器前缀

image-20201229175014697

背景总结

image-20201216212355925

CSS的三大特性

image-20201216213955888

image-20201216215259089

继承的权重为 0！！

权重的叠加

复合选择器的权重会自动叠加

image-20201216220155473

CSS盒模型

div: 边框 border

image-20201224203855344

合并相邻的边框

image-20201224204424440

padding会影响盒子的实际大小

image-20201224205247945

padding不会撑开盒子大小的情况

image-20201224211152913

外边距典型应用

image-20201224211755993

image-20201224212040919

外边距合并问题

image-20201224212431582

image-20201224212913254

清除内外边距

image-20201224213314765

PS切图

基本操作

image-20201224214435138

image-20201224214320422

image-20201225113530767

image-20201225113923805

去掉li标签前面的小圆点

image-20201224221843272

盒子阴影

image-20201225092201125

image-20201225092346373

CSS浮动

image-20201225093320558

浮动的特性

image-20201225094048412

image-20201225094452005

image-20201225094847517

image-20201225095026424

image-20201225103831151

CSS清除浮动

当父盒子暂时没办法给出高度时，可以让子盒子撑开父亲，有多少孩子，父盒子就有多高

image-20201225111443434

image-20201225111601178

image-20201225111639250

闭合浮动

image-20201225111828372

image-20201225112310796

CSS定位

image-20201225192510213

image-20201225192807872

相对定位 relative

image-20201225193318128

绝对定位 absolute

image-20201225201235753

image-20201225201734478

固定定位 fixed

image-20201225202635453

image-20201225202949660

粘性定位 sticky

image-20201225203311434

定位总结

image-20201225203534048

定位得叠放顺序 z-index

image-20201225204009757

绝对定位得盒子居中

image-20201225204550589

这里的100px是盒子自身宽度的一半

定位得特殊性

image-20201225204900576

image-20201225204923386

image-20201225205618403

元素的显示与隐藏

image-20201225210401132

image-20201225210523218

image-20201225210709031

CSS高阶技巧

CSS精灵图

image-20201226085652142

image-20201226085751243

image-20201226090536437

二倍精灵图

image-20201227114407319

image-20201227114458264

字体图标 iconfont 的使用

和vue的字体图标一样，先去下载，然后把需要的文件放在一个文件夹中。

把文件夹放入自己项目中

在HTML页面引用时，需要在CSS中加入字体图标声明

使用时记得在标签加上申明image-20201226092611150

和vue细节不一样

CSS制作三角形的小边角

写一个盒子，宽高都给0 给盒子边框大小，给上盒子边框颜色：

image-20201226093530353

三角的方向自己可以控制，三角的大小取决于边框的大小

CSS进阶

CSS用户界面样式

image-20201226093759353

image-20201226094050819

Vertical-align 属性应用

image-20201226094430062

解决图片底部默认空白缝隙问题

image-20201226094958692

溢出文字省略号显示

image-20201226102257764

image-20201226102355907

常见的布局技巧

margin负值的巧妙运用：去掉盒子叠加的边框

image-20201226102837718

float浮动不会覆盖文字

子元素有absolute后想要水平垂直居中可以用 leta=50%,top=50%,transform: translate(-50%, -50%);

posted @ 2021-01-17 18:07  啊方不方  阅读(118)  评论(0)  编辑  收藏  举报