HTML和CSS

来源：互联网发布：编程语言历史发展编辑：程序博客网时间：2024/06/16 00:07

document.UserLogin.UserName.focus 这是一个把光标落到某个控件的语句 UserLogin 是Form名 UserName 是要落到的那个控件名

css:层叠样式表cascading stylesheet

css标准也是由w3c制定的

css用来设置html外观样式的

使用方法：1、内联样式；2、内部样式表；3、外部样式表

1、内联样式：在html标记中的style属性中嵌入css

缺点：不能重复使用，会导致代码重复

2、内部样式表：在HTML的head标记中加入<style>标签，将css写入<style>标记中，在style标记中需要先使用选择器将HTML标记选中，然后再设置其样式

css选择器：

a. Id选择器

ID指的是标签的ID属性，且所有标签的ID应该具有唯一性，css可以通过标签的ID选中该标记

eg:

#i1{color: blue;font-style: bold;}/*ID选择器,用#开头*/

<div id="i1">今天星期二，天气：晴</div>

b. Class类选择器

eg:

.cls1{background-color: yellow;}/*class类选择器，用.开头*/

<p class="cls1">星期二是工作日，要上课</p>

.cls1选中class为cls1的标记，，在html标记中class属性可以使用多个类，多个类之间用空格隔开

eg:

c. 标签选择器

eg：

p{color: pink;font-size: 20px;}/*标签选择器，选中所有该类型的标记*/

d. 并集选择器

使用逗号“,”隔开可以一并选择多个标记

eg:

div,p,h1{color: blue;font-size: 20px;}

e. 交集选择器

使用“.”两个选择器都满足

eg:

div.cl1{font-size:30px; color: red;}

f. 伪类选择器

