（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(https://api.ixiaowai.cn/api/api.php)"><div id="site-title"><span class="blogtitle"></span><script src="https://cdn.jsdelivr.net/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="https://blog.csdn.net/GAVTx" target="_blank">CSDN</a><br><a href="https://github.com/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;}

使用DIV+CSS布局设计个人主页设计个人主页，使用DIV+CSS的方式进行页面布局。相关推荐

[css] 当页面采用rem布局时，如何解决用户设置字体大小造成的页面布局错位？
[css] 当页面采用rem布局时,如何解决用户设置字体大小造成的页面布局错位? 禁止用户缩放页面个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主 ...
cad页面布局快捷键_CAD页面设置管理器快捷键命令（如何设置页面布局）
页面设置,不仅能够设置打印设备以及其他影响最终输出的外观和格式,还能把设置应用在布局里.那大家知道设置页面布局的方法吗? 接下来,就让小编给大家介绍一下设置页面布局的方法步骤首先,启动设置页面布局的 ...
HTML页面布局与文字设计
原文:HTML页面布局与文字设计简单规划HTML页面布局与文字设计即时通讯标题一般文章都有标题.副标题.章和节等结构,HTML中也提供了相应的标题标签,其中n为标题的等HTML总共提供六个等级的 ...
前端必经之路：CSS页面布局(深入理解浮动布局、定位布局、圣杯布局和双飞翼布局等重要布局方案)
建筑师在对一栋建筑物进行施工之前,首先会根据建筑图纸上的平面图.立体图.剖面图和构造详图等对建筑物进行整体布局后再从局部施工(当然不排除有先装修完厕所再砌卧室围墙的奇葩).在一个网页页面的搭建过程中, ...
页面布局的方式——前端
页面布局的方式--前端文章目录页面布局的方式--前端页面布局的方式双飞翼布局多栏布局弹性布局(Flexbox) 瀑布流布局流式布局(Fluid) 响应式布局注页面布局的方式页面布局 ...
动画：Flex布局 | 别再用传统方式进行网页布局了（上）
写在前边网页布局,是前端入门的时候必学.必须熟练的一门技术,学到什么程度算是入门了呢?随便给你一个网站,你就可能快速的分析出网页的结构,然后搭建出模型,这是前端网页布局入门的最基本要求. 作为一个前 ...
html页面布局之flex弹性盒子
一.背景介绍 Flexbox 布局(FLexible Box)意在提供一个更为有效的方式来进行布局.对齐和分配一个容器内元素之间的空间,即使他们的大小是未知的或者动态的. flex布局的主要思想是,让 ...
html5 移动页面,html5入门到精通，移动设备的html5页面布局
移动设备的html5页面布局我们结合移动设备(手机和平板电脑)的特性,介绍HTML5中新增的语义化标签元素,以及在移动Web浏览器下Web页面布局的知识及例子. HTML5标准添加的新元素当中,用于 ...
flex html 页面移动,HTML页面布局之flex弹性盒子
这里是修真院前端小课堂,本篇分析的主题是 [HTML页面布局之flex弹性盒子] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...

使用DIV+CSS布局设计个人主页设计个人主页，使用DIV+CSS的方式进行页面布局。

（1）构思个人主页的版面布局；

（2）使用DIV+CSS技术设计出构思好的个人主页。

使用DIV+CSS布局设计个人主页设计个人主页，使用DIV+CSS的方式进行页面布局。相关推荐

最新文章

热门文章

使用DIV+CSS布局设计个人主页 设计个人主页，使用DIV+CSS的方式进行页面布局。

（1）构思个人主页的版面布局；

（2）使用DIV+CSS技术设计出构思好的个人主页。

使用DIV+CSS布局设计个人主页 设计个人主页，使用DIV+CSS的方式进行页面布局。相关推荐

最新文章

热门文章

使用DIV+CSS布局设计个人主页设计个人主页，使用DIV+CSS的方式进行页面布局。

使用DIV+CSS布局设计个人主页设计个人主页，使用DIV+CSS的方式进行页面布局。相关推荐