苏州百特电器有限公司网站设计

小喾苦

已于 2023-04-30 18:35:58 修改

阅读量1.5k

点赞数 4

分类专栏： web 文章标签：学习 html5 css3

于 2023-04-30 18:04:27 首次发布

CC BY-NC-SA 署名-非商业性使用-相同方式共享

本文链接：https://blog.csdn.net/qq_55207049/article/details/130450220

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

苏州百特电器有限公司网站设计

五一假期作业企业门户网站布局设计
基于 <div> 的企业门户网站设计
by 小喾苦

我这里仅仅是使用 html + css 来实现这个网站的效果，并不是宣传这个网站(现在这个网站已经过时并且无法进入)

实现效果

https://xkk1.github.io/programs/web/0/

苏州百特电器有限公司网站截图

具体实现

图片素材下载：

蓝奏云： https://xiaokuku.lanzout.com/i2hed0ubegwj
百度云（密码：xkk1）：https://pan.baidu.com/s/1jsRneQ7a6jZZILr2fkojCQ?pwd=xkk1
夸克网盘：https://pan.quark.cn/s/90e1cee55335

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>苏州百特电器有限公司</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Header -->
    <div class="header w clearfix">
        <div class="logo"></div>
        <div class="start-search">
            <div class="start"><a href="#">中文</a> | <a href="#">ENGLISH</a></div>
            <div class="search">关键词：<input type="text"><button>搜&emsp;索</button></div>
        </div>
    </div>
    <!-- 导航栏 -->
    <div class="navbar w">
        <ul class="clearfix">
            <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>
    </div>
    <!-- banFlash -->
    <div class="banFlash w" id="banFlash" onmouseover="onBanFlash=true" onmouseleave="onBanFlash=false"></div>
    <!-- wrapper -->
    <div class="wrapper w clearfix">
        <div class="m1Container">
            <div class="title clearfix">
                <div class="content">新闻中心</div>
                <div class="encontent">NEWS</div>
                <a href="#" class="more"></a>
            </div>
            <div class="picture"></div>
            <div class="txtList">
                <ul>
                    <li><a href="#" title="本公司正式上线欢迎您的访问">本公司正式上线欢迎您的访...</a><span>2016-09-18</span></li>
                    <li><a href="#" title="本公司正式上线欢迎您的访问">本公司正式上线欢迎您的访...</a><span>2016-09-18</span></li>
                    <li><a href="#" title="本公司正式上线欢迎您的访问">本公司正式上线欢迎您的访...</a><span>2016-09-18</span></li>
                    <li><a href="#" title="本公司正式上线欢迎您的访问">本公司正式上线欢迎您的访...</a><span>2016-09-18</span></li>
                    <li><a href="#" title="本公司正式上线欢迎您的访问">本公司正式上线欢迎您的访...</a><span>2016-09-18</span></li>
                </ul>
            </div>
        </div>
        <div class="m2Container">
            <div class="title">
                <div class="content">最新产品</div>
                <div class="encontent">PRODUCT</div>
                <a href="#" class="more"></a>
            </div>
            <div class="imgList" onmouseover="moving=false" onmouseleave="moving=true">
                <ul class="clearfix" id="imgList_ul">
                    <li><a href="#" style="background-image: url(img/ZW9016B.jpg);" title="ZW9016B"></a><a href="#">ZW9016B</a></li>
                    <li><a href="#" style="background-image: url(img/ZW9029.png);" title="ZW9029"></a><a href="#">ZW9029</a></li>
                    <li><a href="#" style="background-image: url(img/ZW9016A.png);" title="ZW9016A"></a><a href="#">ZW9016A</a></li>
                    <li><a href="#" style="background-image: url(img/ZW9003.png);" title="ZW9003"></a><a href="#">ZW9003</a></li>
                    <li><a href="#" style="background-image: url(img/ZW9005.png);" title="ZW9005"></a><a href="#">ZW9005</a></li>
                    <li><a href="#" style="background-image: url(img/ZW9009.png);" title="ZW9009"></a><a href="#">ZW9009</a></li>
                    <li><a href="#" style="background-image: url(img/ZW0603.jpg);" title="ZW0603"></a><a href="#">ZW0603</a></li>
                    <li><a href="#" style="background-image: url(img/ZW0410.png);" title="ZW0410"></a><a href="#">ZW0410</a></li>
                    <li><a href="#" style="background-image: url(img/ZW9005A%20with%20motorised%20brush.jpg);" title="ZW9005A with motorised brush"></a><a href="#">ZW9005A with motorised brush</a></li>
                    <li><a href="#" style="background-image: url(img/ZT0801.jpg);" title="ZT0801"></a><a href="#">ZT0801</a></li>
                    <li><a href="#" style="background-image: url(img/ZW9016B.jpg);" title="ZW9016B"></a><a href="#">ZW9016B</a></li>
                    <li><a href="#" style="background-image: url(img/ZW9029.png);" title="ZW9029"></a><a href="#">ZW9029</a></li>
                </ul>
            </div>
        </div>
        <div class="m3Container">
            <div class="picture"></div>
            <div class="content">
                <p>咨询热线:</p>
                <p>固定电话：0512-65787572</p>
                <p>Email:eva@better-vac.com</p>
            </div>
        </div>
    </div>
    <!-- footer -->
    <div class="footer w">版权所有&copy;2013 Suzhou Best Clean Electrical Co.,Ltd 苏ICP备88888888 技术支持：<a href="http://z2china.com/" target="_blank" rel="noopener noreferrer">中国万网</a></div>
    <script>
        var moving = true;
        var imgList_ul = document.getElementById("imgList_ul");
        var imgList_ul_right = 0;
        function move_imgList_ul() {
            if (moving) {
                imgList_ul.style.right = ++imgList_ul_right + "px";
                if (imgList_ul_right == 2200) {
                    imgList_ul_right = 0;
                }
            }
            setTimeout(move_imgList_ul, 35);
        }
        move_imgList_ul();

        var banFlash_div = document.getElementById("banFlash");
        var banFlash_picture_index = 1;
        var banFlash_picture_list = ["b1.png", "b2.png", "b3.png", "b4.jpg", "b5.jpg"];
        var onBanFlash = false;
        function change_banFlash_picture() {
            if (!onBanFlash) {
                banFlash_div.style.backgroundImage = "url(img/" + banFlash_picture_list[banFlash_picture_index] + ")";
                banFlash_picture_index++;
                if (banFlash_picture_index >= banFlash_picture_list.length) {
                    banFlash_picture_index = 0;
                }
            }
            setTimeout(change_banFlash_picture, 2500);
        }
        change_banFlash_picture();
    </script>
    <div id="author_info" style="margin-top: 666px;padding: 66px 10px; color: #fff; text-align: center; background-color: #159957; background-image: linear-gradient(120deg, #155799, #159957);">
