0
点赞
收藏
分享

微信扫一扫

HTML+CSS实现纽曼门户首页

Java旺 2022-03-16 阅读 81
csshtmlelementui

效果图：

 

index.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纽曼官网</title>
    <link rel="stylesheet" href="/css/public.css">
    <link rel="stylesheet" href="/css/index.css">
</head>
<body>
<!--头部-->
<div class="header">
    <!--logo-->
    <div class="logo">
        <img src="/img/logo.jpg" alt="" width="146" height="85">
    </div>
    <!--导航栏-->
    <nav>
        <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>
        </ul>
    </nav>
    <!--中英文切换-->
    <div class="language">
        <span>CN</span>EN
    </div>
</div>
<!--主体部分-->
<main>
    <!--轮播图-->
    <section class="banner">
        <!--三个轮播组图-->
        <ul>
            <li><img src="/img/banner_01.jpg" alt="banner" width="1920" height="400"></li>
            <li><img src="/img/banner_02.jpg" alt="banner" width="1920" height="400"></li>
            <li><img src="/img/banner_03.jpg" alt="banner" width="1920" height="400"></li>
        </ul>
        <!--前进，后退控制器-->
        <div class="prev"><img src="/img/index-xb4.png" alt="prev" height="32" width="32"></div>
        <div class="next"><img src="/img/index-xb3.png" alt="next" height="32" width="32"></div>
        <!--图片计数器-->
        <div class="count">
            <ul>
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </section>
    <!--欢迎-->
    <section class="welcome">
        <!--标题和描述-->
        <h1>WELCOME <span>TO</span> NEWMAN</h1>
        <p>
            纽曼公司创立于1996年，现有员工2000余人，是一家集研发、制造、销售、服务为一体的中国高新技术企业。公司研发及生产体系健全，拥有湖南、北京和深圳三大中心。经过17年的发展，凭借强大的研发力量及资源整合能力，纽曼已拥有目前中国数码行业较为完整产品体系。产品跨越专业及消费数码产品领域。</p>
        <!--四个图片加描述-->
        <article>
            <div class="part">
                <img src="/img/index-cultural01.png" alt="" width="44" height="44">
                <h2>CULTURAL
                    <div>企业文化</div>
                </h2>
                <p>优秀的企业文化能给企业注入蓬勃的活力，是企业的灵魂。纽曼十分注重自身企业文化建设，将企业文化的精髓传递给每一位员工。</p>
            </div>

            <div class="part">
                <img src="/img/index-cultural02.png" alt="" width="44" height="44">
                <h2>HONOUR
                    <div>企业荣誉</div>
                </h2>
                <p>纽曼历年来坚持不懈地努力，以品质求生存，以创新谋发展，从而打造出众多经典产品，得到了用户以及行业媒体的普遍肯定与褒奖。</p>
            </div>
            <div class="part">
                <img src="/img/index-cultural03.png" alt="" width="44" height="44">
                <h2>QUALIFICATION
                    <div>资格认证</div>
                </h2>
                <p>纽曼长期以来将科学化管理放在首位，并将产品质里视为企业命脉，经过长期不懈的系统化学习和实践，逐步通过了IS09001质里管理体系认证。</p>
            </div>
            <div class="part">
                <img src="../img/index-cultural04.png" alt="" width="44" height="44">
                <h2>RESEARCH
                    <div>研究开发</div>
                </h2>
                <p>纽曼一直以来把产品技术研发创新作为产品的核心竞争力，组建了一支专业的、国际化的研发团队，拥有专业研发技术人员近300名。</p>
            </div>
        </article>
    </section>
    <!--产品中心-->
    <section class="production">
        <!--标题和描述-->
        <h1>PRODUCTI<span>ON</span> CENTER</h1>
        <p>纽曼经过十余年的发展，已经成为中国家电行业著名品牌之一，纽曼品牌：NEWPAD平板电脑、纽曼车PAD、纽曼饮水机、纽曼冰箱、洗衣机等连续数年国内市场占有率前列，纽曼品牌IT产品的市场占有率在国内都名列，逐年上升</p>
        <!--轮播图加描述-->
        <div class="images">
            <ul>
                <li><img src="/img/pro-center1.jpg" alt="" width="320" height="240">
                    <div>微波炉-马23bfs</div>
                </li>
                <li><img src="/img/pro-center2.jpg" alt="" width="320" height="240">
                    <div>饮水机-nc-zai</div>
                </li>
                <li><img src="/img/pro-center3.jpg" alt="" width="320" height="240">
                    <div>电饭锅-rc-iozwh</div>
                </li>
                <li><img src="/img/pro-center4.jpg" alt="" width="320" height="240">
                    <div>迷你音响-rs-168</div>
                </li>
                <li><img src="/img/pro-center5.jpg" alt="" width="320" height="240">
                    <div>空气清新机-fes-547</div>
                </li>
                <li><img src="/img/pro-center6.jpg" alt="" width="320" height="240">
                    <div>电热水器-arc-1</div>
                </li>
            </ul>
            <!--后退控制器-->
            <div class="next"><img src="/img/index-xb3.png" alt="next"></div>
        </div>
    </section>
    <!--新闻中心-->
    <section class="news">
        <!--标题和描述-->
        <h1>NEWS<span> C</span>ENTER</h1>
        <p>纽曼品牌数年来培育了数千万忠实用户，特别是得到了中国广大年轻用户的喜爱和认可，纽曼公司佣有一大批经验丰富的市场和品牌推广团队，每年拥有数千万的市场和品牌推广资金。</p>
        <!--图文区-->
        <article>
            <!--左侧图文-->
            <div class="part1">
                <img src="/img/news01.png" alt="" height="307" width="553">
                <div>AWE2016开幕，企业巨头竞相争艳，大咖云集</div>
            </div>
            <!--右侧文章-->
            <div class="part2">
                <div class="content"><!--日期-->
                    <div class="date">
                        <div class="day">15</div>
                        <div class="year">2016-03</div>
                    </div>
                    <!--日期右面的文本-->
                    <div class="text">
                        <h3><a href="">AWE2016开幕，企业巨头竞相争艳，大咖云集</a></h3>
                        <p>2016年3月9日9:30，由中国家电协会主办的中国家电及消费电子博览会—上海2016在上海新国际博览中心隆重开幕。在这个全球瞩目、亚太区最大规模的家电展会上......</p>
                    </div>
                </div>
                <!--新闻列表-->
                <ul>
                    <li><a href="">三大“黑科技”锁定中国消费者的心<small>2016-03-15</small></a></li>
                    <li><a href="">正品控宣言：让商品拥有独一无二的身份证<small>2016-03-15</small></a></li>
                    <li><a href="">2016AWE：方太最全智能嵌入式厨电套系亮相<small>2016-03-15</small></a></li>
                    <li><a href="">美的焖香鼎釜IH智能电饭煲全球首发 <small>2016-03-15</small></a></li>
                    <li><a href="">AWE2016盛大开幕 释放家电业“引力波” <small>2016-03-14</small></a></li>
                    <li><a href="">2016年中国家电发展高峰论坛文字实录 <small>2016-03-14</small></a></li>
                </ul>
            </div>
        </article>
    </section>
    <!--视频中心-->
    <section class="video">
        <!--标题和描述-->
        <h1>VIDEO <span>CE</span>NTER</h1>
        <p>纽曼现已成为目前中国家电行业最知名的品牌之一，先后获得包括中央电视台、《财经时报》、新浪网、网易、品牌中国等国内几十家专业媒体及权威评奖机构所评出的近百个大奖。</p>
        <!--轮播图-->
        <ul>
            <li>
                <img src="/img/video_06.jpg" alt="" height="195" width="260">
                <div>享受生活,从饮水开始！</div>
                <p>双层过滤滤芯，使饮水更加安全、放心。</p>
            </li>
            <li>
                <img src="/img/video_08.jpg" alt="" height="195" width="260">
                <div>把时间留在最美一刻！</div>
                <p>RFE-326三门冰箱，特大存储容量，更节能。</p>
            </li>
            <li>
                <img src="/img/video_11.jpg" alt="" height="195" width="260">
                <div>RS-197，给你一份净土。</div>
                <p>RS-197采用全新技术，高效净化空气。</p>
            </li>
            <li>
                <img src="/img/video_13.jpg" alt="" height="195" width="260">
                <div>纽曼咖啡机，诠释生活真理。</div>
                <p>精致外观与健全的功能，居家的明早选择！</p>
            </li>
            <div class="prev2"><img src="/img/index-xb2.png" alt="" width="32" height="32"></div>
            <div class="next2"><img src="/img/index-xb3.png" alt="" width="32" height="32"></div>
        </ul>
    </section>
