开发一个网站首页的功能

作者：: truesnow
发布于：: 7年前
收录于：: 个人网站开发
: 678 0

摘要：[TOC] 参考 http://diana-adrianne.com/ 主页开发中用到的功能点。 ## 1.1. 引入字体 - 下载字体 https://www.dafont.com/ 找到合适的字体并下载，将解压后的 `otf` 文件复制到 `resource/assets/fonts` 目...

[TOC]

参考 http://diana-adrianne.com/ 主页开发中用到的功能点。

## 1.1. 引入字体

- 下载字体

https://www.dafont.com/ 找到合适的字体并下载，将解压后的 `otf` 文件复制到 `resource/assets/fonts` 目录下。

- 引入字体

在 `resource/assets/sass/app/app.scss` 中引入：

```
@font-face {
    font-family: "LemonMilk";
    src: url(../fonts/LemonMilkbold.otf);
}

```

- 设置字体

在用到此字体的地方设置：

```
font-family: "LemonMilk";

```

- 效果

![](http://pb8quxvbv.bkt.clouddn.com/images/201807/w8Q9SKlirNPaTL5.png)

## 1.2. 设置背景图片

> 参考：[使用 CSS 改变背景样式](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/%E8%83%8C%E6%99%AF )

- 放置图片

目录 `resources/assets/images`

- 代码

从左上角开始重复铺满元素且跟随页面滚动（静止）：

```
background:#808080 url(../images/leatherbg.jpg) repeat left top scroll;

```

- 效果

![](http://pb8quxvbv.bkt.clouddn.com/images/201807/JaWDcbRkHc1qBuD.png)

## 1.3. 设置阴影

> 参考：[高级盒子样式](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/Advanced_box_effects )

用以区分网页结构。

- 代码

```
box-shadow: 0 20px 27px rgba(0, 0, 0, 0.38);

```

- 效果

![](http://pb8quxvbv.bkt.clouddn.com/images/201807/Pwnbrpgqnh8P4lU.png)

## 1.4. 无序列表居中

- 思路

1. 设置容器（ `ul` 父元素）：高度以及居中样式（`text-center`）；
2. 设置 `ul`：`overflow` 适应子元素大小，块显示为 `inline-block` 以便居中，同时设置 `padding` 为 0；
3. 设置 `li`：左浮动；
4. 设置 `a`：高度和行高与容器高度一致。
5. 其它样式根据需要调整。

- 代码

```
    .menu {
        height: 40px;
        background: #dadedf url(../images/blackwood.jpg) repeat center bottom scroll;
        box-shadow: 0 20px 27px rgba(0, 0, 0, 0.38);
        ul {
            display: inline-block;
            list-style: none;
            overflow: hidden;
            padding: 0;
            li {
                height: 40px;
                text-align: center;
                float: left;
                padding: 0 5px;
                a {
                    display: block;
                    line-height: 40px;
                    color: #ffffff;
                    padding: 0 5px;
                }
                a:hover {
                    background: #fff;
                    color: #000;
                    text-decoration: none;
                }
            }
        }
    }

```

- 效果

![](http://pb8quxvbv.bkt.clouddn.com/images/201807/jh2LbVYmEIg659z.png)

## 1.5. 鼠标滚动后导航栏保持固定

- 设置 `fixed` 类 css 样式

```
.fixed {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    margin: 0 auto;
    z-index: 10000;
}

```

- 将函数定义成 jQuery 扩展函数

```
$.extend({
    scrollFixed: function (ele) {
        var eleOffset = ele.offset().top;
        $(window).scroll(function(){
            var scrollPos = $(window).scrollTop();
            if(scrollPos >= eleOffset){
                ele.addClass("fixed");
            }else{
                ele.removeClass("fixed");
            }
        });
    }
});
$(document).ready(function() {
     $.scrollFixed($(".menu"));
});

```

- 效果

![](http://pb8quxvbv.bkt.clouddn.com/images/201807/kN9m12T6HMazwU7.png)

## 1.6. 自定义列表符号样式

设置 `li:before` 样式即可。

- 代码

```
    .about {
        background: #333333 url(../images/patt.jpg) repeat left top scroll;
        padding: 4.5rem 0;
        ul {
            display: inline-block;
            font-size: 1.8rem;
            list-style-type: none;
            padding: 0 2rem;
            overflow: hidden;
            li {
                position: relative;
            }
            li:before {
                content: "";
                display: block;
                width: 8px;
                height: 8px;
                margin: 10px 10px 0;
                border-radius: 50%;
                position: absolute;
                left: -30px;
                background: #515050;
                box-shadow: inset 2px 2px 4px -1px #b0aeae, 1px 3px 9px -2px black;
            }
        }
    }

```

- 效果

![](http://pb8quxvbv.bkt.clouddn.com/images/201807/fSR3rRTzIFbarsM.png)

## 1.7. 鼠标悬浮到图片上时显示遮罩

- 代码

```
        ul {
            display: inline-block;
            list-style-type: none;
            padding: 0;
            overflow: hidden;
            li {
                float: left;
                font-size: 1.5rem;
                color: #ffffff;
                margin: 5px 20px;
                position: relative;
                a {
                    .image img {
                        width: 210px;
                        height: 210px;
                    }
                    .detail {
                        position: absolute;
                        display: none;
                        top: 0;
                        left: 0;
                        width: 210px;
                        height: 210px;
                        z-index: 10;
                        hyphens: auto;
                    }
                    &:hover .detail {
                        display: inline-block;
                        background: rgba(0, 0, 0, 0.8);
                        color: #ffffff;
                        margin: auto 0;
                        padding-top: 35px;
                    }
                }
            }
        }

```

- 效果

![](http://pb8quxvbv.bkt.clouddn.com/images/201807/H3TdLghqTFMcAxW.png)

## 1.8. 标题下划线

设置标题元素的 `:after` 伪元素。

- 代码

```
    h2.title {
        text-transform: uppercase;
        font-size: 3rem;
        letter-spacing: 0.1rem;
        color: #333333;
        &:after {
            content: " ";
            display: block;
            height: 1px;
            width: 100px;
            opacity: .3;
            margin: 15px auto 0;
            border-bottom-style: solid;
            border-bottom-width: 1px;
        }
    }

```

- 效果

![](http://pb8quxvbv.bkt.clouddn.com/images/201807/2ZkSApUzQs4rBBD.png)

![](http://pb8quxvbv.bkt.clouddn.com/images/201807/gZ8bo90vufeQV3h.png)

文章目录

开发一个网站首页的功能

所有评论（0）