网页设计与实现

网页设计与实现网站界面如图示：布局分析及代码实现：一、创建一个网页和一个css文件二、框架结构（六个部分）1、顶部（top）：确定中间部分大小纵向截取一块顶部用于背景填充，在纵向坐标轴进行重复将顶部分为两个部分logo和nav，logo部分有学校标志和搜索栏，用div存储，即logo_left和logo_right，先用float:left将logo_left和logo_right格式设置在同一栏，再设置clear:both解决不占空间的问题截取校标作为logo_left存放背景并设置logo_left大小logo_right用div分为两个部分logo_right1和logo_right2，logo_right1中有一个top_link顶部超链接（后台管理入口），logo_right2中label标签（快速检索）放置文本search将logo_right容器调至合适位置，用margin调整两个div之间的间距，两者之间的虚线通过调整logo_right2的padding和添加span，spanlabel调整文本（快速检索）和检索框的间距设置top_link，鼠标移上去（hover）有下划线且变颜色，link参观前和参观后同一效果为nav设置背景，在nav中添加9个li，调整nav_ul和nav_ullia位置，nav_li样式、高度和宽度，将中间的竖线作为背景添加在nav_li中为nav_ulli设置hover滚动图片（roll_pic）：以img的形式插入图片设置外面的背景roll_pic，设置roll_pic的padding_bottom解决图标太挤问题下面部分由5个li组成，为li设置格式大小背景颜色，鼠标移上去背景又为另一个颜色actived被激活的li变色新闻（news）：分为news_left和news_right两部分，news_left中又有school_news和pic_news，此部分的样式都差不多，因此用一个class统一设置样式，为左右两部分设定一个宽度标题下面的dl文本设置超链接，通过padding-left调整位置Left和right中间的线先设置上下距margin，再设置左右距margin-left标题前的小图标#notice_news中的dt直接背景覆盖“图片新闻”部分分为h3和两个div，h3和前面的“学校新闻”“通知公告”的h3、span一个样式，只有修改一下颜色和背景调整margin-right和宽度border-radius设置圆弧4、站点快速导航（index_link）：H2设置标题，字体font-family，font-size，font-color，除了宋体和微软雅黑之外的字体一般建议以图片形式插入相对理想，调整间距下面部分可以用4个div或者ul和li实现ul#index_link_ul>li*4>dl>dd*3>a[href=”#test_link$”class=”index_link_href”]>{测试链接}，每个dl中有一个dt放图片先用list-style:none;float:left;将li部分划分，固定li宽度每个li中图片不同，所以都用背景来设置Margin调整ul位置继承（后加载）的方式加图片去除每个方框，设置dd和方框同大小，为dd编写样式，为每一个dd增加class，不同颜色条，用JavaScript更方便站点链接visited和hover5、校园简介（intro）：两个部分：学院简介和相关连接昭通学院简介intro_left：图片效果（文字环绕）#img_con里设置float:left;margin-right;margin-bottom，使文字和图片位置效果好弧形图片borde-radius：10px；相关链接intro_right：链接到外部网站最好加target=”_blank”，设置超链接visited、的hover设置into部分的背景，排版6、底部（Bottom）：设置背景三个ul和li，分别放地址、版权、