a:link {color: #FF0000} /*默认状态，未访问的链接 */

a:visited {color: #00FF00} /*已访问的链接 */

a:hover {color: #FF00FF} /*鼠标移动到链接上 */

a:active {color: #0000FF} /*选定的链接 */

超链接伪类使用时遵循“爱恨原则”，顺序：l,v,h,a,可以只添加l和h

#t1 td:hover{background-color:#FFFF00;}

#t2 td:hover{background-color:blue;}

g. 后代选择器

使用空格隔开，选择空格后面的标记，后面的标记又是空格前面的标记的后代标记

eg:

div.cl1 p{background-color: yellow;font-style: italic;}

h. 子选择器

使用“>”

eg:

div.cl1 div >p{background-color: green;}

i. 兄弟选择器

使用“~”

div.cl1 ~ *{color: gray;font-style: bold;}

内联样式优先级高，其次是ID选择器，再者是class类选择器，最后是标签选择器
*{border: black dotted 2px;}/* *表示选中所有标记,border:边框，dotted:点线*/

CSS属性：

选择器选中标记后使用CSS的属性去设置标记的样式，CSS属性都是键值对，每个属性设置完后使用“;”表示结束

font属性:当字体名中有空格、汉字、特殊字符时需要在font-family声明中加引号

分开设置：

font-family:"楷体"; /*字体名称*/

font-weight:bold; /*字体粗细*/

font-size:20px; /*字体大小，默认为16px*/

font-style:italic; /*是否为斜体*/

normal--文本正常显示

italic --文本斜体显示

oblique -- 文本倾斜显示

一次性设置：依次设置

font:font-style font-weight font-sizefont-family;

eg：font:italic600 30px "宋体";

文本属性：CSS都要加单位，如果值为0可以不加

text-align:right；水平对其方式，默认左对齐值有（right,left,center）

text-indent:2em;首行缩进，正值往后缩进，负值为前缩进，em是一个相对单位，相对当前字体大小单位

line-height:30px;行高

letter-spacing:3px;字母间隔，输入的长度值会使字母之间的间隔增加或减少指定的量

word-spacing:3px;改变字（单词）之间的标准间隔。如果提供一个正长度值，那么字之间的间隔就会增加；如果为负值，会把它拉近

text-decoration:修饰符（none(什么都没有),underline(下划线),overline(上划线),line-through(删除线),blink(让文本闪烁)）

curson:鼠标样式，常用的有：pointer(光标呈现为指示链接的指针(一只手))

crosshair(光标呈现十字线)、wait(指示程序正忙)...更多见帮助文档

块级元素都有width和height属性，行级元素没有，行级是由内部内容决定大小

px:像素，相对单位，分辨路高像素小

CSS背景：

使用background-color设置背景色

background-image设置背景图片

eg:background-coloc:url(路径)

background-repeat背景图片是否重复。no-repeat:不重复、repeat-x:水平重复、repeat-y:垂直重复

背景颜色在最下面的背景

background-position背景图片在背景中的位置，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现

background-attachment背景图片是否固定或随页面滚动，fixed当页面的其余部分滚动时，背景图像不会移动；scroll默认值，背景图像随着页面滚动

建议一次性设置：

broundground:colorimage repeat attachment position;

一次设置值，值可以省略，一次性设置不要加逗号

边框：border

可以分别设置上下左右四个边框，也可以直接使用border分别设置和一起设置，谁在后面使用谁的设置

solid:实线

dotted:点线

double:双线

dashed:虚线

none:无边框

关键字：列表、间距、浮动、框模型、定位、外部样式

*{margin:0;padding:0;}去掉HTML所有标记的间距，后面如果哪个标记需要间距再单独添加

<center></center>HTML中的居中

list-style-image:url(路径);使用图标作为标志

list-style-type:none;改变其标志类型

list-style-position:inside;列表标志位置，引导符是放置在内容里面还是外面

inside

列表项目标记放置在文本以内，且环绕文本根据标记对齐。

outside

默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

当list-style-image不存在时，使用list-style-type设置，优先级不同，type低于image

简写样式列表：list-style

文字行高和标签高度一样，则标签只能容纳一行，形成垂直居中

内间距padding：内容距离外边框的间距，设置此间距时会将外标签撑大

外间距margin：边框与边框的距离（赋值顺序：顺时针，上右下左）

margin:10px;一个值是四个边框外间距

margin:10px 20px;2个值第一个是上下，第二个是左右

margin:10px 20px 30px;3个值是上右下，左会复制右的值使用

margin:10px 20px 30px 40px;4个值是上右下左

margin:10px auto;相对其父标记居中，前提是需要设置其宽度

盒模型的宽高计算：margin+padding+border+width(height)

display:元素显示，none:元素不显示、block:以块级显示、inline:以行级显示

float：让元素浮动到Z轴，当块级元素浮动时，多少内容占多大地方

属性：left(向左浮动)、right(向右浮动)、none(默认值、元素不浮动，并会显示在其在文本中出现的位置)

clear：清除漂浮元素，将设置好的标签拉下来，已经设置好的样式不会发生改变

属性：left(清除左边元素)、right(清除右边元素)、both(清除左右两边)

一个标签浮动，另一个标签不漂浮且包含文字，则文字跟在漂浮的标签之后，因为文字本身就是漂浮的

定位：

相对定位：position:relative;相对标记原来的位置进行定位，相对定位不会释放原来的空间

eg:

#out{margin:100pxauto; width:600px; height:600px; border:1px solid red;

position:relative;}

绝对定位：position:absolute;相对其已定位的父标签进行定位，释放原来的空间，标签也会漂浮

eg:

#one{background:blue;width:200px; height:200px;float:left;

position:absolute;

bottom:20px;left:20px;}

固定定位：position:fixed;相对于浏览器窗口进行定位

eg:

#ad{width:100px;height:300px; background-color:#FFCC99; position:fixed;

top:100px;left:0px;}

外部样式表：<link href=”路径” rel=”stylesheet” >

z-index:number;设置元素的堆叠顺序，数字越小，离用户越远

overflow：溢出元素框发生的事情。hidden:溢出不显示、visible:默认，溢出显示scroll:添加滚轮

opacity:number;透明度，值越小，越透明

一些练习

点击超链接，在iframe中显示改变的内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<a href="list.html" target="window">第一章</a><br />
<a href="form.html" target="window">第二章</a><br />

<iframe name="window" src="index.html" width="600" height="500" frameborder="0" scrolling="no"></iframe>

</body>
</html>

---------------------------------------------------------------------
<h1 id="test1" title="小说开始了">第一章</h1>

<a href="#test1">返回顶部</a><br>
<a href="webday1.rar">点击下载</a><br>
<a href="mailto:111111@qq.com">联系站长</a>
<a href="tel:13643114851" title="打了我也不接">给我打电话</a>
<a href="http://www.baidu.com"><img alt="这是一张图片" title="盗图" src="http://ipad-cms.csdn.net/cms/attachment/201708/59816ddd083630c1.png" width="300" height="300" border="1" /></a><br>

---------------------------------------------------------------------
<table width="400" height="250" align="center" border="1">
<tr><th rowspan="2">10001</td><td>数学</th><td>85</td><td rowspan="2">175</td></tr>
<tr><td colspan="2">语文90</td></tr>
<tr><th rowspan="2">10002</th><td>物理</td><td>75</td><td rowspan="2">163</td></tr>
<tr><td>化学</td><td>88</td></tr>
</table>
---------------------------------------------------------------------
<ol type="A">
<li>造纸</li>
<li>火药</li>
<li>活字印刷</li>
<li>指南针</li>
</ol>
<ul>
<li><a href="#">北京市</a>
<ol>
<li>东城区

</li>
<li>西城区</li>
<li>朝阳区</li>
<li>海淀区</li>
<li>昌平区</li>
</ol>
</li>
<li>火药</li>
<li>活字印刷</li>
<li>指南针</li>
</ul>
<dl>
<dt>河北省</dt>
<dd>石家庄市</dd>
<dd>唐山市</dd>
<dd>秦皇岛</dd>
<dt>河南省</dt>
<dd>郑州</dd>
<dd>南阳</dd>
<dd>洛阳</dd>
</dl>
---------------------------------------------------------------------
练习：

<!DOCTYPE html>
<html>
<head>
<title>练习1、2</title>
<meta charset="utf-8">
</head>
<body>
<h1>我的电脑文件</h1>
<ul>
<li>
我的电脑
<ul>
<li>C:
<ul type="disc">
<li>
收藏
</li>
<li>
文件
</li>
</ul>
</li>
<li>D:
<ul>
<li>
游戏
</li>
<li>
电影
</li>
<li>
资料
</li>

</ul>
</li>
</ul>
</li>
</ul>
<ol>
<li>
HTML中换行标签是（）
<ol type="A">
<li><br /></li>
<li><hr /></li>
<li><p /></li>
<li><img /></li>
</ol>
</li>
<li></li>
<li></li>
</ol>
10<sub>2</sub>
<br>2<sup>4</sup>
</body>
</html>
---------------------------------------------------------------------
练习：
<!DOCTYPE html>
<html>
<head>
<title>网页</title>
<meta charset="utf-8">
<style type="text/css">
.ttt{
display: inline;
line-height: 50px;
margin: 1px;
padding: 1px;
font-size: 16px;
font-family: "楷体";
}
label:hover{
color: #00FFFF;
}
.a{
background-image: url(0.jpg);
background-size: cover;
}
.c{
float: left;
}
.d{
width: 300px;
text-align: center;
}
.e{
position: absolute;
z-index:999;
}
a:hover{
color: #00FFFF;
}
#nav ul {
Width:900px;
height:40px;
margin:30px auto;
padding:0;
list-style:none;
border-top:solid 5px #00FFFF;
border-bottom:solid 5px #00FFFF;
background:url(5.gif);
}
#nav ul li {
width:100px;
float:left;
text-align:center;
font:16px/2.5 "microsoft yahei";
}
#nav ul li a {
color:black;
text-decoration:none;
}
#nav ul li a:hover {
display:block;
color:black;
background:#00FFFF;
}
#ddd{
width: 600px;
height: 260px;
position: absolute;
right: 0px;
top:460px;
border: 1px solid orange;

}
#ddd h2{
color: red;
font-size: 20px;
}
li{
list-style-type: none;
}
li span{
background: url(dot_01.gif) no-repeat left;
margin: 0;
padding: 6px;
}
li a{
color: red;
text-decoration: none;
text-align: center;
}
a:hover span{
background: url(dot_02.gif) no-repeat left;
}
</style>
<script type="text/javascript">
function st(){

// user为form的名字
document.user.input.focus();
var pre=document.getElementById("prevence");
var pres=new Array(new Option("--请选择省--",""),new Option("湖南","hn"),new Option("广东","gd"),new Option("河南","hn"),new Option("福建","fj"));
for(var i=0;i<pres.length;i++){
pre.options[i]=pres[i];
}
}
var citys=new Array();
citys[0]=new Array(new Option("--请选择市--",""));
citys[1]=new Array(new Option("--请选择市--",""),new Option("长沙","cs"),new Option("衡阳","hy"),new Option("株洲","zz"),new Option("湘潭","xt"));
citys[2]=new Array(new Option("--请选择市--",""),new Option("广州","gz"),new Option("深圳","sz"),new Option("保安","ba"),new Option("福田","ft"));
citys[3]=new Array(new Option("--请选择市--",""),new Option("郑州","zz"),new Option("安阳","ay"),new Option("洛阳","ly"),new Option("南阳","ny"));
citys[4]=new Array(new Option("--请选择市--",""),new Option("闽南","mn"),new Option("福州","fz"),new Option("莆田","pt"),new Option("泉州","qz"));
function change(){
var city=document.getElementById("city");
var index=prevence.selectedIndex;

for(var x=0;x<citys[index].length;x++){
city.options[x]=citys[index][x];
}
}
function on(name)
{
name.value="";

}
function off(name)
{
name.value="请输入1~10位数字或字母";
name.style.color="gray";
}
</script>
</head>
<body onload="st()" class="a">
<div id="nav">
<ul>
<li><a href="#" >首页</a></li>
<li><a href="#" >博客</a></li>
<li><a href="#" >预览</a></li>
<li><a href="#" >论坛</a></li>
<li><a href="#" >下载</a></li>
<li><a href="#" >产品咨询</a></li>
<li><a href="#" >好吃的</a></li>
<li><a href="#" >好玩的</a></li>
<li><a href="#" >去你妹的</a></li>
</ul>
</div>
<form action="" method="post" name="user" class="ttt c" >
<div class="ttt"><label for="input" >请输入账号:</label><input type="text" name="input" id="input" onfocus="on(input)" onblur="off(input)">
<div class="ttt"><input type="text" name="ii" id="ii" onclick="off(ii)" value="重要！请准确填写。" disabled="disabled"> </div> </div>
<br>
<div class="ttt"><label for="password">请输入密码:</label><input type="password" name="password" id="password" placeholder="请输入1~10位数字或字母">
<div class="ttt"><input type="text" name="iii" id="iii" onclick="off(iii)" value="重要！请准确填写。" disabled="disabled"> </div></div><br>
<div class="ttt"><label for="input">请输入电话:</label><input type="text" name="tel" id="tel" onfocus="on(tel)" onblur="off(tel)">
<div class="ttt"><input type="text" name="iii" id="iii" onclick="off(iii)" value="重要！请准确填写。" disabled="disabled"> </div></div><br>
<div class="ttt"><label>请选择姓名:</label> <input type="radio" name="sex" id="men" checked="checked"> <label for="men">男</label> <input type="radio" name="sex" id="female" ><label for="female">女</label> </div><br>
<div class="ttt"><label style="padding: 10px;font-size: 20px;">请输入验证码</label><input type="text" name="validate" id="validate" style="padding: 10px;"></div>
<div><img src="2.png"><label>看不清?换一张</label> </div>
<div class='ttt' >
<select name="select" id="prevence" onchange="change()">
<option selected="selected">--请选择省--</option>
</select>
<select id="city">
<option selected="selected">--请选择市--</option>
</select>
</div> <br>
<div class="ttt">
<textarea name="textarea" cols="33" rows="5">

