SOURCE

  <!--头部-->
    <div class="header">
        <div class="logo"></div>
        <p class="mingzi"><a href="http://jwc.gzdhxy.com">这是我的学校</a></p>
    </div>
    <!--主体-->
    <div class="bin">
        <div class="dang"> 
           <p>我一直相信释迦牟尼说过一句话：“无论你遇见谁，他都是你生命该出现的人，绝非偶然，他一定会教会你一些什么”。</p>
           <p>希望这个夏天，天气凉快一点，西瓜甜一点，我可爱一点，爱我多一点。</p>
        </div>
        <div class="content">
             <ul>
                <li><a class="active" href="http://v.gdtv.cn/zj/wlxfbdl/2020-06-07/2418892.html">主页</a></li>
                <li><a href="http://www.people.com.cn/">新闻</a></li>
                <li><a href="https://123.sogou.com/yx/?fr=cx">游戏</a></li>
                <li><a href="http://kan.sogou.com/dianying/">电影</a></li>
                <li><a href="https://baike.sogou.com/v2705869.htm?fromTitle=%E7%81%AB%E9%94%85">美食</a></li>
                <li><a href="http://bgb.jmynh.net.cn/W572415/index_m.html?cid=MTA1Mg==">旅游</a></li>
                <li><a href="http://bd.kuwo.cn/play_detail/81441660?from=sogou">音乐</a></li>
                <li><a href="http://www.99ys.com/">艺术</a></li>
                <li><a href="https://baike.sogou.com/v57851.htm?fromTitle=%E5%B0%8F%E7%8E%8B%E5%AD%90">书籍</a></li>
                <li><a href="https://www.bilibili.com/v/channel/type/1">动漫</a></li>
              </ul>
              

            </div>
            <div class="border">
                <div class="dashu"></div>
            </div>
        </div>

  body {
    margin: 0px;
}
.header {
    background-image: url("https://i.loli.net/2020/06/17/rzIXP6V8DkuQMiA.jpg");
    width: 100%;
    height: 320px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.dang p{
    border:2px solid #d4d5d6b4;
	padding:10px 40px; 
	background:#daf5ff;
	width:300px;
	border-radius:25px;
}


.header .logo {
    background-image: url("https://i.loli.net/2020/06/17/2gk94o3BQznrMKL.jpg");
    background-size: 100% 100%;
    width: 70px;
    height: 70px;
    float: left;
    margin-top: 40px;
    margin-left: 50px;
}
.mingzi {
    float: left;
    margin-top: 55px;
    font-size: 40px;
    font-weight: 1000;
    font-family: cursive;
    color: white;
}
.content{
    width: 1000px;
    height: 600px;
    margin: 0 auto;
}
ul {
    list-style-type: none;
    margin: -180px 0 0 350px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
    
}

li {
    float: left;
}

li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #ddd;
}

li a.active {
    color: white;
    background-color: #4CAF50;
}