HTML5 + CSS3 实现个人主页

HTML5 + CSS3 实现个人主页

预览图：

PC 端

pc.png

Mobile 端

mobile.png

预览地址：

预览

https://rundongwang.github.io/home/main.html

源码

https://github.com/rundongwang/home

技术栈：

HTML5

结构标签、网页布局

<header></header>

<main class="clearfix">
    <section class="main-info"></section>
    <nav></nav>
    <section class="download"></section>
</main>

<footer class="clearfix">
    <section class="media"></section>
    <section class="copyright"></section>
</footer>

CSS3

选择器、边框圆角、伪元素

header > a > img {
    position: absolute;
    top: 139px;
    left: 50%;
    width: 160px;
    height: 160px;
    margin-left: -80px;
    border-radius: 80px;
}

main > nav > ul > li:nth-child(1) {
    margin-left: 0;
}

main > nav > ul > li > a::before {
    font: 16px iconfont;
}

main > nav > ul > li:nth-child(1) > a::before {
    color: #ce0000;
    content: '\e6ab';
}

main > nav > ul > li:nth-child(2) > a::before {
    color: #00caca;
    content: '\e682';
}

main > nav > ul > li:nth-child(3) > a::before {
    color: #0072e3;
    content: '\e63d';
}

main > nav > ul > li:nth-child(4) > a::before {
    color: #9f35ff;
    content: '\e617';
}

移动端

响应式布局、媒体查询、flex 布局

/* Media query */
@media screen and (max-width: 1160px) {
    main > nav > ul > li::before {
        content: '';
        display: table;
    }
    main > nav > ul > li > a {
        display: block;
        margin-top: 5px;
    }
}

.download {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 40px;
    margin: 40px auto 0;
    background-color: #32333b;
    border-radius: 20px;
}

UI 设计

扁平化设计风格、iconfont

iconfont-1.png iconfont-2.png

css

/* iconfont */

@font-face {
    font-family: 'iconfont';  /* project id 1041105 */
    src: url('https://at.alicdn.com/t/font_1041105_8m57sg2y23s.eot');
    src: url('https://at.alicdn.com/t/font_1041105_8m57sg2y23s.eot?#iefix') format('embedded-opentype'),
    url('https://at.alicdn.com/t/font_1041105_8m57sg2y23s.woff2') format('woff2'),
    url('https://at.alicdn.com/t/font_1041105_8m57sg2y23s.woff') format('woff'),
    url('https://at.alicdn.com/t/font_1041105_8m57sg2y23s.ttf') format('truetype'),
    url('https://at.alicdn.com/t/font_1041105_8m57sg2y23s.svg#iconfont') format('svg');
}

/* css 方式引入 */

main > nav > ul > li > a::before {
    font: 16px iconfont;
}

main > nav > ul > li:nth-child(1) > a::before {
    color: #ce0000;
    content: '\e6ab';
}

main > nav > ul > li:nth-child(2) > a::before {
    color: #00caca;
    content: '\e682';
}

main > nav > ul > li:nth-child(3) > a::before {
    color: #0072e3;
    content: '\e63d';
}

main > nav > ul > li:nth-child(4) > a::before {
    color: #9f35ff;
    content: '\e617';
}

/* html 方式引入 */

.media > ul > li > a {
    font-family: iconfont;
    font-size: 30px;
}

.github {
    color: #191717;
}

.phone {
    color: #ff7523;
}

.wechat {
    color: #00c800;
}

.email {
    color: #00a9fa;
}

html

<section class="media">
    <ul>
        <li>
            <a class="github" href="https://github.com/rundongwang" target="_blank">&#xe7ab;</a>
        </li>
        <li>
            <a class="phone" href="tel:13021208321" title="call me: 13021208321">&#xe606;</a>
        </li>
        <li>
            <a class="wechat" href="#" title="扫码加我微信">&#xe63b;</a>
        </li>
        <li>
            <a class="email" href="mailto:13021208321@163.com" title="send email to me" target="_blank">&#xe70f;</a>
        </li>
    </ul>
</section>

代码风格

简洁、优雅、规范

HTML 属性顺序

• class
• id name
• data-*
• src for type href value
• title alt
• role aria-*

CSS 属性顺序

• Positioning : position top right bottom left z-index display float
• Box-model : width height padding margin overflow clear
• Typography : font-family font-size font-style font-weight line-height letter-spacing word-spacing color text-align text-decoration text-indent text-overflow text-shadow text-transform white-space vertical-align list-style
• Visual : background border border-radius
• Misc : content opacity visibility size zoom transform box-shadow box-sizing animation transition resize
• 更多

font 属性简写

顺序：font-style font-variant font-weight font-size line-height font-family

• 简写时，font-size 和 line-height 只能通过斜杠 / 组成一个值，不能分开写。
• 顺序不能改变。这种简写方法只有在同时指定 font-size 和 font-family 属性时才起作用。

更多：

持续更新中......