</textarea>
</div>
<div><input type="image" src="1.png" name="submit" value="">
</div>
</form>
<iframe src="#" width="880" height="340" class="ttt c e" name="iframe" ></iframe>
<form class="ttt c d" >
<a href="http://www.baidu.com" target="iframe">这是百度这是百度</a><br>
<a href="http://www.baidu.com" target="iframe">这是百度这是百度</a><br>
<a href="http://www.baidu.com" target="iframe">这是百度这是百度</a><br>
<a href="http://www.baidu.com" target="iframe">这是百度这是百度</a><br>
<a href="http://www.baidu.com" target="iframe">这是百度这是百度</a><br>
<a href="http://www.baidu.com" target="iframe">这是百度这是百度</a><br>
</form>
<div id="ddd">
<h2 id="h2">看一看瞧一瞧走过路过不要错过</h2>
<ul>
<li><a href="#"><span>1</span>雅诗兰黛即时修护眼部精华霜15ml</a></li>
<li><a href="#"><span>2</span>伊丽莎白雅顿显效复合活肤霜 75ml</a></li>
<li><a href="#"><span>3</span>OLAY玉兰油多效修护霜 50g</a></li>
<li><a href="#"><span>4</span>巨型一号丝瓜水320ML</a></li>
<li><a href="#"><span>5</span>倩碧保湿洁肤水2号 200ml</a></li>
<li><a href="#"><span>6</span>兰芝 (LANEIGE)夜间修护锁水面膜 80ml</a></li>
<li><a href="#"><span>7</span>比度克细肤淡印霜 30g</a></li>
<li><a href="#"><span>8</span>欧莱雅青春密码活颜精华肌底液</a></li>
</ul>
</div>
</body>
</html>
---------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>



