[分享]css个人简历用代码怎么做

发布于 2024-11-11 19:20:52

在现代社会，开发者拥有个人简历的需求越来越多。而为了让自己的个人简历更具有可读性和美感，CSS成为了必不可少的一环。接下来，我们将向大家介绍如何用代码实现一个简单的个人简历。个人简历 / 全局样式...

在现代社会，开发者拥有个人简历的需求越来越多。而为了让自己的个人简历更具有可读性和美感，CSS成为了必不可少的一环。接下来，我们将向大家介绍如何用代码实现一个简单的个人简历。

 <!DOCTYPE html>
    <html>
    <head>
        <title>个人简历</title>
        <style>
            /* 全局样式 */
            body {
                font-family: 'Helvetica', sans-serif;
                color: #333;
                margin: 0;
                padding: 0;
            }
            h1 {
                margin-top: 0;
                text-align: center;
            }
            
            /* 头部样式 */
            header {
                background-color: #3F51B5;
                color: #FFF;
                padding: 1em;
                text-align: center;
            }
            header h2 {
                margin-top: 0;
            }
            
            /* 主体样式 */
            .box {
                display: flex;
                margin: 2em 5em;
            }
            .box .left {
                width: 40%;
            }
            .box .right {
                width: 60%;
                padding-left: 2em;
            }
            .box h3 {
                margin-top: 0;
            }
            .box p {
                margin-bottom: 1em;
            }
            .box ul {
                list-style: none;
                margin: 0;
                padding: 0;
            }
            .box ul li {
                margin-bottom: .5em;
            }
            .box ul li:before {
                content: '? ';
                color: #3F51B5;
            }
        </style>
    </head>
    <body>
        <header>
            <h2>个人简历</h2>
            <p>这是我的个人简历</p>
        </header>
        <div class="box">
            <div class="left">
                <h3>基本信息</h3>
                <p>姓名：张三</p>
                <p>性别：男</p>
                <p>出生年月：1990年1月</p>
            </div>
            <div class="right">
                <h3>技能评价</h3>
                <p>擅长前端语言：HTML、CSS、JS</p>
                <p>熟练使用前端框架：Vue、React</p>
                <h3>教育背景</h3>
                <ul>
                    <li>本科：XX大学</li>
                    <li>研究生：XX大学</li>
                </ul>
            </div>
        </div>
    </body>
</html>

以上就是一个简单的用代码实现的个人简历样式。通过CSS的设置，我们可以很好地将个人信息展示出来，并且让它看起来更加美观。相信这个例子可以帮助大家更好地理解如何利用CSS实现个人简历。

css 教程