今天继续写了下昨天的网页界面
代码如下:
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%的效果如图:
其中学院动态的排版时发生了文件流问题,然后因为不知道怎么解决,于是使用了定位进行排版,先是使用了绝对定位,但是在 缩略图时位置会
发生偏差,于是我使用了相对定位进行排版,从视觉上完成了排版的效果
时间： 2024-10-03 13:38:58