<nav>
<div class="nav">
<div class="navcontion">
<a href="#"><img src="img/logo.png" alt="" /></a>
<ul>
<li><a href="#">注册</a></li>
<li><a href="#">登录</a></li>
<li><a href="#">帮助</a></li>
<li class="navli">
<form action="">
<input type="text" placeholder="搜人"/>
<img src="img/soso.png" alt="" />
</form>
</li>
</ul>
</div>
</div>
</nav>

<section>
<div class="section">

<aside>
<div class="aside">
<form action="">
<input type="text" style="margin-top:30px;"/>
<input type="password" />
<input type="checkbox" id="nextlogin"/>
<label for="nextlogin">下次自动登录</label>
<a href="#">忘记密码？</a><br />
<button class="btnone">登录</button>
<p></p>
<button class="btntwo">注册</button>
</form>
<span>使用其他账号登录</span><br />
<a href="#" class="asideimgone"><img src="img/QQ.png" alt="" /></a>
<a href="#" class="asideimgtwo"><img src="img/weibo.png" alt="" /></a>
   <p></p>
   <span>开心网客户端</span><br />
   <img src="img/happy.png" alt="" class="asideimgthree"/>
   <img src="img/iphone.png" alt="" class="asideimgthree"/>
   <img src="img/Android.png" alt="" class="asideimgthree"/>
   <a href="#" class="asidemore">更多版本>></a>
