WEB前端开发工程师 学习第一天
必备条件:
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:脚本语言(行为)
onclick=" 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>
效果图
好了今天学习就到这里了