![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端工程师【基础篇】
无足舞者
为一场奢侈的葬礼而奋斗!
展开
-
1.零基础PS【for 前端工程师】
零基础PS前言1. 此课程文档内容是小潘潘查阅各类资料和个人经验的结晶所著,可能课程中有些地方理解的不是很透彻,希望读者能给予包容,另外,由于小潘潘的语文是数学老师教的,所以文笔上难免会有些粗俗,甚至粗鲁,希望作为读者的您不要抱怨和给予理解。按照此文档的课程安排,如果您认真的学习完了的话,最后您可以很轻松的独立完成各类网页效果的编码,此文档不包含js脚本,只专注于css和html,后期小潘潘会出关...原创 2018-01-30 10:57:23 · 276 阅读 · 1 评论 -
13.其他知识
其他简介1. “其他”是一些零散的知识点,前面实在是没地方塞了,所以小潘潘将其单独归类成一起了。内容热区描述1. 热区主要用于图像地图,通过该标记可以在图像地图中设定作用区域,一个“热区”可以包含多个“热点”,这样当用户的鼠标移到指定的热区,点击热区中的某个热点时,会自动链接到预先设定好的页面。制作简介1. 我们制作图片热区时可以手动编码,但这样做很难控制热区的原创 2018-02-07 15:05:31 · 1343 阅读 · 0 评论 -
12.兼容性问题(下)
兼容性问题条件注释简介1. 条件注释语句是IE浏览器专属的,但IE10版本以上就去掉了此功能。2. 可以根据条件来判断注释是否执行。用法一代码兼容性问题 这是IE 效果IE10 IE9,8,7… 标准浏览器 用法二代码原创 2018-02-07 14:50:36 · 196 阅读 · 0 评论 -
11.兼容性问题(上)
新增加问题一:在IE6下,内容会撑开设置好的宽高简介1. 在IE6下,内容会撑开设置好的宽高。代码兼容性问题 .box{width:400px;}.left{width:200px;height:200px;background:red;float:left;}.right{width:200px;float:right;原创 2018-02-07 14:29:16 · 199 阅读 · 0 评论 -
10.css精灵(Sprites)&滑动门&圆角及其扩展
滑动门与圆角什么是滑动门 ?1. 滑动门并不是一项全新的技术,它是利用背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果。详解难题1. 假设需要实现下图中的菜单 分析1. 难点1a) 每个菜单的左上角和右上角都是圆弧型状的2. 难点2 a) 每个菜单的长度都不相同解决三层嵌套思路1. 将一个菜单按钮看成3部分,用PS切原创 2018-02-06 09:03:24 · 485 阅读 · 0 评论 -
9.表格&表单&样式重置&特性
表格结构完整结构代码表格 标题1 标题2 标题3原创 2018-02-05 10:01:19 · 330 阅读 · 0 评论 -
5.深入浮动原理&布局&7种清浮动
浮动原理浮动VS “inline-block”1. 对比浮动inline-block使块元素在同一行显示使块元素在同一行显示使内嵌元素支持宽高使内嵌元素支持宽高没设置宽度时,默认内容撑开没设置宽度时,默认内容撑开代码空格、换行不被解析原创 2018-02-02 09:32:22 · 2090 阅读 · 1 评论 -
4.转换标签类型&重置样式&前端规范
标签默认样式重置(css reset)body1. 用chrome浏览器(按F12)审查元素,可以很直观的看到元素样式。a) 可以用它测试各个元素的默认样式。b) 例:i. 代码默认样式重置 body{border:1px solid red;}P标签 ii. 审查 2.原创 2018-02-01 10:35:58 · 809 阅读 · 0 评论 -
3.标签&选择符&超链接&SEO(SEM)
常见标签div1. 表示“块”。2. 例:“块”。3. 常用做网页布局。img [单标签]1. 图片标签 。2. 例:“图片名字"/>” 。a) src属性是图片的路径(相对/绝对)b) alt属性的属性值是图片的名字,正常情况下不显示,当图片src定位不到资源时,才显示alt属性值。i. 利于SEO 。 alt属性虽然正常情况下不显示,但对于搜索引擎却是很原创 2018-01-31 17:36:44 · 421 阅读 · 0 评论 -
2.HTML、CSS初识&盒子模型详解&行高理解
什么是语言?1. 语言是一个沟通工具;2. 人与人之间的沟通交流我们会用到语言,比如: 汉语、英语…… ;3. 作为前端工程师,要与浏览器沟通交流,就要用到浏览器所能识别的语言。浏览器 3大语言1. html (Hypertext Markup Language) 超文本标记语言 。a) 理解为一栋大厦的钢筋水泥骨架2. css (Cascading Style S原创 2018-01-31 15:18:34 · 1765 阅读 · 0 评论 -
8.定位详解&层级&滤镜遮罩
定位(position)相对定位需求的产生问题1. 如何让图1中的div2移动到如图2上的位置a) 图i. 图1 ii. 图2 b) 思路:回忆一下哪些css命令能够影响盒子显示的位置i. 我们很容易就想到外边距margin劣质解决(margin)1. 使用margin来解决。a) 第一步:使div2往右移动100pxi. 代码原创 2018-02-02 16:25:53 · 284 阅读 · 0 评论 -
7.浮动布局实战&网站结构制作实战
实战一题目1. 要求将下图变成一个网页 答1. 第一步:分析主体结构 2. 第二步:编写结构代码 a) 将”第一步”的分析转变为代码,如下: 实战一 wrap"> left"> leftTop">原创 2018-02-02 16:14:35 · 343 阅读 · 0 评论 -
14.实战+补充知识+PS增强+DW(到此 "前端工程师【基础篇】" 完结)
WPS Word辅助阅读技巧 min-width(最小宽度)1. “min-width:600px;”当页面大小小于600像素时,浏览器按照600像素计算。布局整体规划注意事项1. 不推荐在body中使用一个大的div将页面中所有元素都包含起来,那样会使页面一加载进来先显示一个大白板,原因是因为浏览器解析元素,是由上往下一个一个的解析的,解析完一个元素开始与结束标签后才显示,都原创 2018-02-07 15:22:50 · 392 阅读 · 0 评论