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

已于 2023-04-30 18:35:58 修改
阅读量1.4k 收藏 6
点赞数 4
分类专栏： web 文章标签： 学习 html5 css3
于 2023-04-30 18:04:27 首次发布
CC BY-NC-SA 署名-非商业性使用-相同方式共享
本文链接：https://blog.csdn.net/qq_55207049/article/details/130450220
版权

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

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

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

实现效果

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

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

具体实现

图片素材下载：

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;
}
小喾苦
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
<div+css页面布局课堂笔记>10---页面布局网站首页设计实例__2
Fuego801的博客
03-27 905
增加了content部分的布局代码！！！ 1.html文件： 标准的页面布局首页
HTML+CSS大作业：使用html设计一个简单好看的公司官网首页 浮动布局
qq_38512792的博客
03-19 390
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站
Web前端：苏州百特电器有限公司网站设计
零小唬的博客
10-08 1665
苏州百特电器有限公司网站设计
用css+div实现网页的简单布局（一）
热门推荐
weixin_43339093的博客
11-10 1万+
这周进行了为期大约两天的h5前端开发的实训，因为有事请了一天的假，所以还是要继续学习巩固一下基础方面的知识。 下面就来回顾一下css+div如何进行网页的布局。 即是使用div，配合float或者flex对页面进行布局。 1、DIV+CSS定义及优势 Div+css 是什么? Div+css 是一种目前比较流行的网页布局技术 Div 来存放需要显示的数据(文字，图表…) , css 就是...
<div+css页面布局课堂笔记>9---页面布局网站首页设计实例__1
Fuego801的博客
03-27 742
1.让网站首页居中显示： html, css分开成为两个文件。 Eg: html: 标准的页面布局首页 css: body { margin:0; padding:0; text-align:center; } .spac
苏州web前端培训_Web前端应用几种常用技术
yuanqushangyuan的博客
08-28 313
苏州web前端培训_Web前端应用几种常用技术 Web前端应用十种常用技术，随着JS与XHTML的应用普及，越来越多的web界面应用技术出现在网站上，比如我们常见的日历控件，搜索下拉框等，这些web界面应用技术大大的丰富了网站的表现形式，本文将为您精心推荐十种最常见的web界面应用技术。 Web应用程序的界面设计，其核心就是网页设计 ，但它的重点主要是在功能方面。要超越桌面应用程序， Web应用程...
雅百特预测
linjingtu的博客
02-27 448
2017.02.27雅百特 今天不小心着了雅百特的道，虽然如此，我还是对此股有这很高的期待。目前大盘形式下，此股还是很有潜力可言的。目前是两个跌停，我琢磨着明天有三种情况： 1.低开高走，如果能拉升，我觉得会飘红，可以做T+0操作（此可能性居大，如果成妖股，那么有可能涨停） 2.跌停不拉升，那么整天一字板跌停。如果拉升同1
兆百特（北京）信息技术有限公司.pdf_python面试
08-24
兆百特（北京）信息技术有限公司.pdf_python面试
百特网盟论坛
10-13
百特网盟论坛
苏州创捷－百特仪表桥接模块（profibus).pdf
10-11
苏州创捷－百特仪表桥接模块（profibus)pdf,苏州创捷－百特仪表桥接模块（profibus)
百特FBT手册
03-13
百特工控数字表FBT手册，针对FBT系列产品的详细说明及参数设置
百特电音机架一键电音
09-15
百特电音机架一键电音
【电子信息工程专业课】学习记录
最新发布
共同进步！
06-12 300
- # **数字信号处理** * ## 离散时间信号与系统 + ### 周期延拓 一个连续时间信号经过理想采样后，其频谱将沿着频率轴以采样频率Ωs = 2π / T 为间隔而重复。 + ### 混频 各周期的延拓分量产生频谱交替的现象 + ### 奈奎斯特采样定理 fs > 2fh
Qt---pro文件的学习
weixin_51883798的博客
06-11 480
【代码】Qt---pro文件的学习。
怎么学习汇川Codesys PLC教程？
NAV3055的博客
06-12 314
各位好，我在B站和抖音上都有发布视频的，搜索我的名称“阿凡工控分享”即可。在CSDN上发表文章也是想把我的一点见解和经验分享出来，进一步的方便大家进行学习。
Nginx学习笔记（十）如何配置HTTPS协议？（公网）
ACGkaka的博客
06-10 724
Nginx学习笔记（十）如何配置HTTPS协议？（公网）
Vue3学习日记（day2）
BrianGriffin的博客
06-10 992
vite创建vue使用全教程；导入依赖全教程
eNSP学习——配置前缀列表
TXFBAP的博客
06-11 1053
理解前缀列表的应用场景 掌握前缀列表的配置方法 理解前缀列表与ACL的区别
帮我列举下医疗器械行业的公司
02-06
医疗器械行业的公司包括： 1. 百特医疗：主要生产和销售手术器械、医疗耗材和医疗设备。 2. 博士伦：主要生产和销售眼科医疗器械、护理用品和面部保养产品。 3. 博世医疗：主要生产和销售医疗设备、医疗器械和医疗耗材。 4. 莱宝：主要生产和销售眼镜和眼镜配件、医疗器械和医疗设备。 5. 美的医疗：主要生产和销售医疗设备、医疗器械和医疗耗材。 6. 博深医疗：主要生产和销售医疗器械、医疗设备和医疗耗材。 7. 赛诺菲：主要生产和销售医疗器械、医疗设备和医疗耗材。 8. 博迈科：主要生产和销售医疗器械、医疗设备和医疗耗材。 这只是医疗器械行业的一部分公司，并不是全部。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值