WEB前端开发工程师 学习第一天

最新推荐文章于 2024-09-16 06:30:00 发布
最新推荐文章于 2024-09-16 06:30:00 发布
阅读量106 收藏
点赞数
文章标签： 前端 photoshop javascript ViewUI
原文链接：http://www.cnblogs.com/mayanlianggcs/p/9508303.html
版权

必备条件：
　　1）能上网、会打字、懂得互联网是什么 。
　　2）兴趣
　　3）肯做练习

要学哪些东西，才能进行 WEB前端开发 的工作：

　　1）软件：只需要花5%的精力　　　

　　　　浏览器（谷歌、IE浏览器、火狐浏览器、苹果浏览器……）
　　　　浏览器插件F12
　　　　用来写代码的编辑器：记事本、DW、Sublime ...
　　　　PhotoShop

　　2）语言：至少花95%的精力　　　

　　　　HTML：“超”文本 标记“语言”
　　　　　　　　语言是和浏览器打交道的（沟通）

　　　　　　　　标记、标签：<html>

　　　　　　　　标签对：<html></html> <body></body>

　　　　　　　　单标签：<meta /> <img />　　

　　　　CSS：层叠样式表
　　　　　　　　width : 200px;
　　　　　　　　height : 200px;
　　　　　　　　border:8px solid red;　　　　

　　　　JavaScript：脚本语言（行为）
　　　　　　　　οnclick=" this.style.width = '800px'; this.style.height = '400px'; "

这是硬指标

1.常见样式

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {
	
	/* 单一样式 */
	
	width:500px;
	height:100px;
	
	background-color:#ccc;	
	/* CSS注释：颜色单词（red yellow ...）  16进制（#0CC） */
	
	background-image:url(img/2.jpg);
	/* 默认状态下，背景会平铺 */
	
	background-repeat:no-repeat;
	background-position:-100px -20px;

	/*background-repeat:repeat-y;
	
	background-position:0px 20px;*/
	
	
	/*
		background-repeat:no-repeat;
		no-repeat 不重复
		repeat-x	水平平铺
		repeat-y	垂直平铺
	*/
	
	
	/*
		background-position:200px 20px;
		背景定位：x  y
			100px 30px
			10%  20%
			left | center | right			top | center | bottom
			
	*/
	
	background-attachment:fixed;
	
	/* 复合样式 */
	/*background:#ccc url(img/2.jpg) no-repeat -100px -20px fixed;*/
}
</style>
</head>

<body>
<!-- HTML注释 -->
<div id="div1"></div>

</body>
</html>

　　2.现在我们来编写我们的第一个页面

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>标题 - title</title>
    </head>
    <body>
        内容 - content
        <div onclick=" this.style.width = '800px'; this.style.height = '400px'; " style="width : 100px; height : 100px; transition:1s; border:8px solid red; background:url(http://d.hiphotos.baidu.com/image/w%3D2048/sign=b0ae9411f01fbe091c5ec4145f580d33/64380cd7912397dd6a2133635b82b2b7d0a28779.jpg);">aaaa</div>
    </body>
</html>

3.常见样式

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body {
    height:3000px;
    background-image:url(img/dg.jpg);
    background-repeat:no-repeat;
    background-position:center 0;
    background-attachment:fixed;
}
</style>
</head>

<body>

11111111111111111111111111111111111111<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222adsfasdfasdfasdf22222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222asdfasfasfda22222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />
22222222222222222222222222222222222222<br />

</body>
</html>

4.常见样式-边框

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {
    width:400px;
    height:400px;
}
</style>
</head>

<body>

<div id="div1"></div>

</body>
</html>

5.-常见样式-复合样式（背景样式的合并）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {
    width:300px;
    height:300px;
    background:200px 0px url(img/1.jpg) no-repeat gray ;
}
</style>
</head>

<body>

<div id="div1"></div>

</body>
</html>

6.边框

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {
    width:100px;
    height:100px;
    /* 复合样式 */
    border-top:50px solid red;
    border-left:50px solid yellow;
    border-bottom:50px solid blue;
    border-right:50px solid green;
    background:#f1f1f1;
}
</style>
</head>

<body>

<div id="div1"></div>

</body>
</html>

