一.HTML代码
?1 ????<!DOCTYPE html> ?2 <html> ?3 <head> ?4 <meta charset="UTF-8"> ?5 <title>首页</title> ?6 ??7 </head> ?8 <body> ?9 <div id="page"> 10 ????<div id="page_head"> 11 ????????<div id="logo" align=center><img src="logo.png" /></div> 12 ????</div> 13 ????<div id="leader"> 14 ????????<ul style="padding:0 0;"> 15 ????????<li id="mainmenu"> 16 ????????????<a id="link" >网站首页</a> ?????????17 ????????</li> 18 ????????<li id="mainmenu"> 19 ????????????<a id="link" >学院概况</a> 20 ????????</li> 21 ????????<li id="mainmenu"> 22 ????????????<a id="link" >本科生教育</a> 23 ????????</li> 24 ????????<li id="mainmenu"> 25 ????????????<a id="link" >研究生教育</a> 26 ????????</li> 27 ????????<li id="mainmenu"> 28 ????????????<a id="link">师资队伍</a> 29 ????????</li> 30 ????????<li id="mainmenu"> 31 ????????????<a id="link">科学研究</a> 32 ????????</li> 33 ????????<li id="mainmenu"> 34 ????????????<a id="link">学生工作</a> 35 ????????</li> 36 ????????<li id="mainmenu"> 37 ????????????<a id="link">招生工作</a> 38 ????????</li> 39 ????????<li id="mainmenu"> 40 ????????????<a id="link">实验中心</a> 41 ????????<li id="mainmenu"> 42 ????????????<a id="link">党建之窗</a> 43 ????????</ul> 44 ????</div> 45 ????<div id="img_welcome"><img src="welcome.jpg" width="975" height="195" ></div> 46 ????<div id="page_body"> 47 ????????<div style="height:30%;blackground-color:grey"> 48 ????????????<div id="leftli"> 49 ????????????????<div id="topli"> 50 ????????????????????<div id="topli-leftpart"><b>图片新闻</b></div> 51 ????????????????????<div id="topli-rightpart"><img src="more.png" ></div> 52 ????????????????</div> 53 ????????????????<div id="downimg"> 54 ????????????????<img src="abc.jpg" width="300" height="180"> 55 ????????????????</div> 56 ????????????????<div id="leftfloat"> 57 ????????????????<ul id="forul"> 58 ????????????????<li> 59 ????????????????????<a>计算机科学学院举办2019年寒假留...[02-01]</a> 60 ????????????????</li> 61 ????????????????<li> 62 ????????????????????<a>学院召开党委中心组学习会暨党风廉...[03-18]</a> 63 ????????????????</li> 64 ????????????????<li> 65 ????????????????????<a>学院召开教职工大会学习传达中层干...[03-15]</a> 66 ????????????????</li> 67 ????????????????<li> 68 ????????????????????<a>计科院工会组织学院女教职工庆祝第...[03-12]</a> 69 ????????????????</li> 70 ????????????????<li> 71 ????????????????????<a>学术讲座——人工智能改变我们的未...[03-05]</a> 72 ????????????????</li> 73 ????????????????<li> 74 ????????????????????<a>计算机科学学院各年级辅导员集中走...[01-21]</a> 75 ????????????????</li> 76 ????????????????</ul> 77 ????????????????</div> 78 ????????????</div> 79 ????????????<div id="rightli"> 80 ????????????????<div id="topli"> 81 ????????????????????<div id="topli-leftpart"><b>学术交流</b></div> 82 ????????????????????<div id="topli-rightpart"><img src="more.png" ></div> 83 ????????????????</div> 84 ????????????????<ul type="square"> 85 ????????????????<li> 86 ????????????????????<a>人工智能改变我们的未来生活</a> 87 ????????????????</li> 88 ????????????????<li> 89 ????????????????????<a>计算时代的虚假信息传播</a> 90 ????????????????</li> 91 ????????????????<li> 92 ????????????????????<a>人工智能+：视界充满AI</a> 93 ????????????????</li> 94 ????????????????<li> 95 ????????????????????<a>零行列式策略及其网络演化动力学</a> 96 ????????????????</li> 97 ????????????????<li> 98 ????????????????????<a>视频遇上云服务</a> 99 ????????????????</li>100 ????????????????<li>101 ????????????????????<a>计科院关于举行2018年校庆论文报告会的...</a>102 ????????????????</li>103 ????????????????</ul>104 ????????????</div>105 ????????</div>106 ????????<div style="height:35%;blackground-color:grey">107 ????????????<div id="leftli">108 ????????????????<div id="topli">109 ????????????????????<div id="topli-leftpart"><b>新闻速递</b></div>110 ????????????????????<div id="topli-rightpart"><img src="more.png" ></div>111 ????????????????</div>112 ????????????????<div style="padding-top:10px">113 ????????????????<a id="blue" style="font-weight:bold;padding-left:10px;font-size:16px;" >计算机科学学院举办2019年寒假留校学生新春团拜会</a>114 ????????????????</div>115 ????????????????<div>116 ????????????????<p id="grey" style="font-size:12px;">    在中华民族传统节日——春节即将到来之际，为让学院留校学生感受家的温暖，向他们传达学院的慰问和祝福。2019年2月1日上午9时30分，计算机科学学院在明理楼B306会议室隆重举行2019年寒假留…[<a herf=“”>详细信息</a>]</p>117 ????????????????</div>118 ????????????????<ul>119 ????????????????<li>120 ????????????????????<a>学院召开党委中心组学习会暨党风廉政建设专题会03/18</a>121 ????????????????</li>122 ????????????????<li>123 ????????????????????<a>学院召开教职工大会学习传达中层干部大会精神 部署学院学期工作03/15</a>124 ????????????????</li>125 ????????????????<li>126 ????????????????????<a>计科院工会组织学院女教职工庆祝第109个“三八妇女节”03/12</a>127 ????????????????</li>128 ????????????????<li>129 ????????????????????<a>学术讲座——人工智能改变我们的未来生活03/05</a>130 ????????????????</li>131 ????????????????<li>132 ????????????????????<a>计算机科学学院各年级辅导员集中走访学生寝室01/21</a>133 ????????????????</li>134 ????????????????<li>135 ????????????????????<a>学院召开2018年度领导班子民主生活会01/14</a>136 ????????????????</li>137 ????????????????</ul>138 ????????????</div>139 ????????????<div id="rightli">140 ????????????????<div id="topli">141 ????????????????????<div id="topli-leftpart"><b>党建动态</b></div>142 ????????????????????<div id="topli-rightpart"><img src="more.png" ></div>143 ????????????????</div>144 ????????????????<ul>145 ????????????????<li>146 ????????????????????<a>学院召开党委中心组学习会暨党风廉政建...</a>147 ????????????????</li>148 ????????????????<li>149 ????????????????????<a>学院召开教职工大会学习传达中层干部大...</a>150 ????????????????</li>151 ????????????????<li>152 ????????????????????<a>学院召开2018年领导班子民主生活会</a>153 ????????????????</li>154 ????????????????<li>155 ????????????????????<a>刘翔同志任计算机科学学院党委副书记、...</a>156 ????????????????</li>157 ????????????????<li>158 ????????????????????<a>学院党委组织师生收看庆祝改革开放40周...</a>159 ????????????????</li>160 ????????????????<li>161 ????????????????????<a>【审核评估】学院召开本科教学工作审核...</a>162 ????????????????</li>163 ????????????????<li>164 ????????????????????<a>【聚焦评估】学院召开本科教学工作审核...</a>165 ????????????????</li>166 ????????????????<li>167 ????????????????????<a>学院党委开展迎校庆主题党日活动</a>168 ????????????????</li>169 ????????????????</ul>170 ????????????</div>171 ????????</div>172 ????????<div style="height:35%;blackground-color:grey">173 ????????????<div id="leftli">174 ????????????????<div id="topli">175 ????????????????????<div id="topli-leftpart"><b>通知公告</b></div>176 ????????????????????<div id="topli-rightpart"><img src="more.png" ></div>177 ????????????????</div>178 ????????????????<ul>179 ????????????????<li>180 ????????????????????<a>自组团出访前公示信息表（彭博）</a>181 ????????????????</li>182 ????????????????<li>183 ????????????????????<a>计算机科学学院2019年春季学期开学教学准备及检查工作实施方案</a>184 ????????????????</li>185 ????????????????<li>186 ????????????????????<a>西南石油大学计算机科学学院关于举行学院2019年春季田径运动会的通知</a>187 ????????????????</li>188 ????????????????<li>189 ????????????????????<a>2018年秋季学期期末考试情况总结</a>190 ????????????????</li>191 ????????????????<li>192 ????????????????????<a>计算机科学学院2018年度教职工考核优秀名单公示</a>193 ????????????????</li>194 ????????????????<li>195 ????????????????????<a>国际学术会议（ICCIS2019）征稿通知</a>196 ????????????????</li>197 ????????????????<li>198 ????????????????????<a>计算机科学学院领导班子2018年度民主生活会征求意见</a>199 ????????????????</li>200 ????????????????<li>201 ????????????????????<a>关于表彰计算机科学学院2018-2019学年秋季学期“最美寝室”的通知</a>202 ????????????????</li>203 ????????????????</ul>204 ????????????</div>205 ????????????<div id="rightli">206 ????????????????<div id="topli">207 ????????????????????<div id="topli-leftpart"><b>专题列表</b></div>208 ????????????????????<div id="topli-rightpart"><img src="more.png" ></div>209 ????????????????</div>210 ????????????????<ul>211 ????????????????<li>212 ????????????????????<a>中美联合高性能和大数据计算实验室</a>213 ????????????????</li>214 ????????????????<li>215 ????????????????????<a>石油工程计算机模拟技术重点实验室</a>216 ????????????????</li>217 ????????????????<li>218 ????????????????????<a>思科网络技术学院教师培训中心</a>219 ????????????????</li>220 ????????????????</ul>221 ????????????</div>222 ????????</div>223 ????</div>224 ????<div id="pag_foot" align=center>225 ????<b>Copyright© 2018 All Rights Reserved. 西南石油大学计算机科学学院</b>226 ????</div>227 </div>228 229 </body>230 </html>
二.CSS代码
1 ????#page{ 2 ????????margin:0px;padding:0px 3 ????} 4 ????#page_head{ 5 ????????background-color:white; 6 ????????height:113px;width:100%; 7 ????????margin:auto; 8 ????} 9 ????#page_body{10 ????????height:900px;width:975px;11 ????????margin:auto;margin-top:10px;12 ????}13 ????#pag_foot{14 ????????background-color:#224b77;15 ????????height:60px;16 ????????margin:auto;line-height:60px;17 ????????text-align:center;font-size:13px;color:#fff;18 ????}19 ????#logo{20 ????21 ????}22 ????#leader{23 ????????background-color:#0b6cb8;24 ????????height:50px;width:975px;25 ????????margin:auto;26 ????}27 ????#img_welcome{28 ????margin:auto;text-align:center;padding-top:0px;29 ????}30 ????#link{31 ????????padding-left:28px;32 ????????padding-top:0px;33 ????????font-size:16px;color:#fff;34 ????}35 ????#mainmenu{36 ????????list-style-type:none;37 ????????float:left;38 ????????height:50px;margin: ???0px;39 ????????text-align:center;40 ????????line-height:30px;41 ????}42 ????#leftli{43 ????????width:64%;float:left;height:100%;44 ????????background-color:white;45 ????}46 ????#rightli{47 ????????width:34%;float:right;height:100%;48 ????????background-color:white;49 ????}50 ????#topli{51 ????height:35px;52 ????background-color:#dddddd;53 ????}54 ????#topli-leftpart{55 ????float:left;line-height:35px;56 ????width:80px;height:100%;57 ????background-color:#0b6cb8;58 ????text-align:center;color:#fff;59 ????}60 ????#topli-rightpart{61 ????float:right;line-height:30px;62 ????width:40px;height:100%;63 ????}64 ????#downimg{65 ????float:left;66 ????width:50%;67 ????padding-top:10px68 ????}69 ????#leftfloat{70 ????float:left;71 ????}72 ????#grey{73 ????color:grey;74 ????}75 ????#blue{76 ????color:blue;77 ????}78 ????ul {list-style-type:square;color:grey;font-size:13px;padding-left:15px}三.效果如下
四.网盘
链接：https://pan.baidu.com/s/15gtX7vBDBhLzIL9Fg8wJCg
提取码：ghhc
用HTML+CSS编写一个计科院网站首页的静态网页
原文地址：https://www.cnblogs.com/lyq-biu/p/10559411.html