制作的简单网页

最新推荐文章于 2024-06-04 13:04:19 发布

SunChao3555

最新推荐文章于 2024-06-04 13:04:19 发布

阅读量550

点赞数

分类专栏： Python 文章标签： H5 css样式导航条浮动显示

本文链接：https://blog.csdn.net/SunChao3555/article/details/79312123

版权

Python 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

主要包括css样式选择器的使用，以及利用相对位置，绝对位置，固定位置的相互关系实现导航条浮动显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的主页</title>
    <style>
        body{
            margin:0;
        }

        #nav{
            width: 100%;
            height: 40px;
            background-color: slateblue;
            /*border:red solid ;*/
            position: fixed;
            top: 0;
            z-index: 1000;
        }
        #nb{
                    width: 1200px;
                    height: 40px;
                    /*border: red solid;*/
                    margin:0 auto;
                    position: relative;
                    /*left:180px;*/

                }
        #logo{
            width: 80px;
            height: 40px;
            position: absolute;
            left:20px;
        }
        #logo>img{
            width: 80px;
            height: 40px;
        }
        #link>ul{
            margin:0 ;
            padding-left: 0;
            position: absolute;
            right: 20px;
        }
        li{
            float: left;
            list-style: none;
            line-height: 40px;
            margin-left: 120px;

        }
        li>a{
            text-decoration: none;
            font-family: "Microsoft Himalaya";
            color: black;
        }
        #zhuye{
            width: 100%;
            margin-top: 40px;
        }
        #mid{
            width: 1200px;
            /*height: 3000px;*/
            margin:0 auto;
            border: red solid;

        }
        h2:before{
            content:'\258a';
            color:brown;
            font-size:23px ;
        }
        p{
            width:1100px ;
            margin: 0 auto;
            font-size: 18px;
            font-family: 楷体;
        }
        #mid>div{
            width:1100px ;
            margin: 0 auto;
            border: red solid;

        }
        #mid>div>img{
            width: 1100px;
            margin: 0 auto;
        }
        section{
            width: 1100px;
            height: 600px;
            background-image: url("classmates.jpg");
            background-size: 1100px 600px;
            position: relative;
            /*top:20px;*/
            margin: 0 auto;
        }
        #mate1{
            width: 100px;
            height: 100px;
             border: rgb(255,255,255)3px solid;
            /*设置边框圆角半径 当其为宽 高的一半时为正圆*/
            border-radius: 50px;
            position: absolute;
            bottom: 100px;
            left: 100px;
        }
        #mate2{
            width: 120px;
            height: 120px;
             border: rgb(255,255,255)3px solid;
            /*设置边框圆角半径 当其为宽 高的一半时为正圆*/
            border-radius: 60px;
            position: absolute;
            bottom: 100px;
            right: 100px;
        }
        #mate3{
            width: 140px;
            height: 140px;
             border: rgb(255,255,255)3px solid;
            /*设置边框圆角半径 当其为宽 高的一半时为正圆*/
            border-radius: 70px;
            position: absolute;
            top: 200px;
            left: 200px;
        }
        hr{
            width: 1100px;
            color: slateblue;
            font-style: inherit;
        }
        #bottom{
            font-size: 16px;
            color: darkgrey;
            text-align: center;
            margin-bottom: 20px;

        }


    </style>
</head>
<body>
    <span id="top"></span>
    <div id="nav">
        <div id="nb">
            <div id="logo">
                <img src="logo.png" alt="">
            </div>
            <div id="link">
                <ul>
                   <li><a href="#top">首页</a></li>
                   <li><a href="#html5">HTML5</a></li>
                   <li><a href="#mate">我的同学</a></li>
                   <li><a href="#hometown">我的家乡</a></li>
                   <li><a href="#school">我的学校</a></li>
                   <li><a href="http://www.baidu.com" target="_blank" >关于我</a></li>
                </ul>
            </div>
        </div>
    </div>
    <img id="zhuye" src="header.jpg" alt="">
    <div id="mid">
        <p>月光摇曳我们的蓝图 总有一天会实现 描绘明天吧 永远不会磨灭 铭记在心中的愿望 若是无尽的泪水能掩盖伤痕 那就无需畏惧 再次去相信吧 向着无边无际的天空 伸开双臂</p>
        <div>
            <h2 id="html5">HTML5</h2>
            <img src="html5.jpg" alt="">
            <p>“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。父亲是一个胖子，走过去自然要费事些。 </p>
        </div>
        <div>
            <h2 id="mate">我的同学</h2>
            <section>
                <img id="mate1" src="wf.png" alt="">
                <img id="mate2" src="lry.jpg" alt="">
                <img id="mate3" src="ldh.jpg" alt="">
            </section>
            <p>我们过了江，进了车站。我买票，他忙着照看行李。行李太多了，得向脚夫行些小费，才可过去。他便又忙着和他们讲价钱。我那时真是聪明过分，总觉他说话不大漂亮，非自己插嘴不可。</p>
        </div>
        <div>
            <h2 id="hometown">我的家乡</h2>
            <img src="HomePage.jpg" alt="">
            <p>他望车外看了看，说，“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。</p>

        </div>
        <div>
            <h2 id="school">我的学校</h2>
            <img src="lzu.jpg" alt="">
            <p>情郁于中，自然要发之于外；家庭琐屑便往往触他之怒。他待我渐渐不同往日。但最近两年的不见，他终于忘却我的不好，只是惦记着我，惦记着我的儿子。</p>
        </div>
    </div>
    <hr>
    <p id="bottom">版权所有cc侵权必究！</p>
</body>
</html>

其中的图片src为本地静态图片的路径，读者自行修改即可

SunChao3555

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
制作的简单网页

主要包括css样式选择器的使用，以及利用相对位置，绝对位置，固定位置的相互关系实现导航条浮动显示&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;我的主页&lt;/title&gt; &lt;s
复制链接

扫一扫

专栏目录