<img src="/files/uploads/image/201704/45ea7892b0fb.jpg" title="image" alt="image" /> <pre class="prettyprint linenums lang-html">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;太原大学首页&lt;/title&gt; &lt;link href="lll.css" rel="stylesheet" type="text/css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;from action=""&gt; &lt;p class="top-right-1"&gt;搜索内容： &lt;input type="text"name="theName"size="25"/&gt; &lt;img src="go.jpg"/&gt; &lt;span class="top-right-2"&gt;ENGLISH&lt;/span&gt; &lt;/p&gt; &lt;/from&gt; &lt;div id="col-1"&gt; &lt;img src="taida.jpg" width="210" height="168" /&gt; &lt;/div&gt; &lt;div id="nav"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;学院概况&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;新闻中心&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;管理机构&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;系部设置&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;教育科研&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;学生天地&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;招生就业&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;人才培养&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;学术期刊&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div&gt; &lt;img src="太原学院1.jpg" width="990" height="200" /&gt; &lt;/div&gt; &lt;div id="col-2"&gt; &lt;h4&gt;&lt;img src="hx-left.jpg"/&gt;图文热点 详细&lt;&lt; &lt;img src="hx.jpg"/&gt; &lt;img src="评估现场.jpg" width="223" height="194"/&gt; &lt;/h4&gt; &lt;p&gt;学士学位授予评估现场 &lt;/p&gt; &lt;/div&gt; &lt;div id="col-3"&gt; &lt;a href="#"&gt;校园新闻&gt;&gt;&lt;/a&gt; &lt;a href=""&gt;通知公告&gt;&gt;&lt;/a&gt; &lt;a href=""&gt;学术动态&gt;&gt;&lt;/a&gt; &lt;a href=""&gt;社会新闻&gt;&gt;&lt;/a&gt; &lt;/div&gt; &lt;div id="col-4"&gt; &lt;ul class="col-4-text"&gt; &lt;li&gt;&lt;a href=""&gt;我院辅导员在山西辅导员大赛中表现优异恭喜喜获荣誉 2017-04-11&lt;/a&gt;&lt;/li&gt;&lt;br/&gt; &lt;li&gt;&lt;a href=""&gt;"会诊把脉"找问题，凝心-聚力某跨越，找到核心问题是关键 2017-04-08&lt;/a&gt;&lt;/li&gt;&lt;br/&gt; &lt;li&gt;&lt;a href=""&gt;学士学位授权审核建设指导评审汇报会在校报告厅举行 2017-04-07&lt;/a&gt;&lt;/li&gt;&lt;br/&gt; &lt;li&gt;&lt;a href=""&gt;院领导带对检查各系部迎评准备活动给予高度重视 &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;2017-04-06&lt;/a&gt;&lt;/li&gt;&lt;br/&gt; &lt;li&gt;&lt;a href=""&gt;徐秋琴副院长深入系部调研学生工作，指出建设性意见 2017-04-05&lt;/a&gt;&lt;/li&gt;&lt;br/&gt; &lt;li&gt;&lt;a href=""&gt;中文系师生赴太原理工大学开展团学工作交流经验&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 2017-03-27&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="col-5" &gt; &lt;p&gt;&lt;br/&gt; &lt;a class="p_text" href="#"&gt;站点导航&lt;/a&gt; &lt;a class="p_text" href="#"&gt;教务在线&lt;/a&gt; &lt;a class="p_text" href="#"&gt;图书馆&lt;/a&gt;&lt;/p&gt; &lt;a class="p_text" href="#"&gt;网络服务&lt;/a&gt; &lt;a class="p_text" href="#"&gt;校园邮箱&lt;/a&gt; &lt;a class="p_text" href="#"&gt;招生信息&lt;/a&gt;&lt;/p&gt; &lt;a class="p_text" href="#"&gt;平安校园&lt;/a&gt; &lt;a class="p_text" href="#"&gt;精品课程&lt;/a&gt; &lt;a class="p_text" href="#"&gt;就业信息&lt;/a&gt;&lt;/p&gt; &lt;a class="p_text" href="#"&gt;信息公开&lt;/a&gt; &lt;a class="p_text" href="#"&gt;等级考试&lt;/a&gt; &lt;a class="p_text" href="#"&gt;OA系统&lt;/a&gt; &lt;/p&gt;&lt;br/&gt; &lt;p&gt; &lt;select&gt; &lt;option&gt;校内部门网站&lt;/option&gt; &lt;option&gt;太原学院北区&lt;/option&gt; &lt;option&gt;太原学院中区&lt;/option&gt; &lt;option&gt;计财处&lt;/option&gt; &lt;option&gt;纪检监察网&lt;/option&gt; &lt;option&gt;团委&lt;/option&gt; &lt;option&gt;图书馆&lt;/option&gt; &lt;option&gt;招就处&lt;/option&gt; &lt;option&gt;党委办公室&lt;/option&gt; &lt;option&gt;校长办公室&lt;/option&gt; &lt;option&gt;网络中心&lt;/option&gt; &lt;option&gt;学报编辑部&lt;/option&gt; &lt;option&gt;保卫处&lt;/option&gt; &lt;option&gt;科技处&lt;/option&gt; &lt;option&gt;实验中心&lt;/option&gt; &lt;option&gt;基建处&lt;/option&gt; &lt;/select&gt; &lt;select&gt; &lt;option&gt;其他院校链接&lt;/option&gt; &lt;option&gt;山西大学&lt;/option&gt; &lt;option&gt;太原理工大学&lt;/option&gt; &lt;option&gt;太原科技大学&lt;/option&gt; &lt;option&gt;山西财经大学&lt;/option&gt; &lt;/select&gt;&lt;/p&gt; &lt;p&gt;&lt;select&gt; &lt;option&gt;校内系部网站&lt;/option&gt; &lt;option&gt;计算机工程系&lt;/option&gt; &lt;option&gt;经济贸易系&lt;/option&gt; &lt;option&gt;计算中心&lt;/option&gt; &lt;option&gt;管理系&lt;/option&gt; &lt;option&gt;旅游系&lt;/option&gt; &lt;option&gt;机电工程系&lt;/option&gt; &lt;option&gt;中文系&lt;/option&gt; &lt;option&gt;环境工程系&lt;/option&gt; &lt;option&gt;成人教育&lt;/option&gt; &lt;/select&gt; &lt;select&gt; &lt;option&gt;常用网站链接&lt;/option&gt; &lt;option&gt;平安校园&lt;/option&gt; &lt;option&gt;教务系统&lt;/option&gt; &lt;option&gt;NCRE查询&lt;/option&gt; &lt;option&gt;信息公开&lt;/option&gt; &lt;option&gt;OA系统&lt;/option&gt; &lt;/select&gt;&lt;/p&gt; &lt;/form&gt; &lt;/div&gt; &lt;div class="bottom"&gt; &lt;p&gt;版权所有 CopyRight &amp;copy; 2006 太原学院 地址：中国·山西·太原经济技术开发区大昌南路18号（晋）ICP备07001536&lt;/p&gt; &lt;/div&gt; &lt;div class="two_buttom"&gt; &lt;p&gt; &lt;img src="事业单位.jpg"/&gt; &lt;img src="二维码.jpg"/&gt; &lt;br/&gt; &lt;img src="QQ图片20170417202232.jpg" width="22" height="22"/&gt;晋公网安备 14010002070001号&lt;/p&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </pre> <pre class="prettyprint linenums lang-css">@charset "utf-8"; body { /*body元素选择器*/ /*background:#FFF url(images/body-bg.png) repeat-x;*/ font-size: 14px; /*字体大小*/ font-family:"Times New Roman", Times, serif;/*字体系列*/ /*简写形式*/ /*font: normal normal bold 14px/16px "Cooper Std Black", "微软雅黑", Arial, sans-serif;*/ width:990px; margin: 0 auto; padding: 10px; } /*右上角的设置*/ .top-right-1 { text-align:right; color:#930; font-weight:bolder; } .top-right-2 { color:#039; font-family:Arial, Helvetica, sans-serif; font-size:12px; } /*导航条的设置*/ #nav{ margin-top:-90px; margin-left:220px; width:770px; height:10px; } #nav ul { list-style-type:none; background-color:#039; margin: 0; height: 36px; } #nav ul li { float: left; width:80px; height:50px; margin-top:0px; padding-top:10px; } #nav ul li a:link { font-family:"Arial Black", Gadget, sans-serif; display: block; color:#FFF; text-align:center; text-decoration: none; } #nav ul li a:hover,a:active { background-color:red; text-decoration: none; } /*各个模块的布局*/ #col-1 /*页面上半部分的布局，即“校徽”及“导航条”*/ { width:200px; heigt:180px; margin-top:-40px; } #col-2 /*中间左半部分的设置*/ { width:250px; height:270px; color:#039; float:left; text-align:center; border-right:groove #CCC; } #col-3 /*中间上半部分的设置*/ { margin-top:10px; margin-left:-80px; width:673px; height:30px; text-align:center; } #col-4 /*中间下半部分的设置*/ { margin-left:233px; width:450px; height:220px; text-align:left; } .col-4-text /*中间部分文本的设置*/ { list-style-image:url(1.jpg); margin-left:530; font-size:1em; display:compact; color:#039; } #col-5 /*中间右半部分的设置*/ { margin-left:700px; margin-top:-288px; height:267px; text-align:center; border-left:groove #CCC; } .p_text /*右半部分文字间隔的设置*/ { padding-left:8px; padding-right:8px; } /*底部的设计*/ .bottom { margin-top:5px; width:990px; background-color:#039; color:white; text-align: center; } .two_buttom { color:#999; font-size:x-small; text-align:center; } </pre>