</div>
</aside>

<div class="sectionright">
<h3>Lorem ipsum dolor sit amet.</h3>
<form action="">
<table>
<tr>
<td style="float:left;margin-top:10px;">电子邮箱：</td>
<td>
<input type="text" /><br />
<span>如果没有邮箱，你可以用<a href="#">账号注册</a></span>
</td>
<td rowspan="9">
<img src="img/tableimg.png" alt="" />
</td>
</tr>
<tr>
<td>创建密码：</td>
<td><input type="password" /></td>

</tr>
<tr>
<td>姓　　名：</td>
<td><input type="text" /></td>

</tr>
<tr class="tableradio">
<td>性　　别：</td>
<td>
<input type="radio" name="sex" id="man"/>
<label for="man" style="margin-right:20px;">男</label>
<input type="radio" name="sex" id="woman" checked="checked"/>
<label for="woman">女</label>
</td>
</tr>
<tr>
<td>生　　日：</td>
<td>
<select name="" id="">
   <option value="">请选择</option>
   <option value="">1988</option>
   <option value="">1989</option>
</select>年
   <select name="" id="">
   <option value="">--</option>
   <option value="">11</option>
   <option value="">12</option>
   </select>月
   <select name="" id="">
   <option value="">--</option>
   <option value="">01</option>
   <option value="">02</option>
   </select>日
