综合案例2-企业官方网站

演讲者：whqet

内容提纲

  1. 案例分析
  2. 关键步骤讲解
  3. 核心知识点总结

案例分析

案例效果 完成版

单页式网页，适合小型企业、个人主页、产品主页等类网站。

滚动效果、滚动检测、固定菜单等效果依赖于JS。

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

<!--头部开始-->
<header>

</header>
<!--头部结束 -------------------->
<main>
    <!--焦点开始-->
    <section class="banner" id="banner">

    </section>
    <!--焦点结束--------------------->
    <!--关于开始-->
    <section class="about" id="about">

    </section>
    <!--关于结束--------------------->
    <!--服务开始-->
    <section class="service" id="service">

    </section>
    <!--服务结束--------------------->
    <!--项目开始-->
    <section id="project" class="project">

    </section>
    <!--项目结束--------------------->
    <!--联系开始-->
    <section class="contact" id="contact">

    </section>
    <!--联系结束--------------------->
</main>
<footer>
    <p>&copy; 王海庆版权所有，如有雷同、感谢抄袭！</p>
</footer>
  • 注意与项目一的异同
  • 异同的内在原理

关键步骤讲解-CSS准备

  • CSS重置
  • font awesome实现图标字体
  • 小图标设置
<!--CSS准备，CSS重置、图标字体、标题栏图标-->
<link rel="stylesheet" type="text/css" href="css/normalize.min.css"/>
<link rel="stylesheet" type="text/css" href="font/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="css/page.css"/>
<link rel="icon shortcut" href="img/icon.ico" />

关键步骤讲解-CSS准备

  • 开发实现的时候，最好使用本地文件、未压缩文件，便于解读和代码提示。
  • 发布上线的时候，最好使用CDN文件、压缩文件，便于减少加载负荷、提高运行性能。

关键步骤讲解-header实现

html架构

<!--头部开始-->
<header class="fixed">
    <!--居中容器-->
    <div class="container clearfix">
        <!--logo-->
        <div class="logo">
            <a href="#banner">
                <img src="img/logo.png" alt="" />
                <span class="siteName">Worthy</span>
            </a>

        </div>
        <nav class="topMenu scrollspy">
            <ul class="nav clearfix">
                <li class="active"><a href="#banner">首页</a></li>
                <li><a href="#about">关于</a></li>
                <li><a href="#service">服务</a></li>
                <li><a href="#project">案例</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </nav>
    </div>
</header>
<!--头部结束 -------------------->

关键步骤讲解-header实现

CSS基础设置部分

/*
 基础设置
 * */
*{
    box-sizing: border-box;
}
body{
    color: #000;
}
ul{
    padding: 0;
    margin: 0;
    list-style-type: none;
}
a{
    text-decoration: none;
}
figure{
    margin: 0;
}
.clearfix::after{
    content: "";
    display: table;
    clear: both;
}
.container{
    max-width: 1200px;
    margin: auto;
    position: relative;
    z-index: 1;
}

关键步骤讲解-header部分

原理解析

/*
 header部分
 * */
header{
    /*
     设置
         宽、高、背景色
         固定定位和位置偏移
     */
}
header.on{
    /*
     设置滚动之后菜单栏的样式
         高度
         背景色
     */
}
header .logo{
    /*
     设置logo在左侧
         左浮动
     */
}
header .logo img{
    /*
     设置logo里图像
         显示方式为inline-block
         垂直对齐
     */
}
header .logo span.siteName{
    /*
     设置logo里文字样式
         字体，特殊字体googlefont，http://www.googlefonts.cn/
         大小
         颜色
         垂直对齐
     */
}
header .topMenu{
    /*
     设置菜单显示在右侧
         右浮动
     */
}
header .topMenu li{
    /*
     设置菜单项样式
         左浮动改成水平菜单
         margin设置距离
     */
}
header .topMenu li a{
    /*
     设置菜单项里链接样式
         颜色
         文字阴影（注意在低版本浏览器中非黑体字体的阴影缺陷）
         过渡效果
     */
}
header .topMenu li.active a,
header .topMenu li a:hover{
    /*
     设置菜单项里链接悬停样式
         注意悬停前后选择器的统一
         颜色
     */
}

关键步骤讲解-header部分

代码呈现

/*
 header部分
 * */
