第一个HTML页面

效果图
在这里插入图片描述
css设置

*{
    margin: 0px;
    padding: 0px;
}
body{
    background-color:moccasin;
}
.wrapper{
    width: 80%;
    height: 1000px;
    background-color: beige;
    margin: 0px auto;
}
.heading{
    width: 100%;
    height: 90px;
    background-color:moccasin;
    margin: 0px auto;
}
.heading_title{
    float: left;
    font-family: "Adobe 黑体 Std R";
    font-size: 30px;
    color:black;
}
.heading_nav{
    padding-bottom: 30px;
    padding-top: 30px;
    width: 100%;
    height: 30px;
    position:relative;
}

ul{
    margin-left: 40px;
    float: left;
    list-style-type:none;
    padding-top: 6px;
    padding-bottom: 6px;
}
li{
    padding-left:10px;
    display: inline;
}
a:link,a:visited{
    font-weight: bold;
    color:rosybrown;
    text-align: center;
    padding: 6px;
    text-decoration: none;
}
a:hover,a:active{
    color: aquamarine;
}
.heading_img img{
    border-radius:30px;
    display:inline;
    width: 35px;
    height: 35px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.2);
    float: right;
}
.heading_sop form{
    float: right;
    width: 200px;
    height: 35px;
    position: relative;
    margin-right:35px;
}
form input{
    width: 200px;
    height: 35px;
    border-radius: 30px;

}
.footing{
    padding-top: 20px;
    text-align: center;
    font-size:10px;
    color: darkgrey;
    background-color: lightblue;
    width: 80%;
    margin:auto;
}
.body{
    padding: 30px;
    height: auto;
    width: auto;
}
.body_title h3{
    font-size: 30px;
    font-family: "Adobe 黑体 Std R";
    color: black;

}
.body_title p{
    margin-top: 20px;
    margin-bottom: 20px;
}

页面部分
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个页面</title>
    <link href="dygym.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
    <div class="wrapper">
        <div class="heading">
           <div class="heading_nav">
               <div class="heading_title">
                   我的第一个页面
               </div>
               <div class="heading_navbar">
                   <ul>
                       <li><a href="#">java</a></li>
                       <li><a href="#">HTML5</a></li>
                       <li><a href="#">C++</a></li>
                       <li><a href="#">数据结构</a></li>
                       <li><a href="#">大数据</a></li>
                   </ul>
               </div>
               <div class="heading_img">
                   <img src="img01.jpeg">
               </div>
               <div class="heading_sop">
                   <form>
                       <input type="text">
                   </form>
               </div>
           </div>
        </div>
        <div class="body">
            <div class="body_title">
                <h3> 吹爆全员，为野犬干杯！</h3>
                <p>
                    如果你喜欢热血的异能战斗，文豪野犬能满足你！
                    如果你喜欢赏心悦目的人设和画面，文豪野犬也能满足你！
                    如果你喜欢好听的音乐和优秀的制作，文豪野犬也能满足你！

                    如果这些都不行，那再看看这个豪华的卡司：神谷浩史，宫野真守，细谷佳正，小野贤章，谷山纪章，丰永利行……哇，有木有很心动！

                    骨头社难得有三系列作品《文豪野犬》，欢迎新人入坑！

                    吹爆全员，为野犬干杯！
                </p>

            </div>
        </div>
    </div>
    <div class="footing">
        @第一个页面
    </div>
</div>
</body>
</html>

猜你喜欢