个人主页制作更新—

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>个人主页&nbsp;</span></p></div><div class="profilePhoto"> <!-- Profile photo                                  用自己的照片的话宽是200--> <img src="猫猫头.jpg"  alt="证件照" width="300"></div>
<!--alt的意思是，如果图片没有加载出来显示什么--><!-- Identity details --><section class="profileHeader"><h1>&nbsp;</h1><h1>名字</h1><h3 >文字</h3><hr><p>文字</p><p>QQ：&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</p><p>Email：&nbsp;</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" >教育经历&nbsp;</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>&nbsp</p></div></section><!-- Previous experience details --><div id="科研"><section class="section2"><h2 class="sectionTitle" style="font-size: 20px">科研经历&nbsp;</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: 微软雅黑">&nbsp;</p></div></section></div><div id="方向"><section class="section2"><h2 class="sectionTitle" style="font-size: 20px">研究方向&nbsp;</h2><hr class="sectionTitleRule"><hr class="sectionTitleRule2"><div class="section2Content"><p style="font-size: 17px;color: darkgray;font-family: 微软雅黑">文字&nbsp;</p><p style="font-size: 17px;color: darkgray;font-family: 微软雅黑">文字&nbsp;</p></div></section></div><div id="文章"><section class="section2"><h2 class="sectionTitle" style="font-size: 20px">发表文章&nbsp;</h2><hr class="sectionTitleRule"><hr class="sectionTitleRule2"><div class="section2Content"><p style="font-size: 17px;color: darkgray;font-family: 微软雅黑">&nbsp;</p></section></div><div id="奖学金">
<section class="section2"><h2 class="sectionTitle" style="font-size: 20px">奖学金&nbsp;</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>&nbsp</p></div></section></div><div id="学生工作"></div><section class="section2"><h2 class="sectionTitle" style="font-size: 20px">学生工作&所获荣誉&nbsp;</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: 微软雅黑">&nbsp;</p><p style="font-size: 17px;color: darkgray;font-family: 微软雅黑"><span>2021.9-2022.7 :</span> 文字</p><p>&nbsp</p></div></section><div id="活动"></div><section class="section2"><h2 class="sectionTitle" style="font-size: 20px">参加活动&nbsp;</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>&nbsp</p></div></section><div id="游玩"></div><section class="section2"><h2 class="sectionTitle" style="font-size: 20px">旅游打卡&nbsp;</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>&nbsp</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 >&nbsp; &nbsp; &nbsp; 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: 微软雅黑"> &nbsp; &nbsp; &nbsp; 最近更新：2022.8.1</p><p class="footerDisclaimer">2022&nbsp; 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

个人主页制作更新——添加导航栏相关推荐

html响应式导航栏制作,用Sass制作响应式导航栏(原创)
插件描述:用Sass制作响应式导航栏更新时间:2017/12/29 下午8:33:04 更新说明:细节优化data-stop='true' : 在手机版上禁止跳转页面// 插入js代码 $(docu ...
ios 添加导航栏视图_iOS进度栏（进度视图）
ios 添加导航栏视图 In this tutorial, we'll be discussing the UIProgressView component and create a progress ...
MIPCMS模板制作之过滤导航栏
文章目录[隐藏] 需求说明 MIPCMS 模板制作之过滤导航栏我是用MIPCMS有段事件了,做了两个模板,其中一个虽然有 bug 但是还是上线了,地址时:https://heboy.me.这个网站是 ...
php主题怎么增加导航页,教你如何给wordpress主题添加导航栏
烈火建站学院转载不是所有的wordpress主题都自带导航栏的,我早就想自行添加一个.昨天的标题前有"GOOGLE是个好老师"这个句子,今早赶紧删了,倒不是不认同,而是觉得在添加 ...
手把手教你制作手机底部导航栏，领导看完都说好
手把手教你制作手机底部导航栏,领导看完都说好
利用CSS浮动制作一个简易导航栏
初学CSS,利用CSS浮动和无序列表制作一个简易导航栏: <!DOCTYPE html> <html lang="en"> <head>< ...
flutter制作具有自定义导航栏的渐进式 Web 应用程序
本文主要介绍具有自定义导航栏的渐进式 Web 应用程序 gitee github 哔哩哔哩第一节第二节第三节让我们准备我们的 - "Main.dart" 我们将整个页面分成 ...
css制作动态按钮导航栏,巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...
移动端也能兼容的web页面制作2：导航栏、背景图片设置
[ 导读 ] MDBootstrap 是基于 Vue.js 开发的一套前端框架,拥有美观大气的界面效果,友好的交互体验,更棒的是对于移动端也有很好的兼容性.先给大家看下演示 demo 的运行,后面将围 ...

个人主页制作更新——添加导航栏

个人主页制作更新——添加导航栏相关推荐

最新文章

热门文章