header{
    width: 100%;
    padding: 20px 0px;
    background-color: rgba(0,0,0,0);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    transition: all .5s;
}
header.on{
    padding: 3px 0;
    background-color: rgba(0,0,0,.7);
}
header .logo{
    float: left;
}
header .logo img{
    display: inline-block;
    vertical-align: middle;
}
header .logo span.siteName{
    font-size:3em;
    vertical-align: middle;
    color: #fff;
    font-family: 'Dancing Script', cursive;
}
header .topMenu{
    float: right;
}
header .topMenu li{
    float: left;
    margin: 20px;
}
header .topMenu li a{
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0,0,0,.2);
    transition: color .5s;
}
header .topMenu li.active a,
header .topMenu li a:hover{
    color: #339BEB;
}

关键步骤讲解-焦点部分

html架构

<!--焦点开始-->
<section class="banner" id="banner">
    <div class="caption container">
        <h1>We are <span>Worthy</span></h1>
        <p>Worthy是专业的<em>全媒体信息服务提供商</em>，可以为您全媒体的企业展示、产品推广、活动策划等系列服务，包括纸媒、传统数媒、移动互联网等多渠道、多方式、全方位的形象设计、营销与推广。</p>
        <p>欢迎致电垂询！！</p>
    </div>
</section>
<!--焦点结束---------------------->

关键步骤讲解-焦点部分

原理解析

利用JS设置.banner高度为浏览器窗口内部高度

/*
 焦点部分
 * */
.banner{
    /*
     设置焦点部分样式
         文字颜色为白色
         背景图像设置
     */
}
.banner .caption{
    /*
     设置焦点部分内部文本容器样式
         水平垂直居中对齐
         文字阴影
         文本居中对齐
     */
}
.banner .caption h1 span{
    /*
     设置焦点部分内部h1样式
         颜色
     */
}
.banner .caption p{
    /*
     设置焦点部分内部段落样式
         文本左对齐
         行高
         字体
     */
}
.banner .caption p em{
    /*
     设置焦点部分内部段落强调部分样式
         颜色
         背景色
         padding设置内边距
         文字效果设置
     */
}

关键步骤讲解-焦点部分

代码呈现

/*
 焦点部分
 * */
.banner{
    color: #fff;
    background: url(../img/banner.jpg) no-repeat center top;
    background-size: cover;
}
.banner .caption{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0,0,0,.8);
}
.banner .caption h1 span{
    color: #339BEB;
}
.banner .caption p{
    text-align: left;
    line-height: 1.8;
    font-family: "微软雅黑";
}
.banner .caption p em{
    background-color:rgba(255,255,255,.5);
    color: #000;
    padding: 2px 4px;
    font-style: normal;
    text-shadow: none;
}

关键步骤讲解-关于我们

HTML架构

<!--关于开始-->
<section class="about" id="about">
    <div class="container clearfix">
        <h2>关于我们</h2>
        <p>旨为您能更好，只为更好的您！！</p>
        <!--左侧图像-->
        <div class="img">
            <img src="img/worthy.png" alt="" />
        </div>
        <!--右侧说明-->
        <div class="note">
            <p>Worthy是专业的全媒体信息服务提供商，可以为您全媒体的企业展示、产品推广、活动策划等系列服务，包括纸媒、传统数媒、移动互联网等多渠道、多方式、全方位的形象设计、营销与推广。</p>
            <p>我们的主营业务包括:</p>
            <ul>
                <li>全媒体企业形象设计，网站开发、APP开发、微信公众号开发</li>
                <li>企业产品全媒体营销，纸媒、数媒、移动互联网媒体运营与推广</li>
                <li>企业活动策划，代理产品发布、年会、旅游等活动的策划与运营</li>
                <li>企业员工教育、培训、进修等</li>
            </ul>
        </div>
    </div>
</section>
<!--关于结束------------------->

关键步骤讲解-关于我们

原理解析

  • 左右分列，记得浮动和清除
  • 列表编号的设置

关键步骤讲解-关于我们

代码呈现

/*
 关于部分
 * */
section{
    padding: 50px 0px;
    line-height: 2;
    min-height: 400px;
    position: relative;
}
section:nth-of-type(2n+3)::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 0;
    box-shadow: inset 0px 0px 100px 50px rgba(0,0,0,.5);
}
section h2{
    text-align: center;
    font-family: "微软雅黑";
    margin: 0px;
}
section h2+p{
    text-align: center;
    margin-top: 0px;
    margin-bottom: 60px;
}
.about{

}
.about .img{
    width: 49%;
    float: left;
}
.about .img img{
    width: 100%;
    height: auto;
}
.about .note{
    width: 49%;
    float: right;
    text-align: left;
}
.about .note p:first-child{
    margin-top: 0px;
}
.about .note ul{
    counter-reset:testname 0;
}
.about .note li{
    counter-increment:testname 1;
    position: relative;
    padding-left: 2em;
    cursor: pointer;
    list-style: none;
}
.about .note li::before{
    content:counter(testname);
    width: 1.2em;
    height: 1.2em;
    border: 1px dashed #000;
    text-align: center;
    line-height: 1.2;
    border-radius: 100%;
    position: absolute;
    left: 0px;
    top: 0.3em;
    transition:transform .5s;
    transform: translate(0px);
}
.about .note li:hover::before{
    transform: translate(0.5em);
}

