WEB前端

胖胖红烧

已于 2024-06-24 16:28:17 修改

阅读量63

点赞数 2

文章标签：前端

于 2024-06-24 16:21:29 首次发布

本文链接：https://blog.csdn.net/weixin_72194906/article/details/139929745

版权

<!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>&nbsp;</P>
          <hr>
          <P>&nbsp;</P>
          <hr>
          <P>&nbsp;</P>
          <hr>
          <P>&nbsp;</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>

*{  
    /* 网页默认边距设为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;
}

/* 
题目：：：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";
    
    })
}

<?php
     $link=mysqli_connect("localhost","root",""); 
     mysqli_query($link,"set names utf8"); 
     mysqli_select_db($link,"cms"); 
     $sql="select * from news ";
     $result=mysqli_query($link,$sql);
     $records=array();
     while($row=mysqli_fetch_array($result)){
       $records[]=$row;
     }
     foreach($records as $row):
        echo "[&nbsp;";
        echo $row{"pub_at"};
        echo "&nbsp;]";
        echo "&nbsp;&nbsp;";
        echo $row{"title"};
        echo "<br>";
        endForeach;
?>