左右分栏式html模板.docx

Header.css

*{

margin:

0;

padding:

0;

}/*先重置其他样式*/

ul,li{

list-style:

none;

}

a{

text-decoration:

none;

}/*有时候不反应删除重新写就ok*/

img{

border:

0;

display:

block;

}/*div不用长度里面的没居中设widthheight*/

#header{

width:

1100px;

margin:

auto;

overflow:

hidden;

}/*可以简写为marginautohidden子集撑起父级文本溢出自动截取*/

#headerli{

float:

left;

}/*从外往里面写在头部中定义的限定单位在上面ulli写浮动是全部网页的浏览器中解析*/

.login,.reg{

width:

61px;

height:

31px;

border:

1pxsolidorange;

text-align:

center;

line-height:

31px;

}

.logina,.rega{

color:

orange;

}/*合并设置到具体不能是login，rega*/

.logina:

hover,.rega:

hover{

color:

aqua;

}

.btn{

width:

30px;

height:

30px;

cursor:

pointer;

border:

0;

background-color:

transparent;

}

.text{

width:

170px;

height:

20px;

line-height:

26px;

border:

none;

}

.search{

background-image:

url（../img/txtbtn.png）;

margin-left:

120px;

}/*!

--出现不了的一般为注释问题大框架包起来必须设置为透明的transparent*/

.searchbox{

float:

right;

margin:

10px40px00;

}

.nav{

background:

#A14DB4;

height:

40px;

text-align:

center;

}

.nava{

float:

left;

color:

white;

line-height:

40px;

margin:

015px;

}/*!

--a标签最重要里面的元素浮动--*/

.navul{

margin:

0auto;

width:

1200px;

}/*继承子级继承父级里面的a居中只有设置长度之后才能完成居中功能*/

.nava:

hover{

background:

white;color:

red;

}

.imagul{

overflow:

hidden;

width:

1200px;

margin:

0auto;

}

.imagli{

float:

left;

padding:

10px;

}

.imagimg{

width:

;

}

.imagli.left{

padding-left:

0px;

}

.imagli.right{

padding-right:

0px;

}

Content.css

body{

}

div.conten{

margin:

10pxauto;

width:

972px;

}/*布局居中*/

div.left{

float:

left;

width:

600px;

border:

3pxsolid#d3a9eb;

padding-left:

30px;

padding-right:

30px;

height:

auto;

}

p.title{

width:

95px;

height:

23px;

line-height:

23px;

text-align:

center;

background-color:

#ad66d8;

color:

white;

font-weight:

bold;

margin-bottom:

20px;}

p.des{

text-indent:

24px;

line-height:

30px;

width:

600px;

}

p.line{

text-indent:

24px;

border-bottom:

1pxsolid#eeeeee;

}

div.mingxing{

overflow:

hidden;

}/*有些有提示才能找到*/

div.mingxingdl{

width:

600px;

height:

120px;

border-bottom:

1pxsolid#eeeeee;

margin-top:

14px;

}

div.mingxingdldt{

float:

left;

margin-right:

10px;

}

div.mingxingdldd{

line-height:

30px;

}

div.mingxingdldd.tit{

font-size:

15px;

font-weight:

bold;

color:

red;

}

div.right{

float:

right;

width:

301px;

}

div.xzcs{

width:

301px;

height:

344px;

background-image:

url（../img/cbcsbg.png）

}

div.zha{

height:

50px;

}

div.xzcstable{

height:

267px;

margin-left:

14px;

}

div.xzcsselect{

width:

97px;

height:

28px;

border:

1pxsolid#707070;

}

div.xzcs.txtd{

width:

97px;

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

左右 分栏 html 模板

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。