南大软院大神养成计划--网站

最新推荐文章于 2024-10-08 01:30:55 发布

原创最新推荐文章于 2024-10-08 01:30:55 发布 · 448 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了网页布局分析及头部制作流程，包括首页结构规划、盒子关系解析及CSS样式设计，通过实例展示了如何实现专业级的网页头部设计。

（1）在制作之前进行首页布局分析，弄清盒子之间的关系，分为顶部，LOGO区，导航区，大图广告区，之后一般分为3个区按功能规划，底部版权区。（2）页面头部制作，分析头部结构，分析盒子结构，根据功能设计样式。

.header{width:1200px;margin:0 auto;}
.logo{float:left;margin-left:10px;}
.icon{color:#888888;}
.icon ul li{float:right;}
.icon ul li a{border-right:1px solid #888888;color:#888888;padding:0 10px;}
.icon ul li a:hover{color:red;}
.stu{padding-top:0;}
.stu ul li{float:right;font-size:14px;margin:0 10px;height:20px;line-height:20px;background-color:white;display:block;padding:10px 5px;}
.stu ul li a{display:block;color:#003377;}

<div class="header">
<div class="logo">
<img src="http://www.ncu.edu.cn/img/ncu.png"/>
</div>
<div class="icon">
<ul>
  <li><a style="border:none;"href="">language</a></li>
  <li><a href=""><i class="fa fa-star"></i>oa系统</a></li>
  <li><a href=""><i class="fa fa-envelope-o"></i>邮箱</a></li>
</ul>
</div>
<br>
<div class="stu">
<ul>
  <li><a href=""><span>访客<br><i class="fa fa-apple fa-3x"></i></span></a></li>
  <li><a href=""><span>校友<br><i class="fa fa-graduation-cap fa-3x"></i> </span></a></li>
  <li><a href=""><span>教职工<br><i class="fa fa-child fa-3x"></i></span></a></li>
  <li><a href=""><span>在校生<br><i class="fa fa-pencil fa-3x"></i></span></a></li>
  <li><a href=""><span>考生<br><i class="fa fa-tags fa-3x"></i></span></a></li>
</ul>
</div>
</div>