html
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" href="../CSS/神女控headfoot.css"/> <title>神女控官网</title></head><body><div id="head" class="head"> <div class="headnav"> <div class="navBtn1 navBtnCell"> <div class="headlogo"> <a href="神女控官网.html"> <img src="../HTML/images/navlogo_01.png" alt="首页logo"/> </a> </div> </div> <div class="navBtn2 navBtnCell"> <div class="mainBtn"> <a href="#">介绍</a> </div> </div> <div class="navBtn3 navBtnCell"> <div class="mainBtn"> <a href="#">下载</a> </div> </div> <div class="navBtn4 navBtnCell"> <div class="mainBtn"> <a href="#">贴吧</a> </div> </div> <div class="navBtn5 navBtnCell"> <div class="mainBtn"> <a href="#">联系我们</a> </div> </div> </div></div><div id="content" class="content"> <div class=""></div></div><div id="foot" class="foot"></div></body></html> CSS
body{ background-image: url("../HTML/c9d7160bbe6c8b8892b4b19eef01cf33.jpeg"); background-position: 50% 0; background-repeat: no-repeat; margin: 0 auto;}.head{ height: 100px; position: relative;}.content{ height: 976px; position: relative;}.foot{ height: 100px; position: relative; background-image: url("../HTML/foot-1.png");}.headnav{ position: relative; overflow: hidden;}.navBtn1{ width: 210px; height: 100px;}.navBtn2{ width: 280px; height: 100px;}.navBtn3{ width: 280px; height: 100px;}.navBtn4{ width: 280px; height: 100px;}.navBtn5{ width: 280px; height: 100px;}.navBtnCell{ margin-right: 1px; float: left;}.mainBtn{ color: brown; text-align: center; font-size: 30px; padding-top: 35px;}.mainBtn a{ text-decoration: none; font-family: 微软雅黑; color: #271636;} 初步效果图:
时间: 2024-10-09 10:21:42