用html+css设计个人博客网页，纯静态页面
前几周我们让做了一个个人博客页面，怎么说，刚接触前端不久，第一次做页面刚开始选择的都是大红大紫的颜色，导致整合页面很low，后来看了些抽象绘画，决定用上面三个黑色，粉色，灰色（此处建议整个页面不要太花哨，否则真的很low）
此页面已经上传至服务器，可通过点击查看http://flameman.web3v.work/
先上几张效果图看看哈！
1、网站首页
2、关于音乐
3、技术文章
4、技术文章
首先整个页面背景我选择背景图对页面进行铺满，通过透明度来实现内容清晰度问题。导航栏放在偏左位置，分为五个部分，网站首页、关于音乐、技术文章、心情日记、给我留言。各部分页面之间可以相互跳转，以灰粉色调为主。
公共部分代码
* {margin: 0px;padding: 0px;}body {background-image: url(./img/181.jpg);background-repeat: no-repeat;background-size: 100% 100%;}.box {width: 1400px;height: 1840px;margin: auto;}.top {width: 1400px;height: 600px;background-color: white;opacity: 0.9;margin-bottom: 10px;}.top1 {width: 100%;height: 500px;background-image: url(./img/微信图片_1017172409.jpg);background-size: 1400px 600px;background-repeat: no-repeat;}.top2 {width: 1400px;height: 100px;background-color: dimgray;}.top2>ul li {float: left;list-style: none;font-size: 30px;margin-left: 50px;}.top2>ul a:link {color: #F0A8C8;}.top2>ul a:visited {color: #F0A8C8;}.top2>ul a:hover {color: white;font-size: 32px;}.top2>ul {margin-left: 400px;line-height: 100px;}.top2>ul a {text-decoration: none;}.midleft {width: 500px;height: 1100px;float: left;opacity: 0.8;margin-right: 5px;}.midleft1 {width: 500px;height: 100px;background-color: dimgrey;border-top-right-radius: 20px;}.midleft1>p {color: #F0A8C8;font-size: 35px;line-height: 100px;margin-left: 15px;font-family: Georgia, 'Times New Roman', Times, serif;font-weight: bold;}.midleft2 {width: 500px;height: 970px;background-color: white;padding-top: 30px;}.midleft2>ul {list-style: none;font-size: 27px;font-family: 'Times New Roman', Times, serif;font-weight: bold;margin-left: 25px;}.midleft2>ul li {margin-bottom: 50px;}.midleft2>p {font-family: 'Times New Roman', Times, serif;font-size: 30px;display: block;line-height: 50px;margin-left: 10px;}.midleft2>ul img {width: 35px;height: 35px;vertical-align: middle;}.foot {clear: both;width: 1400px;height: 120px;opacity: 0.8;background-color:white;border-top: 3px solid black;}.foot>p{margin: auto;text-align: center;font-size: 22px;color: black; line-height: 120px;}
<div class="box"><div class="top"><div class="top1"></div><div class="top2"><ul><li> <a href="./index.html">网站首页</a></li><li> <a href="./index1.html">关于音乐</a></li><li> <a href="./index2.html">技术文章</a></li><li> <a href="./index3.html">心情日记</a></li><li> <a href="./index4.html">给我留言</a></li></ul></div></div><div class="midleft"><div class="midleft1"><p>关于我</p></div><div class="midleft2"><ul><li><img src="./img/100.png" alt="小熊">姓名：赵文瑜</li><li><img src="./img/100.png" alt="小熊">性别：女</li><li><img src="./img/100.png" alt="小熊">学校：西安培华学院</li><li><img src="./img/100.png" alt="小熊">专业：计算机科学与技术</li><li><img src="./img/100.png" alt="小熊">兴趣爱好：听音乐 打羽毛球 狼人杀 手工</li><li><img src="./img/100.png" alt="小熊">性格：开朗 友好</li><li><img src="./img/100.png" alt="小熊">星座：双鱼座</li></ul><p> Life is full of toil,but it still needs to live poetically,because life is far more wonderful thanpoetry.Not every moon can wait for astronauts,but I firmly belive it can wait for you.</p></div></div><div class="foot"><p>@版权所有 Powerd by-zhaowenyu</p></div></div>
网站首页代码
* {margin: 0px;padding: 0px;}body {background-image: url(./img/181.jpg);background-repeat: no-repeat;background-size: 100% 100%;}.box {width: 1400px;height: 1840px;margin: auto;}.top {width: 1400px;height: 600px;background-color: white;opacity: 0.9;margin-bottom: 10px;}.top1 {width: 100%;height: 500px;background-image: url(./img/微信图片_1017172409.jpg);background-size: 1400px 600px;background-repeat: no-repeat;}.top2 {width: 1400px;height: 100px;background-color: dimgray;}.top2>ul li {float: left;list-style: none;font-size: 30px;margin-left: 50px;}.top2>ul a:link {color: #F0A8C8;}.top2>ul a:visited {color: #F0A8C8;}.top2>ul a:hover {color: white;font-size: 32px;}.top2>ul {margin-left: 400px;line-height: 100px;}.top2>ul a {text-decoration: none;}.midleft {width: 500px;height: 1100px;float: left;opacity: 0.8;margin-right: 5px;}.midleft1 {width: 500px;height: 100px;background-color: dimgrey;border-top-right-radius: 20px;}.midleft1>p {color: #F0A8C8;font-size: 35px;line-height: 100px;margin-left: 15px;font-family: Georgia, 'Times New Roman', Times, serif;font-weight: bold;}.midleft2 {width: 500px;height: 970px;background-color: white;padding-top: 30px;}.midleft2>ul {list-style: none;font-size: 27px;font-family: 'Times New Roman', Times, serif;font-weight: bold;margin-left: 25px;}.midleft2>ul li {margin-bottom: 50px;}.midleft2>p {font-family: 'Times New Roman', Times, serif;font-size: 30px;display: block;line-height: 50px;margin-left: 10px;}.midleft2>ul img {width: 35px;height: 35px;vertical-align: middle;}
<div class="midright"><div class="midright1"><span class="midright1-1">专业特色</span><span class="midright1-2">/About me</span></div><div class="midright2"><p>培养具有良好的科学素养，系统地、较好地掌握计算机科学与技术包括计算机硬件、软件与应用的基本理论、基本知识和基本技能与方法，能在科研部门、教育单位、企业、事业、技术和行政管理部门等单位从事计算机教学、科学研究和应用的计算机科学与技术学科的高级专门科学技术人才:要求学生堂握计算机科学与技术方面的基本理论和基本知识，接受从事研究与应用计算机的基本训练，具有研究和开发计算机系统的基本能力。计算机专业是最近几年热门专业，从985高校到专科职业学院，各个层次学校均有开设，人才培养呈金字塔型，从高到低为管理类;技术研发到市场销售及软硬件维护，薪资待遇相差巨大，报考的学生家长要正确评估学生的分数水平与天赋;爱好等等因素，提醒家长考生慎重盲目跟风。相近专业软件工程、网络工程、信息安全、物联网工程、数字媒体等专业。</p><h2>从业方向</h2><p>软件工程师、公务员、事业单位人员、IT项目经理/主管IT 技术支持/维护工程师、银行会计/柜员软件测试、大学教师、网页(WEB)前端开发工程师。管理类:如项目经理、软件架构师、硬件架构师等;研发类:软件工程师、硬件工程师、系统开发员等;测试类:软件测试工程师、硬件测试工程师、系统测试工程。</p><h2>考证</h2><p>全国计算机等级证、程序员-初级证书、软件设计师-中级证书、系统分析师-高级证书、初级CCNA、中级CCNP、高级CCIE等证书的考取，培养科学型和工程型相结合的计算机专业高水平工程技术人才。</p></div></div>
关于音乐代码
.midright {width: 895px;height: 1100px;float: left;opacity: 0.8;background-color:white;border-top-left-radius: 20px;}.midright1{width: 895px;height: 600px;background-color: white;border-top-left-radius: 20px;}.midright1>img{width: 550px;height: 420px;margin-left: 120px;padding-top: 40px;}.midright1>p{font-size: 36px;font-family: STXingkai;margin-left: 55px;padding-top: 10px;}.midright2{width: 895px;height:500px;}.midright2>ul{font-size: 28px;color: black;list-style: none;font-family: 'Times New Roman', Times, serif;font-weight: bold;}.midright2>ul li{margin-bottom: 18px;text-align: center;}
<div class="midright"><div class="midright1"><img src="./img/70.jpg" alt="music"><p>—— we are queens in the red castle</p></div><div class="midright2"><ul><li>理查 理查</li><li>理查 理查 后来每个人都说</li><li>你啊 你啊 不像是会做坏事的那种人啊 习惯 习惯</li><li>世界的几率虽然一半一半 但避免受伤总是不太简单 起飞 起飞~ ~</li><li>云层和森林都在后退 后退 或许会降落在某个海面 去看夕阳上岸</li><li>理查 理查付过代价的人才不虚此行啊</li><li>你啊 你啊——就是个螺丝松掉的那种人 一天一天~</li></ul></div></div>
技术文章代码
.midright {width: 895px;height: 1100px;float: left;opacity: 0.8;border-top-left-radius: 20px;}.midright1{width: 895px;height: 72px;border-bottom: 3px solid dimgray; border-top-left-radius: 20px;background-color: white;} .midright1-1{color:#F0A8C8;font-size: 25px;margin-left: 18px;}.midright1 .midright1-2{font-size: 25px;color: dimgray;line-height: 80px;margin-left: 35px;}.midright1-3{font-size: 25px;color: dimgray;line-height: 80px;margin-left: 48px;}.midright2{height: 203px;width: 895px;background-color:white;border-bottom: 2px solid dimgray; }.midright2>h1{font-size: 30px;margin-left: 25px;margin-bottom: 8px;padding-top:15px;}.midright2>p{font-size: 21px;color: dimgray;margin-left: 25px;line-height: 39px;}.midright2 span{font-size: 21px;color: dimgray;margin: 20px;line-height: 56px;display: inline;margin-left: 25px;}
<div class="midright"><div class="midright1"><span class="midright1-2"> 排序：</span><span class="midright1-1">时间（默认）</span><span class="midright1-2">访问量</span><span class="midright1-3">评论数</span></div><div class="midright2"><h1>计算机视觉在设计中的应用</h1><p> 计算机视觉最基本的特点就是提高生产的灵活性和自动化程度。在设计中，可将计算机视觉应用在一些不适合人工作业的危险工作环境中或者人工视觉难以满足要求的场合中与技术结合...</p><span>-10-20 11:05</span><span> 阅读数：829 </span><span> 评论数：299</span></div><div class="midright2"><h1>自然语言处理在设计中应用</h1><p>传统的搜索引擎技术已经不能满足设计师越来越高的要求，而作为自然语言处理应用之一的，成为解决这一问题的有效手段。在已有的语料库或者知识库中进行匹配将获取...</p><span>-9-20 11:05</span><span> 阅读数：801 </span><span> 评论数：60</span></div><div class="midright2"><h1>人工智能技术在设计中的应用——多功能机器人技术</h1><p>与传统的工业设计相比，在工业设计中应用机器人技术，能够有效的降低设计产品的故障率，提高设计产品的质量。——先进的海洋机器人的引进，可以使成为可能，更好的构建产品...</p><span>-9-20 10:05</span><span> 阅读数：500 </span><span> 评论数：601</span></div><div class="midright2"><h1>生物识别技术在设计中的应用</h1><p>生物识别技术的出现提升了人们对产品的功能的要求，方便快捷的体验是设计的重要前提，利用生物识别技术可以建立起人机之间的感性认知与交互功能，用户在操作时只需要...</p><span>-9-25 09:05</span><span> 阅读数：702 </span><span> 评论数：666</span></div><div class="midright2"><h1>元宇宙——扩展现实技术</h1><p>艺术设计的发展历程，先进的科技一直都是推动设计发展的重要元素。科技的不断进步推动时代的发展，在设计中建立机器学习系统完成比较繁琐的数据搜索，提供即时动态...</p><span>-6-25 08:50</span><span> 阅读数：802 </span><span> 评论数：190</span></div></div>
心情日记代码
.midright {width: 895px;height: 1100px;float: left;opacity: 0.8;background-color: white;border-top-left-radius: 20px;}.midright1{width: 895px;height: 96px;border-bottom: 3px solid dimgray; }.midright1 span{font-size: 35px;color: black;font-family:LiSu;line-height: 110px;margin-left: 20px;}.midright2>p{font-size: 25px;color: #F0A8C8;padding-top: 10px;margin-left: 20px;font-weight: bold;}.midright2>img{width: 750px;height: 420px;}.mid2-1{color: black;font-size: 50px;font-family: STXihei;margin-left: 30px;border-bottom: 3px solid black; }.mid2-2{color: black;font-size: 20px;margin-left: 10px;}.mid2-3{color:dimgrey;font-size: 52px;font-family: STKaiti;border-bottom: 3px;margin-left: 600px;}.midright2>ul{font-size: 25px;color: black;list-style: none;margin: auto;padding-top: 15px;}.midright2>ul li{margin-left: 50px;margin-bottom: 15px;}.midright3>img{width: 700px;height: 320px;margin-left: 30px;}
<div class="midright"><div class="midright1"><span>Engrave Your</span> <strong><span>Memoies</span></strong></div><div class="midright2"><p>N271.心情日记|未来是随机的</p><span class="mid2-1">05</span><span class="mid2-2">周二</span><span class="mid2-3">sunny</span><ul><li>记录是重要的，以声音 以文字 或者以照片</li><li>在一个割裂的时空里</li><li>我和不同阶段的我反复见面</li><li>我遇见我，但我不认识</li><li>人有一点比较可悲的是</li><li>永远只会在反复咀嚼中领悟，永远只会拥有当下</li><li>的体会和过时的感受</li><li>我试图过在一些阶段性消亡的事物里找寻点永恒</li><li>我们都没有永恒的模样</li><li>人生本就是由无数个阶段组成的</li><li>所以我站在最后一棵枯木下梦烧起残叶，那是我的昨天</li></ul></div><div class="midright3"><img src="./img/微信图片_1019170234.jpg" alt="u"></div></div>
好啦就这么多啦！上面的公共部分代码是每个页面都要有的，再加上其本来页面代码即可，以上是全代码，图片可以私信我拿~都是很简单的页面纯用css和html，但是做一个简单的个人页面应该够了吧哈哈哈哈！各位猿友们可以根据自己喜好改变，可复制代码或自行下载哈~~~~~~~~~
最后祝各位都不秃头！！！！！！！！