</main>
<footer>
    <div class="footer-main">
        <div class="footer-nav">
            <dl>
                <dt><a href="#">关于我们</a></dt>
                <dd><a href="#">公司简介</a></dd>
                <dd><a href="#">企业文化</a></dd>
                <dd><a href="#">企业荣誉</a></dd>
                <dd><a href="#">资格认证</a></dd>
                <dd><a href="#">研发生产</a></dd>
            </dl>
            <dl>
                <dt><a href="#">产品中心</a></dt>
                <dd><a href="#">饮水机</a></dd>
                <dd><a href="#">冰箱</a></dd>
                <dd><a href="#">洗衣机</a></dd>
                <dd><a href="#">空调</a></dd>
                <dd><a href="#">其他产品</a></dd>
            </dl>
            <dl>
                <dt><a href="#">新闻中心</a></dt>
                <dd><a href="#">热点聚焦</a></dd>
                <dd><a href="#">企业新闻</a></dd>
                <dd><a href="#">行业新闻</a></dd>
                <dd><a href="#">热点聚焦</a></dd>
            </dl>
            <dl>
                <dt><a href="#">客户服务</a></dt>
                <dd><a href="#">招商网加盟</a></dd>
                <dd><a href="#">购买流程</a></dd>
                <dd><a href="#">售后服务</a></dd>
                <dd><a href="#">技术支持</a></dd>
                <dd><a href="#">常见问题</a></dd>
            </dl>
            <dl>
                <dt><a href="#">联系我们</a></dt>
                <dd><a href="#">在线留言</a></dd>
                <dd><a href="#">网上咨询</a></dd>
                <dd><a href="#">联系我们</a></dd>
            </dl>
        </div>
        <form action="">
            <input type="text" placeholder="请输入您的姓名">
            <input type="text" placeholder="请输入您的联系方式">
            <textarea  name="" id="" cols="30" rows="10" placeholder="请输入您的留言"></textarea><br>
            <input type="submit">
        </form>
    </div>
    <div class="footer-footer">Copyright&copy;2030</div>
