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

时间：2024-11-22 17:13:37

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

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

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


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


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

在中


注：这里我给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.成品图


附上完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>信息导航与网站设计</title>
</head>
<body>
    <div class="body">
        <div class="header">
            <img src="./images/" width="100%">
        </div>
        <div class="nav">
           <ul>
               <li>
                   <a href="./work/">我的作品1</a>    
                </li>
               <li>
                    <a href="./work/">我的作品2</a> 
                </li>
               <li>
                    <a href="./work/">我的作品3</a> 
                </li>
               <li>
                    <a href="#">我的作品4</a> 
                </li>
               <li>
                    <a href="javascript:;">我的作品5</a> 
                </li>
               <li>
                    <a href="javascript:;">我的作品6</a> 
                </li>
           </ul>               
        </div>
        <div class="content">
            <ul>
                <li>
                    <p>学号：</p>
                    <P>专业：</P>
                    <p>姓名：</p>
                </li>
                <li>
                    <p>人生格言：</p>
                    <p>兴趣爱好：</p>
                    <p>自我介绍：</p>
                </li>
                <li>
                    <img src="./images/" width="100%">
                    <p style="text-indent:2em">安阳，地处殷、邺，位于河南省最北部，地处河南、河北、
                        山西三省交界，西倚太行山，东连华北平原，北邻邯郸，西接鹤壁、新乡......
                    </p>
                </li>
            </ul>
        </div>
        <div class="footer">
           <p>Copyright © 2014-2018 Z版权所有</p>
           <p>郑州航空工业管理学院  XX级XX专业</p>
        </div>
    </div>
</body>
</html>
<style>
    .body{
        margin: 0 auto;
        width: 1190px;
    }
    ul{
        overflow: hidden;
        list-style:none;
        padding: 0;
    }
    a{
        text-decoration: none;
        color: #fff;
    }
    .header{
        height: 280px;
    }
    .nav{
        margin:10px auto;
        padding: 0 200px;
        height: 43px;
        border-radius: 5px;
        background: url(./images/); 
    }
    .nav ul li{
        float: left;
        width: 120px;
        line-height: 43px;
        background: url(./images/) no-repeat right; 
    }
    .nav ul li a{
        float: left;
        width: 120px;
        line-height: 43px;
        text-align: center;
    }
    .nav ul li a:hover{
        color: #999;
        background: url(./images/); 
    }
    .nav ul li:last-child{
        background: none;
    }
    .content{
        height: 500px;
    }
    .content ul li{
        float: left;
        width: 390px;
        height: 500px;
        margin-right:10px;
        background-color: #ccc;
    }
    .content ul li:last-child{
        margin-right:0;
    }
    .content p{
        font-size: 14px;
        font-family: "Microsoft YaHei";
    }
    .footer{
        margin:10px auto;
        height: 50px;
        background-color: skyblue;
    }
    .footer p{
        font-size: 12px;
        font-family: "Microsoft YaHei";
        text-align: center;
    }

</style>


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

相关文章