渡课学习日记（2018/7/24）

学习内容

• 按照标准开发步骤临摹实例演练开发过程

作业完成进度

部分CSS代码：

/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    font-family: PingFangSC-Regular, Verdana, Arial, '微软雅黑','宋体';
    font-size: 14px;
    background-color: #fdfcf8;
}

div {
    background-color: #fdfcf8;
}

/* wrapper css*/
#wrapper {
    margin: 0 auto; /* DIV居中 */
    width: 1239px;
}

/* header-index css */
#header-index {
    width: 1210px;
    height: 100px;
    margin: 0 0 0 12px;
    /* margin-left: 12px; */
    background-color: #fdfcf8;
}

#header-index a, #header-index h1 {
    text-indent: -9999px;
    margin: 0;
    padding: 0;
    border: 0;
    overflow:hidden;
    float:left;
}

#header-index h1, #header-index a:link, #header-index a:visited  {
    width: 500px;
    height: 100px;
    background: transparent url(bg.png) 0 -150px no-repeat;
}

#header-index a:hover {
    background: transparent url(bg.png) 0 -250px no-repeat;
}

#searchui {
    margin:0;
    padding:0;
    width:306px;
    height:100px;
    background-color: transparent;
    float:right;
}

#searchui input.box {
    margin:0;
    margin-top:35px;
    width:256px;
    height:28px;
    background:#fdfdfd;
    font:12px Verdana, Arial, Helvetica, sans-serif;
    border:1px solid #ddd;
}

#searchui input.button {
    padding:0;
    margin:0;
    background:#AE4141;
    font:12px Verdana, Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    width:30px;
    height:30px;
}

/* navfirst css */
#navfirst {
    width: 1210px;
    height: 48px;
    margin: 0 0 0 12px;
    background-color: #E8E7E3;
}

div#navfirst ul#menu {
    height: 48px;
    width: 1210px;
    background: transparent url(bg.png) top left no-repeat;
    margin: 0;
    padding: 0;
    position: relative;
}

div#navfirst ul#menu li {
    margin:0;
    padding:0;
    list-style:none;
    position:absolute;
    top:0;
}

ul#menu li,ul#menu a {
    display: block;
    height: 48px;
    border-bottom:0;
}

#navfirst ul#menu li a {
    text-indent: -9999px;
    overflow:hidden;
    text-decoration: none;
}

#h {left:0;width:155px;}
#b {left:155px;width:157px;}
#s {left:312px;width:167px;}
#d {left:479px;width:158px;}
#x {left:637px;width:101px;}
#ws {left:738px;width:185px;}
#w {left:923px;width:177px;}

#h a:hover {background: transparent url(bg.png) 0 -48px no-repeat;}
#b a:hover {background: transparent url(bg.png) -155px -48px no-repeat;}
#s a:hover {background: transparent url(bg.png) -312px -48px no-repeat;}
#d a:hover {background: transparent url(bg.png) -479px -48px no-repeat;}
#x a:hover {background: transparent url(bg.png) -637px -48px no-repeat;}
#ws a:hover {background: transparent url(bg.png) -738px -48px no-repeat;}
#w a:hover {background: transparent url(bg.png) -923px -48px no-repeat;}

/*body.html #h                   {background: transparent url(bg.png) 0 -48px no-repeat;}
body.browserscripting #b     {background: transparent url(bg.png) -155px -48px no-repeat;}
body.serverscripting #s      {background: transparent url(bg.png) -312px -48px no-repeat;}
body.dotnet #d                   {background: transparent url(bg.png) -479px -48px no-repeat;}
body.xml #x                      {background: transparent url(bg.png) -637px -48px no-repeat;}
body.webservices #ws         {background: transparent url(bg.png) -738px -48px no-repeat;}
body.webbuilding #w      {background: transparent url(bg.png) -923px -48px no-repeat;}*/

/* navsecond css */
#navsecond {
    width: 180px;
    height: 350px;
    margin: 0 0 0 12px;
    float: left;
}

#navsecond {
  border:1px solid #E0E0E0;   /*设一个边框为1像素 实线  颜色*/
  width:178px;
  height:1840px;
  float: left;           
  background-color: rgb(252,253,248);   /*背景颜色*/
 }

div#navsecond h2, div#sidebar h2    {
    font-size: 14px;
    margin:0;
    padding:10px 0 5px 10px;
    color:#000;
    display:block;
    border-bottom:0px solid #ddd;
    font-family:'΢ÈíÑźÚ';
    }

