css(二)
重新排传智的首页!头部和左边的部分完成了!
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link type="text/css" href="css/index.css" rel="stylesheet">
<title>传智首页-专业的IT培训机构</title>
</head>
<body>
<!--box开始-->
<div class="box">
<!--header开始-->
<div class="header">
<!--top开始-->
<div class="top">
专业的Java,.net,PHP,C/C++,网页设计,平面设计,UI设计,ios培训机构
<span>
<a href="#">网站首页</a></li><a href="#" class="blue">免费公开课</a></li><a href="#" class="blue">校园生活</a></li><a href="#" class="red">传智特刊</a></li><a href="#">人才服务</a></li><a href="#">招贤纳士</a></li><a href="#" class="noline">联系我们</a></li>
</span>
</div>
<!--top结束-->
<!--logo开始-->
<div class="logo">
<div class="logoL">
<a href="#"><img src="data:images/logo.gif"></a>
</div>
<div class="logoM">
<h2>PHP学院</h2>
<ul>
<li>北京校区</li>
<li>上海校区</li>
<li>广州校区</li>
<li>深圳校区</li>
</ul>
</div>
<div class="logoR">
<img src="data:images/topword.gif">
</div>
</div>
<!--logo结束-->
<!--导航栏开始-->
<div class="menu">
<ul>
<li><a class="current" href="#">首 页</a></li>
<li><a class="a2" href="#">PHP培训课程</a></li>
<li><a class="a2" href="#">PHP视频下载</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>
<li><a href="#">技术论坛</a></li>
</ul>
</div>
<!--导航栏结束-->
<!--header结束-->
<!--分享栏开始-->
<div class="share">
<div class="floatL">
<img src="data:images/share.jpg" usemap="#Map">
<map name="Map"><area shape="rect" coords="331,4,401,31" href="#"><area shape="rect" coords="261,4,331,31" href="#"><area shape="rect" coords="191,4,261,31" href="#"><area shape="rect" coords="132,4,191,32" href="#">
<area shape="rect" coords="73,4,132,32" href="#">
</map>
</div>
<div class="qita floatR">
<span>其它学院入口:</span><a href="#">.php学院</a><a href="#">.net学院</a><a href="#">ios学院</a><a href="#">c/c++学院</a><a href="#">网页平面设计学院</a>
</div>
<div class="clear"></div>
</div>
<!--分享栏结束-->
<!--left开始-->
<div class="left">
<!--开学开始-->
<div class="kaixue">
<div class="title">
<span class="span1">我们开学啦</span>今天我终于来到了心中向往已久的神圣学府--传智播客，开始了改变命运的征途
</div>
<div class="lunbo floatL">
<img src="data:images/ppt1.jpg">
</div>
<div class="shipin floatR">
<ul>
<li><a href="#"><img src="data:images/img01.jpg"></a><br>陈建利专题-我有我原则</li>
<li><a href="#"><img src="data:images/img02.jpg"></a><br>张巍专题-我为创业狂</li>
<li><a href="#"><img src="data:images/img03.jpg"></a><br>小林催人泪下经历</li>
<li><a href="#"><img src="data:images/img04.jpg"></a><br>曹伟-玩酷我的程序人生</li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--开学结束-->
<!--学院消息开始-->
<div class="info">
<div class="title">
<img src="data:images/college.jpg">
</div>
<div class="content">
<ul class="overflow">
<li><a href="#"><b class="red">2013年限时钜惠,PHP基础班免费学!</b></a><img src="data:images/hot.gif"></li>
<li><a href="#">ci电子商城-开发速度最快的PHP框架!</a></li>
<li><a href="#"><b class="blue">2013年传智播客PHP课程最新升级</b></a></li>
<li><a href="#">国内首家推出企业急需六大核心技术!!</a></li>
<li><a href="#"><b class="blue">学PHP编程，不做孬种程序员！</b></a></li>
<li><a href="#">新年开门红,俩学员毕业入职月薪过万！</a></li>
<li><a href="#">PHP学院年薪20-40万招聘讲师</a></li>
<li><a href="#">传智播客PHP视频教程配套笔记，更新到第114讲</a></li>
<li><a href="#">拒绝"上半天，自学半天"的教学培训</a></li>
<li><a href="#">中关村大型IT人才招聘会 上千岗位任选！</a></li>
</ul>
</div>
<div class="more">
<img src="data:images/more01.gif">
</div>
<div class="clear"></div>
</div>
<!--学院消息结束-->
<!--一段分割线开始-->
<div class="space"></div>
<!--一段分割线结束-->
<!--校园动态开始-->
<div class="dongtai">
<div class="title"><span>校园</span>动态</div>
<div class="img floatL">
<img src="data:images/img06.jpg"><br>
开拓视野,展现自我,，“非你莫属”我们来啦！
</div>
<div class="huodong floatR">
<h2>班级活动</h2>
<ul>
<li><a href="#">PHP学院IT专场招聘会成功举办！</a></li>
<li><a href="#">PHP学院学员参与录制，“非你莫属”我们来啦！</a></li>
<li><a href="#">PHP学院5.07班学员登百望山有氧运动</a></li>
<li><a href="#">PHP学院2.28班海奥森“HAPPY”徒步之旅</a></li>
<li><a href="#">PHP学院3.30班学员香山一日游</a></li>
<li><a href="#">PHP学院讲师百望山徒步之旅</a></li>
<li><a href="#">PHP学院3.30班学员香山一日游</a></li>
<li><a href="#">PHP学院讲师百望山徒步之旅</a></li>
<li><a href="#">PHP学院讲师百望山徒步之旅</a></li>
<li><a href="#">PHP学院12.29元旦晚会—不做孬种程序员</a></li>
</ul>
</div>
<div class="clear"></div>
<div class="more"></div>
</div>
<!--校园动态结束-->
<div class="space"></div>
<!--论坛热帖开始-->
<div class="retie">
<div class="title"><span>论坛</span>热帖</div>
<div class="content">
<ul class="overflow">
<li><a href="#">金秋十月，传智1016PHP就业班开班啦</a></li>
<li><a href="#">2013 年国内 IT 行业薪资一览</a></li>
<li><a href="#">热烈祝贺第一期同学刘新创办长青科技</a></li>
<li><a href="#">1212 赢金币，PHP基础测试，参与得金币！</a></li>
<li><a href="#">关于韩顺平老师坦克大战的一个问题</a></li>
<li><a href="#">关于韩顺平老师坦克大战的问题</a></li>
<li><a href="#">一些资深的老程序员谈用哪种方法学习PHP最</a></li>
<li><a href="#">求一份正则表达式的教程</a></li>
<li><a href="#">smarty模板目录和路径文件问题</a></li>
<li><a href="#">PHP程序局域网不能实现上传??</a></li>
<li><a href="#">新人求韩顺平老师的smarty教程部门留言板的</a></li>
<li><a href="#"> 求助：php升级之后，网站显示空白</a></li>
</ul>
</div>
</div>
<!--论坛热帖结束-->
<div class="space"></div>
<!--PHP培训学员呐喊开始-->
<div class="nahan">
<div class="title"><span>PHP培训学员</span>呐喊</div>
<div class="img floatL">
<img src="data:images/img07.jpg"><br>
传智播客PHP学院就业明星-张巍
</div>
<div class="jiuye floatL">
<h2>就业信息</h2>
<ul>
<li><a href="#">贾＊＊ 2013.11.26 六＊广告有限公司 5000</a></li>
<li><a href="#">郝＊＊ 2013.11.24 宁波土＊有限公司 5000</a></li>
<li><a href="#">耿 ＊ 2013.11.21 中＊百文有限公司 4500</a></li>
<li><a href="#">鲍＊＊ 2013.11.19 佰＊科技有限公司 5000</a></li>
<li><a href="#">鲍＊＊ 2013.11.19 佰＊科技有限公司 5000</a></li>
<li><a href="#">崔＊＊ 2013.11.18 天津达＊分校 4750</a></li>
<li><a href="#">高＊＊ 2013.11.17 中＊腾达科技公司 4000</a></li>
<li><a href="#">鲍＊＊ 2013.11.19 佰＊科技有限公司 5000</a></li>
<li><a href="#">韩 ＊ 2013.11.15 吉＊商科技有限公司 4500</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--PHP培训学员呐喊结束-->
<div class="space"></div>
<!--学员感言开始-->
<div class="ganyan">
<div class="title">
<span class="span1">学员</span>感言
<span class="span2"><a href="#">+More</a></span>
</div>
<div class="content floatL">
<img src="data:images/img08.jpg" />
<p><a href="#">[php学员]钟玲玉:传智,我人生中重要的一站</a></p>
<div class="clear"></div>
<ul>
<li><a href="#"><span class="red">[php学员]</span>杜宏海:同学到其它机构学完..</a></li>
<li><a href="#"><span class="red">[php学员]</span>杨*斌:一个小学生的奋斗史..</a></li>
<li><a href="#"><span class="red">[php学员]</span>黄超:传智播客,让我月薪增长到..</a></li>
<li><a href="#"><span class="red">[php学员]</span>刘传华:传智,我人生中的转折点..</a></li>
</ul>
</div>
<div class="content floatR">
<img src="data:images/img09.jpg" />
<p><a href="#">[php学员]王艳:美女网编,毕业薪水6500</li></p>
<div class="clear"></div>
<ul>
<li><a href="#"><span class="red">[php学员]</span>吴思阳:传智之旅-真正的升华..</a></li>
<li><a href="#"><span class="red">[php学员]</span>郝建设:短暂时光的改变..</a></li>
<li><a href="#"><span class="red">[php学员]</span>李玉宝:零基础学员,刚毕业就拿..</a></li>
<li><a href="#"><span class="red bold">查看更多学员感言</span></a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--学员感言结束-->
<div class="space"></div>
<!--PHP培训名师答疑开始-->
<div class="dayi">
<div class="title">
<span class="span1">PHP培训</span>名师答疑
<span class="span2"><a href="#">+More</a></span>
</div>
<div class="img floatL">
<img src="data:images/img10.jpg">
</div>
<div class="content floatR">
<ul>
<li><a href="#">PHP应该学什么,如何学好PHP(三)</a></li>
<li><a href="#">PHP应该学什么,如何学好PHP(二)</a></li>
<li><a href="#">一个渴求学习但不知如何下手学生咨询</a></li>
<li><a href="#">印度哥们咨询tomcat配置问题</a></li>
<li><a href="#">请教先学习PHP还是JAVA的问题</a></li>
<li><a href="#">怎么设置自己做好的自定义404错误页面</a></li>
<li><a href="#">传智播客PHP视频教程手册大全</a></li>
<li><a href="#">韩老师回答大一学生如何选择专业问题</a></li>
<li><a href="#">传智PHP视频的几点问题，请韩老师回复</a></li>
<li><a href="#">韩老师，能把PHP课程笔记发给我吗？</a></li>
<li><a href="#">一位农民工流动人员给韩老师一封信</a></li>
<li><a href="#">查看更多答疑信息</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--PHP培训名师答疑结束-->
</div>
<!--left结束-->
<!--right开始-->
<div class="right"></div>
<!--right结束-->
</div>
<!--box结束-->
<!--footer开始-->
<div class="footer"></div>
<!--footer结束-->
</body>
</html>
/*index的css样式*/ /*css初始化*/
body,ul,ol,li,img,a,p,h1,h2,h3,h4,h5{margin:0px;padding:0px;}
ul,ol,li{list-style:none;}
a:link,a:visited{color:#444;text-decoration:none;}
a:hover{color:red;}
body{color:#444;font-size:12px;background:#F1F1F1 url(../images/bg-body.gif) repeat-x;}
.clear{clear:both;}
.floatL{float: left;}
.floatR{float: right;}
.overflow{overflow: hidden;} /*box*/
.box{width:975px;border:1px solid red;margin:0px auto;}
/*header开始*/
/*top部分*/
.header .top{
height:27px;
line-height:27px;
padding-left:10px;
color:#2484CA
} .header .top span{
float: right;
} .header .top a{
border-right:1px solid #444;
padding:0px 10px;
}
.header .top .blue:link,.header .top .blue:visited{
color:blue;
}
.header .top .blue:hover{
color:red;
}
.header .top .red:link,.header .top .red:visited{
color: #B63232
}
.header .top .noline{
border: none;
} /*logo部分*/
.header .logo{
height:121px;
background: url(../images/bg-logo.jpg) no-repeat right bottom;
}
.header .logo .logoL{
width: 202px;
padding-top:23px;
float: left;
}
.header .logo .logoM{
float:left;
width:380px;
padding-left:20px;
padding-top: 40px;
}
.header .logo .logoM h2{
font-size:24px;
color: #0473C4;
}
.header .logo .logoM li{
background:url(../images/li01.png);
width: 68px;
height:20px;
line-height:20px;
float:left;
margin-top:10px;
margin-right:15px;
padding-left: 10px;
color:#fff;
}
.header .logo .logoR{
width:360px;
float:right;
padding-top: 16px;
} /*导航栏开始*/
.header .menu{
height: 47px
}
.header .menu li{
height:47px;
line-height: 47px;
float:left;
text-align:center;
margin-left:5px;
}
.header .menu ul a{
display:block;
width: 73px;
color: #fff;
}
.header .menu ul a:hover{
background: url(../images/menu2.gif);
}
.header .menu .a2{
width: 85px;
}
.header .menu .a2:hover{
background: url(../images/menu1.gif);
}
.header .menu .current{
background: url(../images/menu2.gif);
} /*分享栏开始*/
.share img{
padding-left: 10px;
}
.share .qita{
height: 35px;
line-height: 35px;
display:block;
}
.share .qita a{
background: url(../images/li02.jpg) no-repeat left center;
padding-left: 10px;
margin-right: 5px;
}
.share .qita span{
font-size:14px;
font-weight: bold;
margin-right: 5px;
} /*网页左边部分开始*/
.left{
width:630px;
}
/*开学开始*/
.left .kaixue{
padding:10px;
background-color:#fff;
} .left .kaixue .title{
background:url(../images/jiantou.jpg) no-repeat right bottom;
margin-bottom: 10px;
font-family: 黑体;
}
.left .kaixue .title .span1{
color: #0174C9;
font-size: 24px;
padding-right: 48px;
}
.left .kaixue .lunbo{
width: 300px;
height: 216px;
}
.left .kaixue .shipin{
width: 310px;
}
.left .kaixue .shipin img{
width: 142px;
height: 88px;
margin-bottom: 5px;
}
.left .kaixue .shipin li{
float: left;
text-align: center;
padding-left: 10px;
padding-top: 5px;
} /*学院消息开始*/
.left .info{
background-color: #fff;
padding: 10px;
}
.left .info .title{
}
.left .info .content li{
line-height: 20px;
float: left;
width: 300px;
}
.left .info .content .red{
color: red;
}
.left .info .content .blue{
color:blue;
}
.left .info .more{
float: right;
padding-top:10px;
}
/*一段分割线*/
.left .space{
height: 10px;
width: 630px;
} /*校园动态开始*/
.left .dongtai{
background-color: #fff;
padding:10px;
}
.left .dongtai .title{
border-bottom: 1px dashed #ccc;
background: url(../images/jiantou.jpg) no-repeat right center;
height: 30px;
line-height: 30px;
font-size:20px;
font-weight: bold;
font-family: 黑体;
margin-bottom: 10px;
}
.left .dongtai .title span{
color: #0174C9
}
.left .dongtai .img{
text-align: center;
}
.left .dongtai .img img{
margin-bottom: 5px;
}
.left .dongtai .huodong{
width: 300px;
}
.left .dongtai .huodong h2{
color: #8F8F8F;
margin-bottom:10px;
}
.left .dongtai .huodong li{
height: 22px;
line-height: 22px;
background: url(../images/li04.jpg) no-repeat left center;
padding-left:8px;
}
.left .dongtai .more{
height:20px;
background: url(../images/more01.gif) no-repeat right bottom;
} /*论坛热帖开始*/
.left .retie{
padding:10px;
background-color:#fff;
}
.left .retie .title{
height: :34px;
line-height: 34px;
font-size:20px;
margin-bottom: 10px;
background: url(../images/bg01.gif) no-repeat;
padding-left: 20px;
}
.left .retie span{
color: #0174C9;
}
.left .retie .content li{
height: 22px;
line-height: 22px;
background: url(../images/li05.gif) no-repeat left center;
padding-left:15px;
float:left;
width: 288px;
} /*PHP学员呐喊*/
.left .nahan{
padding:10px;
background-color:#fff;
}
.left .nahan .title{
height: :34px;
line-height: 34px;
font-size:20px;
margin-bottom: 10px;
background: url(../images/bg01.gif) no-repeat;
padding-left: 20px;
}
.left .nahan .title span{
color: #0174C9;
}
.left .nahan .img{
text-align: center;
margin-right: 30px;
}
.left .nahan .img img{
margin-bottom: 5px;
}
.left .nahan .jiuye h2{
color: #8F8F8F;
margin-bottom:10px;
}
.left .nahan .jiuye li{
height: 22px;
line-height: 22px;
background: url(../images/li04.jpg) no-repeat left center;
padding-left:8px;
} /*学员感言*/
.left .ganyan{
padding:10px;
background-color:#fff;
}
.left .ganyan .title{
width:600px;
height:34px;
background:url(../images/bg01.gif) no-repeat;
line-height:34px;
font-size:20px;
padding-left:20px;
}
.left .ganyan .span1{
float:left;
color: #0174C9;
}
.left .ganyan .span2{
float:right;
padding-right:10px;
}
.left .ganyan .content{
width:300px;
padding-top:10px;
padding-left:5px;
}
.left .ganyan .content img{
float:left;
}
.left .ganyan .content p{
float:right;
width:180px;
background:url(../images/li06.gif) no-repeat 0px 3px;
padding-right:8px;
text-indent:15px;
height:20px;
line-height:20px;
}
.left .ganyan .content ul{
background:url(../images/li07.gif) no-repeat 0px 6px;
padding-left:20px;
}
.left .ganyan .content li{
height:29px;
line-height:29px;
} /*名师答疑*/
.left .dayi{
background-color:#fff;
padding: 10px;
}
.left .dayi .title{
width:600px;
height:34px;
background:url(../images/bg01.gif) no-repeat;
line-height:34px;
font-size:20px;
padding-left:20px;
padding-bottom:10px;
}
.left .dayi .span1{
float:left;
color: #0174C9;
}
.left .dayi .span2{
float:right;
padding-right:10px;
}
.left .dayi .img{
padding-left: 10px;
}
.left .dayi .content{
width:498px;
}
.left .dayi .content li{
height: 22px;
line-height: 22px;
background: url(../images/li03.jpg) no-repeat left center;
padding-left:12px;
float:left;
width:210px;
padding-right:27px;
}
怒敲代码600行...
css(二)的更多相关文章
- 学习总结：CSS(二)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型
一.元素的块级与行级特性 在CSS属性display控制元素是否及如何显示的特性,常用的值有none.inline.block.inline-block,在CSS3中还有一些新的特性状态,在这里不做讨 ...
- CSS(二)属性--文本设置
HTML代码一 <body> <div>这是一个很黑很黑的夜晚,黑云密布,没有任何光亮透过.卖火柴的小姑娘.......</div> </body> C ...
- web前端css(二)
一. 标准文档流 标准文档流中会有一些现象: 空白折叠 和 高低不齐边底对齐的现象 标准文档流等级森严, 标签分为两种等级: 行内元素 和 块级元素. 1. 行内元素 和 块级元素的区别: 行内元素 ...
- HTML与CSS二三事
概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器 ...
- 高性能CSS(二）
避免CSS表达式 CSS表达式是动态设置CSS属性的强大(但危险)方法.Internet Explorer从第5个版本开始支持CSS表达式.下面的例子中,使用CSS表达式可以实现隔一个小时切换一次背景 ...
- CSS(二）选择符
2019-04-11 22:14:23 1.类型选择符(标签选择符) html中所有的标签都可以直接对元素选择 p em i a html body..... 特点:对页面中所有当前类型的元 ...
- Html+CSS二周目--->常用概念
学习css几乎俩周,来总结一下 对于初学者来说,有一些基本的概念是我们应当清楚的.掌握这些概念,可以帮助你更加有效的开发,大大提高开发效率. 1.盒子模型 2.浮动(float) 3.定位(posit ...
- Web前端基础(5):CSS(二)
1. 盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和I ...
- css(二) block，inline和inline-block概念和区别
转: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-leve ...
随机推荐
- apktool的下载地址
googlecode将要关闭,代码转移到以下网址 http://ibotpeaches.github.io/Apktool/
- LSI SAS 3108 配置操作
配置LSISAS3108 介绍LSISAS3108的配置操作. 5.1 登录CU界面 介绍登录LSISAS3108的CU配置界面的方法,以及CU界面的主要功能. 5.2 创建RAID 介绍在LSISA ...
- repeater 分页显示数据
表名:ChinaStates 控件:Repeater 查询代码DA: public class ChinaStatesDA { private DataClassesDataContext Conte ...
- javascript获取CSS3浏览器前缀
var prefix = (function () { var styles = window.getComputedStyle(document.documentElement, ''), pre ...
- （转）C#静态构造函数
静态构造函数是C#的一个新特性,在编程过程中用处并不广,它的主要目的是用于初始化一些静态的变量. 因为这个构造函数是属于类的,而不属于任何一个实例,所以这个构造函数只会被执行一次,而且是在创建此类的第 ...
- 如何给report自定义page number
问题描述: report在设置分页后会自动分页,但是有默认的page number,现在的问题是有时default page number不能满足我们的需求,此时就需要自定义page number. ...
- maven自动下载jar包
只需要修改pom文件即可.需要哪个jar包,在pom中就配置哪个(还包括手动向仓库中添加) 例如 http://blog.csdn.net/beyondlpf/article/details/8592 ...
- 解决“Word无法访问您试图使用的功能所在的网络位置”问题
解决“Word无法访问您试图使用的功能所在的网络位置”问题 打开Word时出现现现在的对话框,按取消,又可以打开word文档 按取消时,仍然可以打开word文档.为了解决这个问题,我借助网络,知道这是 ...
- Java内存分配和GC
Java内存分配和回收的机制概括的说,就是:分代分配,分代回收. 对象将根据存活的时间被分为:年轻代(Young Generation).年老代(Old Generation).永久代(Permane ...
- 洛谷 P1305 新二叉树
P1305 新二叉树 题目描述 输入一串完全二叉树,用遍历前序打出. 输入输出格式 输入格式: 第一行为二叉树的节点数n. 后面n行,每一个字母为节点,后两个字母分别为其左右儿子. 空节点用*表示 输 ...