今天主要是学习综合案例:
对于HTML及CSS知识点的运用,
因为时间关系并没有做的太多,以下是我的部分html代码:
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 = "#">首页</a></li> 43 <li><a href = "#">PHP培训课程</a></li> 44 <li><a href = "#">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 <div class = "_main_body_left _float_left"></div> 61 <!--主体左边结束--> 62 <!--主体右边--> 63 <div class = "_main_body_right _float_right"></div> 64 <!--主体右边结束--> 65 <div class = "_clear"></div> 66 </div> 67 <!--主体结束--> 68 <!--页脚--> 69 <div class = "_footer"> 70 71 </div> 72 <!--页脚结束--> 73 </body> 74 </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: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
90 ._top_navigation ul li{
91 float:left; /*使其水平居左*/
92 }
93
94
95 /*设置主体左边样式*/
96 ._main_body_left{
97 width:660px;
98 height:500px;
99 background-color: #ccc;
100 }
101
102
103 /*设置主体右边样式*/
104 ._main_body_right{
105 width:290;
106 height:500px;
107 background:skyblue;
108 }
109
110
111 /*设置页脚样式*/
112 ._footer{
113 width:100%;
114 height:200px;
115 background-color: #000;
116 }
117
118
119 /*全局的样式*/
120 ._float_left{
121 float:left; /*实线左浮动*/
122 }
123 ._float_right{
124 float:right; /*实线右浮动*/
125 }
126 ._clear{
127 clear:both; /*清除浮动*/
128 }
129 /*修改连接样式*/
130 a:link,a:visited{text-decoration: none;color: #444;}
131 a:hover{color:#f00;}
132 /*修改无序列表*/
133 ul{list-style: none;} /*图片样式为空*/
134 ._over{
135 overflow: hidden; /*溢出不可看*/
136 }
嗯哼~基本就是这些,剩下的效果明天完成;
效果如图:
关于导航栏,我个人认为是要加宽度,具体情况还是要明天去实践
时间： 2024-10-14 11:16:14