</body>
</html>

style.css

/* CSS 初始化 */
/* 清除元素默认的内外边距 */
* {
    margin: 0;
    padding: 0;
}
/* 清除列表样式 */
li {
	list-style: none;
}
/* 声明清除浮动的样式 */
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1; /* IE6、IE7专门清除浮动样式 */
}
body {
    min-width: 984px;
    color: #868686;
    font: 12px/1.7 Arial;
}
a {
    color: #868686;
    text-decoration: none;
}
a:hover {
    color: rgb(191, 0, 0);
}
/* 版心 */
.w {
	width: 984px;
	margin-left: auto;
    margin-right: auto;
}
.header {
    clear: both;
}
.logo {
    float: left;
    margin-top: 16px;
    margin-bottom: 16px;
    background-image: url(img/logo.png);
    width: 199px;
    height: 42px;
}
.start-search {
    margin-bottom: 1px;
}
.start-search .start {
    margin-top: 5px;
    text-align: right;
}
.start-search .search {
    text-align: right;
    margin-top: 15px;
}
.start-search .search button {
    font-size: 12px;
    margin-left: 4px;
    padding: 1px 8px 1px 8px;
    border: none;
    border-radius: 4px;
    color: white;
    background-color: #777;
    background-image: linear-gradient(180deg, #9D9D9D, #626262);
    border-bottom: 1px solid #A2A2A2;
}
/* 导航栏 */
.navbar {
    background: url(img/navABg.png) left center repeat-x;
}
.navbar>ul>li {
    width: 162px;
    float: left;
    padding-left: 2px;
    text-align: center;
    background-color: #E5E6E6;
    background: url(img/navLibg.png) left center no-repeat;
}
.navbar>ul>li:first-child {
    padding-left: 0;
    background: none;
}
.navbar>ul>li>a {
    line-height: 41px;
}
/* banFlash */
.banFlash {
    width: 984px;
    height: 337px;
    margin-top: 5px;
    margin-bottom: 5px;
    background-image: url(img/b2.png);
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
}
/* wrapper */
.wrapper>div {
    float: left;
}
.wrapper>div>.title {
    height: 32px;
    line-height: 30px;
    background: url(img/mmBg.png) repeat-x;
    padding: 0 5px 0 0;
}
.wrapper>div>.title>.content {
    background: none;
    height: 30px;
    border-bottom: #248596 2px solid;
    float: left;
    padding-right: 10px;
    padding-left: 10px;
    font-family: arial,helvetica,sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #000;
}
.wrapper>div>.title>.encontent {
    background: none;
    height: 30px;
    float: left;
    margin-left: -10px;
    font-family: arial,helvetica,sans-serif;
    /* font-size: 6px; */
    transform: scale(0.7); /* 用缩放来解决字体不能设置更小的问题 */
    font-weight: bold;
    color: #989898;
}
.wrapper>div>.title>a.more {
    float: right;
    margin-top: 10px;
    width: 34px;
    height: 13px;
    background-image: url(img/more.png);
}
.m1Container {
    width: 246px;
}
/* m1Container */
.m1Container>.picture {
    margin: 5px auto;
    width: 241px;
    height: 84px;
    background: url(img/newPictrue.png) no-repeat;
}
.wrapper>div>.txtList>ul>li>a {
    background: url(img/2.gif) left center no-repeat;
    padding-left: 15px;
}
.wrapper>div>.txtList>ul>li>span {
    float: right;
}
.wrapper>div>.txtList>ul>li {
    height: 27px;
    line-height: 27px;
    border-top: #dfdfdf 1px dashed;
}
.wrapper>div>.txtList>ul>li:first-child {
    border-top: none;
}
/* m2Container */
.m2Container {
    width: 440px;
    margin-left: 18px;
}
.imgList {
    overflow: hidden;
}
.imgList>ul {
    position: relative;
    right: 0px;
    width: 2860px;
}
.imgList>ul>li {
    float: left;
    width: 220px;
}
.imgList>ul>li>a:first-child {
    display: table-cell;
    width: 212px;
    height: 175px;
    border: 1px solid #DFDFDF;
    background-image: url(img/ZT0801.jpg);
    background-repeat: no-repeat;
    background-position: center center;

}
.imgList>ul>li>a:last-child {
    display: block;
    text-align: center;
}
/* m3Container */
.m3Container {
    width: 262px;
    margin-left: 18px;
}
.m3Container>.picture {
    margin: 25px auto 20px auto;
    width: 261px;
    height: 80px;
    background: url(img/contactPicture.png) no-repeat;
}
.m3Container>.content>p {
    margin: 10px 0;
}
/* footer */
.footer {
    text-align: center;
    border-top: #dedede 3px solid;
    background: #f7f7f7;
    margin-top: 10px;
    height: 40px;
    line-height: 36px;
}