7.简单样式配合PS做一个小实例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#box {
	width:300px;
	height:215px;
}
#title {
	width:114px;
	height:29px;
	border-top:2px solid #206f96;
	border-left:1px solid #cfcfcf;
	border-right:1px solid #cfcfcf;
	background:url(img/title-bg.gif);
}
#content {
	width:298px;
	height:182px;
	border:1px solid #cfcfcf;
}
#content-1 {
	width:298px;
	height:57px;
	background:url(img/mail.gif) no-repeat 16px 25px;
}

#content-2 {
	width:298px;
	height:125px;
	background:#f7f7f7 url(img/mouse.gif) no-repeat 9px 51px;
}
</style>
</head>

<body>

<div id="box">
	<div id="title"></div>
	<div id="content">
		<div id="content-1"></div>
		<div id="content-2"></div>
	</div>
</div>

</body>
</html>

　　效果图

　　

9.第一天的练习

　　1.第一个小练习

　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box{
                width: 334px;
                height: 392px;
                background: #31295c;
                margin: 50px auto;
            }
            .box img{
                margin-top: 34px;
                margin-left: 27px;
                border: none;
                vertical-align: top;
            }
            .box .list1{
                background:url(img/icon1.gif)no-repeat 229px 8px #0863d6;
                height: 40px;
                width: 277px;
                margin-left: 27px;
                margin-bottom: 1px;
            }
            .box .list2{
                background:url(img/icon2.gif)no-repeat 229px 8px #0863d6;
                height: 40px;
                width: 277px;
                margin-left: 27px;
                margin-bottom: 1px;
            }
            .box .list3{
                background:url(img/icon2.gif)no-repeat 229px 8px #0863d6;
                height: 40px;
                width: 277px;
                margin-left: 27px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="img/img1.gif" >
            <div class="list1"></div>
            <div class="list2"></div>
            <div class="list3"></div>
        </div>    
    </body>
</html>

　　2.第二个小练习

　　　　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
            .box{
                width: 344px;
                height: 390px;
                background: url(img/bj-2.gif);
                margin: 50px auto 0;
                padding-top: 50px;
            }
            .box ul{
                margin: 0;
                padding: 0;
                background: #fefefe;
                width: 245px;
                height: 300px;
                list-style: none;
                margin-left: 50px;
            }
            .box ul li{
                height: 49px;
                border-bottom: 1px solid #d6d6d6;
            }
            .box ul li img{
                margin-top: 17px;
                margin-left: 22px;
            }
            .box ul .active{
                border-left: 2px solid #cd6830;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <ul>
                <li>
                    <img src="img/1.1.gif" >
                </li>
                <li>
                    <img src="img/1.2.gif" >
                </li>
                <li class="active">
                    <img src="img/1.3.gif" >
                </li>
                <li>
                    <img src="img/1.4.gif" >
                </li>
                <li>
                    <img src="img/1.5.gif" >
                </li>
                <li><img src="img/1.6.gif" ></li>
            </ul>
        </div>
    </body>
</html>

效果图

3.第三个小练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
            .box{
                width: 317px;
                height: 220px;
                background: #181c1f;
                margin: 50px auto;
                padding-top: 15px;
            }
            ul{
                margin: 0;
                padding: 0;
                list-style: none;
                width: 270px;
                height: 200px;
                border: 3px solid #6bcdf2;
                margin:auto;
            }
            .box .active{
                height: 40px;
                border-bottom: 3px solid #6bcdf2;
                background: url(img/2.6.gif)no-repeat 244px 10px;
            }
            .box li{
                height: 36px;
            }
            .box li img{
                margin-top: 10px;
                margin-left: 13px;
            }
            .box .list1{
                background: #6BCDF2;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <ul>
                <li class="active">
                    <img src="img/2.1.gif" >
                </li>
                <li>
                    <img src="img/2.2.gif" >
                </li>
                <li class="list1">
                    <img src="img/2.3.gif" >
                </li>
                <li>
                    <img src="img/2.4.gif" >
                </li>
                <li>
                    <img src="img/2.5.gif" >
                </li>
            </ul>
        </div>
    </body>
</html>

效果图

好了今天学习就到这里了

转载于:https://www.cnblogs.com/mayanlianggcs/p/9508303.html

weixin_33804990
关注
web前端开发学习总结，前端框架开发
qd520_1314的博客
04-22 1704
前言 假如有那么残酷的一天，我不小心喝错了一瓶药，一下子抹掉了我这十多年的编程经验，把我变成了一只小白。我想自学 前端，并且想要找到一份工作，我预计需要 6 个月的时间，前提条件是每天都处于高效率的学习状态当中，并且每天的学习时间至少在 12 个小时以上。 即便是这样，我敢肯定，找到的工作肯定不会太好，勉强能够维持生活吧，毕竟是零基础入门啊。 如果想更进一步，真正成为一名不可或缺的高级前端工程师，时间需要更久，两年、三年、五年，直到秃的那天。 想着想着，我就觉得有必要为那一天做点准备，以备不时之需。 一、如
0基础学习前端开发，高职web前端开发技能大赛
m0_60226911的博客
07-24 1822
零基础学web前端开发要怎么去学? 首先要学习的就是基础知识：html、css和JavaScript。HTML是内容，CSS是表现，JavaScript是行为。前端开发的门槛其实非常低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。 所以，对于从事IT工作的人来说，前端开发是个不错的切入点。也正因为如此，前端开发的领域有很多自学成“才”的同行。HTML是最基础的，现在流行的是HTML5设计，能更好的为移动端服务，要先学会网页布局。CSS是用来美化HTML页面的为页面提供布局和格式。最
web前端学习-第一天
qq_45654474的博客
08-22 2424
导语： web前端学习HTML基础知识web基本概念标记语言HTML的基本结构使用HBuilderX，Chrome无法运行的问题插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 HTML基础知识 你对HTML有多少了解？ 以下都是非官方描述，看起来会通俗易懂点。 web基本概念 web: 网
适合普通大学生的前端开发学习路线
热门推荐
帅地
04-12 4万+
大家好，我是帅地。 假如你没有明确的目标，或许可以按照我说的学习路线来学习一波，我写的每一份学习路线，不会很全面，因为我认为，东西列的太多，反而不利于新手的学习，所以我列举的，都是比较必要的知识，当你把这些知识学了的时候，我相信你不需要别人的学习路线，也能知道自己接下来需要学啥了。 虽然帅地的技术栈是后端开发，不过后端和前端显然是一对的，还是经常要和前端打交道，所以在之前也学习过不少前端的知识，下面总结的这套前端学习路线，是我参考了别人大量的学习经历 + 自己的思考 + 咨询前端大佬后提取出来的，可能不会像
前端开发工程师的基本工作流程
subsistent的博客
12-22 1730
7.2 目录：项目名，上线时间，项目状态，开发人员，后端开发人员，开发时间，产品功能点，实际上线功能点，提测时间，测试人员，产品，项目链接(原型图，接口文档，PED)，项目分支。6 自测指的是在联调结束后，确认接口及请求返回数据正常的情况下，进一步针对多场景的交互情况，传递不同的参数给后台，查看是否会出现问题，正常则该阶段通过。针对产品需求，如大幅度影响性能，用户体验，需求实现耗时长，不符合正常操作逻辑的，后续会被优化掉的。
web前端基础——第一章
ZiminLi的博客
10-19 2235
web前端基础
Web前端学习
m0_74232590的博客
10-20 2351
Web前端学习1
前端开发工程师学习路线图（收藏版）
weixin_51689029的博客
10-15 9488
在网上看到很多类似“前端现在是不是饱和了，是不是不好找工作了呀？”这类问题，就这类问题也和小伙伴进行了探讨，大家一致认为——不是前端饱和了，而是现在前端的工作在不断独立，门槛越来越高，再也不是只会三大基础就可以胜任的年代了。 前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的同学要注意，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候展现更大的优势。 缺人才，又薪资高，那么怎样才能成为一名前端工程师呢？ 前端工程师需要掌握的技能学习前端需要学习哪些知识？ 学习前端从哪里开始学习？
前端入职第一天该做什么?
laoli360的博客
10-25 5840
嘿嘿 很多学习的同志们 上岸了 拿到自己心仪的offer 准备入职 如果是第一次入职 难免会有很多的好奇和担忧,为了避免各位第一天麻爪,让别人感觉自己很low 这里我会描述入职第一天需要做什么,这里结合本人和网络上其他工作了数年前端经验的前端攻城狮的经验 对入职第一天需要做的事情进行总结: 数据来源于网络 如有侵权 请第一时间私信我,我会及时删除. 入职欢迎仪式 签订入职协议 新人入职培训 配置开发环境 开通相关账号 熟悉公司规范 熟悉项目代码 入职欢迎仪式 新..
WEB前端开发练习代码
tiantianzs的博客
01-11 6194
<!DOCTYPE html> <!-- HTML5申明 --> <html lang="zh"> <!-- 表示本网站为中文网站 --> <!-- 头部，定义网页标题和字体样式等 --> <head> <meta charset="UTF-8"> <!-- 定义网页为UTF-8编码 --> <title>Web前端开发技术初步应用</title> &l.
一年前端开发工程师简历_一年前，我开始学习编码，专注于前端开发。
cumi6497的博客
07-08 1667
一年前端开发工程师简历A year ago I started learning to code, focusing on front-end development. This was not completely new to me, as I’ve been doing this learning to code thing for a few years now. Most of the ...
6年全栈工程师回答：web前端的主要学习什么，现在还有前途吗？一般工资是多少？
在线学习web前端开发教程
12-21 1731
首选我不明白你为啥没有对前端工程师这个行业在有一定了解之后再展开学习，下面备注是说正在学习这个，我就一脸问号了(？？？？？) 可能你还是大学生吧，对于工资多少，不同地区，一线二线，三线四线城市都是有差异的，你可以通过招聘网站去看，眼见为实嘛！（这里推荐：智联招聘，拉勾网，BOSS直聘等…别去58同城，之前有些伙伴跟我说他去58同城上看前端的招聘，惊呆我了！） 首先，你想知道前端是个啥，那么你一定要...
零基础开始学 Web 前端开发，有什么建议吗？
Cangjie627的博客
06-20 593
掌握到应用开发层面，熟悉其中关键规则原理，能够进行开发实践，找一份10-15K的工作是非常简单的，在工作中用几年去消化吸收这些知识点，更进一步的掌握，年薪拿个三十万是没有任何问题的。......
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 387
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
easyexcel模板导出并且公式自动计算的方法
weixin_47615289的博客
09-11 447
【代码】easyexcel模板导出并且公式自动计算的方法。
JS笔记
2201_76100326的博客
09-11 521
Math对象属于Javascript内置对象，无需实例化（不需要添加new ），可以直接使用。只有一个Math.PI的属性。
uniapp中实现＜text＞文本内容点击可复制或拨打电话
最新发布
GoppViper的博客
09-16 227
标签时，会弹出一个操作菜单，用户可以选择复制电话号码或者直接拨打该号码。uni.setClipboardData用于实现复制功能，uni.makePhoneCall用于实现拨打电话功能。在上述代码中，当点击包含电话的。template 部分。
WebGL系列教程六（纹理映射与立方体贴图）
AIGIS的博客
09-12 1248
上一讲我们讲了如何使用索引绘制彩色立方体，还留了一个思考题：怎么让立方体的每个面都保持一个颜色?这一讲我们就来解决这个问题，并引出纹理映射和立方体贴图。其实这个词语还是比较好理解。见名知意，大概意思就是把纹理映射到某个地方，纹理是什么？现在你可以简单的认为纹理就是一张图片。把一张二维的图片映射到一个三维物体的表面，就叫纹理映射。本节我们从如何将立方体每个面的颜色改为相同的颜色开始，介绍到了如何将图片贴到立方体的表面，系统的分析了为什么不能再共用顶点，并将代码进行了修改，以及讲解了纹理坐标的使用。
Vue3中slot插槽的几种使用实践
小小默：进无止境
09-14 507
父组件子组件父组件中Category 组件标签内的东西将会呈现在子组件slot的位置（进行替换）。
Web前端开发工程师学习指南
成为一个优秀的前端开发工程师需要不断学习和实践，紧跟技术发展趋势，不断提升自己的综合技能，才能在这个竞争激烈的领域中立足。无论是学生、设计师、程序员还是其他职业背景的人，只要有热情和毅力，都有可能成为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值