</td>
</tr>
<tr class="tableradio">
<td>我  现  在：</td>
<td>
<input type="radio" name="now" id="work" checked="checked"/>
<label for="work" style="margin-right:15px;">在工作</label>
<input type="radio" name="now" id="school" />
<label for="school" style="margin-right:15px;">在上学</label>
<input type="radio" name="now" id="other"/>
<label for="other" style="margin-right:15px;">其他</label>
</td>

</tr>
<tr>
<td>居  住  地：</td>
<td><input type="text" /></td>

</tr>
<tr class="tableradio">
<td></td>
<td>
<input type="checkbox" id="agree"/>
<label for="agree">
同意
<a href="#">开心网服务条款</a>
</label>
</td>
</tr>

<tr>
<td></td>
<td>
<input type="submit" value="立即注册" class="button"/>

</td>

</tr>


</table>
</form>
</div>
</div>
</section>

<footer>
<div class="footer">
<div class="footerone">
<ul class="footerulone">
<li><a href="#">关于我们</a></li>
<li><a href="#">手机中心</a></li>
<li><a href="#">应用中心</a></li>
<li><a href="#">开心招聘</a></li>
<li><a href="#">客服</a></li>
<li><a href="#">帮助</a></li>
</ul>
<i>©2017 开心网</i>
</div>
<div class="footertwo">
<p><span>北京开心人信息技术有限公司：京网文[2015]2180-400号</span>
<ul class="footerul">
<li style="width:130px;"><a href="#">京ICP证080482号</a> </li>
<li style="width:200px;">京公网安备11010802014447号</li>
<li style="width:170px;">(京)-非经营性-2009-0009 </li>
<li style="width:120px;">未成年家长监护</li>
</ul>
</p>
<p style="clear: both;">违法和不良信息举报电话：010-57978400 举报邮箱：jubao@kaixin-inc.com 北京互联网举报中心 www.bjjubao.org北京地区网站联合辟谣平台中国互联网举报中心</p>
</div>
</div>
</footer>
</body>
</html>

-------------------------------------------------------------------------------------------------------------------------------------------

