Web前端-html页面-做过的一个公司的主页

最新推荐文章于 2024-04-29 16:27:27 发布

艺术2333

最新推荐文章于 2024-04-29 16:27:27 发布

阅读量9.3k

点赞数 8

分类专栏： Web前端文章标签： ui

本文链接：https://blog.csdn.net/jianzhonghao/article/details/56478803

版权

总结：
1.使用美工的UI图，利用ps切片来获取精确尺寸与位置。
2.利用
<link rel="stylesheet" href="css/base.css" /> <link rel="stylesheet" href="css/style.css" /> <script type="text/javascript" src="js/js.js"></script>
来链接外部基础、特殊样式，减少大量代码。
3.尽量考虑某些元素共有样式，利用class样式来公用。
话不多说，来图镇楼
这里写图片描述

1.html代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>员源企业</title>
        <meta name="keywords" content="人力资源，技能培训，企业服务，劳动派遣" />
        <meta name="description" content="上海员源主要业务有：培训、人事代理、项目申报、劳务派遣、企业咨询、验厂辅导等服务；涉及电子、机械、食品、饮料、化妆、化纤、工艺、卫浴、运动、保健、服装、鞋帽、
轻纺、印刷、印花、商贸、物流等多种行业的大、中、小企业服务。" />
        <link rel="stylesheet" href="css/base.css" />
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/js.js"></script>
    </head>

    <body>
        <!--头部-->
        <div id="top">
            <div class="company_infor right">
                <span class="company_infor_public home_bg left">设置主页</span>
                <span class="company_infor_public collect_bg left">收藏本站</span>
                <span  class="tel right">服务电话: <font>0592-7XXXXXX</font></span>
            </div>
            <div class="nav right">
                <ul>
                    <li><a href="#">网页首页</a></li>
                    <li><a href="#">关于员源</a></li>
                    <li><a href="#">人才通道</a></li>
                    <li><a href="#">技能培训</a></li>
                    <li><a href="#">劳务派遣</a></li>
                    <li><a href="#">企业服务</a></li>
                    <li><a href="#">成功案例</a></li>
                    <li><a href="#">新闻资讯</a></li>
                    <li id="contact"><a href="#">联系我们</a></li>
                </ul>
            </div>
        </div>
        <!--banner边幅-->
        <div id="banner">
            <div class="banner_content">
                <img src="img/banner.jpg" width="1000" height="436" />
            </div>      
        </div>

        <!--service企业服务-->
        <div id="service">
            <div id="company_title">
                <div class="title1">
                <img src="img/title1.jpg" />
                </div>
            </div>

            <div id="service_picture">
                <div class="picture1 left">
                    <h4>企业培训</h4>
                    <div class="service_public">
                        <p class="training_intro">为企业经营诊断整合、体系建立、流程梳理、</p>
                        <p class="training_intro">各种类型的员工培训、代理企业新技术项目</p>
                    </div>
                </div>

                <div class="picture2 left i2width">
                    <h4>劳务派遣</h4>
                    <div class="service_public">
                        <p class="training_intro">为企业提供劳务用工派遣（临时工、小时工、</p>
                        <p class="training_intro">普工、固定工、承包生产线、短期项目承包、</p>
                        <p class="training_intro">...</p>
                    </div>
                </div>

                <div class="picture3 right">
                    <h4>企业服务</h4>
                    <div class="service_public">
                        <p class="training_intro">为企业提供基、中、高端技工，基、中、高</p>
                        <p class="training_intro">端管理人才和人才测评</p>
                    </div>
                </div>
            </div>
        </div>

        <!--case客户案例-->
        <div id="case">
            <div id="company_title">
                <div class="title2">
                <img src="img/title2.png" />
                </div>
            </div>

            <div id="ClassCase">
                <div class="picture4 left">
                    <div class="custom_case_content">
                        <h3>案例名称：新员工培训</h3>
                        <img src="img/i4.png" width="271px" height="125px"/>
                        <p>“《劳动合同法》明确了劳务派遣的用工形式，是把双刃剑，一方面它的执行提高了劳动者的维权意识，一方面也规范了企业的用工...</p>                    
                    </div>
                    <a href="#"><img class="more" src="img/more.jpg" width="74" height="24"/></a>
                </div>

                <div class="picture4 left i3width">
                    <div class="custom_case_content">
                        <h3>案例名称：新员工培训</h3>
                        <img src="img/i4.png" width="271px" height="125px"/>
                        <p>“《劳动合同法》明确了劳务派遣的用工形式，是把双刃剑，一方面它的执行提高了劳动者的维权意识，一方面也规范了企业的用工...</p>                    
                    </div>
                    <a href="#"><img class="more" src="img/more.jpg" width="74" height="24"/></a>
                </div>

                <div class="picture4 right">
                    <div class="custom_case_content">
                        <h3>案例名称：新员工培训</h3>
                        <img src="img/i4.png" width="271px" height="125px"/>
                        <p>“《劳动合同法》明确了劳务派遣的用工形式，是把双刃剑，一方面它的执行提高了劳动者的维权意识，一方面也规范了企业的用工...</p>                    
                    </div>
                    <a href="#"><img class="more" src="img/more.jpg" width="74" height="24"/></a>
                </div>
            </div>
        </div>
        <br />

        <!--info员源新闻-->
        <div id="info-max">
            <div

最低0.47元/天解锁文章

艺术2333

关注

8
点赞
踩
43

收藏

觉得还不错? 一键收藏
打赏
5
评论
Web前端-html页面-做过的一个公司的主页

总结： 1.使用美工的UI图，利用ps切片来获取精确尺寸与位置。 2.利用 <link rel="stylesheet" href="css/base.css" /> <link rel="stylesheet" href="css/style.css" /> <script type="text/javascript" src="js/js.js"></s
复制链接

扫一扫