学习前端的网站
链接: 点我一下.
HTML5
1.互联网三大基石
①HTML:超文本标记语言
②HTTP:超文本传输协议
③UPL:统一资源定位符
2. 历史
html1---->html2---->html3---->html4---->html4.01---->xhtml(语法更严谨)是由W3C组织制定的一套规范。
html5简介：
只有新版本的浏览器才支持，在移动端运用的很好。去除了html4中不常用的标签，新增了一些语言标签。功能更加强大。
HTML
标签：
frameset标签："rows"横向划分页面，"cols"纵向划分页面。noresize=“noresize” 不允许拖动划分后的窗口。
缺点：不支持移动端，用手机打开的时候，会给用户非常不好的体验，所以不建议用。
iframe标签：建议使用。相当于在网页中又嵌套了一个网页。可以指定width，height。
div标签：对网页模块划分，本身没有任何含义。结合css样式给页面“化妆”。
audio标签(html5提供的，以前的版本不支持)：引入音频的标签，属性src是文件的路径， controls=“controls”(控制条)。
video标签：引入视频的标签，基本用法和audio大差不差，可以通过width，height属性调整窗口大小 。
embed标签:多媒体标签，即可引用音频，也可饮用视频。
figure标签:列表标签，和自定义标签dl>dd>dt效果一样。
details标签:下拉列表，子标签summary设置name，添加选项在summary下边添加选项就行。
mark标签： 强调标签，会给你的内容着重突出显示。
meter标签：刻度标签，例如手机电量的图标，可以规定max最大值，规定min最小值，value当前值。low自己定义的最低值，小于等于该值变颜色，high自己定义的最大值。
progress标签：进度条标签，max最大值，value当前值，用途文件上传。
canvas标签：画布标签，每一个图形都需要使用javascript。绘制多边形，圆形。
CSS
1.css入门
为什么学习css（css作用）？
①让页面更加美观，html虽然可以一定程度上修饰页面，但是页面还是整体上不够美观。
②html进行网页的书写，冗余代码较多，后期维护性不好。
什么是css？
层叠样式表（级联样式表），英文全称:Cascading Style Sheets
2.css引入方式
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*②内嵌式*/
/*p代表标签名称*/
p{
/*字体颜色*/
color:red;
/*字体大小*/
font-size: 25px;
/*字体加粗*/
font-weight: bold;
}
</style>
<!--③外部式（连接式） rel：引入文件和当前文件的关系 href：引入文件的路径-->
<link rel="stylesheet" type="text/css" href="css/css1.css"/>
<style>
/*④导入样式，不建议使用，了解即可，推荐使用③*/
@import url("css/css1.css");
</style>
</head>
<body>
<!--①行内样式 键值对的形式-->
<p style="color: red;">我们不一样</p>
<p style="color: red;">我们不一样</p>
</body>
</html>
3.css选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*①通用选择器 *代表该页面中的所有元素 */
*{
color:red;
}
/*②元素（标签）选择器*/
div{
width: 200px;
height: 200px;
/*背景颜色*/
/* background-color: #bfa;*/
/*三个属性分别代表：边框的粗细 边框的风格 边框的颜色*/
border: 1px solid red;
}
/*③ID选择器 #id的名称，id的名称要唯一*/
/*id的命名：数字，字母，下划线，中划线*/
#box1{
background-color: blueviolet;
}
/*④class选择器，名字可以不唯一*/
.box_1{
background-color: pink;
}
</style>
</head>
<body>
<div id="box1">1</div>
<div class="box_1">2</div>
<div>3</div>
<p>hello</p>
</body>
</html>
<!--选择器的优先级 ID选择器>类选择器>标签选择器>通用选择器
权重： 100 10 1 0
-->
4.css其他选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*①后代选择器 只要包含该标签对象即可*/
/*div span{
font-size: 27px;
font-family: "宋体";
}*/
/*②子选择器 直系子标签*/
/*div>span{
color: red;
}*/
/*③兄弟选择器 只会改变下面相邻的元素对象 */
#p_1+p{
color: #8A2BE2;
}
/*④兄弟选择器 后面所有的兄弟对象都会改变，不一定是相邻的*/
#p_1~p{
color: red;
font-size: 30px;
}
/*⑤伪类选择器
* >①link 未访问的链接
* >②visited 已访问的链接
* >hover 鼠标移入到链接
* >active 选定的链接
* 提示：在css定义中，a：hover必须被置于a：link和a：visited，才是有效的。
* 在css定义中，a:active必须被置于a:hover之后，才是有效的。
* */
a:hover{
color: red;
}
</style>
</head>
<body>
<div>
<span>vector</span>
<p>
<span>vector123</span>
</p>
</div>
<span>vector</span>
<hr />
<p id="p_1">hello java1</p>
<p>hello java2</p>
<p>hello java3</p>
<hr />
<a href="#">京东网址</a>
</body>
</html>
5.css常用属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.top{
width: 100%;
height: 100px;
border: 1px solid red;
}
.top_a{
/*字体颜色*/
color: gray;
/*字体大小*/
font-size: 12px;
/*字体加粗*/
/*font-weight: bold;*/
/*字体风格*/
/*font-family: "宋体";*/
/*字体倾斜*/
/*font-style: italic;*/
/*取出下划线*/
text-decoration: none;
}
a:hover{
color: red;
/*下划线展示*/
text-decoration: underline;
}
.tips{
width: 100%;
height: 40px;
border: 1px dotted indianred;
background-color: pink;
/*文本水平居中*/
text-align: center;
/*行高 行高的高度和外面的div高度一样时，里面的内容就会垂直居中*/
line-height: 40px;
}
.tips span{
font-size: 12px;
color: gray;
}
.center{
width: 100%;
height: 500px;
border: 1px solid red;
/*设置背景图片*/
background-image: url("http://img11.360buyimg.com/da/jfs/t16363/164/2298198848/33213/870500f1/5aa68632Nd7790d0c.png");
/*设置背景图片不重复*/
background-repeat: no-repeat;
/*调整背景图片的位置 两个属性 X Y*/
background-position: center;
/*调整背景图片的大小 属性：宽 高 这样做往往会导致图片失帧，不建议使用*/
/*background-size: 100% 500px;* */
background-color: #e93854;
/*三原色*/
/*background-color: rgb(255,0,0);*/
/*在三原色的基础上加入了透明度 0~1 .5=0.5*/
/*background-color: rgba(255,0,0,.5);*/
}
</style>
</head>
<body>
<!--顶部的位置-->
<div class="top">
<a href="" class="top_a">登录页面，调查问卷</a>
</div>
<!--中间提示操作-->
<div class="tips">
<span>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</span>
</div>
<div class="center"></div>
</body>
</html>
<!--
css常用的样式
字体：
/*字体颜色*/
color: gray;
/*字体大小*/
font-size: 12px;
/*字体加粗*/
/*font-weight: bold;*/
/*字体风格*/
/*font-family: "宋体";*/
/*字体倾斜*/
/*font-style: italic;*/
text
/*取出下划线*/
text-decoration: none;
/*下划线展示*/
text-decoration: underline;
/*文本水平居中*/
text-align: center;
/*行高 行高的高度和外面的div高度一样时，里面的内容就会垂直居中*/
行高
line-height: 40px;
背景
/*设置背景图片*/
background-image: url("http://img11.360buyimg.com/da/jfs/t16363/164/2298198848/33213/870500f1/5aa68632Nd7790d0c.png");
/*设置背景图片不重复*/
background-repeat: no-repeat;
/*调整背景图片的位置 两个属性 X Y*/
background-position: center;
/*调整背景图片的大小 属性：宽 高 这样做往往会导致图片失帧，不建议使用*/
/*background-size: 100% 500px;* */
background-color: #e93854;
/*三原色*/
/*background-color: rgb(255,0,0);*/
/*在三原色的基础上加入了透明度 0~1 .5=0.5*/
/*background-color: rgba(255,0,0,.5);*/
-->
border常用边框样式：
6.css其他属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div_1{
width: 200px;
height: 200px;
background-color: rgba(255,0,0);
color: rgba(0,0,255);
/*调整透明度的属性 0~1*/
opacity: 0.7;
/*超出隐藏*/
overflow: hidden;
}
/*行内元素不支持指定宽和高*/
#span_1{
width: 100px;
height: 100px;
border: 1px solid red;
/*行内元素转块元素 inline block none(隐藏)*/
display: block;
}
ul{
float: right;
}
li{
/*列表的风格去除*/
list-style: none;
float: left;
/*内边距*/
padding-left: 15px;
}
</style>
</head>
<body>
<ul>
<li><a href="">新闻</a></li>
<li><a href="">hao123</a></li>
<li><a href="">地图</a></li>
<li><a href="">视频</a></li>
<li><a href="">贴吧</a></li>
<li><a href="">学术</a></li>
</ul>
<hr />
<div class="div_1">
我们都是div我们都是div我们都是div我们都是div
我们都是div我们都是div我们都是div我们都是div
我们都是div我们都是div我们都是div我们都是div
我们都是div我们都是div我们都是div我们都是div
</div>
<hr />
<span id="span_1">1234</span>
<hr />
</body>
</html>
<!--
行内元素：（多个标签位于同一行）
span font 小标签 img a等
块元素：（标签可以自动换行的元素是块元素）
div h1-h6 u1 p 等等
-->
7.css中的定位操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div_1{
width: 200px;
height: 200px;
background-color: red;
/*绝对定位*/
/*position: absolute;*/
/*相对定位*/
/*position: relative;*/
/*固定定位*/
/*position: fixed;*/
/*默认定位 position:static*/
top: 150px;
left: 150px;
/*置于底层位置*/
z-index: -1;
}
.div_2{
width: 200px;
height: 200px;
background-color: gray;
}
</style>
</head>
<body>
<div class="div_1"></div>
<div class="div_2"></div>
</body>
</html>
<!--
绝对定位：
absolute: 定位离开之后释放的之前的位置。 基于外层父级标签来说。
相对定位：
relative: 定位离开之后之前的位置没有释放。基于之前的位置来说（较常用）。
固定定位：
fixed： 始终是基于浏览器的左上角定位。 适合做广告。
默认定位：
static: 初始定位的操作。
-->
8.css中的盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*清除浏览器留白*/
html,body{margin: 0px;padding: 0px;}
#div_1{
width: 200px;
height: 200px;
background-color: red;
/*内边距 真实div和border之间的距离*/
/*padding: 50px;*/
/*上下距离 左右距离*/
/*padding: 30px 50px;*/
/*上 右 下 左 顺时针的方向*/
/* padding: 10px 20px 30px 40px;
*/ /*外边距 给盒子定位*/
/*margin-left:80px;
margin-top: 70px;*/
/*外边距 垂直的方向会取较大的值*/
margin-bottom: 40px;
/*外边距 水平方向会合并*/
margin-right: 40px;
}
#div_2{
width: 200px;
height: 200px;
background-color: gold;
}
div{
}
</style>
</head>
<body>
<div id="div_1"></div>
<div id="div_2"></div>
</body>
</html>
9.css3中的常用选择器1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*获取class名称是div1下面的第一个子元素*/
.div_1>p:first-child{
color:red;
}
/*获取class名称是div1下面的最后一个子元素*/
.div_1>p:last-child{
color: green;
}
/*获得具体某一个子元素*/
.div_1>p:nth-child(2){
color: palegoldenrod;
}
/*偶*/
/*.div_1>p:nth-child(even){
background-color: red;
}*/
/*奇*/
/*.div_1>p:nth-child(odd){
background-color: green;
}*/
/*获得为空的 p标签*/
.div_1>p:empty{
height: 50px;
background-color: pink;
}
/*获得焦点,执行什么操作*/
/*input:focus{
width: 300px;
height: 300px;
}*/
/*当被选择是,执行什么操作*/
input:checked{
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="div_1">
<p>1</p>
<p>2</p>
<p>3</p>
<p></p>
<p>4</p>
<p>5</p>
</div>
<hr/>
<input type="text" name="" id="" value="" />
<hr />
男:<input type="radio" name="sex" id="" value="" checked="checked"/>
女:<input type="radio" name="sex" id="" value="" />
</body>
</html>
10.css3中常用选择器2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*伪对象选择器是指在指定的对象之前(or之后)插入内容（也可以是图片.....）*/
#div1:before{
content: "你好，";
}
#div1:after{
content: "不，你在想桃子";
}
</style>
</head>
<body>
<div id="div1">我是祖国的花朵！</div>
</body>
</html>
11.css中常用选择器3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*属性选择器*/
/*input[type=text]{
width: 300px;
height: 40px;
}*/
/*属性 ^以什么开头 $以什么结尾*/
input[name^='fom']{
width: 300px;
height: 40px;
}
</style>
</head>
<body>
<p>
账号：<input type="text" name="fom_zh" id="" value="" />
</p>
<p>
密码：<input type="password" name="fom_pwd" id="" value="" />
</p>
<p>
邮箱：<input type="email" name="fom_email" id="" value="" />
</p>
<p>
年龄：<input type="number" name="fom_age"/>
</p>
</body>
</html>
<!--
选择器的种类：
①基础选择器
* id class 标签
②关系选择器
> + ~
③伪类选择器
hover
④伪对象选择器
before after
⑤属性选择器
input[name^='fom']
-->
12.心动代码
是心动呀！！！
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.cen{
width: 200px;
height: 200px;
background-color: #d5093c;
/*阴影 水平方向偏移量 垂直方向偏移量 模糊度 阴影颜色*/
box-shadow: 0px 0px 70px #D5093C;
/*执行动画的调用 执行时间 执行动画名字 执行次数*/
animation: 0.5s aj infinite;
}
.lef{
/*倒圆角指令*/
border-radius: 100px;
/*左上右下 右上左下*/
/*border-radius: 10px 60px;*/
/*顺时针*/
/*border-radius: 10px 20px 30px 40px;*/
position: absolute;
top: 200px;
left: 200px;
}
.rig{
border-radius: 100px;
position: absolute;
top: 200px;
left: 341px;
}
.c{
/*旋转角度*/
transform: rotate(45deg);
position: absolute;
top: 269px;
left: 271px;
}
div:hover{
/*放大的倍数*/
/*transform: scale(1.3);X:水平位移 Y:垂直的唯一 负数往上走*/
/*transform: translate(0px,-5px);*/
/*2D角度旋转 X Y */
transform: skew(40deg,45deg);
}
/*css3中的动画*/
@keyframes aj{
/*from{}
to{}*/
0%{transform: scale(1)rotate(45deg);}
50%{transform: scale(1.1)rotate(45deg);}
100%{transform: scale(1)rotate(45deg);}
}
/*兼容不同的浏览器*/
/*Firefox*/
/*@-moz-keyframes name{
from{}
to{}
}*/
/*Opera*/
/*@-ms-keyframes name{
from{}
to{}
}*/
/*Chrome和Safari*/
/*@-webkit-keyframes name{
from{}
to{}
}*/
</style>
</head>
<body>
<div class="cen lef"></div>
<div class="cen c"></div>
<div class="cen rig"></div>
</body>
</html>
<!--
css3当中的常用属性
/*倒圆角指令*/
border-radius: 100px;
/*左上右下 右上左下*/
/*border-radius: 10px 60px;*/
/*顺时针*/
/*border-radius: 10px 20px 30px 40px;*/
/*旋转角度*/
transform: rotate(45deg);
/*放大的倍数*/
/*transform: scale(1.3);X:水平位移 Y:垂直的唯一 负数往上走*/
/*transform: translate(0px,-5px);*/
/*2D角度旋转 X Y */
/*阴影 水平方向偏移量 垂直方向偏移量 模糊度 阴影颜色*/
box-shadow: 0px 0px 70px #D5093C;
/*css3中的动画*/
@keyframes aj{
/*from{}
to{}*/
0%{transform: scale(1)rotate(45deg);}
50%{transform: scale(1.1)rotate(45deg);}
100%{transform: scale(1)rotate(45deg);}
}
-->
学完HTML，CSS后，模仿京东的小页面，把学的知识综合运用下。
运行效果如下：
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/jd.css"/>
<link rel="stylesheet" type="text/css" href="icon/iconfont.css"/>
</head>
<body>
<!--导航开始-->
<div class="nav">
<div class="warp">
<ul class="nav_ul1">
<li><a href=""><i class="iconfont"></i>京东首页</a></li>
<li><a href="">配送至：北京</a></li>
</ul>
<ul class="nav_ul2">
<li><a href="">祥子宝贝</a><span>|</span></li>
<li><a href="">我的订单</a><span>|</span></li>
<li><a href="">我的京东</a><span>|</span></li>
<li><a href="">京东会员</a><span>|</span></li>
<li><a href="">企业采购</a><span>|</span></li>
<li><a href="">京东手机</a><span>|</span></li>
<li><a href="">关注京东</a><span>|</span></li>
<li><a href="">客户服务</a><span>|</span></li>
<li><a href="">网站导航</a></li>
</ul>
</div>
</div>
<!--导航结束-->
<!--搜索框开始-->
<div class="search">
<div class="warp">
<img src="img/logo.jpg"/>
<div class="search_div">
<input type="text" name="" class="search_text" value="" />
<input type="button" name="" class="search_but" value="搜索" />
</div>
</div>
</div>
<!--搜索框结束-->
<!--标题开始-->
<div class="title warp">
<h3>全部商品</h3>
<div>
<span>配送到</span>
<select>
<option>昌平区</option>
<option>顺义区</option>
<option>大兴区</option>
<option>朝阳区</option>
</select>
</div>
</div>
<!--标题结束-->
<!--显示菜单开始-->
<div class="tips warp">
<ul>
<li>
<input type="checkbox" name="" id="" value="" />
全选
</li>
<li>商品</li>
<li>单价</li>
<li>数量</li>
<li>小计</li>
<li>操作</li>
</ul>
</div>
<!--显示菜单结束-->
<!--商品详情展示开始-->
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox" name="" id="" value="" /></li>
<li class="info_2"><img src="img/img1.jpg" width="80px"/></li>
<li class="info_3">【京东超市】desha春秋季儿童休闲服</li>
<li class="info_4">颜色：灰色+粉红</li>
<li class="info_5">￥158.99</li>
<li class="info_6">
<button>-</button>
<input type="text" name="" id="" value="1" />
<button class="bot">+</button>
</li>
<li class="info_7">￥158.99</li>
<li>
<a>删除</a><br />
<a>移到我的关注</a>
</li>
</ul>
</div>
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox" name="" id="" value="" /></li>
<li class="info_2"><img src="img/img2.jpg" width="80px"/></li>
<li class="info_3">【京东超市】desha春秋季儿童休闲服</li>
<li class="info_4">颜色：灰色+粉红</li>
<li class="info_5">￥158.99</li>
<li class="info_6">
<button>-</button>
<input type="text" name="" id="" value="1" />
<button class="bot">+</button>
</li>
<li class="info_7">￥158.99</li>
<li>
<a>删除</a><br />
<a>移到我的关注</a>
</li>
</ul>
</div>
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox" name="" id="" value="" /></li>
<li class="info_2"><img src="img/img3.jpg" width="80px"/></li>
<li class="info_3">【京东超市】desha春秋季儿童休闲服</li>
<li class="info_4">颜色：灰色+粉红</li>
<li class="info_5">￥158.99</li>
<li class="info_6">
<button>-</button>
<input type="text" name="" id="" value="1" />
<button class="bot">+</button>
</li>
<li class="info_7">￥158.99</li>
<li>
<a>删除</a><br />
<a>移到我的关注</a>
</li>
</ul>
</div>
<!--商品详情展示结束-->
<!--结算开始-->
<div class="balance warp">
<ul class="balance_ul1">
<li>
<input type="checkbox" name="" id="" value="" />
全选
</li>
<li><a>删除选中商品</a></li>
<li><a>移到我的关注</a></li>
<li><a>清除下柜商品</a></li>
</ul>
<ul class="balance_ul2">
<li>已选择<span>1</span>件商品</li>
<li>总价 <span>￥12</span></li>
<li>
<button class="butt">去结算</button>
</li>
</ul>
</div>
<!--结算结束-->
</body>
</html>
CSS代码：
jd.css文件：
.nav{
height: 30px;
background-color: #f1f1f1;
}
.warp{
width: 1000px;
margin: 0 auto;
}
.nav_ul1,.nav_ul2 li{
float: left;
}
.nav_ul1 li{
float: left;
line-height: 30px;
margin-right: 20px;
}
.nav_ul1 a,.nav_ul2 a,.nav_ul2 span{
color: gray;
font-size: 12px;
}
.nav_ul2{
float: right;
}
.nav_ul2 li,.nav_ul2 span{
line-height: 30px;
margin-left: 10px;
}
.nav a:hover{
color: red;
}
/*搜索框开始*/
.search{
margin-top: 10px;
}
.search img{
/*清除之前的样式*/
clear: both;
float: left;
}
.search_div{
float: right;
margin-top: 25px;
}
.search_text{
width: 265px;
height: 21px;
border: 3px solid #c91623;
position: relative;
left: 4px;
top: -1px;
}
.search_but{
width: 51px;
height: 29px;
background-color: #c91623;
border: 0px;
color: #fff;
}
/*搜索框结束*/
/*标题开始*/
.title{
margin-top: 100px;
}
.title h3{
float:left;
font-size: 23px;
color: #c91623;
}
.title div{
float: right;
font-size:14px;
color: gray;
}
/*标题结束*/
/*显示菜单开始*/
.tips{
width: 1000px;
height: 50px;
background-color: #F1F1F1;
margin-top:140px;
border: 1px solid #e9e9e9;
}
.tips li{
float:left;
line-height: 50px;
font-size: 12px;
color: gray;
}
.tips li:nth-child(1){width: 90px;border-top: 3px solid #c91623;}
.tips li:nth-child(2){margin-left: 80px;}
.tips li:nth-child(3){margin-left: 430px;}
.tips li:nth-child(4){margin-left: 70px;}
.tips li:nth-child(5){margin-left: 110px;}
.tips li:nth-child(6){margin-left: 50px;}
/*显示菜单结束*/
/*商品详情展示开始*/
.info{
width: 1000px;
height: 125px;
background-color: #fff4e8;
border: 1px solid gray;
margin-top: 30px;
border-top: 3px solid gray;
}
.info li{
margin-top: 20px;
float: left;
}
.info_1{
margin-left: 24px;
}
.info_2{
margin-top: 15px;
border: 1px solid gray;
}
.info a{
font-size: 12px;
color: #333;
}
.info_3{
width: 270px;
height: 20px;
}
.info_4{
margin-left: 45px;
}
.info_5{
margin-left: 70px;
}
.info_6{
margin-left: 40px;
}
.info_6 input{
width: 20px;
height: 12px;
text-align: center;
position: relative;
top: -2px;
left: -5px;
}
.info_6 button{
width: 30px;
height: 18px;
}
.bot{
position: relative;
left: -10px;
}
.info_7{
margin-left: 40px;
}
/*商品详情展示结束*/
/*结算开始*/
.balance{
width: 1000px;
height: 50px;
border: 1px solid gray;
margin-top: 30px;
}
.balance_ul1 li,.balance_ul2 li{
float: left;
line-height: 50px;
margin-left: 24px;
}
.balance_ul2{
float: right;
}
.butt{
width: 100px;
height: 50px;
background-color: #c91623;
border: 0px;
color: #fff;
font-size: 20px;
font-weight: bold;
}
.balance span{
font-size: 25px;
color: #c91623;
font-weight: bold;
}
/*结算结束*/
reset.css文件：
body,div,h1,h2,h3,h4,h5,h6,li,ol,ul{margin:0px;padding: 0px;}
body{text-align: center;font-size: 14px;}
a{text-decoration: none;}
li{list-style: none;}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
