（1）构思个人主页的版面布局；
（2）使用DIV+CSS技术设计出构思好的个人主页。
先来看看效果：
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><title>GAVT</title><link rel="stylesheet" href="index.css"></head><body><div id="body-wrap"><nav class="not_index_bg" id="nav" style="background-image:url(/api/api.php)"><div id="site-title"><span class="blogtitle"></span><script src="/npm/typed.js@2.0.11"></script><script>var typed = new Typed(".blogtitle", {strings: ['求知若饥，虚心若愚', 'Stay Hungry Stay Foolish','GAVT'],startDelay:200,typeSpeed: 100,loop: true,backSpeed: 50,showCursor: true});</script></div></nav><main id="content-outer"><div class="layout_page" id="content-inner"><div class="aside_content" id="aside_content"><div class="card-widget card-info"><div class="card-content"><div class="card-info-avatar is-center"><div class="author-info__name">GAVT</div><div class="author-info__description">00后学生，后端开发者，略懂前端，缺乏社会的毒打</div></div></div></div><div class="card-widget card-info"><div class="card-content"><div class="card-info-avatar is-center"><div class="author-mainpage">个人主页</div><a href="/GAVTx" target="_blank">CSDN</a><br><a href="/Jasoncottom" target="_blank">Github</a></div></div></div></div><article id="page"><div class="article-container"><h1>技能</h1><div class="skillbox"><div class="skillbar"><div class="skillbar-title"style="background: linear-gradient(to right, #FF0066 0%, #FF00CC 100%); width: 45%"><span>Java</span></div><div class="skill-bar-percent">45%</div></div><div class="skillbar"><div class="skillbar-title"style="background: linear-gradient(to right, #9900FF 0%, #CC66FF 100%); width: 80%"><span>Python</span></div><div class="skill-bar-percent">80%</div></div><div class="skillbar"><div class="skillbar-title"style="background: linear-gradient(to right, #2196F3 0%, #42A5F5 100%); width: 40%"><span>Spring</span></div><div class="skill-bar-percent">40%</div></div><div class="skillbar"><div class="skillbar-title"style="background: linear-gradient(to right, #00BCD4 0%, #80DEEA 100%); width: 70%"><span>Golang</span></div><div class="skill-bar-percent">70%</div></div><div class="skillbar"><div class="skillbar-title"style="background: linear-gradient(to right, #00BCD4 0%, #f54009 100%); width: 40%"><span>SpringBoot</span></div><div class="skill-bar-percent">40%</div></div><div class="skillbar"><div class="skillbar-title"style="background: linear-gradient(to right, #4CAF50 0%, #81C784 100%); width: 70%"><span>Mysql</span></div><div class="skill-bar-percent">70%</div></div></div></div></article></div></main></div></body></html>
* {box-sizing: border-box;}html {height: 100%;}body {position: relative;min-height: 100%;background: #eee;color: #4c4948;font-size: 14px;font-family: Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "MicrMicrosoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif;line-height: 2;}body {margin: 0;}h1 {position: relative;margin: 1rem 0 .7rem;color: #344c67;font-weight: 700}#nav.not_index_bg {height: 5rem;}#nav {position: relative;margin-top: -2rem;width: 100%;background-color: #49b1f5;background-attachment: local;background-position: center;background-size: cover;}#page_site-info {position: absolute;top: 3rem;width: 100%;}#site-title {color: #eee;text-align: center;text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, .15);line-height: 1.5;font-weight: 700;font-size: 1.3rem;animation: titlescale 1s;}main {display: block;}#content-outer {-webkit-box-flex: 1;-moz-box-flex: 1;-o-box-flex: 1;box-flex: 1;-webkit-flex: 1 auto;-ms-flex: 1 auto;flex: 1 auto;}h1 {font-size: 2em;margin: .67em 0;}.layout_page {display: flex;-webkit-box-align: start;align-items: flex-start;margin: 0 auto;padding: 0 5px;max-width: 1400px;}#page{margin-top: 10px;width: 75%;border-radius: 3px;background: #fff;box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06);transition: all .3s;}#page{padding: 20px 44px 44px;}#aside_content {width: 25%;}#aside_content .card-widget {overflow: hidden;margin: 10px 0;border-radius: 3px;background: #fff;-webkit-box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06);box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06);}#aside_content .card-content {padding: 1rem 1.2rem;}.skillbar {position: relative;display: block;max-width: 360px;margin: 15px 10px;background: #eee;height: 30px;border-radius: 35px;-moz-border-radius: 35px;-webkit-border-radius: 35px;-webkit-transition: 0.4s linear;-moz-transition: 0.4s linear;-o-transition: 0.4s linear;transition: 0.4s linear;-webkit-transition-property: width, background-color;-moz-transition-property: width, background-color;-o-transition-property: width, background-color;transition-property: width, background-color;}.skillbar .skillbar-title {position: absolute;top: 0;left: 0;width: 110px;font-size: 0.9rem;color: #ffffff;border-radius: 35px;-webkit-border-radius: 35px;-moz-border-radius: 35px;}.skillbar .skillbar-title span {display: block;background: rgba(0, 0, 0, 0.15);padding: 0 20px;height: 30px;line-height: 30px;border-radius: 35px;-webkit-border-radius: 35px;-moz-border-radius: 35px;}.skillbar .skill-bar-percent {position: absolute;right: 10px;top: 0;font-size: 12px;height: 30px;line-height: 30px;color: #ffffff;color: rgba(0, 0, 0, 0.5);}.is-center {text-align: center;}#aside_content .card-info .author-info__name {font-weight: 500;font-size: 1.1rem;}#aside_content .card-info .author-mainpage {font-weight: 500;font-size: 1.1rem;}#aside_content .card-widget {margin-right: 15px;}
