黑马程序员技术交流社区
标题:
前端13期
[打印本页]
作者:
狄远雷
时间:
2018-9-12 19:18
标题:
前端13期
你们好！我是一名来自黑程序员前端13期的学弟弟弟弟
因为朋友的推荐就来了黑马
来之前根本没有接触过前端是什么东西 也不知道前端是什么东西
因为已经离开校园很久了 所以刚开始来几天会很不习惯 不过克服就好了
怎么说呢 这里算是对学生比较负责的一个培训机构 是半军事化管理 每天都要收手机 而且学习氛围非常好 每个人都在学习
你又没有手机 所以你除了学习没有什么事可以做了
这条求学的路上 充满了无尽的困难和挫折 每天7.00就要起床学习到晚上十点 对于我来说几乎是不可能做到的 但还是做到了
因为古人为了求学跋千山涉万水 现代人也不应该退缩 学习的话我相信每个人都能学会的 就在于自己想不想学
前进的道路难免遇见风雨 在风雨中前行难免遇见泥泞 在自己最想放弃的时候 给自己一个坚持下去的理由 加油！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
接下来就是我觉得比较精彩的几种学习方法
尽量不要通过阅读纸质书来学习前端，因为行业的技术更新可比书本的出版快了好几倍，你见过今年发表的新技术能在书籍上面看到吗？醒醒吧 看书只能学习基础知识，但如果花太多时间研究那些基础 等于浪费生命。
多多阅读浏览博客和一些知识分享平台，如知乎，w③cschool。博客园和CSDN和一些优秀的博客网站，里面的作者都是具有扎实的根底和技术的开发者，然后找到前端这一块 内容的数量你是无法想象的。所以可以按照自己的需求和阅读习惯选择相应的博主，实时浏览他的文章和技术风格。知乎是国内计较出名的知识分享平台，里面的用户早已数亿，相对于活跃度，精炼的内容也是非常的多的。
下载一款适合自己的前端编辑工具，或者学习工具。hbuilder，sublime都可以依个人喜好吧！前端如开车，不实际操作永远不会轻车熟路。这些编辑工具目前都算比较完善了，可以自己研究！
接下来就是我稍微写的一个页面的一些代码
fl a {
/*padding: 5px;*/
/*color: #c81623;*/
}
.you ul li {
list-style: none;
display:inline-block;
/*padding: 0 10px;*/
/*border-right:1px solid;*/
/*height: 20px;*/
}
.xian {
width: 1px;
height: 12px;
background-color: #666;
margin: 9px 12px 0;
}
.gou {
height: 105px;
/*border:1px solid pink;*/
/*background-color: pink;*/
/*相对定位*/
position: relative;
}
.logo {
/*绝对定位*/
position: absolute;
top: 25px;
left: 0;
display: block;
width: 175px;
height: 56px;
}
.logo {
display: block;
width: 175px;
height: 56px;
background:url(../img/logo.png) no-repeat;
font-size: 0;
}
.sousuo {
margin-top: -23px;
position: absolute;
top: 51px;
left: 323px;
}
.text {
width: 445px;
height: 32px;
border: 2px solid #b1191a;
color: #ccc;
padding-left: 10px;
/*margin-top: 50px;*/
}
.btn{
width: 85px;
height: 36px;
border: 0px solid #b1191a;
position: absolute;
top: 0px;
right: 27px;
background-color: #b1191a;
color: #fff;
font-size: 16px;
/*没有框框*/
outline: none;
}
.re {
/*position: absolute;
left: 348px;
top: 40px;*/
width: 550px;
height: 30px;
margin: 0 10px;
}
.fa {
color: #c81623;
}
.re {
/*padding: 10px 10px;*/
margin: 10px 10px;
}
.re a {
margin-left: 10px;
}
.gou2 {
position: absolute;
width: 138px;
height: 30px;
border: 2px solid #dfdfdf;
top: 0;
right: -260px;
line-height: 30px;
text-align: center;
background-color: #f7f7f7;
}
.nav2 {
height: 45px;
border-bottom: 2px solid #b1191a;
}
.quan {
width: 206px;
height: 45px;
background-color:#b1191a;
color: #fff;
font-size: 16px;
text-align: center;
line-height: 45px;
}
.fz li a {
float: left;
width: 65px;
font-size: 16px;
padding: 11px 20px;
}
.fenlei {
height: 630px;
background-color: #fff;
}
.fena {
float: left;
background-color: #c81623;
width: 206px;
height: 465px;
}
.fena ul a {
font-size: 14px;
color: #fff;
height: 31px;
line-height: 31px;
margin-left: 1px;
padding: 0 8px;
}
.fena ul span {
color: #fff;
font-size: 14px;
float: right;
padding: 0 8px;
font-size: 14px;
font-weight: 700;
}
.fena ul {
border-left: 1px solid #c81623;
}
.fena li:hover a {
background-color: #fff;
color: #c81623;
}
.fena li:hover {
background-color: #fff;
}
.da {
position: relative;
float: left;
width: 721px;
height: 455px;
/*background-color: #666;*/
margin-left:10px;
margin-top: 10px;
}
.zuoa{
display: block;
position: absolute;
width: 24px;
height: 40px;
background-color:rgba(0,0,0,0.3);
top: 50%;
margin-top: -20px;
font-size: 25px;
color: #fff;
line-height: 40px;
text-align: center;
}
.youa {
position: absolute;
width: 24px;
height: 40px;
background-color:rgba(0,0,0,0.3);
top: 50%;
right: 0px;
margin-top: -20px;
font-size: 25px;
color: #fff;
line-height: 40px;
text-align: center;
}
.baoa {
width: 250px;
height: 455px;
/*background-color: #666;*/
margin-top: 10px;
}
.baob{
height: 163px;
border: 1px solid #ccc;
}
.baoc{
height: 32px;
border-bottom: 1px dotted #ccc;
padding: 0 15px;
font-size: 14px;
line-height: 32px;
}
.baoc a {
float: right;
font-size: 12px;
font-family: 'icomoon'
}
.baod a {
display: block;
margin: 6px 6px 0px 6px;
}
.baoe {
height: 208px;
border: 1px solid #ccc;
border-top: none;
}
.baoe ul {
width: 252px;
}
.baoe li {
text-align: center;
position: relative;
float: left;
width: 61px;
height: 69px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.baoe ul div {
/*背景图路径*/
background-image: url(../img/icons.png);
/*绝对定位*/
background-position: -18px -15px;
width: 20px;
height: 26px;
margin: 10px auto;
margin-bottom: 5px;
/* background-image: url(img/icons.png) -17px;*/
}
.baot {
height: 75px;
margin-top: 5px;
}
.daoa {
float: left;
height: 163px;
margin-top: 10px;
background-color: red;
}
.daoa a {
text-align: center;
}
.daob {
float: left;
width: 200px;
height: 163px;
background-color: #5c5251;
text-align: center;
}
.daob img {
margin: 30px 0 10px 0;
}
.daob h3 {
font-size: 18px;
color: #fff;
font-weight: normal;
}
.daoc {
width: 1000px;
height: 163px;
background-color: #ebebeb;
}
.daoc li {
float: left;
width: 245px;
height: 145px;
border-right: 1px solid #ccc;
margin-top: 10px;
}
.di {
height: 386px;
background-color: red;
padding: 30px;
}
.dia {
/*width: 1200px;*/
height: 392px;
/*background-color: red;*/
}
.dib {
height: 30px;
border-bottom: 2px solid #c81623;
margin-top: 25px;
}
.dic {
float: left;
height: 32px;
}
.dib h3 {
display: inline-block;
float: left;
font-size: 18px;
color: #c81623;
}
.did ul li {
display: inline-block;
float: right;
line-height: 32px;
}
.did ul a {
margin: 10px;
}
.die {
position: relative;
height: 360px;
/*background-color: red;*/
}
.dif {
float: left;
height: 306px;
width: 209px;
/*background-color: pink;*/
}
.dij a {
display: inline-block;
color: #666;
margin: 5px 5px;
}
.dii a {
margin: 5px 5px;
display: inline-block;
}
/*盒子过渡*/
.dif img:hover{
padding-left: 10px;
}
.dif img {
transform: all 100s;
}
.die img {
margin-left:10px;
}
.die img:hover {
padding-left: 10px;
}
.dif img {
transform: all 10s;
}
.imga {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
position: absolute;
left: 540px;
}
.imgb {
position: absolute;
bottom: 0px;
left: 540px;
}
.imgc {
position: absolute;
right: 210px;
}
.imge {
border: 1px solid #ccc;
position: absolute;
right: -11px;
}
.imgf {
position: absolute;
bottom: 0px;
right: 0px;
}
.dibua {
height: 450px;
/*border-top: 3px solid #c81623;*/
}
.dibub {
border-bottom: 3px solid #c81623;
height: 50px;
font-size: 15px;
color:#c81623;
}
.dibub h3 {
float: left;
margin-top: 20px;
}
.dibuc ul li a {
margin: 0 5px;
margin-top: 25px;
float: right;
}
.dibud {
display: inline-block;
width: 1200px;
height: 50px;
}
.dibue {
float: left;
width: 209px;
height: 360px;
}
.dibue li {
float: left;
width: 86px;
height: 33px;
line-height: 32px;
border-bottom: 1px solid #ccc;
margin-left: 10px;
text-align: center;
}
.tupiana {
width: 307px;
float: left;
}
.tupianb {
float: left;
}
.tupianf{
width: 245px;
float: left;
}
.tupiand,
.tupiane {
float: left;
}
.tupianj {
float: left;
width: 220px;
}
.tupiane {
width: 219px;
float: left;
}
.foota {
height: 386px;
background-color:#f5f5f5;
padding-top: 30px;
}
.footb {
height: 79px;
border-bottom: 1px solid #ccc;
}
.footc.footd {
background-position: -253px -3px;
}
.footb li {
float: left;
width: 240px;
height: 79px;
}
.footc {
margin-left: 35px;
float: left;
width: 50px;
height: 50px;
background: url(../img/icons.png) no-repeat;
}
.foote {
float: left;
margin-left: 5px;
}
.footf {
height: 187px;
border-bottom: 1px solid #ccc;
}
.footj {
float: left;
width: 150px;
padding: 20px 0 0 50px;
}
.footj dt {
height: 25px;
font-size: 16px;
}
.footj dd {
height: 22px;
}
.footh dt {
font-size: 16px;
height: 25px;
padding: 20px 0 0 50px;
}
.footg p {
text-align: center;
margin: 20px 0 15px 0;
}
.footk {
text-align: center;
}
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2
来之前根本没有接触过前端是什么东西 也不知道前端是什么东西
