综合案例1-个人主页

演讲者：whqet

内容提纲

  1. 案例分析
  2. 网页布局流程
  3. 关键步骤讲解
  4. 核心知识点总结

案例分析

极简网页效果

案例效果 完成版

综合所学知识，系统应用到本项目中去

网页布局流程

  1. 实现内容架构-HTML
  2. 选择需要设置样式的部分-CSS选择器
  3. 设置样式-CSS

关键步骤讲解-素材的准备与下载

  • 选择高清图片、无版权图片作为背景图
  • 知名前端导航网站 wwwhere.io，里面有高清图片分享
  • SVG(可缩放矢量图形)，比较流行的网络矢量图像格式，主要用于大小变化的网络图案中，或者比较简单的形状动画中。

关键步骤讲解-html架构准备

<!--整体架构，因为要整幅居中，所以需要本容器-->
<div class="wrapper">
    <!--页面头部，包括logo、菜单、介绍三个部分-->
    <header></header>
    <!--页面中间，包括兴趣、项目、联系三个部分-->
    <main></main>
    <!--页面脚部，包括版权和向上跳转部分-->
    <footer></footer>
</div>
  • 因为要整幅居中，所以需要div.wrapper
  • emmet简写 .wrapper>header+main+footer

关键步骤讲解-header部分html实现

  • 图片文字仅供参考，请大家体现出自己的特色。
  • 注意浮动的清除
<!--整体架构，因为要整幅居中，所以需要本容器-->
<div class="wrapper">
    <!--页面头部，包括logo、菜单、介绍三个部分-->
    <header>
            <a href="index.html" class="logo">
                <h1>个人主页</h1>
                <img src="img/steemit.svg" alt="" />
            </a>
            <div class="mainNav">
                <ul class="clearfix">
                    <li><a href="#a">关于</a></li>
                    <li><a href="#b">工作</a></li>
                    <li><a href="#c">联系</a></li>
                </ul>
            </div>
            <a id="a"></a>
            <h2>大家好，我是王海庆。</h2>
            <p>我是一个前端迷，喜欢探索，喜欢研究，对一切未知而又充满质感的事物充满好奇心，永远保持一颗童心。</p>
            <p>浙江邮电职业技术学院青年教师一枚，执着于前端技术。html5、css3、javascript、jquery、vue.js、angularjs、babel、sass、markdown、git等等都是我的最爱！！</p>
            <p>来吧，让我们一起来畅游前端的世界。<a href="http://codepen.io/ericthayer/pen/zNxMer">模仿实现</a>，但适度创意！！</p>
        </header>
    <!--页面中间，包括兴趣、项目、联系三个部分-->
    <main></main>
    <!--页面脚部，包括版权和向上跳转部分-->
    <footer></footer>
</div>

关键步骤讲解-整体设置

/*
 公共设置
 * */
*{
    box-sizing: border-box;
}
.clearfix::after{
    content: "";
    display: table;
    clear: both;
}
ul{
    padding: 0;
    list-style-type: none;
}
a{
    text-decoration: none;
    color: #fff;
}

/*
整体设置
 * */
body{
    background: url(../img/bg.jpg) center top fixed;
    min-height: 1200px;
    color: #fff;
}
.wrapper{
    max-width: 1200px;
    padding: 20px;
    margin: auto;
}

关键步骤讲解-logo设置

  • 一个网页最好出现一个h1，便于搜索引擎收录。
  • 图片logo的时候可以不在网页中显示。
/*
 头部设置
 * */
header{
    position: relative;
    margin: 30px 0px;
}
.logo h1{
    display: none;
}
.logo img{
    width: 80px;
    height: auto;
}

关键步骤讲解-菜单设置

  • 因为我们没有在logo和菜单外放容器，所以这里对菜单设置绝对定位
  • 水平菜单需要设置浮动和清除浮动
  • 注意动画前后位置的设置
.mainNav{
    position: absolute;
    top: 0;
    right: 0;
}
.mainNav ul li{
    float: left;
    margin: 20px 30px;
}
.mainNav ul li a{
    text-decoration: none;
    color: #fff;
    padding: 20px;
    border: 1px solid transparent;
    transition: color .5s,border .5s;
    //这里注意，最好不用设置成 all .5s
}
.mainNav ul li a:hover{
    color: #000;
    border: 1px solid #fff;
}