</footer>
</body>
</html>

public.css

*{
    margin: 0;
    padding: 0;
}
body{
    font-size: 18px;
}
.header{
    width: 100%;
    overflow: hidden;
}
.logo{
    margin-left: 15%;
    float: left;
}
nav{
    width: 40%;
    margin: 0 10%;
    float: left;
    overflow: hidden;
}
nav ul{
    list-style-type: none;
    display: flex;
    justify-content: space-around;
}
nav li{
    float: left;
    line-height: 80px;
    text-align: center;
}
nav a{
    text-decoration: none;
    color: black;
}
.language{
    line-height: 80px;
    text-align: center;
    float: left;
}
.language span{
    border: black 1px solid;
    margin-right: 20px;
    padding: 10px;
}
nav a:hover{
    color: #029df2;
    border-bottom: #029df2 10px solid;
    padding-bottom: 20px;
}
.banner{
    width: 100%;
    overflow: hidden;
    position: relative;
}
.banner ul{
    width: 19200px;
    list-style-type: none;
}
.banner li{
    float: left;
}
.banner .prev,.next{
    position: absolute;
    top: 50%;
    margin-top: -16px;
}
.banner .prev{
    left: 50px;
}
.banner .next{
    right: 50px;
}
.count{
    width: 100%;
    height: 10px;
    position: absolute;
    bottom: 25px;
}
.count ul{
    width: 80px;
    margin: 0 auto;
}
.count ul li{
    width: 10px;
    height: 10px;
    cursor:pointer;
    background-color: #666;
    opacity: .5;
    float: left;
    margin-right: 10px;
    border-radius: 50%;
}
.count .active{
    background-color: #029df2;
    opacity: .8;
}
footer{
    height: 500px;
    width: 100%;
    background-color: #3091db;
}
.footer-main{
    width: 100%;
    overflow: hidden;
}
.footer-nav{
    width: 40%;
    display: flex;
    justify-content: space-around;
    margin-left: 200px;
    padding-top: 50px;
    float: left;
}
.footer-nav dl{
    float: left;
    text-align: center;
}
.footer-nav dt{
    font-size: 20px;
    line-height: 30px;
    border-bottom: 2px white solid;
    margin-bottom: 20px;
}
.footer-nav dd {
    font-size: 14px;
    padding: 10px 0;
}

.footer-nav a{
    color: white;
    text-decoration: none;
}
.footer-nav a:hover{
    color: pink;
}
form{
    width: 500px;
    padding: 50px 0 0 30px;
    float: right;
}
form input,textarea{
    outline: none;
    border: 1px #fff solid;
    background-color: #3091db;
    color: white;
}
form input{
    height: 30px;
}
form textarea{
    width: 345px;
    margin-top: 10px;
}
::placeholder{
    color: white;
}
form input[type=submit]{
    width: 80px;
    color: white;
}
.footer-footer{
    width: 100%;
    border-top: 2px white solid;
    color: white;
    font-size: 18px;
    margin-top: 150px;
    line-height: 40px;
    text-align: center;
}

