当前位置：首页 > article >正文

企业站项目

article 2024/12/23 22:34:51

企业站项目

一、项目实现结果

该项目共分为七大类：头部区域（logo图片、输入框）、导航区域、轮播图区域、内容区域、市场项目区域、产品中心区域、尾部区域

如图所示：

http://企业站项目源码http://xn--vhquvo17e18gllbz7h2v9d

二、页面详细制作

1、书写前提：设置版心以及初始化一些值

CSS代码：

/* 每一个页面中都会包含一些公共代码 */
/* * {
    margin: 0;
    padding: 0;
} */
/* 实际开发中，上面取消默认间距的代码会被下面代码替换掉 */
body,html,p,h1,h2,h3,h4,h5,h6,input,form,select,textarea,ol,ul,li,dl,dt,dd {
    margin: 0;
    padding: 0;
}
/* 解决图片下面有留白问题 */
img {
    display: block;
}
/* 取消描边 */
input {
    outline: none;
    /* 取消默认边框 */
    border: none;
}
/* 设置公共的版心 */
.public {
    width: 964px;
    margin: 0 auto;
}
/* 取消列表项样式 */
ul,ol,li {
    list-style: none;
}
/* 取消超链接下划线 */
a {
    text-decoration: none;
    color: gray;
    font-size: 12px;
}

2、头部区域（logo图片、输入框）

模块分析：该模块由两部分组成，分别是左侧的logo区域以及右侧的搜索区域，如下图所示：

1、从大图可以看出头部模块在页面中居中显示，所以需要给该模块先设置一个版心

2、该模块的组成都是块级元素，因此需要给这两部分设置浮动

解析：

左侧的logo区域以及右侧的搜索区域，一个在左侧，一个在右侧，因此需要给这两部分分别进行左右浮动

（1）左侧logo区域

logo区域为一张图片，因此使用img添加图片即可，随机对该图片进行位置调整，比如上下间距的调整

（2）右侧搜索区域

搜索区域使用input添加搜索框，接下来调整该搜索框的位置、大小、边框以及提示文本，且搜索区域右边有一个小图片，因此可以插入背景图片的方法来插入该小图标（background-image）

Html代码示例：

<!-- 头部模块-logo区域 -->
<div class="logo public">
    <img src="img/logo.png" alt="">
    <!-- 提示文本 -->
    <input type="text" placeholder="SEARCH...">
</div>
复制代码

CSS代码示例：

/* loogo区域 */
.logo {
    /* width: 964px; */
    height: 100px;
    /* 版心居中 */
    /* margin: 0 auto; */
}

.logo>img {
    float: left;
    /* 不会作用在父元素身上，因为触发了BFC */
    margin-top: 32px;
}

.logo>input {
    float: right;
    width: 226px;
    height: 28px;
    border: 1px solid gray;
    margin-top: 40px;
    /* background-color: #f1f1f1; */
    /* 插入背景图片 */
    /* background-image: url(../img/find.png);
    background-repeat: no-repeat;
    background-position: right center;  */
    background: #f1f1f1 url(../img/find.png) no-repeat right center;
    font-size: 14px;
    text-indent: 14px;
}

3、导航区域

模块分析：该模块是一个大的通栏盒子，在该通栏盒子里设置一个版心，版心中为导航区域

（1）排列位置：导航区域排列为水平居中，因此需要设置一个版心，且导航是横向排列，所以还需设置浮动

（2）使用属性：导航区域一般默认使用 ul>li 的格式

（3）调整内容位置：li默认是换行排列，若要使其在一行排列，则需要设置浮动，浮动后内容之间无间距，给li添加一个平分后的宽度且文字水平居中即可

（4）调整文字内容：设置颜色、大小、粗细等

Html代码示例：