关键步骤讲解-文字和链接设置

header h2{
    margin: 50px 0;
    font-size: 30px;
}
p a{
    border-bottom:1px dashed #fff;
    padding-bottom: 4px;
    transition: border .5s;
}
p a:hover{
    border-bottom:1px solid #fff;
}

关键步骤讲解-我的兴趣HTML

<main>
    <section class="favContainer">
        <h2>我的兴趣</h2>
        <ul class="fav clearfix">
            <li><a href="#" title="响应式布局">RWD</a></li>
            <li><a href="#" title="流体布局">Flexbox</a></li>
            <li><a href="#" title="CSS的预处理器">Sass</a></li>
            <li><a href="#" title="CSS的预处理">Less</a></li>
            <li><a href="#" title="CSS前缀处理">Autoprefix</a></li>
            <li><a href="#" title="CSS新式布局方式">Grid</a></li>
            <li><a href="#" title="不错的鼠标悬停效果集">iHover</a></li>
            <li><a href="#" title="不错的动画库">Animate.css</a></li>
        </ul>
    </section>
</main>

关键步骤讲解-我的兴趣CSS

/*
 * 中间部分设置
 * */
main section{
    margin: 50px 0px;
}
main section h2{
    margin-bottom: 0px;
}
.fav li{
    float: left;
    width: 160px;
    height: 48px;
    text-align: center;
    line-height: 48px;
    background-color:rgba(100,100,200,.6);
    margin: 10px 20px 0px 0px;
    cursor: pointer;
    border-radius: 5px;
    transition: background .5s,border-radius .5s;
}
.fav li:hover{
    border-radius: 0px;
    background-color:rgba(100,100,200,.8);
}

关键步骤讲解-项目示例HTML

<section class="workContainer">
    <a id="b"></a>
    <h2>项目示例</h2>
    <div class="work clearfix">
        <figure>
            <figcaption>代表项目</figcaption>
            <img src="img/office.jpg" alt="" />
        </figure>
        <figure>
            <figcaption>代表项目</figcaption>
            <img src="img/office.jpg" alt="" />
        </figure>
        <figure>
            <figcaption>代表项目</figcaption>
            <img src="img/office.jpg" alt="" />
        </figure>
        <figure>
            <figcaption>代表项目</figcaption>
            <img src="img/office.jpg" alt="" />
        </figure>
        <figure>
            <figcaption>代表项目</figcaption>
            <img src="img/office.jpg" alt="" />
        </figure>
        <figure>
            <figcaption>代表项目</figcaption>
            <img src="img/office.jpg" alt="" />
        </figure>
    </div>
</section>

关键步骤讲解-项目示例CSS

.work{
    padding: 0;
    margin: 0;
}
.work figure{
    width: 30%;
    margin: calc(10% / 6) calc(10% / 2) 0 0;
    float: left;
    position: relative;
}
.work figure:nth-child(3n){
    margin-right: 0px;
}
.work figure figcaption{
    width: 100%;
    height: 30px;
    position: absolute;
    z-index: 3;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    opacity: 0;
    transition: opacity .5s;
}
.work figure:hover figcaption{
    opacity: 1;
}
.work figure img{
    width: 100%;
    height: auto;
    -webkit-filter: grayscale(.5);
    transition: webkit-filter .5s;
    cursor: pointer;
}
.work figure:hover img{
    -webkit-filter: grayscale(0);
}

关键步骤讲解-联系我们HTML

  • 定义列表的使用
  • 表单的使用
<section class="contactContainer">
    <a id="c"></a>
    <h2>联系我们</h2>
    <p>前端技术发展非常迅速，个人视野有限，希望大家可以通过广泛的交流互动，实现共同提高！！期待您的回复！！</p>
    <dl>
        <dt>邮箱</dt>
        <dd>whqet@qq.com</dd>
        <dt>QQ</dt>
        <dd>86079959</dd>
    </dl>
    <div class="contact">
        <input type="text" name="name" id="name" placeholder="名字" />
        <input type="text" name="name" id="name" placeholder="邮箱" />
        <select name="fav" id="fav">
            <option value="fav">兴趣</option>
            <option value="web">网页开发</option>
            <option value="app">应用开发</option>
            <option value="html5">html5开发</option>
            <option value="chat">微信开发</option>
        </select>
        <textarea name="message" id="message" placeholder="留言"></textarea>
        <input type="submit" name="submit" id="submit" value="提交信息"/>
    </div>
