今天继续写了下昨天的网页界面
代码如下:
1 <!DOCTYPE html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>传智官网</title> 5 <link rel="stylesheet" type="text/css" href="CSS/Main_Css.css" /> 6 </head> 7 <body> 8 <!--主体--> 9 <div class = "_main_body"> 10 <!--主体顶部--> 11 <div class = "_main_body_top"> 12 <!--顶部的顶部--> 13 <div class = "_m_b_t_topL"> 14 专业的Java、.Net、PHP、C/C++、网页设计、平面设计、UI设计、iOS培训机构 15 <span class = "_m_b_t_topR _float_right"> 16 <a href = "#">网站首页</a><a href = "#" class = "_blue">免费公开课</a><a href = "#" class = "_blue">校园生活</a><a href = "#" class = "_red">传智特刊</a><a href = "#">人才服务</a><a href = "#">招贤纳士</a><a href = "#" class = "_noline">联系我们</a> 17 </span> 18 </div> 19 <!--顶部的顶部样式结束--> 20 <!--顶部logo--> 21 <div class = "_m_b_logo"> 22 <div class = "_m_b_logoL _float_left"> 23 <a href = "#"><img src = "images/logo.gif"></a> 24 </div> 25 <div class = "_m_b_logoR _float_right"> 26 <img src = "images/topword.gif"> 27 </div> 28 <div class = "_m_b_logoC _float_left"> 29 <h2>PHP学院</h2> 30 <ul class = "_over"> 31 <li><a href = "#">北京校区</a></li> 32 <li><a href = "#">成都校区</a></li> 33 <li><a href = "#">广州校区</a></li> 34 <li><a href = "#">上海校区</a></li> 35 </ul> 36 </div> 37 </div> 38 <!--顶部logo结束--> 39 <!--顶部导航栏--> 40 <div class = "_top_navigation"> 41 <ul> 42 <li><a href = "#" class = "_current">首页</a></li> 43 <li><a href = "#" class = "_long_a">PHP培训课程</a></li> 44 <li><a href = "#" class = "_long_a">PHP视频下载</a></li> 45 <li><a href = "#">人才服务</a></li> 46 <li><a href = "#">校园生活</a></li> 47 <li><a href = "#">师资力量</a></li> 48 <li><a href = "#">就业信息</a></li> 49 <li><a href = "#">报名流程</a></li> 50 <li><a href = "#">原创教材</a></li> 51 <li><a href = "#">常见问题</a></li> 52 <li><a href = "#">来校路线</a></li> 53 <li><a href = "#">技术论坛</a></li> 54 </ul> 55 </div> 56 <!--顶部导航栏结束--> 57 </div> 58 <!--主体顶部结束--> 59 <!--小导航栏--> 60 <!-- 61 <div class = "_min_nav _float_left"> 62 <span class = "_main_navL _float_left">分享到:QQ好友QQ空间腾讯微博新浪微博百度贴吧</span> 63 <span class = "_main_navR _float_right">链接</span> 64 <div class = "_clear"></div> 65 </div> 66 --> 67 <!--小导航栏结束--> 68 <!--主体左边--> 69 <div class = "_main_body_left _float_left"> 70 <div class = "_m_b_l_One"> 71 <!--开学标题--> 72 <div class = "_title"> 73 <span class = "_title_1">我们开学了</span><span class = "_title_2">今天我终于来到了心中向往已久的神圣学府--传智播客，开始了改变命运的征途</span> 74 </div> 75 <!--开学标题结束--> 76 <!--居左图片--> 77 <div class = "_imgL _float_left"> 78 <a href = "#"><img src = "Images/ppt1.jpg"></a> 79 </div> 80 <!--居右图片--> 81 <div class = "_imgR _float_right"> 82 <ul> 83 <li><a href = "#"><img src = "Images/img01.jpg"><br>陈建利专题-我有我原则</a></li> 84 <li><a href = "#"><img src = "Images/img02.jpg"><br>张巍专题-我为创业狂</a></li> 85 <li><a href = "#"><img src = "Images/img03.jpg"><br>小林催人泪下经历</a></li> 86 <li><a href = "#"><img src = "Images/img04.jpg"><br>曹伟-玩酷我的程序人生</a></li> 87 </ul> 88 </div> 89 <!--学院消息--> 90 <div class = "_info _float_left"> 91 <!--头部信息--> 92 <div class = "_info_title"><img src = "Images/college.jpg"></div> 93 <!--中间主体--> 94 <div class = "_info_conter"> 95 <ul> 96 <li><a href = "#"><b class = "_red">2013年限时钜惠,PHP基础班免费学!</b><img src = "Images/hot.gif"></a></li> 97 <li><a href = "#">2013年传智播客PHP课程最新升级</a></li> 98 <li><a href = "#"><b class = "_blue">学PHP编程，不做孬种程序员！</b></a></li> 99 <li><a href = "#">PHP学院年薪20-40万招聘讲师</a></li> 100 <li><a href = "#"><b class = "_blue">拒绝"上半天，自学半天"的教学培训</b></a></li> 101 <li><a href = "#">ci电子商城-开发速度最快的PHP框架!</a></li> 102 <li><a href = "#">国内首家推出企业急需六大核心技术!</a></li> 103 <li><a href = "#">新年开门红,俩学员毕业入职月薪过万！</a></li> 104 <li><a href = "#">传智播客PHP视频教程配套笔记，更新到第114讲</a></li> 105 <li><a href = "#">中关村大型IT人才招聘会 上千岗位任选！</a></li> 106 </ul> 107 </div> 108 <div class = "_imgRB _float_right"><a href ="#"><img src = "Images/more01.gif"></a></div> 109 </div> 110 <!--学院信息结束--> 111 <!--校园动态--> 112 <div class = "_school_trends _float_left"> 113 <div class = "_title_XYDT"><span class = "_XYuan">学院</span>动态</div> 114 <div class = "_school_conter"> 115 <div class = "_school_imgL _float_left"> 116 <a href = "#"><img src = "Images/img06.jpg"><br>开拓视野,展现自我,，“非你莫属”我们来啦！</a> 117 </div> 118 <div class = "_school_Right _float_left"> 119 <h2>班级活动</h2> 120 <ul> 121 <li><a href = "#">PHP学院IT专场招聘会成功举办！</a></li> 122 <li><a href = "#">PHP学院学员参与录制，“非你莫属”我们来啦！</a></li> 123 <li><a href = "#">PHP学院5.07班学员登百望山有氧运动</a></li> 124 <li><a href = "#">PHP学院2.28班海奥森“HAPPY”徒步之旅</a></li> 125 <li><a href = "#">PHP学院3.30班学员香山一日游</a></li> 126 <li><a href = "#">PHP学院讲师百望山徒步之旅</a></li> 127 <li><a href = "#">PHP学院3.30班学员香山一日游</a></li> 128 <li><a href = "#">PHP学院讲师百望山徒步之旅</a></li> 129 <li><a href = "#">PHP学院讲师百望山徒步之旅！</a></li> 130 <li><a href = "#">PHP学院12.29元旦晚会—不做孬种程序员</a></li> 131 </ul> 132 </div> 133 </div> 134 <div class = "_school_c_RM"><a href = "#"><img src = "Images/more01.gif"></a></div> 135 </div> 136 <!--学院动态结束--> 137 <!--论坛热帖--> 138 <div class = "_forun_hot"> 139 <!--<div class = "_f_hot_title"><img src = "Images/bg01.gif"></div>--> 140 </div> 141 <!--论坛热帖结束--> 142 </div> 143 <div class = "_clear"></div> 144 </div> 145 <!--主体左边结束--> 146 <!--主体右边--> 147 <div class = "_main_body_right _float_right"> 148 <!--开班信息--> 149 <div class = "_school_opens"> 150 <!--头部信息--> 151 <div class = "_titleRP">PHP开班信息</div> 152 <!--内容信息--> 153 <div class = "_center"> 154 <h4>PHP基础班</h4> 155 <ul> 156 <li><a href = "#">北京--11月12号</a><span class = "_red">爆满已开班</span></li> 157 <li><a href = "#">北京--12月22号</a><span class = "_blue">预约报名</span></li> 158 </ul> 159 <h4>PHP就业班</h4> 160 <ul> 161 <li><a href = "#">北京--11月16号</a><span class = "_red">爆满已开班</span></li> 162 <li><a href = "#">北京--12月20号</a><span class = "_blue">预约报名</span></li> 163 </ul> 164 <h4>PHP远程班</h4> 165 <ul> 166 <li><a href = "#">北京--12月20号</a><span class = "_red">预约报名</span></li> 167 <li><a href = "#">北京--12月22号</a><span class = "_red">预约报名</span></li> 168 </ul> 169 </div> 170 </div> 171 <!--开班信息结束--> 172 <div class = "_Job"> 173 <div class = "_j_title"><span class = "_blue">最新</span>企业招聘</div> 174 <div class = "_j_img"><img src = "Images/img11.jpg"></div> 175 <div class = "_j_conter"> 176 <ul> 177 <li><a href = "#">北京博昂德威公司招聘IT人才</a><span class = "_j_Right">若干 11.24</span></li> 178 <li><a href = "#">北京厚石人和招聘java人才</a><span class = "_j_Right">3名 11.24</span></li> 179 <li><a href = "#">北京妙趣横生招聘工程师</a><span class = "_j_Right">若干 11.24</span></li> 180 <li><a href = "#">BS超文招聘美工</a><span class = "_j_Right">5名 11.24</span></li> 181 <li><a href = "#">北京双玉琮招聘JAVA工程师</a><span class = "_j_Right">若干 11.24</span></li> 182 <li><a href = "#">东方艺品招聘IT人才</a><span class = "_j_Right">若干 11.24</span></li> 183 <li><a href = "#">武汉九州通医药招聘PHP人才</a><span class = "_j_Right">4名 11.24</span></li> 184 <li><a href = "#">华图教育网招聘JAVA工程师</a><span class = "_j_Right">2名 11.24</span></li> 185 <li><a href = "#">内蒙古赤峰市大与科技网招聘</a><span class = "_j_Right">2名 11.24</span></li> 186 <li><a href = "#">南京博优智赢招聘工程师</a><span class = "_j_Right">若干 11.24</span></li> 187 <li><a href = "#">瑞普网络招聘网页设计师</a><span class = "_j_Right">2名 11.24</span></li> 188 <li><a href = "#">纬创软件公司招聘人才</a><span class = "_j_Right">若干 11.24</span></li> 189 </ul> 190 </div> 191 <div class = "_right_bottom"><img src = "Images/more01.gif"></div> 192 </div> 193 </div> 194 <!--主体右边结束--> 195 <div class = "_clear"></div> 196 </div> 197 <!--主体结束--> 198 <!--页脚--> 199 <div class = "_footer"> 200 201 </div> 202 <!--页脚结束--> 203 </body> 204 </html>
以上是html的排版,以下是css部分的代码
1 /*主页相关的CSS样式设置*/ 2 /*整体内外边距清空*/ 3 *{ 4 margin:0; 5 padding:0; 6 } 7 8 9 /*body标签相关样式设置*/ 10 body{ 11 color:"#444"; 12 font-size:12px; 13 /*X轴平铺背景图片*/ 14 background:#f1f1f1 url(../Images/bg-body.gif) repeat-x; 15 } 16 17 18 /*设置主体样式*/ 19 ._main_body{ 20 width:975px; 21 margin:0 auto; 22 } 23 24 25 /*设置主体头部样式*/ 26 ._main_body_top{ 27 height: 196px; 28 } 29 30 /*设置头部样式的头部左边样式*/ 31 ._main_body_top ._m_b_t_topL{ 32 height:27px; 33 line-height: 27px; 34 color:blue; 35 } 36 /*设置头部样式的头部右边样式*/ 37 /*修改部分选项代码*/ 38 ._m_b_t_topR ._blue{ 39 color:#0000FF; 40 } 41 ._m_b_t_topR ._red{ 42 color:#B22222; 43 } 44 /*设置竖虚线线*/ 45 ._m_b_t_topR a{ 46 border-right:1px dotted #444444; 47 padding:0 8px; 48 } 49 /*取消最后一个的虚线*/ 50 ._noline{ 51 border-right:none !important; 52 } 53 /*设置头部背景图片*/ 54 ._m_b_logo{ 55 height:122px; 56 /*设置背景不平铺且水平居右下角*/ 57 background:url(../Images/bg-logo.jpg)no-repeat right bottom; 58 } 59 /*设置头部中部LOGOL*/ 60 ._m_b_logo ._m_b_logoL{ 61 padding-top:20px; 62 } 63 /*设置头部中部LOGOR*/ 64 ._m_b_logo ._m_b_logoR{ 65 padding-top:20px; 66 } 67 /*设置头部中部LOGOC*/ 68 ._m_b_logo ._m_b_logoC{ 69 padding-top:40px; 70 } 71 /*LOGOC中的标题样式*/ 72 ._m_b_logo ._m_b_logoC h2{ 73 color:#0473C4; 74 font-size:24px; 75 padding-bottom:5px; 76 } 77 /*LOGOC中的列表样式*/ 78 ._m_b_logo ._m_b_logoC ul li{ 79 float:left; /*使其水平居左*/ 80 background-image:url(../Images/li01.png); /*设置背景图片*/ 81 width: 68px; 82 height: 20px; 83 line-height: 20px; 84 color: #fff; 85 margin-right: 10px; 86 padding-left: 10px; 87 } 88 /*顶部下的导航列表*/ 89 ._top_navigation{ 90 height:47px; 91 line-height:47px; 92 /*border:1px solid red;*/ 93 } 94 ._top_navigation ul li{ 95 float:left; /*使其水平居左*/ 96 } 97 ._top_navigation a{ 98 display:block; /*使行内元素转换为块元素*/ 99 height:47px; 100 width:73px; 101 text-align:center; 102 color: #fff; 103 font-weight: bold; 104 margin-right: 5px; 105 } 106 /*因为该链接的背景图片较长所以加宽了链接的宽度*/ 107 ._top_navigation ._long_a{ 108 width:85px; 109 } 110 /*首页链接的背景图片*/ 111 ._top_navigation ._current{ 112 background-image:url(../Images/menu2.gif); 113 } 114 /*所有链接的背景图片设置*/ 115 ._top_navigation a:hover{ 116 background-image:url(../Images/menu2.gif); 117 } 118 /*长链接 背景图片*/ 119 ._top_navigation ._long_a:hover{ 120 background-image:url(../Images/menu1.gif); 121 } 122 123 124 /*设置小导航栏*/ 125 /* 126 ._main_nav{ 127 height:45px; 128 } 129 ._main_navL{ 130 display:block; 131 } 132 ._main_navR 133 { 134 display:block; 135 } 136 */ 137 138 139 /*设置主体左边样式*/ 140 ._main_body_left{ 141 width:660px; 142 height:900px; 143 background-color: #ccc; 144 margin-top:10px; 145 } 146 /*设置背景及内边框*/ 147 ._main_body_left ._m_b_l_One{ 148 background-color:#fff; 149 height:460px; 150 padding:0 15px; 151 } 152 /*设置左上开学样式*/ 153 ._title{ 154 height:40px; 155 line-height:40px; 156 border-bottom:1px solid black; /*设置下划线*/ 157 background:url(../images/jiantou.jpg) no-repeat right 13px; 158 margin-bottom: 15px; 159 } 160 /*开学字体样式*/ 161 ._title_1{ 162 color:#0174C9; 163 font-size:22px; 164 font-family:"黑体"; /*设置其字体*/ 165 } 166 /*开学右边字体样式*/ 167 ._title_2{ 168 font-size:14px; 169 margin-left:10px; 170 font-family:"黑体"; 171 } 172 ._main_body_left ._m_b_l_One ._imgL{ 173 width:300px; 174 } 175 ._main_body_left ._m_b_l_One ._imgR{ 176 width:310px; 177 } 178 /*统一图片样式*/ 179 ._imgR img{ 180 width: 142px; 181 height: 88px; 182 margin-bottom: 3px; 183 } 184 /*图片排版*/ 185 ._imgR ul li{ 186 float: left; /*浮动使其并列*/ 187 text-align: center; 188 margin-right: 10px; 189 } 190 /*设置学院消息*/ 191 ._info{ 192 padding:15px 15px 10px; 193 background-color: #fff 194 } 195 /*设置列表平铺*/ 196 ._info_conter ul li{ 197 float: left; /*使其平铺*/ 198 height:20px; 199 line-height:20px; 200 background:url(../Images/li03.jpg) no-repeat left center; /*设置标题前面的符号*/ 201 padding-left:15px; 202 width:290px; 203 } 204 ._red { 205 color:red; 206 } 207 ._blue { 208 color:blue; 209 } 210 /*设置学院动态*/ 211 ._school_trends{ 212 width:660px; 213 height:340px; 214 background-color:#FFFFFF; 215 /*此处使用绝对定位.,但是在界面大小发生变化时会改变位置,所以使用相对定位 216 position: absolute; 217 left: 187px; 218 top: 680px; 219 */ 220 position: relative; 221 right:15px; 222 top: 20px; 223 } 224 ._school_trends ._title_XYDT{ 225 margin:0 10px; 226 font-size:22px; 227 background:url(../Images/jiantou.jpg) no-repeat right; 228 border-bottom:1px solid #ccc; 229 } 230 ._school_trends ._title_XYDT span{ 231 color:blue; 232 } 233 ._school_imgL{ 234 float:left; 235 padding:20px 20px; 236 } 237 ._school_Right h2{ 238 padding:10px 0; 239 color:#808080; 240 } 241 ._school_Right ul li{ 242 padding:3px 8px; 243 background:url(../Images/li04.jpg) no-repeat left center; 244 } 245 ._school_c_RM{ 246 position: relative; 247 right:10px; 248 top: 280px; 249 } 250 251 252 /*设置主体右边样式*/ 253 ._main_body_right{ 254 width:290; 255 height:500px; 256 background:skyblue; 257 margin-top:10px; 258 } 259 /*设置开班信息*/ 260 ._school_opens{ 261 background-color:#f8f8f8; 262 } 263 ._titleRP{ 264 height:35px; 265 line-height:35px; 266 background-image:url(../Images/righttitle.gif); 267 font-size:14px; 268 color:#fff; 269 padding-left:40px; 270 } 271 ._center{ 272 padding:10px; 273 padding-bottom:20px; 274 } 275 ._center h4{ 276 height:30px; 277 line-height:30px; 278 } 279 ._center ul li{ 280 height:20px; 281 line-height:20px; 282 border-bottom:1px solid #ccc; 283 } 284 ._center span{ 285 float:right; 286 } 287 /*设置招聘信息*/ 288 ._Job{ 289 margin-top:10px; 290 background-color:#f8f8f8; 291 } 292 ._j_title{ 293 height:37px; 294 line-height:37px; 295 font-size:14px; 296 width:270px; 297 border-bottom:1px solid #ccc; 298 } 299 ._j_img{ 300 padding:10px; 301 } 302 ._j_conter ul li{ 303 padding-left:15px; 304 line-height:20px; 305 margin-left:10px; 306 background:url(../Images/li04.jpg) no-repeat left center; 307 } 308 ._j_Right{ 309 float:right; 310 } 311 ._right_bottom{ 312 float:right; 313 padding-top:10px; 314 } 315 ._f_hot_title{ 316 317 } 318 319 320 /*设置页脚样式*/ 321 ._footer{ 322 width:100%; 323 height:200px; 324 background-color: #000; 325 } 326 327 328 /*全局的样式*/ 329 ._float_left{ 330 float:left; /*实线左浮动*/ 331 } 332 ._float_right{ 333 float:right; /*实线右浮动*/ 334 } 335 ._clear{ 336 clear:both; /*清除浮动*/ 337 } 338 /*修改连接样式*/ 339 a:link,a:visited{text-decoration: none;color: #444;} 340 a:hover{color:#f00;} 341 /*修改无序列表*/ 342 ul{list-style: none;} /*图片样式为空*/ 343 ._over{ 344 overflow: hidden; /*溢出不可看*/ 345 }
50%的效果如图:
其中学院动态的排版时发生了文件流问题,然后因为不知道怎么解决,于是使用了定位进行排版,先是使用了绝对定位,但是在 缩略图时位置会
发生偏差,于是我使用了相对定位进行排版,从视觉上完成了排版的效果