<!-- 通栏导航区域 -->
<div class="layoutNav">
    <!-- 版心 -->
    <ul class="nav public">
        <li>集团介绍</li>
        <li>产品中心</li>
        <li>市场类型</li>
        <li>技术研发</li>
        <li>国际合作</li>
        <li>投资者关系</li>
        <li>新闻资讯</li>
        <li class="eight">人力资源</li>
    </ul>
</div>
复制代码

CSS代码示例：

/* 通栏导航区域 */
.layoutNav {
    height: 60px;
    background-color: #313131;
}

.nav {
    /* width: 964px; */
    height: 60px;
    /* margin: 0 auto; */
}

.nav>li {
    float: left;
    font-size: 14px;
    color: white;
    line-height: 60px;
    width: 119px;
    text-align: center;
    border-right: 1px solid #4a4a4a;
}

.nav>.eight {
    border-right: 0px;
}

/* 划过效果 */
.nav>li:hover {
    background-color: slateblue;
}
复制代码

4、轮播图区域

模块分析：该模块为图片轮播，图片占满整个盒子，宽度由图片自己撑开，由于图片大小比例在不同电脑上不一致，因此需要设置宽度百分百比例

Html代码示例：

<!-- banner区域--不要给高度 -->
<div class="banner">
    <img src="img/banner.png" alt="">
</div>
复制代码

CSS代码示例：

/* banner轮播图区域 */
.banner>img {
    width: 100%;
}
复制代码

5、内容区域

模块分析：该模块分为小三个部分-公司新闻、公司介绍、人才招聘

（1）公司新闻

分析：左上角为标题区域，下方为新闻正文区域，每条新闻右边有一个日期

标题区域：可使用 p 标签进行设置，调整字体大小以及字体位置
新闻正文区域：显示格式为列表项，因此使用 ul>li 的格式来写
日期，在 li 中可用 span 标签单独设置并进行右浮动以及右外边距的设置
新闻前面的黑色小点：选择插入背景图片的方式对 li 进行设置

（2）公司介绍

分析：左上角为标题区域，下方为正文区域

标题区域：同公司新闻格式一致，比其多了一个左边的间距，加上即可
正文区域：直接使用两个 p 标签来写，设置其格式即可

（3）人才招聘

分析：左上角为标题区域，下方为文字+图片区域

标题区域：同公司介绍格式一致
文字区域：直接使用 p 标签来写，设置其格式即可
图片区域：可在该部分插入背景图片，设置水平底部居中

Html代码示例：

<!-- 内容区域 -->
<div class="news public">
    <div class="lef">
        <p class="pTit">公司新闻</p>
        <ul>
            <li>陈建成董事长出席ATB集团召开年度销售大会<span>2013-07-30</span></li>
            <li>中国电器工业协会分马力电机分会在卧龙召开理事长...<span>2013-07-30</span></li>
            <li>陈建成董事长访问中国驻德大使馆<span>2013-07-30</span></li>
            <li>企业文化是企业持续经营的关键要素<span>2013-07-30</span></li>
            <li>陈建成董事长出席ATB集团召开年度销售大会<span>2013-07-30</span></li>
            <li>喜迎七一，年轻力量激发企业持久活力<span>2013-07-30</span></li>
        </ul>
    </div>
    <div class="cen">
        <p class="pTit">公司介绍</p>
        <p class="p1">公司成立于1984年，经过近30年的发展</p>
        <p class="p2">已成为电气制造、房地产开发和金融投资三业并举的综合性跨国...</p>
    </div>
    <div class="rig">
        <p class="pTit">人才招聘</p>
        <p class="p1">培养一流的人才，铸造一流的工程，实现员工与企业的共同发展</p>
    </div>
</div>
复制代码

CSS代码示例：

/* 内容区域 */
.news {
    height: 242px;
}

/* 公司新闻区域 */
/* 提取一部分公共代码 */
.news>div {
    height: 242px;float: left;
}
.news>.lef {
    width: 482px;
}

