首页HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>江西科睿新材料有限公司</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<!-- 头部区域 -->
<div id="hd">
<div id="header">
<img src="image/logo_cn.png" alt="logo" />
<p>
<span class="wz">中文 | English | 加入收藏 | 设为首页</span>
<br /><br />
<input type="text" placeholder="Google站内搜索..." id="inp"/>
<span id="btn"></span>
</p>
</div>
</div>
<!-- 导航 -->
<div id="dh">
<div id="nav">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="fenye.html">企业展示</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">科睿文稿</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</div>
<!-- 轮播图区域 -->
<div id="banner">
<img src="image/slide_cn_1.jpg" alt="" id="imgb" width="80%" />
<ul>
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
<!-- 新闻中心 -->
<div id="new">
<p>新闻中心</p>
<span>[2014-3-6]江西科睿新材料有限公司网站正式上线:通过不懈努力,江西科睿新材料有限公司网站正式上线了</span>
</div>
<!-- 内容 -->
<div id="nr">
<!-- 公司简介 -->
<div id="gsjj">
<div id="gs_t">
<h4>公司简介</h4>
<p>More ></p>
</div>
<div id="gs_b">
<img src="image/about.jpg" alt="" />
<br />
<p>
江西科睿新材料有限公司成立于 2014年初,是一家专业从
事有机硅系列产品的研发﹑生产及销售的高新技术企业。公
司位于江西昌九工业走廊中段﹑古有“洪都之门”的江西永修
云山经济开发区星火工业园,东靠京九铁路、西临昌九高速
公路,距南昌45公里、昌北机场25公里,交通十分便利…
</p>
</div>
</div>
<!-- 产品介绍 -->
<div id="cpjs">
<div id="gs_t">
<h4>产品介绍</h4>
<p>More ></p>
</div>
<div id="cp_b">
<div id="b1">
<p>> 六甲基二硅氧烷</p>
<p>(CAS No.: 107-46-0)</p>
</div>
<div id="b1">
<p>> 1,1,3,3-四甲基二硅氧烷</p>
<p>(CAS No.: 3277-26-7)</p>
</div>
<div id="b1">
<p>> 1,1,1,3,5,5,5-七甲基三硅氧烷</p>
<p>(CAS No.: 1873-88-7)</p>
</div>
<div id="b1">
<p>> 硅油封头剂(MDM)</p>
<p>(CAS No.: 63148-62-9 )</p>
</div>
<div id="b1">
<p>> 四甲基二乙烯基二硅氧烷</p>
<p>(CAS No.: 2627-95-4)</p>
</div>
<div id="b1">
<p>> 含氢硅油</p>
<p>(CAS No.: 63148-57-2 )</p>
</div>
<div id="b2">
<p>> 六甲基二硅氮烷</p>
<p>(CAS No.: 999-97-3)</p>
</div>
</div>
</div>
<!-- 联系我们 -->
<div id="lxwm">
<div id="gs_t">
<h4>联系我们</h4>
</div>
<div id="lx_b">
<p>饶先生</p>
<hr>
<p>江西省永修县</p>
<p>星火工业园希望大道</p>
<p>330319</p>
<hr>
<P> </P>
<hr>
<P> </P>
<hr>
<P> </P>
<hr>
<P> </P>
<hr>
</div>
</div>
</div>
<!-- 企业展示 -->
<div id="qyzs">
<div id="gs_t">
<h4>企业展示</h4>
<p>More ></p>
</div>
<div id="zs_b">
<img src="image/2.jpg" alt="" />
<img src="image/4.jpg" alt="" />
<img src="image/6.jpg" alt="" />
<img src="image/8.jpg" alt="" />
<img src="image/9.jpg" alt="" />
</div>
</div>
<!-- 底部 -->
<div id="footer">
<br />
<div id="foot">
<div id="bl">
<p class="ba">
Copyright © 2015 江西科睿新材料有限公司 . 保留所有权利 技术支持:
萨龙网
<span>
首页 | 联系我们 | 后台管理 | 邮箱登录 | 百度地图 | Google地图
</span>
</p>
<p class="ba1">
赣公网安备
<span>赣ICP备</span>
</p>
</div>
</div>
<br />
</div>
<script src="./js/lunbo完整版.js"></script>
<!-- <script src="./js/index10分简单版.js"></script> -->
</body>
</html>
首页CSS部分
*{
/* 网页默认边距设为0 */
margin: 0;
padding: 0;
text-decoration: none; /* 去除a标签的下划线 */
list-style: none; /* 去除li里面前面的点· */
}
h4{
color: #015aaa; /*h4标签里面的文字 公司简介,公司产品,联系我们,企业展示 */
}
body{
background-color: #e9e9e9; /* 网页背景色 */
}
/* 头部 新闻中心 内容 企业展示 导航栏 设置居中 宽度占80% */
#header,#new,#nr,#qyzs,#nav{
width: 80%;
margin: 0 auto;
}
#header{
background-color: #fff;
/* 头部内容左右两边分布 */
display: flex;
justify-content: space-between;
position: relative;
}
/* 头部的文字输入框样式 */
#header p input{
border: none; /*去除边框 */
height: 30px;
width: 230px;
background-color: #a3a1a1;
border-radius: 5px;
}
.wz{
/* 中文 | English | 加入收藏 | 设为首页 样式 */
color: #696969;
font-size: 14px;
}
#btn{
position: absolute;
top: 43px;
right: 0;
display: inline-block;
width: 30px;
height: 30px;
background: url(../image/icon.png) -5px -340px;
}
#nav{
background-color: #015aaa;
}
#nav ul{
display: flex;
}
#nav ul li{
padding: 10px 35px;
}
#nav ul li a{
color: #fff;
}
/* 导航栏鼠标悬停 */
#nav ul li a:hover{
color: red;
}
#banner{
text-align: center;
position: relative;
}
#banner ul{
display: flex;
justify-content: flex-end;
position: absolute;
right: 11%;
bottom: 20px;
}
#banner ul li{
background-color: #ffffff9d;
cursor: pointer;
width: 25px;
height: 10px;
margin: 5px;
}
#banner ul .active{
background-color: #f00;
}
#new {
background-color: #fff;
display: flex;
}
#new p{
/* 新闻中心样式 */
background-color: #015aaa;
width: 120px;
height: 35px;
color: #fff;
text-align: center;
line-height: 35px;
}
#nr{
display: flex;
}
/* 公司简介 产品介绍 */
#gsjj,#cpjs{
margin-right: 20px;
}
#gsjj{
width: 30%;
}
#cpjs{
width: 40%;
}
/* 联系我们 */
#lxwm{
flex: 1;
}
/* 企业展示 */
#gs_t{
display: flex;
justify-content: space-between;
background-color: #e2e2e2;
height: 20px;
border-bottom: #c2c2c2 1px solid;
padding: 10px;
}
/* 公司简介内容 */
#gs_b {
background-color: #fff;
text-align: center;
padding-top: 20px;
}
/* 公司简介段落文字 */
#gs_b p{
margin: auto;
width: 320px;
font-size: 14px;
line-height: 30px;
text-align: left;
}
/* 六甲基二硅氧烷 多了个下划线的边框*/
#b1{
display: flex;
justify-content: space-between;
border-bottom: solid #c2c2c2 1px;
padding: 10px 15px;
background-color: #fff;
}
/* 六甲基二硅氧烷 */
#b2{
display: flex;
justify-content: space-between;
padding: 15px;
background-color: #fff;
}
/* 联系我们内容 */
#lx_b{
line-height: 30px;
background-color: #fff;
height: 304px;
}
/* 企业展示的图片 */
#zs_b{
display: flex;
justify-content: space-around;
padding: 25px 30px;
background-color: #fff;
}
/* .ba Copyright © 2015 江西科睿新材料有限公司 . 保留所有权利 技术支持: 萨龙网络
.ba1 赣公网安备 */
.ba,.ba1{
display: flex;
justify-content: space-between;
}
.ba1{
width: 330px;
}
#foot{
width: 80%;
margin: 0 auto;
color: #fff;
cursor: pointer;
}
#footer,#dh{
background-color: #015aaa;
}
#hd{
background-color: #fff;
}
分页HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>江西科睿新材料有限公司</title>
<link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" href="css/fenye.css" />
</head>
<body>
<!-- 头部区域 -->
<div id="hd">
<div id="header">
<img src="image/logo_cn.png" alt="logo" />
<p>
<span class="wz">中文 | English | 加入收藏 | 设为首页</span>
<br /><br />
<input type="text" placeholder="Google站内搜索..." id="inp"/>
<span id="btn"></span>
</p>
</div>
</div>
<!-- 导航 -->
<div id="dh">
<div id="nav">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="fenye.html">企业展示</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">科睿文稿</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</div>
<div id="tu">
<img src="./image/company.jpg" alt="" width="100%" />
</div>
<div id="content">
<div id="left">
<img src="./image/最新文章.jpg" alt="" height="100px" width="250px">
<img src="./image/联系我们.jpg" alt="" height="400px" width="250px">
</div>
<div id="right">
<div id="zhanshi">
<img src="./image/2.jpg" alt="">
<p>科睿一周年庆典</p>
</div>
<div id="zhanshi">
<img src="./image/6.jpg" alt="">
<p>公司组织体育活动</p>
</div>
<div id="zhanshi">
<img src="./image/4.jpg" alt="">
<p>全体员工庐山三日游</p>
</div>
<div id="zhanshi">
<img src="./image/about.jpg" alt="">
<p>公司大门</p>
</div>
<div id="zhanshi">
<img src="./image/8.jpg" alt="">
<p>工厂环境</p>
</div>
<div id="zhanshi">
<img src="./image/4.jpg" alt="">
<p>科睿公办环境</p>
</div>
</div>
</div>
<!-- 底部 -->
<div id="footer">
<br />
<div id="foot">
<div id="bl">
<p class="ba">
Copyright © 2015 江西科睿新材料有限公司 . 保留所有权利 技术支持:
萨龙网络
<span>
首页 | 联系我们 | 后台管理 | 邮箱登录 | 百度地图 | Google地图
</span>
</p>
<p class="ba1">
赣公网安备
<span>赣ICP备</span>
</p>
</div>
</div>
<br />
</div>
<script src="./js/lunbo完整版.js"></script>
</body>
</html>
分页CSS部分
#tu{
width: 80%;
margin: 0 auto;
}
#content{
width: 80%;
margin: 0 auto;
display: flex;
justify-content:space-between;
}
#left{
width: 30%;
}
#right{
background-color: #fff;
width: 68%;
}
#right img{
width: 100%;
}
#right p{
font-size: 13px;
line-height: 26px;
}
#right #zhanshi{
float: left;
width: 150px;
height: 150px;
margin-left: 10px;
margin-top: 10px;
}
#right #zhanshi img{
width: 150px;
height: 100px;
}
JS部分
/*
题目:::3.完成点击搜索提示不能为空(5分);
inp是输入框 btn是搜索按键
<input type="text" placeholder="请输入产品型号或新闻关键字" id="inp"/>
<span id="btn"></span> span在css里面设置了搜索框的背景图
*/
let inp = document.querySelector('#inp')//输入框
let btn = document.querySelector('#btn')//搜索按键
// 按键绑定点击事件
btn.addEventListener('click',function(){
// 按键点击的时候触发以下代码
//如果inp输入框里面的内容为空 inp.value是获取输入框里面的值
//trim()去除多余的空格(只输入空格也判断内容为空)
if (inp.value.trim() === '') {
// 弹窗显示'内容不能为空'
return alert('内容不能为空')
}
})
// <img src="./image/banner1.jpg" alt="" /> img是图片的元素节点
var img = document.querySelector("#banner img");
//#banner ul li轮播图里面的4个指示器圆点
var lix = document.querySelectorAll("#banner ul li");//lix = [li,li,li,li]
var p=1; //p表示当前第几张图片
var k=0; //k表示当前指示器哪个变橙色
// 开启定时器,每隔3秒执行一次f函数里面的内容
var t1=setInterval(f,3000);
function f(){
// 每隔3秒执行一次下面的内容
p++; //p增加1
if(p>3){ //如果p大于4的时候 p=1,就是p的取值范围是1~4 表示4个图片
p=1;
}
//img.src是设置图片的路径 当p=1时相当于 img.src="./image/banner1.jpg";
img.src="./image/slide_cn_"+p+".jpg"; //第一种拼接方式
//img.src=`./image/banner${p}.jpg`;//第二种拼接方式
k++; //k增加1
if(k>2){//如果p大于3的时候 k=0,就是k的取值范围是0~3 表示4个指示器圆点
k=0;
} //有active类名 是表示选中 橙色
lix[0].classList.remove('active'); //第一个li 移除active类名 圆点变成白色
lix[1].classList.remove('active'); //第二个li 移除active类名 圆点变成白色
lix[2].classList.remove('active'); //第三个li 移除active类名 圆点变成白色
lix[k].classList.add('active'); //k表示当前选中的圆点 增加active类名 变成橙色
}
// 1.1 先给4个小li添加点击事件
for (let i = 0; i < 4; i++) {
lix[i].addEventListener('click', function () {
lix[0].classList.remove('active');
lix[1].classList.remove('active');
lix[2].classList.remove('active');
lix[i].classList.add('active');
p = i+1
k = i
img.src="./image/slide_cn_"+p+".jpg";
})
}