div#navsecond h2#link_about, div#navsecond h2#link_help {
    font-size: 14px;
    margin:0;
    margin-left:10px;
    padding:0;
    color:#000;
    display:block;
    }

div#navsecond h2#link_about {
    margin-top:20px;
    margin-bottom:15px;
    }

div#navsecond h2#link_help  {
    margin-bottom:20px;
    }

div#navsecond h2#link_about a, div#navsecond h2#link_help a {
    display:inline;
    padding:0;
    font-size:14px;
    border-bottom:0px solid #ddd;
    text-decoration:none;
    color:#0479A7;
    }

div#navsecond h2#link_about a:hover, div#navsecond h2#link_help a:hover {
    border-bottom:1px solid #0479A7;
    color:#0479A7;
    background-color:transparent;
    }

div#navsecond ul, div#navsecond li, div#sidebar ul, div#sidebar li  {
    margin: 0;
    padding: 0;
    font-family:'΢ÈíÑźÚ';
    }


div#navsecond li, div#sidebar li    {
    list-style: none;
    }

div#navsecond a, div#sidebar a {
    display:block;
    padding:5px 0 5px 15px;
    font-size:12px;
    border-bottom:0px solid #ddd;
    text-decoration:none;
    }

div#navsecond ul a.active {
    background : #f5f5f5;
    color:#990000;
    } 


div#navsecond a:link, div#navsecond a:visited   {
    text-decoration : none;
    color:#000000;
    background : transparent;
    } 

div#navsecond a:hover   {
    text-decoration : none;
    color : #fff;
    background : #aaa;
    }
    /* ----------------------------------- navsecond ----------------------------------- */
    div#course {
        background:transparent url(/ui2017/bg.png) 0 -700px no-repeat;
        padding:66px 0 10px 0;
        }

    div#afterschool {
        background:transparent url(/ui2017/afterschool.png) 0 0 no-repeat;
        padding:45px 0 10px 0;
        }

    div#selected {
        background:transparent url(/ui2017/bg.png) -200px -700px no-repeat;
        padding:45px 0 10px 0;
        }

/* maincontent css */
#maincontent {
    width: 850px;
    height: 320px;
    padding: 30px 0 0 0;
    float: left;
}

div.idea {
    border-bottom: 1px solid rgb(170,170,170);    /*在一个声明中设置下边框属性*/
    width: 810px;
}

#d1 {
    position: relative;     
    left: 272px;
    bottom: 1670px;            /*相对定位 右移  上移*/
    text-align: center;
    font-size: 16px;           /*字体大小*/
    line-height: 40px;         /*行高*/
    padding-bottom: 23px;      /*横线下移*/
}

div.idea {
    border-bottom: 1px solid rgb(170,170,170);    /*在一个声明中设置下边框属性*/
    width: 810px;
}
#d1 {
    position: relative;     
    left: 272px;
    bottom: 1670px;            /*相对定位 右移  上移*/
    text-align: center;
    font-size: 16px;           /*字体大小*/
    line-height: 40px;         /*行高*/
    padding-bottom: 23px;      /*横线下移*/
}

/* sidebar css */
#sidebar {
    width: 180px;
    height: 320px;
    padding: 30px 0 0 0;
    float: left;
}

#sidebar {
  border:1px solid #E0E0E0;   /*设一个边框为1像素 实线  颜色*/
  width:178px;
  height:1800px;
  float: left;          /* 浮动 */
  background-color: rgb(252,253,248);   /*背景颜色*/
 }

 #sidebar h2 {        
     line-height: 40px;
     font-size: 14px;  
 }
 #sidebar li {
     list-style-type: none;
     line-height: 26px;
 }
 #sidebar li a {
     position: relative;
     left: 0px;                      
     top: 8px;
     color: rgb(144,11,9);
     font-size: 12px; 
     text-decoration: none;       /*去除下划线*/
     padding: 1px 0px 1px 20px;
 }
 #sidebar li a:hover {
     background-color: rgb(189,45,48);
     color: white;
     display: block;
 }
/* footer css */
#footer {
    clear: both; /* 清除浮动 */
    width: 1210px;
    height: 78px;
    margin: 0 0 0 12px;
}

学习总结

• 今天跟老师一起临摹代码，总结经验，让自己更加清楚自己差在哪些细节上，才能更好的完成临摹