css练习 - 技术栈

html代码：

javascript 复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html 14</title>
        <link href="./css14.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <header>
            <span class="title">现代圣杯布局</span>
            <spann class="content">
                <span>响应式设计</span>
                <span class="circle"></span>
                <span>优雅体验</span>
                <span class="circle"></span>
                <span>现代风格</span>
            </span>
        </header>
        <main>
            <div class="main-side">
                <div class="main-side-common">
                    <div class="title">导航菜单</div>
                    <ul class="nav">
                        <li>
                            <img src="./feedback.png" />
                            首页
                        </li>
                        <li>
                            <img src="./feedback.png" />
                            个人资料
                        </li>
                        <li>
                            <img src="./feedback.png" />
                            消息
                        </li>
                        <li>
                            <img src="./feedback.png" />
                            设置
                        </li>
                        <li>
                            <img src="./feedback.png" />
                            通知
                        </li>
                        <li>
                            <img src="./feedback.png" />
                            社区
                        </li>
                    </ul>
                </div>
                <div class="main-side-common">
                    <div class="title">热门话题</div>
                    <ul class="topic">
                        <li>
                            <div>#前端开发</div>
                        </li>
                        <li>
                            <div>#前端开发</div>
                        </li>
                        <li>
                            <div>#前端开发</div>
                        </li>
                        <li>
                            <div>#前端开发</div>
                        </li>
                        <li>
                            <div>#前端开发</div>
                        </li>
                        <li>
                            <div>#前端开发</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="main-center">
                <div class="main-center-article">
                    123
                </div>
                <div class="main-center-article">
                    123
                </div>
                <div class="main-center-article">
                    123
                </div>
            </div>
            <div class="main-side">
                <div class="main-side-avator">
                    <img src="./img3.png" />
                    <div>张三</div>
                    <div class="job">前端开发工程师</div>
                </div>
                <div class="main-side-common">
                    <div class="title">订阅更新</div>
                    <div class="update">
                        <span>输入您的邮箱，获取最新文章和教程更新</span>
                        <input type="text" placeholder="Please Input" />
                        <button>订阅</button>
                    </div>
                </div>
            </div>
        </main>
        <footer></footer>
    </body>
</html>

css代码：

javascript 复制代码

:root {
    font-size: calc(0.5em + 0.5vw);
    box-sizing: border-box;
}
*,
*::before,
*::after {
    box-sizing: inherit;
}

header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    color: #ffffff;
    padding: 2em 0;
    background-color: #6021D3;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
}
header > .title {
    font-size: 1.5rem;
    font-weight: bold;
}
header > .content {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.8em;
}
header > .content > .circle {
    width: 0.3em;
    height: 0.3em;
    background-color: #ffffff;
    border-radius: 50%;
    margin: 0 0.5em;
}

main {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-gap: 1em;
    background-color: #FAFCFF;
}
main > .main-side {
    background-color: #ffffff;
    padding: 1em 0.5em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.main-side > div + div {
    margin-top: 1em;
}
main > .main-center {
    padding: 1em 0.5em;
}

.main-side-common {
    padding: 1em 0.5em;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 1em;
}
.main-side-common > .title {
    font-size: 1.1rem;
    font-weight: bold;
    padding-bottom: 0.5em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.main-side-common > .nav {
    list-style: none;
    margin: 0;
    padding: 1.5em 0;
}
.main-side-common > .nav > li {
    padding: 0 0.5em;
    display: flex;
    align-items: center;
}
.main-side-common > .nav > li + li {
    margin-top: 1.5em;
}
.main-side-common > .nav > li > img {
    height: 2em;
    margin-right: 0.5em;
}

.main-side-common > .topic {
    list-style: none;
    margin: 0;
    padding: 0.5em 0;
}
.main-side-common > .topic > li {
    display: flex;
}
.main-side-common > .topic > li + li {
    margin-top: 0.3em;
}
.main-side-common > .topic > li > div {
    font-size: 0.8rem;
    border-radius: 1em;
    padding: 0.4em;
    background-color: #E5E8EE;
    color: #686F80;
}

.main-center-article {
    padding: 1em 0.5em;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 1em;
}
.main-center-article + .main-center-article {
    margin-top: 1.5em;
}

.main-side-avator {
    padding: 2em;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 1em;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.main-side-avator > img {
    width: 4em;
    height: 4em;
    border-radius: 50%;
    border: 2px solid purple;
    margin-bottom: 1em;
}
.main-side-avator > .job {
    margin-top: 0.8em;
    color: #686F80;
}

.main-side-common > .update {
    margin-top: 0.5em;
    display: flex;
    flex-direction: column;
}
.main-side-common > .update > * + * {
    margin-top: 1em;
}
.main-side-common > .update > input {
    border: 1px solid #686F80;

    padding: 0 0.5em;
    border-radius: 0.5em;
    color: #686F80;
    height: 3em;
    line-height: 3em;
    font-size: 0.8rem;
}
.main-side-common > .update > input:focus {
    outline: none;
}
.main-side-common > .update > button {
    border: none;
    padding: 0.6em 0;
    border-radius: 1em;
    background-color: #5C26D6;
    color: #ffffff;
    cursor: pointer;
}

效果：