*{
margin:0px;
padding:0px;
}
/*导航*/
.nav{
width:100%;
height:50px;
background-color:#E6444E;
position: fixed;
top:0px;
left:0px;
z-index:2;
}
.navcontion{
width:1024px;
height:50px;
border:1px solid transparent;
margin:0 auto;
}
.navcontion img{
margin-top:5px;
}
.navcontion ul{
width:420px;
height:50px;
/*border:1px solid blue;*/
float:right;
}
.navcontion ul li{
width:60px;
height:50px;
/*border:1px solid blue;*/
float:left;
list-style:none;
text-align: center;
}
.navcontion ul li a{
display: block;
width:60px;
height:50px;
text-decoration: none;
color:#FAD9DB;
line-height:50px;
font-size:12px;
}
.navcontion ul li a:hover{
height:48px;
background-color:#F44250;
color:#fff;
}
.navcontion ul .navli{
width:230px;
}
.navli input{
width:180px;
height:24px;
border:1px solid #F3F3F3;
float:left;
margin-top:12px;
margin-left:3px;
padding-left:2px;
background-color:#F3F3F3;
}
.navli img{
width:24px;
height:24px;
border:1px solid #F3F3F3;
border-left:1px solid #ddd;
margin:0px;
margin-top:12px;
float:left;
}
/*主体*/
.section{
width:1024px;
height:800px;
border:1px solid #ddd;
margin:0 auto;
margin-top:50px;
}
/*左侧边*/
.aside{
width:230px;
height:800px;
border:1px solid #ddd;
background-color: #F0F5FB;
float:left;
}
.aside input{
height:35px;
width:195px;
border:1px solid #999;
margin-top:10px;
margin-left:14px;
padding-left:5px;
margin-bottom:10px;
}
#nextlogin{
height:15px;
width:15px;
}
.aside label{
font-size:12px;
}
.aside a{
text-decoration: none;
font-size:13px;
margin-left:42px;
}
.aside a:hover{
text-decoration:underline;
color:#2C5983;
}
.btnone{
height:35px;
width:195px;
border:1px solid #E6444E;
background-color:#E6444E;
border-radius:5px ;
color:#fff;
margin-top:10px;
margin-left:14px;
}
.aside p{
width:195px;
border-top:1px solid #999;
margin:0 auto;
margin-top:20px;
}
.btntwo{
height:35px;
width:195px;
border:1px solid #6EBBCD;
background-color:#6EBBCD;
border-radius:5px ;
color:#fff;
margin-top:20px;
margin-left:14px;
}
.aside span{
font-size:12px;
margin-top:20px;
margin-left:14px;
color:#999;
display: inline-block;
}
.aside .asideimgone{
margin-left:14px;
}
.aside .asideimgtwo{
margin-left:2px;
}
.aside .asideimgthree{
margin-left:14px;
margin-top:15px;
}
.aside .asidemore{
margin-left:130px;
font-size:12px;
text-decoration: none;
color:#C1CCDC;
}
.aside .asidemore:hover{
text-decoration:underline;
color:#C1CCDC;
}
.sectionright{
float:left;
width:780px;
height:800px;
border:1px solid transparent;
}
.sectionright h3{
font-weight:normal;
margin-top:35px;
margin-left:40px;
font-size:18px;
}
.sectionright table{
margin-left:30px;
margin-top:20px;
font-size:14px;
}
.sectionright table input{
height:25px;
width:210px;
margin-right:30px;
}
.sectionright table span{
font-size:12px;
color:#666;
}
.sectionright table span a{
text-decoration: none;
}
.sectionright table span a:hover{
text-decoration: underline;
}
.sectionright table .tableradio input{
height:15px;
width:15px;
margin-right:0px;
vertical-align: middle;
}
.sectionright table .button{
height:35px;
width:185px;
border:1px solid #6EBBCD;
background-color:#6EBBCD;
border-radius:5px ;
color:#fff;
}
/*页脚*/
.footer{
width:1024px;
height:200px;
border:1px solid #ddd;
margin:0 auto;
}
.footerone{
width:1024px;
height:45px;
/*border:1px solid #ddd;*/
}
.footerone .footerulone li{
list-style:none;
float:left;
font-size:12px;
margin-right:15px;
line-height:45px;
}
.footerone .footerulone li a{
color:#336699;
text-decoration:none;
}
.footerone .footerulone li a:hover{
text-decoration:underline;
}
.footerone i{
float:right;
font-style:normal;
font-size:12px;
line-height:45px;
color:#666;
}
.footertwo{
width:1024px;
height:65px;
background-color:#F0EFEF;
}
.footertwo p{
font-size:12px;
color:#666;
line-height:28px;
margin-left:30px;
}
.footertwo p span{
float: left;
}
.footertwo .footerul li{
font-size:12px;
color:#666;
float: left;
line-height:28px;
margin-right:0px;
border:1px solid transparent;
height:28px;
list-style-position: inside;
}
.footertwo .footerul li a{
text-decoration: none;
color:#666;
}

-------------------------------------------------------------------------------------------------------------------------------------------------

阅读全文

1 0