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

最新推荐文章于 2024-11-14 19:48:05 发布

原创最新推荐文章于 2024-11-14 19:48:05 发布 · 5.4k 阅读

30 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #html #html5

Javaweb实验专栏收录该内容

7 篇文章

订阅专栏

本文将介绍如何构思个人主页的版面布局，并利用DIV+CSS技术将其设计实现。通过这一方法，可以创建出具有专业外观的个人网站。

（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的方式进行页面布局。

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

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

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