同步课程
在线测试
精品课程
UI设计前端大作业（小U课堂）
UI设计前端大作业（小U课堂）
文章开始把我喜欢的这句话送个大家：这个世界上还有什么比自己写的代码运行在一亿人的电脑上更酷的事情吗，如果有那就是让这个数字再扩大十倍！！！
如果你是入门前端页面编写，那么这个商城项目就将会是个不错的入门选择，用到html和css。总代码以及素材附在文章底下百度网盘中。
ps:如报错，需根据自己的背景路径位置自行调整！！！
首先我们来看一下效果图
首页页面：
同步课程页面：
在线联系页面：
下面附上代码：
首页页面
html代码：
小U课堂主页
css代码：
*{margin:0;padding:0;}
body{font-family:"微软雅黑";}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
img{border:0;}
ul{list-style:none;}
a{text-decoration:none;color: white;}
.clear{ /*消除行块间距*/
clear: both;
}
#header{
height: 80px;
box-shadow:0px 2px 3px #aaaaaa; /*给div加阴影*/
}
#header #header_child{
width: 1180px;
height: 80px;
margin: 0 auto;
}
#header #header_child #header_left{
width: 180px;
height: 80px;
float: left;
}
#header #header_child #header_middle{
float: left;
margin-left: 122px;
}
#header #header_child #header_middle li{
float: left;
margin-left: 0px;
}
#header #header_middle a {
display: block; /*把a标签块状化*/
height: 80px;
line-height: 80px;
padding: 0 23px 0 26px;
color: black;
}
#header #header_middle a:hover {
background: rgb(116,197,178);
color: white;
transition: all 0.2s;
}
#header #header_child #header_right_r{
width: 76px;
height: 80px;
float: right;
}
#header_right_r p{
font-size: 15px;
color: black;
float: right;
line-height: 80px;/*文字水平居中*/
padding-right: 2px;
}
#header_right_r p a{
color: black;
}
#header_right_r p a:hover{
color: #AAAAAA;
}
#header #header_child #header_right_l{
width: 282px;
height: 80px;
float: right;
margin-right: 10px;
}
#header_right_l #header_right_l_1 select{
width: 70px;
height: 35px;
margin-top: 25px;
float: left;
color: rgb(116,197,178);
background-color: white;
border-radius: 5px 0 0 5px;
border: solid 2px rgb(116,197,178);
padding-left: 10px;
}
#header_right_l #header_right_l_2 input{
width: 208px;
height: 31px;
margin-top: 25px;
float: left;
border-radius: 0 5px 5px 0;
border: solid 2px rgb(116,197,178);
border-left: none;
background: url(../img/search.png)no-repeat; /*设置背景图片,不重复*/
background-size: 25px 25px; /*背景图片大小和位置*/
background-position: 170px 3px;
outline: none; /*去掉输入框的外边框*/
}
#banner{
margin-top: 37px;
}
#banner_child{
width: 1180px;
height: 350px;
margin: 0 auto;
}
#main_1{
width: 1180px;
margin: 0 auto;
margin-top: 53px;
}
#main_1_title_1{
padding-left: 18px;
color: black;
font-size: 22px;
border-left: 6px rgb(116,197,178) solid;
float: left;
}
#main_1_title_2 a{
color: rgb(116,197,178);
font-size: 15px;
float: right;
margin-top: 15px;
}
#main_2{
width: 1180px;
margin: 0 auto;
}
.main_2_div{
width: 280px;
height: 226px;
float: left;
margin-left: 20px;
margin-top: 22px;
box-shadow:0 0 3px #aaaaaa; /*x轴偏移量 y轴偏移量 大小 颜色*/
background: url(248,248,248);
}
.main_2_div_bottom_left1{
font-size: 13px;
margin-top: 8px;
margin-left: 10px;
}
.main_2_div_bottom_left2{
font-size: 11px;
margin-top: 8px;
margin-left: 10px;
}
.main_2_div_bottom_right{
width: 85px;
height: 30px;
background: rgb(116,197,178);
float: right;
float: right;
border-radius: 8px;
text-align: center;
line-height: 25px;
margin-top: -35px;
margin-right: 10px;
}
#main_3{
margin-top: 25px;
}
#main_3_child{
width: 1180px;
height: 186px;
margin: 0 auto;
}
#main_4{
width: 1180px;
margin: 0 auto;
margin-top: 53px;
}
#main_4_title_1{
padding-left: 18px;
color: black;
font-size: 22px;
border-left: 6px rgb(116,197,178) solid;
float: left;
}
#main_4_title_2 a{
color: rgb(116,197,178);
font-size: 15px;
float: right;
margin-top: 15px;
}
#main_5{
width: 1180px;
margin: 0 auto;
}
.main_5_div{
width: 379px;
height: 226px;
float: left;
margin-left: 20px;
margin-top: 22px;
box-shadow:0 0 3px #aaaaaa; /*x轴偏移量 y轴偏移量 大小 颜色*/
background: url(248,248,248);
}
.main_5_div_bottom_left1{
font-size: 13px;
margin-top: 8px;
margin-left: 10px;
}
.main_5_div_bottom_left2{
font-size: 11px;
margin-top: 8px;
margin-left: 10px;
}
.main_5_div_bottom_right{
width: 85px;
height: 30px;
background: rgb(116,197,178);
float: right;
float: right;
border-radius: 8px;
text-align: center;
line-height: 25px;
margin-top: -35px;
margin-right: 10px;
}
#main_6{
width: 1180px;
margin: 0 auto;
margin-top: 53px;
}
#main_6_title_1{
padding-left: 18px;
color: black;
font-size: 22px;
border-left: 6px rgb(116,197,178) solid;
float: left;
}
#main_6_title_2 a{
color: rgb(116,197,178);
font-size: 15px;
float: right;
margin-top: 15px;
}
#main_7{
width: 1180px;
margin: 0 auto;
}
.main_7_div{
width: 280px;
height: 226px;
float: left;
margin-left: 20px;
margin-top: 22px;
box-shadow:0 0 3px #aaaaaa; /*x轴偏移量 y轴偏移量 大小 颜色*/
background: url(248,248,248);
}
.main_7_div_bottom_left1{
font-size: 13px;
margin-top: 8px;
margin-left: 10px;
}
.main_7_div_bottom_left2{
font-size: 11px;
margin-top: 8px;
margin-left: 10px;
}
.main_7_div_bottom_right{
width: 85px;
height: 30px;
background: rgb(116,197,178);
float: right;
float: right;
border-radius: 8px;
text-align: center;
line-height: 25px;
margin-top: -35px;
margin-right: 10px;
}
#main_7_div_7{
width: 280px;
height: 474px;
float: right;
border-radius: 5px;
margin-top: 21px;
}
#main_8_child{
width: 1180px;
margin: 0 auto;
margin-top: 110px;
}
#main_8_1,#main_8_2,#main_8_3{
float: left;
margin-left: 20px;
}
#main_8_1{
margin-left: 0;
}
#footer {
margin-top: 30px;
padding-top: 75px;
background-color: rgb(51,51,51);
}
#footer_child{
width: 1180px;
margin: 0 auto;
}
.footer_1_a,#none{
float: left;
padding-left: 10px;
padding-right: 10px;
border-left: 2px solid whitesmoke;
}
.footer_1 a,#none a{
font-size: 12px;
color: whitesmoke;
}
#none{
border-left: none;
margin-left: 30px;
}
.foot_2,#foot_3{
margin-top: 25px;
}
.foot_2 p,#foot_3 p{
font-size: 12px;
color: whitesmoke;
text-align: center;
}
#foot_3 p{
padding-bottom: 75px;
}
#111{
height: 70px;
width: 70px;
position: fixed;
right: 20px;
bottom: 40px;
}同步课程页面
html代码：
在线练习
上一页
1
2
3
4
5
6
7
8
9
下一页
css代码：
*{margin:0;padding:0;}
body{font-family:"微软雅黑";}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
img{border:0;}
ul{list-style:none;}
a{text-decoration:none;color: white;}
.clear{ /*消除行块间距*/
clear: both;
}
#header{
height: 80px;
box-shadow:0px 2px 3px #aaaaaa; /*给div加阴影*/
}
#header #header_child{
width: 1180px;
height: 80px;
margin: 0 auto;
}
#header #header_child #header_left{
width: 180px;
height: 80px;
float: left;
}
#header #header_child #header_middle{
float: left;
margin-left: 122px;
}
#header #header_child #header_middle li{
float: left;
margin-left: 0px;
}
#header #header_middle a{
display: block; /*把a标签块状化*/
height: 80px;
line-height: 80px;
padding: 0 23px 0 26px;
color: black;
}
#header #header_middle a:hover {
background: rgb(116,197,178);
color: white;
transition: all 0.2s;
}
#header #header_child #header_right_r{
width: 76px;
height: 80px;
float: right;
}
#header_right_r p{
font-size: 15px;
color: black;
float: right;
line-height: 80px;/*文字水平居中*/
padding-right: 2px;
}
#header_right_r p a{
color: black;
}
#header_right_r p a:hover{
color: #AAAAAA;
}
#header #header_child #header_right_l{
width: 282px;
height: 80px;
float: right;
margin-right: 10px;
}
#header_right_l #header_right_l_1 select{
width: 70px;
height: 35px;
margin-top: 25px;
float: left;
color: rgb(116,197,178);
background-color: white;
border-radius: 5px 0 0 5px;
border: solid 2px rgb(116,197,178);
padding-left: 10px;
}
#header_right_l #header_right_l_2 input{
width: 208px;
height: 31px;
margin-top: 25px;
float: left;
border-radius: 0 5px 5px 0;
border: solid 2px rgb(116,197,178);
border-left: none;
background: url(../img/search.png)no-repeat; /*设置背景图片,不重复*/
background-size: 25px 25px; /*背景图片大小和位置*/
background-position: 170px 3px;
outline: none; /*去掉输入框的外边框*/
}
#banner_child{
width: 1180px;
margin: 0 auto;
margin-top: 25px;
}
#banner_child_left{
width: 865px;
height: 585px;
float: left;
box-shadow:0 0 5px #aaaaaa; /*x轴偏移量 y轴偏移量 大小 颜色*/
}
#banner_child_right{
width: 310px;
height: 585px;
hanging-punctuation: 585px;
float: right;
}
.p1{
font-size: 22px;
margin-top: 75px;
text-align: center;
padding-bottom: 15px;
}
.p2{
font-size: 15px;
margin-top: 15px;
margin-left: 37px;
}
#banner_child_right div p{
float: left;
}
.red{
color: red;
}
#banner_child_right_199{
font-size: 30px;
margin-top: 100px;
color: rgb(116,197,178);
margin-left: 37px;
float: left;
}
#banner_child_right_free{
width: 130px;
height: 50px;
float: right;
margin-top: 95px;
font-size: 17px;
color: rgb(116,197,178);
text-align: center;
border: 3px rgb(116,197,178) solid;
border-radius: 10px;
margin-right: 25px;
line-height: 45px;
}
#banner_child_right_bottom{
width: 260px;
height: 34px;
background: rgb(116,197,178);
margin-top: 165px;
margin-left: 24px;
border-radius: 10px;
padding-top: 11px;
}
#banner_child_right_bottom a{
font-size: 17px;
border-left: 2px white solid;
padding-left: 12px;
padding-right: 12px;
}
#banner_2{
width: 1180px;
height: 158px;
margin-top: 18px;
box-shadow:0 0 3px #aaaaaa; /*x轴偏移量 y轴偏移量 大小 颜色*/
}
#banner_2 #p1{
font-size: 22px;
margin-top: 22px;
margin-left: 10px;
}
#banner_2_left{
width: 250px;
height: 60px;
border-right: 2px rgb(116,197,178) solid;
margin-top: 25px;
margin-left: 24px;
float: left;
}
#banner_2 img{
float: left;
}
#banner_2 #p2{
font-size: 20px;
float: left;
margin-left: 20px;
}
#banner_2 #p3{
font-size: 18px;
float: left;
margin-left: 20px;
margin-top: 10px;
}
#banner_2_right{
float: right;
width: 835px;
height: 60px;
margin-top: 20px;
margin-right: 30px;
}
#main_child{
width: 1180px;
margin: 0 auto;
margin-top: 20px;
box-shadow:0 0 3px #aaaaaa; /*x轴偏移量 y轴偏移量 大小 颜色*/
}
#main_1 ul{
margin-left: 480px;
}
#main_1 a{
display: block; /*把a标签块状化*/
height: 70px;
line-height: 70px;
padding: 0 23px 0 26px;
float: left;
color: black;
}
#main_1 a:hover {
background: rgb(116,197,178);
color: white;
transition: all 0.2s;
}
#main_2_child{
width: 1180px;
margin: 0 auto;
}
#main_2_1{
margin-top: 40px;
}
#main_2_1_left{
width: 290px;
float: left;
margin-left: 40px;
}
.hang{
margin-top: 25px;
}
.hang img{
float: left;
padding-right: 20px;
}
#main_2_1_right{
width: 170px;
float: right;
margin-right: 40px;
}
#main_2_1_right p{
margin-top: 29px;
}
#main_3_child{
width: 1180px;
margin: 0 auto;
margin-top: 50px;
padding-bottom: 80px;
}
#main_3_child p{
text-align: center;
}
#main_3_child a{
color: rgb(116,197,178);
font-size: 23px;
text-decoration:underline
}
#footer {
margin-top: 30px;
padding-top: 75px;
background-color: rgb(51,51,51);
}
#footer_child{
width: 1180px;
margin: 0 auto;
}
.footer_1_a,#none{
float: left;
padding-left: 10px;
padding-right: 10px;
border-left: 2px solid whitesmoke;
}
.footer_1 a,#none a{
font-size: 12px;
color: whitesmoke;
}
#none{
border-left: none;
margin-left: 30px;
}
.foot_2,#foot_3{
margin-top: 25px;
}
.foot_2 p,#foot_3 p{
font-size: 12px;
color: whitesmoke;
text-align: center;
}
#foot_3 p{
padding-bottom: 75px;
}
在线联系页面
html代码：
在线练习
上一页
1
2
3
4
5
6
7
8
9
下一页
css代码：
*{margin:0;padding:0;}
body{font-family:"微软雅黑";}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
img{border:0;}
ul{list-style:none;}
a{text-decoration:none;color: white;}
.clear{ /*消除行块间距*/
clear: both;
}
#header{
height: 80px;
box-shadow:0px 2px 3px #aaaaaa; /*给div加阴影*/
}
#header #header_child{
width: 1180px;
height: 80px;
margin: 0 auto;
}
#header #header_child #header_left{
width: 180px;
height: 80px;
float: left;
}
#header #header_child #header_middle{
float: left;
margin-left: 122px;
}
#header #header_child #header_middle li{
float: left;
margin-left: 0px;
}
#header #header_middle a {
display: block; /*把a标签块状化*/
height: 80px;
line-height: 80px;
padding: 0 23px 0 26px;
color: black;
}
#header #header_middle a:hover {
background: rgb(116,197,178);
color: white;
transition: all 0.2s;
}
#header #header_child #header_right_r{
width: 76px;
height: 80px;
float: right;
}
#header_right_r p{
font-size: 15px;
color: black;
float: right;
line-height: 80px;/*文字水平居中*/
padding-right: 2px;
}
#header_right_r p a{
color: black;
}
#header_right_r p a:hover{
color: #AAAAAA;
}
#header #header_child #header_right_l{
width: 282px;
height: 80px;
float: right;
margin-right: 10px;
}
#header_right_l #header_right_l_1 select{
width: 70px;
height: 35px;
margin-top: 25px;
float: left;
color: rgb(116,197,178);
background-color: white;
border-radius: 5px 0 0 5px;
border: solid 2px rgb(116,197,178);
padding-left: 10px;
}
#header_right_l #header_right_l_2 input{
width: 208px;
height: 31px;
margin-top: 25px;
float: left;
border-radius: 0 5px 5px 0;
border: solid 2px rgb(116,197,178);
border-left: none;
background: url(../img/search.png)no-repeat; /*设置背景图片,不重复*/
background-size: 25px 25px; /*背景图片大小和位置*/
background-position: 170px 3px;
outline: none; /*去掉输入框的外边框*/
}
#banner_child{
width: 1180px;
margin: 0 auto;
margin-bottom: 30px;
}
#banner_div1 p{
font-size: 17px;
margin-top: 40px;
float: left;
}
#banner_div1 select{
width: 180px;
height: 40px;
border: 2px solid rgb(116,197,178);;
color:black;
border-radius: 7px;
padding-left: 15px;
float: left;
margin-top: 30px;
margin-left: 30px;
}
.banner_div2 p{
float: left;
font-size: 17px;
margin-top: 22px;
}
.banner_div2_list{
width: 1080px;
float: right;
}
.banner_div2_list a{
color: black;
float: left;
height: 30px;
width: 60px;
text-align: center;
margin-left: 37px;
margin-top: 20px;
line-height: 27px;
border-radius: 7px;
}
.banner_div2_list a:hover{
height: 30px;
width: 60px;
background-color: rgb(116,197,178);
cursor: pointer;
color: white;
border-radius: 7px;
}
#main_5{
width: 1180px;
margin: 0 auto;
}
.main_5_div{
width: 379px;
height: 260px;
float: left;
margin-left: 20px;
margin-top: 22px;
box-shadow:0 0 3px #aaaaaa; /*x轴偏移量 y轴偏移量 大小 颜色*/
background: url(248,248,248);
}
.main_5_div_bottom_left1{
font-size: 13px;
margin-top: 8px;
margin-left: 10px;
}
.main_5_div_bottom_left2{
font-size: 11px;
margin-top: 8px;
margin-left: 10px;
}
.main_5_div_bottom_right{
width: 85px;
height: 30px;
background: rgb(116,197,178);
float: right;
float: right;
border-radius: 8px;
text-align: center;
line-height: 25px;
margin-top: -35px;
margin-right: 10px;
}
#index{
margin-top: 40px;
margin-left: 240px;
padding-bottom: 45px;
}
.chang{
width: 75px;
height: 40px;
background-color: ghostwhite;
text-align: center;
line-height: 40px;
float: left;
margin-left: 15px;
}
.duan{
width: 40px;
height: 40px;
background-color: ghostwhite;
text-align: center;
line-height: 40px;
float: left;
margin-left: 15px;
}
.chang:hover,.duan:hover{
cursor: pointer;
background-color: rgb(116,197,178);
color: white;
}
#footer {
margin-top: 30px;
padding-top: 75px;
background-color: rgb(51,51,51);
}
#footer_child{
width: 1180px;
margin: 0 auto;
}
.footer_1_a,#none{
float: left;
padding-left: 10px;
padding-right: 10px;
border-left: 2px solid whitesmoke;
}
.footer_1 a,#none a{
font-size: 12px;
color: whitesmoke;
}
#none{
border-left: none;
margin-left: 30px;
}
.foot_2,#foot_3{
margin-top: 25px;
}
.foot_2 p,#foot_3 p{
font-size: 12px;
color: whitesmoke;
text-align: center;
}
#foot_3 p{
padding-bottom: 75px;
}
#111{
background-color:#33FF66;
width:100px;
height:100px;
position:fixed;
left:50px;
top:50px;
}
我们还可以根据以上描述添加更多有趣好玩的功能模块。也可做出更好看的形式看着效果更加好。
素材及源代码百度网盘链接：百度网盘 请输入提取码
提取码：2205
************************************************************************************************************
您的建议是博主更新最大的动力！！
如发现错误请在评论区评论，博主会仔细查看并修改的！！
希望对您有所帮助！！！