阶段一:前端开发基础学习
web标准的构成
三部分: 结构(html)、表现(css)、行为(js)
相对路径与绝对路径
相对路径:
下一级路径 / 图像位于html文件下一级
上一级路径 ../ 图像文件位于html文件上一级
绝对路径:\ 文件在电脑的那个具体位置
在网络中的具体地址
超链接标签a
属性:target=" " _self 当前窗口打开页面 _blank 新窗口打开页面
锚点链接:点我们点击的链接,可以快速定位到页面中的某个位置
用法:在链接文本href属性中,设置属性值为#名字的形式,如
找到目标位置,里面添加一个id属性=刚才知道的名字,如:
第二季
取消掉a标签的下划线: text-decoration: none
阻止链接跳转
鼠标移上去变成十字架:cursor:move
table
是单个表格 是表头input表单元素
属性 属性值 描述
checked checked 规定此input元素首次加载时应当被选中
maxlebgth 正整数 规定输入字段的字符的最大长度
放在了D盘里面
CSS
文字小技巧
想要文字垂直居中: 字体行高等于盒子的 高------height=line-height
让文字不加粗: font-weight:400;
背景知识 background
background里面的图片相对于img来说好控制一点。
background-position 属性:
background-repeat 属性:
固定一个背景图片:
背景的符合属性:
背景颜色半透明
背景的渐变色
颜色要是没出现,就一定要添加浏览器前缀
背景总结
CSS的三大特性
继承的权重为 0!!
权重的叠加
复合选择器的权重会自动叠加
CSS盒模型
div: 边框 border
合并相邻的边框
padding会影响盒子的实际大小
padding不会撑开盒子大小的情况
外边距典型应用
外边距合并问题
清除内外边距
PS切图
基本操作
去掉li标签前面的小圆点
盒子阴影
CSS浮动
浮动的特性
CSS清除浮动
当父盒子暂时没办法给出高度时,可以让子盒子撑开父亲,有多少孩子,父盒子就有多高
闭合浮动
CSS定位
相对定位 relative
绝对定位 absolute
固定定位 fixed
粘性定位 sticky
定位总结
定位得叠放顺序 z-index
绝对定位得盒子居中
这里的100px是盒子自身宽度的一半
定位得特殊性
元素的显示与隐藏
CSS高阶技巧
CSS精灵图
二倍精灵图
字体图标 iconfont 的使用
和vue的字体图标一样,先去下载,然后把需要的文件放在一个文件夹中。
把文件夹放入自己项目中
在HTML页面引用时,需要在CSS中加入字体图标声明
使用时记得在标签加上申明
和vue细节不一样
CSS制作三角形的小边角
写一个盒子,宽高都给0 给盒子边框大小,给上盒子边框颜色:
三角的方向自己可以控制,三角的大小取决于边框的大小
CSS进阶
CSS用户界面样式
Vertical-align 属性应用
解决图片底部默认空白缝隙问题
溢出文字省略号显示
常见的布局技巧
margin负值的巧妙运用:去掉盒子叠加的边框
float浮动不会覆盖文字
子元素有absolute后想要水平垂直居中可以用 leta=50%,top=50%,transform: translate(-50%, -50%);