.news>.cen {
    width: 240px;
    background-color: #f1f1f1;
}
.news>.rig {
    width: 242px;
    background-color: #fbfbfb;
    /* 插入背景图片 */
    background: url(../img/horse.png) no-repeat center bottom;
}
.news>div>.pTit {
    /* 上边间距和下边间距 */
    margin-top: 34px;
    margin-bottom: 22px;
    color: #414550;
    font-size: 20px;
}

.news>.lef>ul {
    font-size: 14px;
    line-height: 24px;
    color: #8a8a8a;
}
.news>.lef span {
    float: right;
    margin-right: 28px;
}

.news>.lef li {
    background: url(../img/dian.png) no-repeat 0 center;
    text-indent: 14px;
}

/* 单独实现缩进样式 */
.news>.cen>.pTit {
    text-indent: 20px;
}
.news>.rig>.pTit {
    text-indent: 20px;
}


/* 公司介绍区域的p标签样式 */
.news>.cen>.p1 {
    width: 132px;
    margin-left: 20px;
    font-size: 14px;
    line-height: 24px;
    padding-top: 10px;
    color: #777777;
}


.news>.cen>.p2 {
    width: 194px;
    margin-left: 20px;
    line-height: 24px;
    font-size: 12px;
    color: #777777;
    margin-top: 15px;
}
/* 人才招聘区域设置 */
.news>.rig>.p1 {
    font-size: 12px;
    line-height: 24px;
    margin-left: 22px;
    margin-right: 40px;
    color: #5a5a5a;
}

复制代码

6、市场项目区域

模块分析：该模块由一个左上角的标题以及四个盒子图片组成

其中标题区域与内容区域的标题格式一致，市场项目内容区域由四个盒子横向排列组成，每个盒子的格式一致，都由一个图片和一段文字构成，因此盒子区域直接用 img 和 p 表现书写即可。

Html代码示例：

<!-- 市场项目 -->
<div class="market public">
    市场项目
</div>

<!-- 市场项目内容 -->
<div class="marketinfo public">
    <div>
        <img src="img/pic1.png" alt="">
        <p>交通轨道：由于主要采用电气牵引，而且轮轨摩擦阻力较小，与公共...</p>
    </div>
    <div>
        <img src="img/pic2.png" alt="">
        <p>节能环保L由于不断上涨的能源消耗和我们的专业知识，维护可持续...</p>
    </div>
    <div>
        <img src="img/pic3.png" alt="">
        <p>航空与船舰：如果你是在公海行驶，你需要确保你的船只的电力系统...</p>
    </div>
    <div class="last">
        <img src="img/pic4.png" alt="">
        <p>石油、天然气及采矿：在市场中的安全性、可靠性、效率和最短的停机...</p>
    </div>
</div>
复制代码

CSS代码示例：

/* 市场项目区域 */
.market {
    padding-top: 30px;
    padding-bottom: 20px;
    font-size: 20px;
    color: #414550;
}

/* 市场项目内容区域 */
.marketinfo {
    height: 240px;
}

.marketinfo>div {
    width: 210px;
    height: 240px;
    float: left;
    margin-right: 40px;
    font-size: 12px;
    line-height: 22px;
    color: #4e4e4e;

}

.marketinfo>.last {
    margin-right: 0px;
}

.marketinfo>div>p {
    margin-top: 12px;
}

复制代码

7、产品中心区域

模块分析：该模块分为三部分，分为产品中心、技术研发、营销网络

（1）产品中心

该部分分为上下两部分，上部分为小标题，下部分共三个列表项，因此上部分可使用一个 p 标签来做，下半部分需要使用 div 盒子模型来设计，盒子模型里使用三个 ul>li 来做。

（2）技术研发

该部分分为上下两部分，同产品中心一致，只有一个列表项

（3）营销网络

该部分分为上下两部分，上部分为小标题，下部分为一张图片，因此上部分可使用一个 p 标签来做，下半部分直接使用 img 标签来插入图片即可

Html代码示例：

