信息导航与网站设计 采用HTML+CSS+DIV布局页面

期末作业：根据本课程所学内容 布局如下页面

要求：导航条的内容要链接到自己的作品页面(从7次作业中选6个)，页面中间的DIV要按照图示要求并根据自己的情况填写上相应的内容，可以使用列表也可以使用段落，下面的版权信息也要根据自己的信息填写上。（提示：id选择器、类选择器、伪类选择器等都可以用到）

1.拿到图片及资料之后先建好文件夹，把图片放到images文件夹下；自己的作品放到work下。

2.先观察一下页面，进行简单分割

3.在编译器里打开自己建好的文件夹 开始代码部分。

在index.html中

注：这里我给body设置了一个定宽 1190，个人习惯 可以不设置；

代码中用到的需要清除样式!

①header

html部分

css部分

注：宽度不设置继承body的宽度，高度不继承。

②nav

html部分

此处做演示用我只加3个作品，后面的a标签起一个对比的作用。

注：a标签的href属性中的“#”与“javascript;;”的区别

其中javascript: 是一个伪协议。它可以让我们通过一个链接来调用javascript函数。但是由于这个函数为空，所以我们调用的就是一个空函数，并不会发生任何实质性的改变。同时可以实现a标签的点击运行。如果当页面里面的内容很多的时候，有了上下滚动条，使用href=“#"会发生跳转到页面顶部的问题。而使用href="javascript:;" 就可以避免页面的乱跳！

css部分

注：li 用到了float，他的父元素ul需设置 overflow:hidden 清除浮动

③content

html部分

css部分

④footer

html部分

css部分

4.成品图

附上index.html完整代码

    
    
    
    


    

        

            
        
        

           

               

                   我的作品1    
                
               

                    我的作品2 
                
               

                    我的作品3 
                
               

                    我的作品4 
                
               

                    我的作品5 
                
               

                    我的作品6 
                
           
               
        
        

            

                

                    
学号：
                    
专业：
                    
姓名：
                
                

                    
人生格言：
                    
兴趣爱好：
                    
自我介绍：
                
                

                    
                    
安阳，地处殷、邺，位于河南省最北部，地处河南、河北、
                        山西三省交界，西倚太行山，东连华北平原，北邻邯郸，西接鹤壁、新乡......
                    
                
            
        
        

           
Copyright © 2014-2018 Z版权所有
           
郑州航空工业管理学院  XX级XX专业
        
    

注：文章是为小伙伴完成作业写的，如有疑问或发现错误请及时私信作者。希望大家一起学习共同进步！