web前端开发网页制作html/css结课作业
效果图展示：
注意事项：
引用JQuery文件地址和图片地址要更换一下。
百度网盘链接：
http://链接：https://pan.baidu.com/s/1wYkmLr7csjBwQY6GmlYm4Q?pwd=4332 提取码：4332
html界面展示：
main.css代码部分：
@keyframes load {0% {width:0%;} 100% {width:100%;}}
.trent-slider {float:right;width:660px;position:relative;overflow:hidden;}
.t-slide {position:absolute;left:0;right:0;bottom:0;top:0;transition:.30s;}
.t-slide img {width:660px; height:301px;float:right;margin-top:5px;}
.t-slider-controls {height:311px;position:absolute;top:0;bottom:0;left:0;right:0;}
.t-slider-controls .arrow {height:311px;min-height:100%;width:50px;position:relative;transition:.10s;}
.t-slider-controls .arrow:hover {cursor:pointer;}
.t-slider-controls .right-arrow {height:311px;float:right;}
.t-slider-controls .left-arrow {height:311px;float:left;}
.t-slider-controls .arrow .arrow-container {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:20px;}
.t-slider-controls .arrow .arrow-container .arrow-icon {position:relative;width:42px;height:42px;color:#fafafa;border-radius:50%;}
.t-slider-controls .arrow .arrow-container .arrow-icon i {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.t-slider-controls .t-load-bar {position:absolute;right:0;top:301px;width:661px;height:5px;}
.t-slider-controls .t-load-bar .inner-load-bar {background:rgba(200,200,200,0.65);height:100%;}
.t-slider-controls .t-dots-container {position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:20px;min-width:350px;}
.t-slider-controls .t-slide-dots-wrap {height:100%;width:100%;position:relative;}
.t-slider-controls .t-slide-dots {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:table;content:"";clear:both;}
.t-slider-controls .t-slide-dots .t-dot {background:#fafafa;width:8px;height:8px;margin:5px 5px 0;float:left;border-radius:50%;transition:.30s;}
.t-slider-controls .t-slide-dots .t-dot.current-dot,.t-slider-controls .t-slide-dots .t-dot:hover {transform:scale(1.65);cursor:pointer;}
/*close slider css*/
@media screen and (min-width:768px) {.t-slider-controls .arrow:hover {background:rgba(0,0,0,0.32);}}css.css代码部分：
@charset "utf-8";
/* CSS Document */
*{
margin:0 auto;
padding:0;
text-decoration:none;
}
body{
background:url(../images/bg.png);
background-repeat:no-repeat;
background-size:100%;
}
#heada{width:100%;}
#hezia{width:1000px;}
#hezib{width:1000px;}
#hezic{width:1000px;}
#hezid{width:1000px;}
#f{
height:40px;
background-color:#f6f6f6;
box-shadow:1px 1px 1px #dfdfdf;
}
#fa{
width:1000px;
height:40px;
}
#fa p{
font-family:"宋体";
font-size:12px;
position:relative;
top:17px;
}
#fa p font{
position:relative;
bottom:3px;
color:#434343;
font-size:13px;
}
#fb{
width:1000px;
height:110px;
}
#fba{
width:430px;margin-left:0;
}
#fbax{
width:200px;
margin-left:0;
}
#fbax span{
position:relative;
top:25px;
left:5px;
}
#fbb{
width:150px;
position:relative;
left:550px;
bottom:80px;
}
#fbbx{
position:relative;
left:50px;
bottom:43px;
}
#fbbx span{
letter-spacing: 2px;
}
#fbbxx{
position:relative;
bottom:39px;
left:115px;
background-color:#eb7f0a;
width:140px;
height:36px;
}
#fbbxx img{
position:relative;
left:20px;
top:10px;
}
#fbbxx a{
position:relative;
left:27px;
top:4px;
color:#FFF;
}
#heada{margin:0 auto;}
/* .atx{
text-align:center;
background-color:#1f78dd;
padding:10px 0;
margin-left:5px;
}
.atx a{
color:#FFF;
padding:10px 18px;
border-right:0.5px #4fa7ef solid;
font-size:16px;
}
.atx a:hover{background-color:#eb7f0a;} */
.atxb {
font-size:14px;
width:100%;
text-align:center;
background-color:#f4f4f4;
padding:5px 0;
box-shadow:1px 1px 1px #CCC;
}
.atxb a{
padding:0 10px;
position:relative;
right:300px;
color:#7e7e7e;
border-right:1px solid #7e7e7e;}
.atxb a:hover{color:#1e60b6;}
.atxblack{color:black;}
#hezia{margin-top:10px;}
.boxa{
float:left;
width:330px;
margin-top:5px;
background-color:#f2f2f2;
}
.boxax b{margin-top:10px;}
.boxax hr{margin:0 0 5px;}
.boxax{
width:330px;
height:296px;
}
.boxax img{float:left;margin:5px 15px 0 10px;}
.boxaxx{width:330px;height:105px;}
.boxbr li{list-style-type:none;line-height:30px;}
.boxa li a{font-size:14px;}
.boxbr{
position:relative;bottom:10px;
border:1px solid #f2f2f2;
border-top:1px solid #2c72d4;
float:right;
width:280px;
background-color:#FFF;
line-height:45px;
}
.boxbr a{
font-family:"宋体";
font-size:16px;
border-radius:5px;
display:inline-block;
margin:10px 5px;
color:#FFF;
}
.boxbl{
position:relative;bottom:10px;
float:left;
width:700px;
background-color:#FFF;
border:3px #eaeaea solid;
}
.boxbl li{list-style-type:none;}
.boxbll{
float:left;
width:200px;
margin:0 20px;
}
.boxbll p,.boxblm p,.boxblr p{
text-align:center;
margin-bottom:10px;
}
.boxbll p{color:c76a06;}
.boxblm{width:200px;}
.boxblr{
float:right;
width:200px;
margin:0 20px;
}
.boxcr{float:right;}
.boxca{
width:700px;
height:30px;
border-bottom:2px solid #3775d0;
margin-bottom:20px
}
.boxcl{
float:left;
width:700px;
margin-top:20px;
}
.boxcl img,.boxd img{ border:4px solid #FFF;box-shadow: 0 0 0 1px #f2f2f2;}
.boxclr{
float:right;
width:470px;
}
.boxcy{
float:right;
width:280px;
border:1px solid #f2f2f2;
margin:10px 0 0 10px;
}
.boxd{
width:700px;
float:left;
margin-top:20px;
}
.boxd340{
width:340px;
float:left;
}
.boxax li{margin-left:30px;}
.boxd340 li{margin-left:20px;}
.boxd340 li a{font-size:14px;}
.boxda{
width:340px;
float:left;
margin-bottom:10px;
border-bottom:1px dashed #c7c7c7;
}
.boxdb{
position:relative;
left:20px;
width:340px;
float:right;
margin-bottom:10px;
border-bottom:1px dashed #c7c7c7;
}
.boxdba{
position:relative;
left:20px;
width:340px;
float:right;
}
.boxdxf{
width:215px;
float:right;
}
.boxdy{
float:right;
width:280px;
margin-top:10px;
border-top:1px solid #2c72d4;
border-left:1px solid #f2f2f2;
border-right:1px solid #f2f2f2;
border-bottom:1px solid #f2f2f2;
}
.boxdy li{
color:#ee7a01;
font-size:12px;
line-height:30px;
margin-left:20px;
}
.boxdy li a{color:#5b5b5b;}
.boxdy input{margin:5px 13px;}
#end{
position:absolute;
left:0;
top:1730px;
float:left;
width:100%;
background-color:#eeeeee;
border-top:4px solid #dfdfdf;
}
.endax{
width:1000px;
height:30px;
margin-bottom:20px;
}
.enda{
margin:0 auto;
width:1000px;
margin-bottom:20px;
}
.boxe{
float:left;
width:135;
height:25px;
margin:5px 30px;
}
.enda tr{line-height:30px;}
.enda td{
width:166px;
}
.enda p{
color:#363636;
margin:20px 0;
font-size:20px;}
.enda p a{color:#c76a06;}
.endb{
width:1000px;
margin-top:10px;
margin-bottom:20px;
}
.endb p{
color:#5b5b5b;
font-size:12px;
line-height:50px;
text-align:center;
}
/* 导航条 */
.nav li a{
color:#FFF;
font-size:18px;
}
.nav ul{width:1000px;}
.nav li{
color:#FFF;
padding:0px 25px;
border-right:1px solid #FFF;
position:relative;
left:20px;
top:10px;
z-index:999;
}
.nav{
width:100%;
height: 40px;
text-align:center;
background-color:#1f78dd;
}
.navItem{
float: left;
width:0 auto;
display: block;
}
.navItem:hover{
background-color: #eb7f0a;
color: #FFF;
}
.dropList{
background-color:#f2f2f2;
clear: both;
text-align:left;
position: absolute;
top:20px;
margin:0;
padding:5px ;
border:1px solid #000;
border-radius:8px;
display: none;
width: 260px !important;
}
.dropList li a{color:#1e60b6;}
.dropList li {
margin:0px;
position:static;
z-index:999;
border-bottom:1px solid #000;
padding:5px 20px;
color:#FFF;
}
.dropItem:hover{
background-color:#eb7f0a;
color: white;
}
.navItem:hover .dropList{
display:block;
}
.one,.two,.three,.four{
opacity:0.6;
background-color:#000;
text-align:center;
color:#FFF;
}
.one{
float:right;
position:relative;
right:218px;
bottom:155px;
width:112px;
height:20px;
font-size:14px;
}
.two{
position:relative;
right:377px;
top:538px;
width:200px;
height:30px;
font-size:15px;
z-index:500;
}
.three{
position:absolute;
right:892.5px;
top:766px;
width:200px;
height:30px;
font-size:15px;
z-index:500;
}
.four{
position:absolute;
right:662.5px;
top:766px;
width:200px;
height:30px;
font-size:15px;
z-index:500;
}
html界面代码部分：
结课作业
北京大学与公众演讲与管理沟通课题组唯一教学基地!
分享到:
文若河老师
精品推荐
-
- 参加对象：职场白领、中层管理者
- 学习时间：3天（周五、周六、周日）
- 上课地点：北京大学、复旦大学
- 收费标准：4800元
- 查看更多>>
企业总裁演讲顾问
专为千万级企业总裁打造高端服务
著名演讲力培训专家，“口才树”理论体系创始人，“演讲力”概念提出者，北京大学公众演讲与管理沟通课题组组长，中国演讲与口才协会副秘书长，“张嘴就来”演讲力训练机构首席演讲师。
“演讲顾问”业务是文若河老师及其专家团队为企业总裁、企业高管等高端客户提供的，以提升其演讲实战水平和综合素质...
顾问方式：
常年演讲顾问或演讲个案辅助
- [内训报道]张嘴就来”演讲力培训走进重庆02/29
- [演讲技巧]领导者讲话时要注重策略性02/29
- [培训现场]洛克菲勒长白山学院开讲演讲力02/29
- [学员风采]演讲给我正能里，让我心态更加年轻02/29
- [内训报道]张嘴就来”演讲力培训走进重庆02/29
- [演讲技巧]领导者讲话时要注重策略性02/29
- [内训报道]张嘴就来”演讲力培训走进重庆02/29
- [演讲技巧]领导者讲话时要注重策略性02/29
- [培训现场]洛克菲勒长白山学院开讲演讲力02/29
- [学员风采]演讲给我正能里，让我心态更加年轻02/29
- [内训报道]张嘴就来”演讲力培训走进重庆02/29
- [演讲技巧]领导者讲话时要注重策略性02/29