index.css

section{
    margin-bottom: 40px;
}
.welcome{
    width: 60%;
    margin: 30px auto;
}
h1{
    line-height: 40px;
    text-align: center;
    margin-bottom: 30px;
}
h1 span{
    border-bottom: #029df2 5px solid;
}
section p{
    font-size: 14px;
    color: #666666;
    text-align: center;
}
article{
    width: 100%;
    margin: 80px auto;
    overflow: hidden;
    display: flex;
    justify-content: space-around;
}
.welcome .part{
    width: 20%;
    float: left;
    text-align: center;
}
.welcome .part p,h2{
    padding: 20px;
}
.welcome .part div{
    color: #666666;
    font-size: 18px;
}
.welcome .part h2{
    font-size: 25px;
}
.production{
    width: 100%;
    margin: 0 auto;
}
.production p{
    width: 60%;
    font-size: 14px;
    color: #666666;
    margin: 0 auto;
    text-align: center;
}
.images{
    margin: 70px 0;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.images ul{
    width: 2000px;
    overflow: hidden;
}
.images li{
    float: left;
    background-color: #e5e5e5;
}
.images li:hover{
    background-color: #029df2;
    color: white;
}
.images .next{
    position: absolute;
    top: 50%;
    margin-top: -16px;
    right: 50px;
}
.news{
    width: 100%;
}
.news p{
    font-size: 14px;
    color: #666666;
    text-align: center;
}
.news article{
    width: 90%;
    margin: 30px auto;
    display: flex;
    justify-content: space-around;
}
article .part1{
    width: 553px;
    position: relative;
}
article .part1 div{
    color: #fff;
    width: 553px;
    line-height: 30px;
    background-color: #029df2;
    position: absolute;
    bottom: 20%;
    padding: 10px 0;
    text-indent: 1em;
}
article .part2{
    width: 50%;
}
.part2 .content{
    overflow: hidden;
    margin-bottom: 30px;
}
.part2 .date{
    width: 10%;
    text-align: center;
    float: left;
}
.part2 .date .day{
    font-size: 30px;
    padding: 10px;
    border: 1px #029df2 solid;
    font-weight: bolder;
    color: #029df2;
}
.part2 .date .year{
    font-size: 12px;
    background-color: #029df2;
    color: #ffffff;
}
.text{
    width: 80%;
    float: left;
    margin-left: 10px;
}
.text p{
    text-align: left;
    padding-top: 15px;
}
.text h3 a{
    color: #029df2;
}
.part2 ul{
    width: 600px;
    padding-left: 20px;
    margin-left: 40px;
    position: relative;
}
.part2 li{
    line-height: 40px;
    border-top: #666666 1px dotted;
}
.part2  a{
    color: #666666;
    text-decoration: none;
}
.part2 ul li:last-child{
    border-bottom: #666666 1px dotted;
}
.part2 li small{
    position: absolute;
    right: 20px;
}
.video{
    width: 100%;
}
.video h1+p{
    width: 60%;
    margin: 0 auto;
}
.video ul{
    width: 80%;
    margin: 40px auto;
    list-style-type: none;
    display: flex;
    justify-content: space-around;
    overflow: hidden;
    padding:  20px;
    position: relative;
}
.video ul li{
    width: 100%;
    float: left;
    text-align: center;
}
.video ul li div{
    color: #029df2;
}
.video ul li:hover{
    box-shadow:5px 5px 5px rgba(2, 157, 242, 0.34),-5px -5px 5px rgba(2, 157, 242, 0.34);
}
.video .prev2,.next2{
    position: absolute;
    top: 50%;
    margin-top: -16px;
}
.video .prev2{
    left: 0;
}
.video .next2{
    right: 0;
}

项目源码+图片下载地址：纽曼门户网页源码+图片资源-HTML5文档类资源-CSDN下载

举报

相关推荐

HTML+CSS实现淘宝首页

htmlcss前端

HTML+CSS实现小米官网首页

csshtml前端

HTML+CSS项目案例（主体部分-首页（index））

csshtmlhtml5h5icoHtml/CSS前端开发

HTML+CSS

csshtml前端

Dreamweaver简单网页——HTML+CSS小米官网首页的设计与实现

网页设计html导航栏HTML5移动开发

百度一下首页制作（HTML+CSS）

c++算法开发语言

HTML+CSS 导航栏float实现

htmlcsslinq

html+CSS 实现电光球动画

css

HTML+CSS作品展示(仿写携程网移动端首页②)

html前端css

HTML+CSS使用

htmlcssHtml/CSS前端开发
0 条评论