个人主页

最新推荐文章于 2023-05-30 23:19:14 发布

one_world-one_dream

最新推荐文章于 2023-05-30 23:19:14 发布

阅读量453

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/Fly_hello/article/details/73862932

版权

web前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    body {
        margin: 0;
    }
    
    header {
        background-color: palegreen;
        width: 100%;
        /*bordr:2px red solid;*/
        position: fixed;
        box-shadow: 2px 5px 5px;
    }
    
    header section{
        background-image: url("logo.png");
        width: 400px;
        height: 100px;
        background-size: 400px 100px;
        float: left;
        margin-top: 35px;
        margin-left: 20px;
    }
    
   header div {
        margin-top: 70px;
        float: right;
        
    }
    
    .one {
        margin-right: 30px;
        font-size: 25px;
        text-decoration-line: none;
    }
    
    div img {
        width: 100%;
        height: 600px;
        margin-top: 135px;
    }
    
    .aa {
        height: 800px;
        margin: 0px;
    }
    
    main {
        margin-left: 100px;
        margin-right: 100px;
    }
    
    .div1 {
        width: 10px;
        height: 30px;
        background-color: red;
        float: left;
    }
    
    .div0 {
        margin-bottom: 10px;
        font-size: 25px;
        /*font-size-adjust: center;*/
        margin-top: 30px;
    }
    
    #foot {
       display: block;  border-top: solid 2px red;
       /*text-justify: center;*/
        margin-top: 50px;
        padding:30px;
 text-align: center;
    }
    
    /*.foot1 {
        
        display: block;
        margin-left: 20px;
        float: left;
        margin-right: 20px;
       
    }*/
    #class{
        /*width:100%;*/
        height:600px;
        background-image: url(classmates.jpg);
        background-size: 100%;
          border:solid 1px transparent;

    }
    #class1{
        width:300px;
        height:300px;
        background-image: url(lry.jpg);
        background-size: 100% 100%;
      
        border-bottom-left-radius: 150px;
        border-bottom-right-radius: 150px;
        border-top-left-radius: 150px;
         border-top-right-radius: 150px;
        margin-top:150px;
        margin-left:300px;
         /*transform: translateX(300px)  translateY(150px) ;*/
    }
</style>

<body>
    <header>
        <section></section>
        <div>
            <a href="#tip0" class="one" >我的主页</a>
        <a href="#tip1" class="one">我的同学</a>
        <a href=" #tip2" class="one" >我的家乡</a>
        <a href="" class="one">我的照片</a>
        <a href="" class="one">关于我</a>
        </div>
        
       
       
    </header>
    <div>
        <img src="header.jpg" alt="">
    </div>
    <main>

        <div>
            <div>njfksdahnjkegndkrfgmnklsgjnls</div>
            <div class="div0">
                <div class="div1"> </div>
                <div id="tip0">HTML5</div>
            </div>

            <img src="html5.jpg" alt="" class="aa">
            <div>njfksdahnjkegndkrfgmnklsgjnls</div>
        </div>
        <div>
            <div class="div0">
                <div class="div1"> </div>
                <div id="tip1">我的主页</div>
            </div>
            <div id="class">
                <!--<img src="classmates.jpg" alt="" class="aa">-->
                <div id="class1"></div>
            </div>
            <div>njfksdahnjkegndkrfgmnklsgjnls</div>
        </div>
        <div>
            <div class="div0">
                <div class="div1"> </div>
                <div id="tip2">我的同学</div>
            </div>
            <img src="lzu.jpg" alt="" class="aa">
            <div>njfksdahnjkegndkrfgmnklsgjnls</div>
        </div>
        <div>
            <div class="div0">
                <div class="div1"> </div>
                <a id="tip">我的家乡</a>
            </div>
            <img src="hometown.jpg" alt="" class="aa">
            <div>njfksdahnjkegndkrfgmnklsgjnls</div>
        </div>
        <div id="foot">
            
                nasklfseldgml;sdfghtl;h
            &nbsp &nbsp
                134156546546
            &nbsp &nbsp
                nasklfseldgml;sdfghtl;h
            
        </div>
    </main>


</body>

</html>

one_world-one_dream

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
个人主页

html lang="en">head> meta charset="UTF-8"> title>Documenttitle>head>style> body { margin: 0; } header { background-color: palegreen; width: 100%;
复制链接

扫一扫