关键步骤讲解-服务部分

原理解析

  • .container容器实现水平居中（公共类）
  • 最好采用ul li的方式组织服务项目
  • 图标字体的实现

关键步骤讲解-服务部分

重点解读-图标字体的实现

  • 图标字体的好处（图标多，便于交互）
  • 实现步骤
    • head部分加载对应库文件
    • 给相应的标签（一般是i标签）应用相应的类

关键步骤讲解-服务部分

重点解读-图标字体

关键步骤讲解-服务部分

HTML架构

<!--服务开始-->
<section class="service" id="service">
    <div class="container clearfix">
        <h2>我们的服务</h2>
        <p>竭诚为您服务</p>
        <ul class="content clearfix">
            <li>
                <i class="fa fa-cog"></i>
                <h3>高端定制网站建设</h3>
                <p>专业定制高端网站，品牌官网、集团网站、营销网站、响应式网站、电子商务网站、业务系统定制等</p>
            </li>
            <li>
                <i class="fa fa-leaf"></i>
                <h3>移动互联网解决方案</h3>
                <p>专业手机网站开发、H5页面开发、APP开发、业务APP定制开发，面向手机、平板等多终端的移动互联网解决方案等</p>
            </li>
            <li>
                <i class="fa fa-check"></i>
                <h3>微信开发运营</h3>
                <p>微官网建设、PC网站和移动端网站资源整合、微信公众号开发运营、H5社交游戏开发等</p>
            </li>
            <li>
                <i class="fa fa-area-chart"></i>
                <h3>交互体验设计</h3>
                <p>360度全景展示、VR虚拟现实、AR增强现实等。</p>
            </li>
            <li>
                <i class="fa fa-desktop"></i>
                <h3>网站运维</h3>
                <p>数据灾备服务、系统安装服务、内容维护、技术迭代服务、服务代维等。</p>
            </li>
            <li>
                <i class="fa fa-codepen"></i>
                <h3>影像创意服务</h3>
                <p>通过图像与视频创新应用塑造饱满、立体、鲜活的品牌形象，品牌形象摄影、产品摄影、影视拍摄与制作等。</p>
            </li>
        </ul>
    </div>
</section>
<!--服务结束------------------------>

关键步骤讲解-服务部分

分块解析

/*
 服务模块
 * */
.service{
    /*
     设置服务部分样式
         颜色
         背景色
         文字效果设置
     */
}
.service li{
    /*
     设置服务部分列表项样式
         宽度
         浮动
     */
}
.service li::after{
    /*
     li里有浮动，所以要清除
     */
}
.service li:nth-child(2n){
    /*
     设置服务部分列表项右侧样式
         左对齐
         右margin
     */
}
.service li i{
    /*
     设置服务部分列表项左侧图标样式
         右浮动
     */
}
.service li:nth-child(2n) i{
    /*
     设置服务部分列表项右侧图标样式
         左浮动
     */
}
.service li h3{
    /*
     设置服务部分列表项h3样式
         显示方式
     */
}

关键步骤讲解-服务部分

代码呈现

/*
 服务模块
 * */
.service{
    min-height: 600px;
    background: url(../img/banner2.jpg) center center no-repeat;
    background-size: cover;
    color: #fff;
    text-shadow: 1px 1px 0px rgba(0,0,0,.5);
}
.service li{
    float: left;
    width: 48%;
    margin-right: 4%;
    text-align: right;
}
.service li::after{
    content: "";
    display: table;
    clear: both;
}
.service li:nth-child(2n){
    margin-right: 0px;
    text-align: left;
}
.service li i{
    float: right;
    padding: 12px 0px 12px 20px;
}
.service li:nth-child(2n) i{
    float: left;
    padding: 12px 20px 12px 0px;
}
.service li h3{
    display: inline-block;
    margin: 0px;
}

核心知识点总结

  • 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的使用
 * 具体使用，结合背景、边框而定。
 */

前端开发

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