<!-- 产品中心 -->
    <div class="layoutPro">
        <div class="product public">
            <div class="lef">
                <p class="top">产品中心</p>
                <div>
                    <ul>
                        <li> > 汽车电机</li>
                        <li> > 日用电机</li>
                        <li> > 特种电机</li>
                        <li> > 大功率电机</li>
                        <li> > 电工设备</li>
                    </ul>
                    <ul>
                        <li> > 工业驱动和自动化</li>
                        <li> > 高压变频和系统集成</li>
                        <li> > 混凝土搅拌机</li>
                        <li> > 电动车辆</li>
                    </ul>
                    <ul>
                        <li> > 电池电源</li>
                        <li> > 输变电设备</li>
                        <li> > 楼盘信息</li>
                        <li> > 金融产品</li>
                    </ul>
                </div>
            </div>
            <div class="cen">
                <p class="top">技术研发</p>
                <ul>
                    <li> > 科技力量</li>
                    <li> > 先进设备</li>
                    <li> > 研发创新</li>
                    <li> > 工艺流程</li>
                </ul>
            </div>
            <div class="rig">
                <p class="top">营销网络</p>
                <img src="img/china.png" alt="">
            </div>
        </div>
    </div>
复制代码

CSS代码示例：

/* 产品中心区域 */
.layoutPro {
    height: 250px;
    background-color: #e5e5e5;
}

.product {
    height: 250px;
}

/* 左侧中间以及右侧布局 */
/* 提取公共代码 */
.product>div {
    height: 250px;
    float: left;
}
.product>.lef {
    width: 452px;

}

.product>.cen {
    width: 152px;
    margin: 0 52px;
}

.product>.rig {
    width: 256px;
}

/* 左侧布局大小 */
.product .top {
    /* 边框 */
    border-bottom: 1px solid gray;
    padding-top: 30px;
    padding-bottom: 10px;
    text-indent: 12px;
    color: #656565;
}

.product>.lef ul {
    width: 150px;
    float: left;
    margin-top: 14px;
    color: #767676;
    font-size: 12px;
    line-height: 24px;
    text-indent: 14px;

}

/* 中间区域设置 */
.product>.cen ul {
    margin-top: 14px;
    color: #767676;
    font-size: 12px;
    line-height: 24px;
    text-indent: 14px;
}
复制代码

8、尾部区域

模块分析：该模块主要分为左右两部分，左边为网站底部导航，右边为网站描述，都可使用 p 标签书写，一个左浮动，一个右浮动即可

（1）网站底部导航

导航可实现电机跳转功能，因此需要使用 a 标签，接着调整导航位置以及大小、颜色即可，中间的 | 可以直接使用 span 标签进行书写

（2）右边为网站描述

网站描述基本为纯文字，直接在 p 标签中书写文字，再调整文字位置、大小、颜色等

Html代码示例：

<!-- 网站底部区域 -->
<div class="botNav public">
    <p class="lef">
        <a href="">网站地图</a>
        <span>|</span>
        <a href="">联系我们</a>
        <span>|</span>
        <a href="">关注关注</a>
        <span>|</span>
        <a href="">采购系统入口</a>
    </p>
    <p class="rig">
        COPYRIGHT &copy;
        2013控股集团 &nbsp; 版权所有 &nbsp; 浙ICP备06005901号 &nbsp; 技术支持：博彩互动 &nbsp; 分享到：
        <img src="img/logonav.png" alt="">
    </p>
</div>
复制代码

CSS代码示例：

/* 网站底部区域 */
.botNav {
    height: 82px;
}

.botNav>.lef {
    float: left;
    margin-top: 22px;
}

.botNav>.rig {
    float: right;
    font-size: 12px;
    color: #8a8a8a;
    margin-top: 28px;

}

.botNav span {
    color: gray;
    font-size: 12px;
}

.botNav>.rig>img {
    float: right;
}

完整源码:

查看全文

http://www.kler.cn/a/1985.html