UI设计前端大作业（小U课堂）
UI设计前端大作业（小U课堂）如果你是入门前端页面编写，那么这个商城项目就将会是个不错的入门选择，用到html和css。总代码以及素材附在文章底下百度网盘中。ps:如报错，需根据自己的背景路径位置自行调整！！！首先我们来看一下效果图首页页面：同步课程页面：在线联系页面：下面附上代码：首页页面html代码：<!DOCTYPE html><html><head>&l
·
UI设计前端大作业（小U课堂）
文章开始把我喜欢的这句话送个大家：这个世界上还有什么比自己写的代码运行在一亿人的电脑上更酷的事情吗，如果有那就是让这个数字再扩大十倍！！！
如果你是入门前端页面编写，那么这个商城项目就将会是个不错的入门选择，用到html和css。总代码以及素材附在文章底下百度网盘中。
ps:如报错，需根据自己的背景路径位置自行调整！！！
首先我们来看一下效果图
首页页面：
同步课程页面：
在线联系页面：
下面附上代码：
首页页面
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>小U课堂主页</title>
<link rel="stylesheet" type="text/css" href="css/xiaou_homepage.css" />
</head>
<body>
<div id="header">
<div id="header_child">
<div id="header_left">
<img src="img/header_left.jpg" />
</div>
<div id="header_middle">
<ul>
<!--显示选中状态-->
<li><a href="index.html" style="background:rgb(116,197,178);color: white;">首页</a></li>
<li><a href="synchronous_course.html">同步课程</a></li>
<li><a href="online_practice.html">在线练习</a></li>
<li><a href="#">精品课程</a></li>
</ul>
</div>
<div id="header_right_r">
<p><a href="#">登录</a></p>
<p>/</p>
<p><a href="#">注册</a></p>
</div>
<div id="header_right_l">
<div id="header_right_l_1">
<!--选择框-->
<select>
<option value="1" selected="selected">课程</option> <!--选择框默认-->
<option value="2">练习</option>
<option value="3">名师</option>
</select>
</div>
<div id="header_right_l_2">
<input type="text" placeholder=" 搜索感兴趣的内容"/>
</div>
</div>
</div>
</div>
<div id="banner">
<div id="banner_child">
<img src="img/banner.jpg"/>
</div>
</div>
<div id="main">
<div id="main_1">
<p id="main_1_title_1">同步课程</p>
<p id="main_1_title_2"><a href="#">更多课程 ▶</a></p>
</div>
<div class="clear"></div>
<div id="main_2">
<div class="main_2_div" style="margin-left: 0;">
<div class="main_2_div_top"><img src="img/main2_1.jpg"/></div>
<div class="main_2_div_bottom">
<p class="main_2_div_bottom_left1">行政管理专业课</p>
<p class="main_2_div_bottom_left2">23课时</p>
<div class="main_2_div_bottom_right"><a href="synchronous_course.html">免费学习</a></div>
</div>
</div>
<div class="main_2_div">
<div class="main_2_div_top"><img src="img/main2_2.jpg"/></div>
<div class="main_2_div_bottom">
<p class="main_2_div_bottom_left1">行政管理专业课</p>
<p class="main_2_div_bottom_left2">23课时</p>
<div class="main_2_div_bottom_right"><a href="synchronous_course.html">免费学习</a></div>
</div>
</div>
<div class="main_2_div">
<div class="main_2_div_top"><img src="img/main2_3.jpg"/></div>
<div class="main_2_div_bottom">
<p class="main_2_div_bottom_left1">行政管理专业课</p>
<p class="main_2_div_bottom_left2">23课时</p>
<div class="main_2_div_bottom_right"><a href="synchronous_course.html">免费学习</a></div>
</div>
</div>
<div class="main_2_div">
<div class="main_2_div_top"><img src="img/main2_4.jpg"/></div>
<div class="main_2_div_bottom">
<p class="main_2_div_bottom_left1">行政管理专业课</p>
<p class="main_2_div_bottom_left2">23课时</p>
<div class="main_2_div_bottom_right"><a href="synchronous_course.html">免费学习</a></div>
</div>
</div>
<div class="main_2_div" style="margin-left: 0;">
<div class="main_2_div_top"><img src="img/main2_5.jpg"/></div>
<div class="main_2_div_bottom">
<p class="main_2_div_bottom_left1">行政管理专业课</p>
<p class="main_2_div_bottom_left2">23课时</p>
<div class="main_2_div_bottom_right"><a href="synchronous_course.html">免费学习</a></div>
</div>
</div>
<div class="main_2_div">
<div class="main_2_div_top"><img src="img/main2_6.jpg"/></div>
<div class="main_2_div_bottom">
<p class="main_2_div_bottom_left1">行政管理专业课</p>
<p class="main_2_div_bottom_left2">23课时</p>
<div class="main_2_div_bottom_right"><a href="synchronous_course.html">免费学习</a></div>
</div>
</div>
<div class="main_2_div">
<div class="main_2_div_top"><img src="img/main2_7.jpg"/></div>
<div class="main_2_div_bottom">
<p class="main_2_div_bottom_left1">行政管理专业课</p>
<p class="main_2_div_bottom_left2">23课时</p>
<div class="main_2_div_bottom_right"><a href="synchronous_course.html">免费学习</a></div>
</div>
</div>
<div class="main_2_div">
<div class="main_2_div_top"><img src="img/main2_8.jpg"/></div>
<div class="main_2_div_bottom">
<p class="main_2_div_bottom_left1">行政管理专业课</p>
<p class="main_2_div_bottom_left2">23课时</p>
<div class="main_2_div_bottom_right"><a href="synchronous_course.html">免费学习</a></div>
</div>
</div>
</div>
<div class="clear"></div>
<div id="main_3">
<div id="main_3_child">
<img src="img/main3.jpg"/>
</div>
</div>
<div id="main_4">
<p id="main_4_title_1">在线测试</p>
<p id="main_4_title_2"><a href="#">更多练习 ▶</a></p>
</div>
<div class="clear"></div>
<div id="main_5">
<div class="main_5_div" style="margin-left: 0;">
<div class="main_5_div_top"><img src="img/main5_1.jpg"/></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">行政管理专业课</p>
<p class="main_5_div_bottom_left2">23课时</p>
<div class="main_5_div_bottom_right"><a href="online_practice.html">免费学习</a></div>
</div>
</div>
<div class="main_5_div">
<div class="main_5_div_top"><img src="img/main5_2.jpg"/></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">行政管理专业课</p>
<p class="main_5_div_bottom_left2">23课时</p>
<div class="main_5_div_bottom_right"><a href="online_practice.html">免费学习</a></div>
</div>
</div>
<div class="main_5_div">
<div class="main_5_div_top"><img src="img/main5_3.jpg"/></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">行政管理专业课</p>
<p class="main_5_div_bottom_left2">23课时</p>
<div class="main_5_div_bottom_right"><a href="online_practice.html">免费学习</a></div>
</div>
</div>
<div class="main_5_div" style="margin-left: 0;">
<div class="main_5_div_top"><img src="img/main5_4.jpg"/></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">行政管理专业课</p>
<p class="main_5_div_bottom_left2">23课时</p>
<div class="main_5_div_bottom_right"><a href="online_practice.html">免费学习</a></div>
</div>
</div>
<div class="main_5_div">
<div class="main_5_div_top"><img src="img/main5_5.jpg"/></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">行政管理专业课</p>
<p class="main_5_div_bottom_left2">23课时</p>
<div class="main_5_div_bottom_right"><a href="online_practice.html">免费学习</a></div>
</div>
</div>
<div class="main_5_div">
<div class="main_5_div_top"><img src="img/main5_6.jpg"/></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">行政管理专业课</p>
<p class="main_5_div_bottom_left2">23课时</p>
<div class="main_5_div_bottom_right"><a href="online_practice.html">免费学习</a></div>
</div>
</div>
</div>
<div class="clear"></div>
<div id="main_6">
<p id="main_6_title_1">精品课程</p>
<p id="main_6_title_2"><a href="#">更多课程 ▶</a></p>
</div>
<div class="clear"></div>
<div id="main_7">
<div class="main_7_div" style="margin-left: 0;">
<div class="main_7_div_top"><img src="img/main7_1.jpg"/></div>
<div class="main_7_div_bottom">
<p class="main_7_div_bottom_left1">行政管理专业课</p>
<p class="main_7_div_bottom_left2">23课时</p>
<div class="main_7_div_bottom_right"><a href="#">免费学习</a></div>
</div>
</div>
<div class="main_7_div">
<div class="main_7_div_top"><img src="img/main7_2.jpg"/></div>
<div class="main_7_div_bottom">
<p class="main_7_div_bottom_left1">行政管理专业课</p>
<p class="main_7_div_bottom_left2">23课时</p>
<div class="main_7_div_bottom_right"><a href="#">免费学习</a></div>
</div>
</div>
<div class="main_7_div">
<div class="main_7_div_top"><img src="img/main7_3.jpg"/></div>
<div class="main_7_div_bottom">
<p class="main_7_div_bottom_left1">行政管理专业课</p>
<p class="main_7_div_bottom_left2">23课时</p>
<div class="main_7_div_bottom_right"><a href="#">免费学习</a></div>
</div>
</div>
<div id="main_7_div_7"><img src="img/main7_7.jpg"/></div>
<div class="main_7_div" style="margin-left: 0;float: left;">
<div class="main_7_div_top"><img src="img/main7_4.jpg"/></div>
<div class="main_7_div_bottom">
<p class="main_7_div_bottom_left1">行政管理专业课</p>
<p class="main_7_div_bottom_left2">23课时</p>
<div class="main_7_div_bottom_right"><a href="#">免费学习</a></div>
</div>
</div>
<div class="main_7_div">
<div class="main_7_div_top"><img src="img/main7_5.jpg"/></div>
<div class="main_7_div_bottom">
<p class="main_7_div_bottom_left1">行政管理专业课</p>
<p class="main_7_div_bottom_left2">23课时</p>
<div class="main_7_div_bottom_right"><a href="#">免费学习</a></div>
</div>
</div>
<div class="main_7_div">
<div class="main_7_div_top"><img src="img/main7_6.jpg"/></div>
<div class="main_7_div_bottom">
<p class="main_7_div_bottom_left1">行政管理专业课</p>
<p class="main_7_div_bottom_left2">23课时</p>
<div class="main_7_div_bottom_right"><a href="#">免费学习</a></div>
</div>
</div>
</div>
<div class="clear"></div>
<div id="main_8">
<div id="main_8_child">
<div id="main_8_1"><a href="synchronous_course.html"><img src="img/main8_1.png"/></a></div>
<div id="main_8_2"><a href="online_practice.html"><img src="img/main8_2.png"/></a></div>
<div id="main_8_3"><a href="#"><img src="img/main8_3.png"/></a></div>
</div>
</div>
<div class="clear"></div>
</div>
<div id="footer">
<div id="footer_child">
<div class="footer_1">
<div id="none"><a href="#">首页</a></div>
<div class="footer_1_a"><a href="#">关于我们</a></div>
<div class="footer_1_a"><a href="#">加入我们</a></div>
<div class="footer_1_a"><a href="#">合作社区</a></div>
<div class="footer_1_a"><a href="#">联系我们</a></div>
<div class="footer_1_a"><a href="#">AI开放平台</a></div>
<div class="footer_1_a"><a href="#">意见反馈</a></div>
<div class="footer_1_a"><a href="#">漏洞提交</a></div>
<div class="footer_1_a"><a href="#">隐私政策</a></div>
<div class="footer_1_a"><a href="#">版权声明</a></div>
<div class="footer_1_a"><a href="#">反盗链声明</a></div>
<div class="footer_1_a"><a href="#">网上有害信息举报</a></div>
<div class="footer_1_a"><a href="#">备案公示</a></div>
<div class="footer_1_a"><a href="#">营业执照</a></div>
<div class="footer_1_a"><a href="#">教师资格证</a></div>
</div>
<div class="clear"></div>
<div class="foot_2">
<p>京IOP备 13030888号 Copyright2014-2019行者信息科技（北京）有限公司 │ 地址:北京市新华区马当路388号C座 │ 电话:010-66666666 │京公网安备01010102002533号</p>
</div>
<div class="foot_2">
<p>京网文(018 )458-06s号 │ 网络文化经营许可证:沪网文[2o163]408-306号 │ 增值电信业务经营许可证:京R-2o15041 | 食品经营许可证:J1310114008830</p>
</div>
<div id="foot_3">
<p>医疗器械经营许可证:京嘉食药监械经营许20188008号 │ 互联网药品信息服务资格证书:(京)-经营性-2018-0011 |</p>
</div>
</div>
</div>
<a id="111" href="#" style="position: fixed; bottom: 230px; right: 0;"><img src="img/111.png" /></a>
<a id="222" href="#" style="position: fixed; bottom: 150px; right: 0;"><img src="img/222.png" /></a>
<a id="333" href="#" style="position: fixed; bottom: 70px; right: 0;"><img src="img/333.png" /></a>
</body>
</html>
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代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在线练习</title>
<link rel="stylesheet" type="text/css" href="css/online_practice.css" />
</head>
<body>
<div id="header">
<div id="header_child">
<div id="header_left">
<img src="img/header_left.jpg" />
</div>
<div id="header_middle">
<ul>
<!--显示选中状态-->
<li>
<a href="index.html">首页</a>
</li>
<li>
<a href="synchronous_course.html">同步课程</a>
</li>
<li>
<a href="online_practice.html" style="background:rgb(116,197,178);color: white;">在线练习</a>
</li>
<li>
<a href="#">精品课程</a>
</li>
</ul>
</div>
<div id="header_right_r">
<p>
<a href="#">登录</a>
</p>
<p>/</p>
<p>
<a href="#">注册</a>
</p>
</div>
<div id="header_right_l">
<div id="header_right_l_1">
<!--选择框-->
<select>
<option value="1" selected="selected">课程</option>
<!--选择框默认-->
<option value="2">练习</option>
<option value="3">名师</option>
</select>
</div>
<div id="header_right_l_2">
<input type="text" placeholder=" 搜索感兴趣的内容" />
</div>
</div>
</div>
</div>
<div id="banner">
<div id="banner_child">
<div id="banner_div1">
<p>按省份选择</p>
<select>
<option value="1" selected="selected" disabled="disabled">省份</option>
<!--选择框默认-->
<option value="2">石家庄</option>
<option value="3">北京</option>
</select>
<select>
<option value="1" selected="selected" disabled="disabled">城市</option>
<!--选择框默认-->
<option value="2">邯郸</option>
<option value="3">沧州</option>
</select>
</div>
<div class="clear"></div>
<div class="banner_div2">
<p>热门城市</p>
<div class="banner_div2_list">
<ul>
<li><a>北京</a></li>
<li><a>上海</a></li>
<li><a>江苏</a></li>
<li><a>济南</a></li>
<li><a>河南</a></li>
<li><a>天津</a></li>
<li><a>沈阳</a></li>
<li><a>石家庄</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="banner_div2">
<p>年级选择</p>
<div class="banner_div2_list">
<ul>
<li><a>大班</a></li>
<li><a>中班</a></li>
<li><a>一年级</a></li>
<li><a>二年级</a></li>
<li><a>三年级</a></li>
<li><a>四年级</a></li>
<li><a>五年级</a></li>
<li><a>六年级</a></li>
<li><a>初一</a></li>
<li><a>初二</a></li>
<li><a>初三</a></li>
<li><a>高一</a></li>
<li><a>高二</a></li>
<li><a>高三</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="banner_div2">
<p>学科选择</p>
<div class="banner_div2_list">
<ul>
<li><a>全部</a></li>
<li><a>语文</a></li>
<li><a>数学</a></li>
<li><a>英语</a></li>
<li><a>生物</a></li>
<li><a>历史</a></li>
<li><a>政治</a></li>
<li><a>物理</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="banner_div2">
<p>版本选择</p>
<div class="banner_div2_list">
<ul>
<li><a style="color: white; border-radius: 7px; background-color: rgb(116,197,178);">人教版</a></li>
<li><a>鲁教版</a></li>
<li><a>苏教版</a></li>
<li><a>浙教版</a></li>
<li><a>外研版</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
<div id="main">
<div id="main_5">
<div class="main_5_div" style="margin-left: 0;">
<div class="main_5_div_top"><img src="img/online1.png" /></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">人教版语文第一节课程内容讲解</p>
<p class="main_5_div_bottom_left2">6课时</p>
<div class="main_5_div_bottom_right">
<a href="online_practice.html">55.9元</a>
</div>
</div>
</div>
<div class="main_5_div">
<div class="main_5_div_top"><img src="img/online2.png" /></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">人教版语文第一节课程内容讲解</p>
<p class="main_5_div_bottom_left2">6课时</p>
<div class="main_5_div_bottom_right">
<a href="online_practice.html">55.9元</a>
</div>
</div>
</div>
<div class="main_5_div">
<div class="main_5_div_top"><img src="img/online3.png" /></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">人教版语文第一节课程内容讲解</p>
<p class="main_5_div_bottom_left2">6课时</p>
<div class="main_5_div_bottom_right">
<a href="online_practice.html">55.9元</a>
</div>
</div>
</div>
<div class="main_5_div" style="margin-left: 0;">
<div class="main_5_div_top"><img src="img/online4.png" /></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">人教版语文第一节课程内容讲解</p>
<p class="main_5_div_bottom_left2">6课时</p>
<div class="main_5_div_bottom_right">
<a href="online_practice.html">55.9元</a>
</div>
</div>
</div>
<div class="main_5_div">
<div class="main_5_div_top"><img src="img/online5.png" /></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">人教版语文第一节课程内容讲解</p>
<p class="main_5_div_bottom_left2">6课时</p>
<div class="main_5_div_bottom_right">
<a href="online_practice.html">55.9元</a>
</div>
</div>
</div>
<div class="main_5_div">
<div class="main_5_div_top"><img src="img/online6.png" /></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">人教版语文第一节课程内容讲解</p>
<p class="main_5_div_bottom_left2">6课时</p>
<div class="main_5_div_bottom_right">
<a href="online_practice.html">55.9元</a>
</div>
</div>
</div>
<div class="main_5_div" style="margin-left: 0;">
<div class="main_5_div_top"><img src="img/online7.png" /></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">人教版语文第一节课程内容讲解</p>
<p class="main_5_div_bottom_left2">6课时</p>
<div class="main_5_div_bottom_right">
<a href="online_practice.html">55.9元</a>
</div>
</div>
</div>
<div class="main_5_div">
<div class="main_5_div_top"><img src="img/online8.png" /></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">人教版语文第一节课程内容讲解</p>
<p class="main_5_div_bottom_left2">6课时</p>
<div class="main_5_div_bottom_right">
<a href="online_practice.html">55.9元</a>
</div>
</div>
</div>
<div class="main_5_div">
<div class="main_5_div_top"><img src="img/online9.png" /></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">人教版语文第一节课程内容讲解</p>
<p class="main_5_div_bottom_left2">6课时</p>
<div class="main_5_div_bottom_right">
<a href="online_practice.html">55.9元</a>
</div>
</div>
</div>
<div class="main_5_div" style="margin-left: 0;">
<div class="main_5_div_top"><img src="img/online10.png" /></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">人教版语文第一节课程内容讲解</p>
<p class="main_5_div_bottom_left2">6课时</p>
<div class="main_5_div_bottom_right">
<a href="online_practice.html">55.9元</a>
</div>
</div>
</div>
<div class="main_5_div">
<div class="main_5_div_top"><img src="img/online11.png" /></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">人教版语文第一节课程内容讲解</p>
<p class="main_5_div_bottom_left2">6课时</p>
<div class="main_5_div_bottom_right">
<a href="online_practice.html">55.9元</a>
</div>
</div>
</div>
<div class="main_5_div">
<div class="main_5_div_top"><img src="img/online12.png" /></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">人教版语文第一节课程内容讲解</p>
<p class="main_5_div_bottom_left2">6课时</p>
<div class="main_5_div_bottom_right">
<a href="online_practice.html">55.9元</a>
</div>
</div>
</div>
<div class="clear"></div>
<div id="index">
<div class="chang" style="color: gainsboro;">上一页</div>
<div class="duan" style="background-color: rgb(116,197,178); color: white;">1</div>
<div class="duan">2</div>
<div class="duan">3</div>
<div class="duan">4</div>
<div class="duan">5</div>
<div class="duan">6</div>
<div class="duan">7</div>
<div class="duan">8</div>
<div class="duan">9</div>
<div class="chang">下一页</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer_child">
<div class="footer_1">
<div id="none">
<a href="#">首页</a>
</div>
<div class="footer_1_a">
<a href="#">关于我们</a>
</div>
<div class="footer_1_a">
<a href="#">加入我们</a>
</div>
<div class="footer_1_a">
<a href="#">合作社区</a>
</div>
<div class="footer_1_a">
<a href="#">联系我们</a>
</div>
<div class="footer_1_a">
<a href="#">AI开放平台</a>
</div>
<div class="footer_1_a">
<a href="#">意见反馈</a>
</div>
<div class="footer_1_a">
<a href="#">漏洞提交</a>
</div>
<div class="footer_1_a">
<a href="#">隐私政策</a>
</div>
<div class="footer_1_a">
<a href="#">版权声明</a>
</div>
<div class="footer_1_a">
<a href="#">反盗链声明</a>
</div>
<div class="footer_1_a">
<a href="#">网上有害信息举报</a>
</div>
<div class="footer_1_a">
<a href="#">备案公示</a>
</div>
<div class="footer_1_a">
<a href="#">营业执照</a>
</div>
<div class="footer_1_a">
<a href="#">教师资格证</a>
</div>
</div>
<div class="clear"></div>
<div id="banner"></div>
<div id="main"></div>
<div class="foot_2">
<p>京IOP备 13030888号 Copyright2014-2019行者信息科技（北京）有限公司 │ 地址:北京市新华区马当路388号C座 │ 电话:010-66666666 │京公网安备01010102002533号</p>
</div>
<div class="foot_2">
<p>京网文(018 )458-06s号 │ 网络文化经营许可证:沪网文[2o163]408-306号 │ 增值电信业务经营许可证:京R-2o15041 | 食品经营许可证:J1310114008830</p>
</div>
<div id="foot_3">
<p>医疗器械经营许可证:京嘉食药监械经营许20188008号 │ 互联网药品信息服务资格证书:(京)-经营性-2018-0011 |</p>
</div>
</div>
</div>
</body>
</html>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代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在线练习</title>
<link rel="stylesheet" type="text/css" href="css/online_practice.css" />
</head>
<body>
<div id="header">
<div id="header_child">
<div id="header_left">
<img src="img/header_left.jpg" />
</div>
<div id="header_middle">
<ul>
<!--显示选中状态-->
<li>
<a href="index.html">首页</a>
</li>
<li>
<a href="synchronous_course.html">同步课程</a>
</li>
<li>
<a href="online_practice.html" style="background:rgb(116,197,178);color: white;">在线练习</a>
</li>
<li>
<a href="#">精品课程</a>
</li>
</ul>
</div>
<div id="header_right_r">
<p>
<a href="#">登录</a>
</p>
<p>/</p>
<p>
<a href="#">注册</a>
</p>
</div>
<div id="header_right_l">
<div id="header_right_l_1">
<!--选择框-->
<select>
<option value="1" selected="selected">课程</option>
<!--选择框默认-->
<option value="2">练习</option>
<option value="3">名师</option>
</select>
</div>
<div id="header_right_l_2">
<input type="text" placeholder=" 搜索感兴趣的内容" />
</div>
</div>
</div>
</div>
<div id="banner">
<div id="banner_child">
<div id="banner_div1">
<p>按省份选择</p>
<select>
<option value="1" selected="selected" disabled="disabled">省份</option>
<!--选择框默认-->
<option value="2">石家庄</option>
<option value="3">北京</option>
</select>
<select>
<option value="1" selected="selected" disabled="disabled">城市</option>
<!--选择框默认-->
<option value="2">邯郸</option>
<option value="3">沧州</option>
</select>
</div>
<div class="clear"></div>
<div class="banner_div2">
<p>热门城市</p>
<div class="banner_div2_list">
<ul>
<li><a>北京</a></li>
<li><a>上海</a></li>
<li><a>江苏</a></li>
<li><a>济南</a></li>
<li><a>河南</a></li>
<li><a>天津</a></li>
<li><a>沈阳</a></li>
<li><a>石家庄</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="banner_div2">
<p>年级选择</p>
<div class="banner_div2_list">
<ul>
<li><a>大班</a></li>
<li><a>中班</a></li>
<li><a>一年级</a></li>
<li><a>二年级</a></li>
<li><a>三年级</a></li>
<li><a>四年级</a></li>
<li><a>五年级</a></li>
<li><a>六年级</a></li>
<li><a>初一</a></li>
<li><a>初二</a></li>
<li><a>初三</a></li>
<li><a>高一</a></li>
<li><a>高二</a></li>
<li><a>高三</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="banner_div2">
<p>学科选择</p>
<div class="banner_div2_list">
<ul>
<li><a>全部</a></li>
<li><a>语文</a></li>
<li><a>数学</a></li>
<li><a>英语</a></li>
<li><a>生物</a></li>
<li><a>历史</a></li>
<li><a>政治</a></li>
<li><a>物理</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="banner_div2">
<p>版本选择</p>
<div class="banner_div2_list">
<ul>
<li><a style="color: white; border-radius: 7px; background-color: rgb(116,197,178);">人教版</a></li>
<li><a>鲁教版</a></li>
<li><a>苏教版</a></li>
<li><a>浙教版</a></li>
<li><a>外研版</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
<div id="main">
<div id="main_5">
<div class="main_5_div" style="margin-left: 0;">
<div class="main_5_div_top"><img src="img/online1.png" /></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">人教版语文第一节课程内容讲解</p>
<p class="main_5_div_bottom_left2">6课时</p>
<div class="main_5_div_bottom_right">
<a href="online_practice.html">55.9元</a>
</div>
</div>
</div>
<div class="main_5_div">
<div class="main_5_div_top"><img src="img/online2.png" /></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">人教版语文第一节课程内容讲解</p>
<p class="main_5_div_bottom_left2">6课时</p>
<div class="main_5_div_bottom_right">
<a href="online_practice.html">55.9元</a>
</div>
</div>
</div>
<div class="main_5_div">
<div class="main_5_div_top"><img src="img/online3.png" /></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">人教版语文第一节课程内容讲解</p>
<p class="main_5_div_bottom_left2">6课时</p>
<div class="main_5_div_bottom_right">
<a href="online_practice.html">55.9元</a>
</div>
</div>
</div>
<div class="main_5_div" style="margin-left: 0;">
<div class="main_5_div_top"><img src="img/online4.png" /></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">人教版语文第一节课程内容讲解</p>
<p class="main_5_div_bottom_left2">6课时</p>
<div class="main_5_div_bottom_right">
<a href="online_practice.html">55.9元</a>
</div>
</div>
</div>
<div class="main_5_div">
<div class="main_5_div_top"><img src="img/online5.png" /></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">人教版语文第一节课程内容讲解</p>
<p class="main_5_div_bottom_left2">6课时</p>
<div class="main_5_div_bottom_right">
<a href="online_practice.html">55.9元</a>
</div>
</div>
</div>
<div class="main_5_div">
<div class="main_5_div_top"><img src="img/online6.png" /></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">人教版语文第一节课程内容讲解</p>
<p class="main_5_div_bottom_left2">6课时</p>
<div class="main_5_div_bottom_right">
<a href="online_practice.html">55.9元</a>
</div>
</div>
</div>
<div class="main_5_div" style="margin-left: 0;">
<div class="main_5_div_top"><img src="img/online7.png" /></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">人教版语文第一节课程内容讲解</p>
<p class="main_5_div_bottom_left2">6课时</p>
<div class="main_5_div_bottom_right">
<a href="online_practice.html">55.9元</a>
</div>
</div>
</div>
<div class="main_5_div">
<div class="main_5_div_top"><img src="img/online8.png" /></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">人教版语文第一节课程内容讲解</p>
<p class="main_5_div_bottom_left2">6课时</p>
<div class="main_5_div_bottom_right">
<a href="online_practice.html">55.9元</a>
</div>
</div>
</div>
<div class="main_5_div">
<div class="main_5_div_top"><img src="img/online9.png" /></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">人教版语文第一节课程内容讲解</p>
<p class="main_5_div_bottom_left2">6课时</p>
<div class="main_5_div_bottom_right">
<a href="online_practice.html">55.9元</a>
</div>
</div>
</div>
<div class="main_5_div" style="margin-left: 0;">
<div class="main_5_div_top"><img src="img/online10.png" /></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">人教版语文第一节课程内容讲解</p>
<p class="main_5_div_bottom_left2">6课时</p>
<div class="main_5_div_bottom_right">
<a href="online_practice.html">55.9元</a>
</div>
</div>
</div>
<div class="main_5_div">
<div class="main_5_div_top"><img src="img/online11.png" /></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">人教版语文第一节课程内容讲解</p>
<p class="main_5_div_bottom_left2">6课时</p>
<div class="main_5_div_bottom_right">
<a href="online_practice.html">55.9元</a>
</div>
</div>
</div>
<div class="main_5_div">
<div class="main_5_div_top"><img src="img/online12.png" /></div>
<div class="main_5_div_bottom">
<p class="main_5_div_bottom_left1">人教版语文第一节课程内容讲解</p>
<p class="main_5_div_bottom_left2">6课时</p>
<div class="main_5_div_bottom_right">
<a href="online_practice.html">55.9元</a>
</div>
</div>
</div>
<div class="clear"></div>
<div id="index">
<div class="chang" style="color: gainsboro;">上一页</div>
<div class="duan" style="background-color: rgb(116,197,178); color: white;">1</div>
<div class="duan">2</div>
<div class="duan">3</div>
<div class="duan">4</div>
<div class="duan">5</div>
<div class="duan">6</div>
<div class="duan">7</div>
<div class="duan">8</div>
<div class="duan">9</div>
<div class="chang">下一页</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer_child">
<div class="footer_1">
<div id="none">
<a href="#">首页</a>
</div>
<div class="footer_1_a">
<a href="#">关于我们</a>
</div>
<div class="footer_1_a">
<a href="#">加入我们</a>
</div>
<div class="footer_1_a">
<a href="#">合作社区</a>
</div>
<div class="footer_1_a">
<a href="#">联系我们</a>
</div>
<div class="footer_1_a">
<a href="#">AI开放平台</a>
</div>
<div class="footer_1_a">
<a href="#">意见反馈</a>
</div>
<div class="footer_1_a">
<a href="#">漏洞提交</a>
</div>
<div class="footer_1_a">
<a href="#">隐私政策</a>
</div>
<div class="footer_1_a">
<a href="#">版权声明</a>
</div>
<div class="footer_1_a">
<a href="#">反盗链声明</a>
</div>
<div class="footer_1_a">
<a href="#">网上有害信息举报</a>
</div>
<div class="footer_1_a">
<a href="#">备案公示</a>
</div>
<div class="footer_1_a">
<a href="#">营业执照</a>
</div>
<div class="footer_1_a">
<a href="#">教师资格证</a>
</div>
</div>
<div class="clear"></div>
<div id="banner"></div>
<div id="main"></div>
<div class="foot_2">
<p>京IOP备 13030888号 Copyright2014-2019行者信息科技（北京）有限公司 │ 地址:北京市新华区马当路388号C座 │ 电话:010-66666666 │京公网安备01010102002533号</p>
</div>
<div class="foot_2">
<p>京网文(018 )458-06s号 │ 网络文化经营许可证:沪网文[2o163]408-306号 │ 增值电信业务经营许可证:京R-2o15041 | 食品经营许可证:J1310114008830</p>
</div>
<div id="foot_3">
<p>医疗器械经营许可证:京嘉食药监械经营许20188008号 │ 互联网药品信息服务资格证书:(京)-经营性-2018-0011 |</p>
</div>
</div>
</div>
</body>
</html>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
************************************************************************************************************
您的建议是博主更新最大的动力！！
如发现错误请在评论区评论，博主会仔细查看并修改的！！
希望对您有所帮助！！！
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
30
0- 0
已为社区贡献2条内容
所有评论(0)