0 先放效果图 （我好爱导航栏的配色！！）
网页描述：左侧为导航栏，右侧为主页，左右两侧可分别滚动，手机电脑平板为相同格式。
放上来的图是电脑版网页捕获的图，实际上导航栏是在左侧充满的。
1 基础代码（形成右侧的主页）（且为主页居中形式）
参考我前几天写的博客：(16条消息) github | html纯小白也可以创建静态个人主页_气象小白的博客-CSDN博客
2 添加导航栏
要修改html和css文件
2-1 修改html文件
在</head>前添加代码
<style>
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
background-color:#1F286F;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color:khaki;
padding: 20px 10px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color:#3E84C4;
color: white;
}
</style><body>和<header>之间添加（注意代码最后一行还有要添加的）
<ul>
<li><a href="https://zhuoyaoh.github.io/"><h2>HZY</h2></a></li>
<!--HZY是个人名字缩写，可更换-->
<li><a href="#home"><h3>欢迎浏览！<br><br><br>祝你今天开心！</h3></a></li>
<li><a href="#home"><b>个人简介</b></a></li>
<li><a href="#教育"><b>教育经历</b></a></li>
<li><a href="#科研"><b>科研经历</b></a></li>
<li><a href="#方向"><b>研究方向</b></a></li>
<li><a href="#文章"><b>发表文章</b></a></li>
<li><a href="#奖学金"><b>奖学金</b></a></li>
<li><a href="#学生工作"><b>学生工作</b></a></li>
<li><a href="#活动"><b>参加活动</b></a></li>
<li><a href="#游玩"><b>旅游打卡</b></a></li>
</ul>
<div style="margin-left:20%;height:1000px;">
<!-- 这个<div>对应的</div>可以写在整个代码的倒数第三行，就是在</body>前-->
在每个section前添加引导词（我自己这么称呼的，我也不确定这个叫什么）
就是在<section class="section2">前添加（以最后一个section为例），注意id是与上一个代码块里的href对应的，起到引导作用
<div id="游玩"></div>2-2 修改css文件
修改的部分都在文件开头
body修改width和padding
body {
margin-left: auto;
margin-right: auto;
width: 90%;
padding-left: 5%;
padding-right: 5%;
}profilelogo修改为（忘了具体修改哪个地方了...），这个是把之前左上角那个个人主页变成白色背景不显示
header .profileLogo .logoPlaceholder {
background-color:white;
width: 187px;
text-align: center;
}3 完整代码
3-1 html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> 某人- Homepage</title>
<link href="aboutPageStyle.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/montserrat:n4:default;source-sans-pro:n2:default.js" type="text/javascript"></script>
<link rel="Shortcut Icon" href="图标.ico" type="image/x-icon" />
<style>
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
background-color:#1F286F;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color:khaki;
padding: 20px 10px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color:#3E84C4;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="https://zhuoyaoh.github.io/"><h2>HZY</h2></a></li>
<li><a href="#home"><h3>欢迎浏览！<br><br><br>祝你今天开心！</h3></a></li>
<li><a href="#home"><b>个人简介</b></a></li>
<li><a href="#教育"><b>教育经历</b></a></li>
<li><a href="#科研"><b>科研经历</b></a></li>
<li><a href="#方向"><b>研究方向</b></a></li>
<li><a href="#文章"><b>发表文章</b></a></li>
<li><a href="#奖学金"><b>奖学金</b></a></li>
<li><a href="#学生工作"><b>学生工作</b></a></li>
<li><a href="#活动"><b>参加活动</b></a></li>
<li><a href="#游玩"><b>旅游打卡</b></a></li>
</ul>
<div style="margin-left:20%;height:1000px;">
<!-- Header content -->
<header>
<div id="home">
<div class="profileLogo">
<!-- Profile logo. Add a img tag in place of <span>. -->
<p class="logoPlaceholder" ><!-- <img src="logoImage.png" alt="sample logo"> --><span>个人主页 </span></p>
</div>
<div class="profilePhoto">
<!-- Profile photo 用自己的照片的话宽是200-->
<img src="猫猫头.jpg" alt="证件照" width="300"></div>
<!--alt的意思是，如果图片没有加载出来显示什么-->
<!-- Identity details -->
<section class="profileHeader">
<h1> </h1>
<h1>名字</h1>
<h3 >文字</h3>
<hr>
<p>文字</p>
<p>QQ： </p>
<p>Email： </p>
</section>
</div>
<!-- Links to Social network accounts -->
<aside class="socialNetworkNavBar">
<div class="socialNetworkNav">
<!-- Add a Anchor tag with nested img tag here --> </div>
<div class="socialNetworkNav">
<!-- Add a Anchor tag with nested img tag here --> </div>
<div class="socialNetworkNav">
<!-- Add a Anchor tag with nested img tag here --> </div>
<div class="socialNetworkNav">
<!-- Add a Anchor tag with nested img tag here --> </div>
</aside>
</header>
<!-- content -->
<section class="mainContent">
<!-- Contact details -->
</section>
<div id="教育">
</div>
<section class="section2">
<h2 class="sectionTitle" >教育经历 </h2>
<hr class="sectionTitleRule">
<hr class="sectionTitleRule2">
<div class="section2Content">
<p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>2020.9-至今 :</span> 文字</p>
<p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>2020.9-至今 :</span> 文字</p>
<p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>2020.9-至今 :</span> 文字</p>
<p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>2020.9-至今 :</span> 文字</p>
<p> </p>
</div>
</section>
<!-- Previous experience details -->
<div id="科研">
<section class="section2">
<h2 class="sectionTitle" style="font-size: 20px">科研经历 </h2>
<hr class="sectionTitleRule">
<hr class="sectionTitleRule2">
<div class="section2Content">
<p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>2020.9-至今 :</span> 文字</p>
<p style="font-size: 17px;color: darkgray;font-family: 微软雅黑">
</p>
</div>
</section></div>
<div id="方向">
<section class="section2">
<h2 class="sectionTitle" style="font-size: 20px">研究方向 </h2>
<hr class="sectionTitleRule">
<hr class="sectionTitleRule2">
<div class="section2Content">
<p style="font-size: 17px;color: darkgray;font-family: 微软雅黑">文字 </p>
<p style="font-size: 17px;color: darkgray;font-family: 微软雅黑">文字 </p>
</div>
</section></div>
<div id="文章">
<section class="section2">
<h2 class="sectionTitle" style="font-size: 20px">发表文章 </h2>
<hr class="sectionTitleRule">
<hr class="sectionTitleRule2">
<div class="section2Content">
<p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"> </p>
</section></div>
<div id="奖学金">
<section class="section2">
<h2 class="sectionTitle" style="font-size: 20px">奖学金 </h2>
<hr class="sectionTitleRule">
<hr class="sectionTitleRule2">
<div class="section2Content">
<p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>2020.10&2021.12 :</span> 文字 </p>
<p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>2020.10 :</span> 文字 </p>
<p> </p>
</div>
</section></div>
<div id="学生工作"></div>
<section class="section2">
<h2 class="sectionTitle" style="font-size: 20px">学生工作&所获荣誉 </h2>
<hr class="sectionTitleRule">
<hr class="sectionTitleRule2">
<div class="section2Content">
<p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>2021.9-2022.7 :</span> 文字</p>
<p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>2021.9-2022.7 :</span> 文字</p>
<p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>2021.9-2022.7 :</span> 文字</p>
<p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"> </p>
<p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>2021.9-2022.7 :</span> 文字</p>
<p> </p>
</div>
</section>
<div id="活动"></div>
<section class="section2">
<h2 class="sectionTitle" style="font-size: 20px">参加活动 </h2>
<hr class="sectionTitleRule">
<hr class="sectionTitleRule2">
<div class="section2Content">
<p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>2021-2022 大二 :</span>文字</p>
<p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>2020-2021 大一 :</span> 文字</p>
<p> </p>
</div>
</section>
<div id="游玩"></div>
<section class="section2">
<h2 class="sectionTitle" style="font-size: 20px">旅游打卡 </h2>
<hr class="sectionTitleRule">
<hr class="sectionTitleRule2">
<div class="section2Content">
<p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>考察 :</span>文字</p>
<p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>马拉松 :</span>文字</p>
<p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>城市 :</span>文字</p>
<p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>爬山 :</span></p>
<p> </p>
</div>
</section>
<!-- Replicate the above Div block to add more title and company details -->
<footer>
<hr>
<p style="font-size: 15px;color: darkgray;font-family: 微软雅黑"> <span > Related Links：
<a href="https://www.ustc.edu.cn" target="_blank" style="text-decoration:none;">USTC</a> |
<a href="http://ess.ustc.edu.cn" target="_blank" style="text-decoration:none;">School of ESS of USTC</a> |
</span></p>
<p style="font-size: 15px;color: darkgray;font-family: 微软雅黑"> 最近更新：2022.8.1</p>
<p class="footerDisclaimer">2022 Copyrights - <span>All Rights Reserved</span></p>
</footer> </div>
</body>
</html>3-2 css
@charset "utf-8";
/* Global Styles */
body {
margin-left: auto;
margin-right: auto;
width: 90%;
padding-left: 5%;
padding-right: 5%;
}
/* Header */
header {
text-align: center;
display: block;
}
header .profileLogo .logoPlaceholder {
background-color:white;
width: 187px;
text-align: center;
}
header .logoPlaceholder span {
width: 80px;
height: 22px;
font-family: 'Montserrat', sans-serif;
color: rgba(255,255,255,1.00);
font-size: 30px;
font-weight: 700;
line-height: 53px;
}
header .profilePhoto {
background-color: white;
width: 259px;
border-radius: 50%;
height: 259px;
clear: both;
}
header .profileHeader h1 {
font-family: 'Montserrat', sans-serif;
color: rgba(146,146,146,1.00);
font-size: 30px;
font-weight: 700;
line-height: 24px;
}
header .profileHeader h3 {
font-family: sans-serif;
color: rgba(146,146,146,1.00);
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
hr {
background-color: rgba(208,207,207,1.00);
height: 1px;
}
header .profileHeader p {
font-family: sans-serif;
color: rgba(146,146,146,1.00);
font-size: 14px;
font-weight: 400;
line-height: 1.8;
overflow-y: auto;
}
header .socialNetworkNavBar {
text-align: center;
display: block;
margin-top: 60px;
clear: both;
}
header .socialNetworkNavBar .socialNetworkNav {
border-radius: 50%;
cursor: pointer;
}
header .socialNetworkNavBar .socialNetworkNav img:hover {
opacity: 0.5;
}
/* Main Content sections */
.mainContent .section1 {
display: block;
}
.section1 .sectionTitle, .section2 .sectionTitle {
font-family: 'Montserrat', sans-serif;
color: rgba(146,146,146,1.00);
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
}
.section1 .sectionTitleRule, .section2 .sectionTitleRule {
margin: 0 3% 0 0;
float: left;
clear: both;
}
.section1 .sectionTitleRule2, .section2 .sectionTitleRule2 {
background-color: rgba(208,207,207,1.00);
height: 1px;
padding: 0px;
}
.mainContent .section1 .section1Content {
font-family: ProximaNova;
font-size: 14px;
font-weight: 100;
color: rgba(208,207,207,1.00);
}
.mainContent .section1 .section1Content span {
color: rgba(146,146,146,1.00);
font-family: sans-serif;
}
.section2 .sectionContentTitle {
font-family: sans-serif;
color: rgba(146,146,146,1.00);
font-size: 18px;
font-weight: 700;
}
.section2 .sectionContentSubTitle {
font-family: sans-serif;
color: rgba(68,67,67,1.00);
font-size: 14px;
font-weight: 400;
}
.section2 .sectionContent {
font-family: sans-serif;
color: rgba(146,146,146,1.00);
font-size: 14px;
font-weight: 400;
line-height: 1.8;
}
.mainContent {
display: block;
}
.mainContent .externalResourcesNav .externalResources {
background-color: rgba(208,207,207,1.00);
display: inline-block;
text-align: center;
margin-top: 0px;
padding-top: 3%;
cursor: pointer;
}
.mainContent .externalResourcesNav .externalResources:hover {
background-color: rgba(153,153,153,1.00);
}
.externalResourcesNav .externalResources a {
font-family: 'Montserrat', sans-serif;
color: rgba(255,255,255,1.00);
font-size: 14px;
font-weight: 400;
line-height: 18px;
text-decoration: none;
}
.stretch {
content: '';
display: inline-block;
margin-left: 2%;
margin-right: 2%;
}
/* Footer */
footer .footerDisclaimer {
font-family: sans-serif;
font-size: 14px;
line-height: 18px;
color: rgba(104,103,103,1.00);
font-weight: 700;
}
footer .footerDisclaimer span {
color: rgba(181,178,178,1.00);
font-weight: 400;
}
footer .footerNote {
font-family: sans-serif;
font-size: 14px;
line-height: 18px;
color: rgba(104,103,103,1.00);
font-weight: 700;
}
footer .footerNote span {
color: rgba(181,178,178,1.00);
font-weight: 400;
}
/* Media query for Mobile devices*/
@media only screen and (min-width : 285px) and (max-width : 480px) {
/* Header */
header {
width: 100%;
float: none;
}
header .profileLogo .logoPlaceholder {
display: inline-block;
}
header .profilePhoto {
display: inline-block;
}
header .profileHeader {
text-align: center;
margin-top: 10%;
}
header .profileHeader p {
text-align: justify;
}
header .socialNetworkNavBar {
text-align: center;
display: block;
margin-top: 60px;
clear: both;
margin-bottom: 15%;
}
header .socialNetworkNavBar .socialNetworkNav {
width: 60px;
height: 60px;
display: inline-block;
margin-right: 23px;
}
/* Main content sections */
.mainContent .section1 {
text-align: center;
margin-bottom: 10%;
}
.section1 .section1Title, .section2 .section1Title {
text-align: center;
}
.section1 .sectionTitleRule, .section2 .sectionTitleRule {
width: 100%;
}
.section1 .sectionTitleRule2, .section2 .sectionTitleRule2 {
display: none;
}
.mainContent .section1 .section1Content {
display: inline-block;
text-align: left;
font-family: sans-serif;
text-align: justify;
}
.mainContent .section2 {
display: block;
text-align: center;
}
.section2 .section2Content {
margin-top: 10%;
text-align: justify;
margin-bottom: 10%;
}
.mainContent .externalResourcesNav {
margin-bottom: 10%;
}
.mainContent .externalResourcesNav .externalResources {
width: 100%;
height: 35px;
}
/* Footer */
footer {
display: block;
text-align: center;
font-family: sans-serif;
}
}
/* Media Query for Tablets */
@media only screen and (min-width : 481px) and (max-width : 1024px) {
/* Header */
header {
width: 100%;
float: none;
}
header .profileLogo .logoPlaceholder {
display: inline-block;
font-family: 'Montserrat', sans-serif;
}
header .profilePhoto {
float: left;
clear: both;
margin-right: 3%;
margin-top: 5%;
}
header .profileHeader {
text-align: left;
margin-top: 7%;
}
header .socialNetworkNavBar .socialNetworkNav {
width: 74px;
height: 74px;
display: inline-block;
margin-right: 23px;
}
/* Main content and sections */
.section1 .section1Title, .section2 .section1Title {
text-align: center;
}
.section1 .sectionTitleRule, .section2 .sectionTitleRule {
width: 100%;
}
.section1 .sectionTitleRule2, .section2 .sectionTitleRule2 {
display: none;
}
.mainContent .section1 .section1Content {
display: block;
margin: 0% 0% 0% 20%;
font-family: sans-serif;
margin-top: 5%;
margin-bottom: 5%;
}
.mainContent .section2 {
clear: both;
}
.section2 .section2Content {
padding: 0px;
margin-left: 20%;
font-family: sans-serif;
margin-top: 5%;
margin-bottom: 5%;
}
.mainContent .externalResourcesNav {
margin-left: 20%;
margin-top: 40px;
margin-bottom: 40px;
text-align: center;
padding-top: 0px;
clear: both;
}
.mainContent .externalResourcesNav .externalResources {
width: 199px;
height: 48px;
margin-top: 5%;
}
/* Footer */
footer .footerDisclaimer {
float: left;
margin-left: 3%;
font-family: sans-serif;
}
footer .footerNote {
float: right;
margin-right: 3%;
font-family: sans-serif;
}
}
/* Desktops and laptops */
@media only screen and (min-width:1025px) {
/* Header */
header .profileLogo .logoPlaceholder {
float: left;
margin-bottom: 50px;
}
header .profilePhoto {
float: left;
clear: both;
margin-right: 3%;
}
header .profileHeader {
text-align: left;
padding-top: 10%;
}
header .socialNetworkNavBar .socialNetworkNav {
width: 74px;
height: 74px;
display: inline-block;
margin-right: 23px;
}
/* Main content sections */
.section1 .sectionTitleRule, .section2 .sectionTitleRule {
width: 22.5%;
}
.mainContent .section1 .section1Content {
display: block;
margin-top: 0%;
margin-right: 0%;
margin-left: 26%;
margin-bottom: 0%;
font-family: sans-serif;
}
.mainContent .section2 {
clear: both;
}
.section2 .section2Content {
padding: 0px;
margin-left: 26%;
font-family: sans-serif;
}
.mainContent .externalResourcesNav {
margin-top: 40px;
margin-bottom: 40px;
text-align: center;
padding-top: 0px;
clear: both;
}
.mainContent .externalResourcesNav .externalResources {
width: 199px;
height: 48px;
}
/* Footer */
footer .footerDisclaimer {
float: left;
margin-left: 3%;
font-family: sans-serif;
}
footer .footerNote {
float: right;
margin-right: 3%;
font-family: sans-serif;
}
}
Footer
© 2022 GitHub, Inc.
Footer navigation
Terms
2397
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
