[前端与移动开发] 前端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;
   }

帐号		自动登录	找回密码
密码			加入黑马

[前端与移动开发] 前端13期

0 个回复