</section>

关键步骤讲解-联系我们CSS

/*
 contact 部分
 * */
.contactContainer dl dt{
    padding:5px 20px;
    background-color: #fff;
    color: #000;
    display: inline-block;
}
.contactContainer dl dd{
    padding:5px 20px;
    background-color: #000;
    color: #fff;
    margin: 0px 30px 0px 0px;
    display: inline-block;
}
.contact input{
    width: 31%;
    margin: 5px 2% 5px 0px;
    padding: 10px 16px;
    border-radius: 3px;
    border: none;
    outline: none;
}
.contact select{
    width: 32%;
    padding: 10px 16px;
    border-radius: 3px;
    margin: 5px 0px 5px 4px;
}
.contact textarea,
.contact input[type="submit"]{
    width: 48%;
    height: 50px;
    padding: 10px 16px;
    border-radius: 3px;
    margin: 5px 3% 5px 0px;
    vertical-align: top;
}
.contact input[type="submit"]{
    margin: 5px 0px;
    border:none;
    outline: none;
    background-color: #00BFFF;
    cursor: pointer;
}

关键步骤讲解-footer

<footer>
    <p>
        &copy; 王海庆版权所有，如有雷同，非常感谢！
    </p>
    <a id="goTop" href="#">顶部</a>
</footer>

/*
 版权部分
 * */
#goTop{
    position: fixed;
    right: 20px;
    bottom: 20px;
    border: 1px solid #fff;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 0.8em;
    color: #fff;
}

关键步骤讲解-JS的使用（可选-感兴趣的同学可尝试）

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $('header a').on('click', function(e) {
            e.preventDefault();
            $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500);
        });
        $('#goTop').on('click', function(e) {
            e.preventDefault();
            $('html, body').animate({ scrollTop: 0}, 500);
        });
    });
</script>

核心知识点总结

  • CSS书写顺序
  • CSS属性的使用
  • 水平居中
  • 单行文本垂直居中
  • 块元素的水平垂直居中
  • 浮动与定位的选择
  • 浮动与清除
  • 距离的设置

核心知识点总结-CSS书写顺序

/**
 * CSS书写顺序 
 * 先全局，再局部
 * 先抽象，再具体
 * 先上面，后下面
 * hover前后紧挨着（行为处理前后选择器最好保持统一）
 */

核心知识点总结-CSS属性的使用

/**
 * CSS属性的使用-不知道写那些属性时考虑
 * 显示方式，display为none、block、inline-block
 * 宽高大小
 * 颜色、背景, color,background
 * 内外边距、边框、圆角，padding margin border border-radius
 * 位置 float position left right top bottom
 * 对齐方式  text-align vertical-align line-height
 * 阴影 box-shadow
 * 过渡 transition
 * 等等
 */

核心知识点总结-水平居中、单行文本垂直居中

/*
 * 某文本元素需要居中，父元素里设置text-align:center
 * 某块元素水平居中，固定宽度，水平方向margin为auto
 * 单行文本垂直居中，设置行高=高度或设置上下相同的padding值
 */

核心知识点总结-块元素的水平垂直居中

.center1{
    width:400px;
    height:400px;
    position:absolute;
    left:50%;
    top:50%;
    margin-top:-200px;
    margin-left:-200px;
}
.center2{
    width:400px;
    height:400px;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}

核心知识点总结-浮动、定位的选择

/*
 * 如果不用浮动、定位就可以实现效果，尽量不用浮动、定位
 * 如果有多个元素同时需要脱离常规流，同时没有上下位置的区别，用浮动。
 * 如果某个元素相对于某层父元素位置固定，用（绝对）定位。
 */

核心知识点总结-浮动和清除

/*
 * 如果浮动，一定清除
 * 一般在产生浮动的父元素上，使用clearfix类清除浮动。
 */
.clearfix::after{
    content:"";
    display:table;
    clear:both;
    /*也可以设置些隐藏内容的属性*/
}

核心知识点总结-距离的设置

/**
 * 距离的设置
 * padding和margin的使用
 * 具体使用，结合背景、边框而定。
 */

前端开发

旨为前端开发工程师的前端开发基础课程