第十八天学习笔记-CSDN博客

今天继续写了下昨天的网页界面

代码如下:

  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 }