苏州百特电器有限公司网站设计
苏州百特电器有限公司网站设计
五一假期作业企业门户网站布局设计 我这里仅仅是使用 html + css 来实现这个网站的效果，并不是宣传这个网站(现在这个网站已经过时并且无法进入) https://xkk1.github.io/programs/web/0/ 图片素材下载： index.html style.css
基于
by 小喾苦
实现效果
具体实现
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>
<div class="header w clearfix">
<div class="logo">div>
<div class="start-search">
<div class="start"><a href="#">中文a> | <a href="#">ENGLISHa>div>
<div class="search">关键词：<input type="text"><button>搜 索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>
<div class="banFlash w" id="banFlash" onmouseover="onBanFlash=true" onmouseleave="onBanFlash=false">div>
<div class="wrapper w clearfix">
<div class="m1Container">
<div class="title clearfix">
<div class="content">新闻中心div>
<div class="encontent">NEWSdiv>
<a href="#" class="more">a>
div>
<div class="picture">div>
<div class="txtList">
<ul>
<li><a href="#" title="本公司正式上线欢迎您的访问">本公司正式上线欢迎您的访...a><span>2016-09-18span>li>
<li><a href="#" title="本公司正式上线欢迎您的访问">本公司正式上线欢迎您的访...a><span>2016-09-18span>li>
<li><a href="#" title="本公司正式上线欢迎您的访问">本公司正式上线欢迎您的访...a><span>2016-09-18span>li>
<li><a href="#" title="本公司正式上线欢迎您的访问">本公司正式上线欢迎您的访...a><span>2016-09-18span>li>
<li><a href="#" title="本公司正式上线欢迎您的访问">本公司正式上线欢迎您的访...a><span>2016-09-18span>li>
ul>
div>
div>
<div class="m2Container">
<div class="title">
<div class="content">最新产品div>
<div class="encontent">PRODUCTdiv>
<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="#">ZW9016Ba>li>
<li><a href="#" style="background-image: url(img/ZW9029.png);" title="ZW9029">a><a href="#">ZW9029a>li>
<li><a href="#" style="background-image: url(img/ZW9016A.png);" title="ZW9016A">a><a href="#">ZW9016Aa>li>
<li><a href="#" style="background-image: url(img/ZW9003.png);" title="ZW9003">a><a href="#">ZW9003a>li>
<li><a href="#" style="background-image: url(img/ZW9005.png);" title="ZW9005">a><a href="#">ZW9005a>li>
<li><a href="#" style="background-image: url(img/ZW9009.png);" title="ZW9009">a><a href="#">ZW9009a>li>
<li><a href="#" style="background-image: url(img/ZW0603.jpg);" title="ZW0603">a><a href="#">ZW0603a>li>
<li><a href="#" style="background-image: url(img/ZW0410.png);" title="ZW0410">a><a href="#">ZW0410a>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 brusha>li>
<li><a href="#" style="background-image: url(img/ZT0801.jpg);" title="ZT0801">a><a href="#">ZT0801a>li>
<li><a href="#" style="background-image: url(img/ZW9016B.jpg);" title="ZW9016B">a><a href="#">ZW9016Ba>li>
<li><a href="#" style="background-image: url(img/ZW9029.png);" title="ZW9029">a><a href="#">ZW9029a>li>
ul>
div>
div>
<div class="m3Container">
<div class="picture">div>
<div class="content">
<p>咨询热线:p>
<p>固定电话：0512-65787572p>
<p>Email:[email protected]p>
div>
div>
div>
<div class="footer w">版权所有©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>
/* 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;
}