首页HTML
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="./css/index.css" />
</head>
<body>
<div id="toubu">
<!-- 头部区域 header要居中-->
<div id="header">
<!-- 公司logo 左边-->
<img src="./image/s_logo_q.png" />
<!-- 文字、输入框和搜索框 右边-->
<p>
<span class="wz"
>设置首页 | 收藏本站</span
>
<br />
<!-- 必考输入框 placeholder提示文字 -->
<input
type="text"
placeholder="请输入产品型号或新闻关键字"
id="inp"
/>
<!-- 搜索框。背景图在css里面设置 -->
<span id="btn"></span>
</p>
</div>
</div>
<div id="daohang">
<!-- 导航栏区域 menu要居中-->
<div id="menu">
<!-- ul li是列表 a是超链接 导航跳转到分页用的 -->
<ul>
<!-- href="./index.html" 跳转到首页 -->
<li><a href="./index.html">网站首页</a></li>
<!-- href="./fenye.html" 跳转到分页，文件和路径要和分页名字一致 -->
<li><a href="./fenye.html">公司简介</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>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</div>
<!-- 轮播图区域 banner要居中-->
<div id="banner">
<!-- 轮播图片 -->
<img src="./image/banner1.jpg" alt="" />
<!-- 指示器 四个点 表示当前哪一张图片 -->
<!-- 带active类名是被选中 颜色不一样 -->
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- 内容区域 -->
<div id="content">
<!-- 企业简介 -->
<div id="gsjj">
<!--标题 更多>> -->
<div id="gs_t">
<h3>企业简介</h3>
<p>更多>></p>
</div>
<!-- 图片+段落内容文字 -->
<div id="gs_b">
<br />
<img src="./image/company.jpg" alt="" align="left" />
<span>
上海信念行工具有限公司是一家集产品开发、制造加工、销售于一体的五金工具专业化企业。自1996年成立以来，经过13年的发展，公司占地面积已达数万平方米，业务遍及世界近
30多个国家和地区，并在东南亚设立分支机构。以超前的创新思想意识和优越的性价比优势，赢得广大消费者的认可。
“勤学苦练技能基本功”的氛围，彰显学校的特色。
</span>
</div>
</div>
<!-- 新闻公告 -->
<div id="xinwen">
<!--标题 更多>> -->
<div id="gs_t">
<h3>米尔斯工具新闻公告</h3>
<p>更多>></p>
</div>
<!-- 新闻标题内容和日期 5条-->
<div id="xw_b">
<!-- 简单写法 -->
<br />
<p>
○拓展2009年五金渠道 创新思维最重要
2021-05-27
</p>
<p>○印度未来3年将投300亿卢比发展机床工具 2021-05-27</p>
<p>○2009年五金渠道 创新思维最重要 2021-05-27</p>
<p>
○手工工具发展品牌效应助阵
2021-05-27
</p>
<p>
○手动工具企业过“寒冬”的三条建议
2021-05-27
</p>
</div>
<!-- <div >
<br />
flex布局写法 标题左边对齐 日期右边对齐
<div id="b1">
<p>○拓展2009年五金渠道 创新思维最重要</p>
<p>2021-05-27</p>
</div>
<div id="b1">
<p>○印度未来3年将投300亿卢比发展机床工具</p>
<p>2021-05-27</p>
</div>
<div id="b1">
<p>○2009年五金渠道 创新思维最重要</p>
<p>2021-05-27</p>
</div>
<div id="b1">
<p>○手工工具发展品牌效应助阵</p>
<p>2021-05-27</p>
</div>
<div id="b1">
<p>○手动工具企业过“寒冬”的三条建议</p>
<p>2021-05-27</p>
</div>
</div> -->
</div>
</div>
<!-- 新品推荐 -->
<div id="news">
<div id="gs_t">
<!-- 新品推荐-头部 -->
<h3>新品推荐</h3>
<p>更多>></p>
</div>
<div id="news_b">
<!-- 新品推荐-内容 -->
<ul>
<li>
<!-- 一共4个内容，每个内容里面放图片和文字 -->
<img src="./image/17073005312549.jpg" alt="" />
<h4>7018 T型棘轮螺丝刀</h4>
</li>
<li>
<img src="./image/17073005312549.jpg" alt="" />
<h4>838J-S 棘轮螺丝刀</h4>
</li>
<li>
<img src="./image/17073005312549.jpg" alt="" />
<h4>838L-A 环保螺丝刀</h4>
</li>
<li>
<img src="./image/17073005312549.jpg" alt="" />
<h4>838E-L 三用螺丝刀</h4>
</li>
</ul>
</div>
</div>
<!-- 底部页脚区域 -->
<div id="footer">
<p>地址：上海市北海区工业区 电话：0755-84795356</p>
<p>Copyright ? 2020 - 2021 All Rights reserved.</p>
<p><span> 粤ICP备18026605号</span></p>
</div>
<script src="./js/index15分.js"></script>
<!-- <script src="./js/index10分简单版.js"></script> -->
</body>
</html>
首页CSS
*{
/* *是通配符 下面的属性对整个网页生效 */
/* 网页默认内边距和外边距设为0
边距快捷键 m0按回车 p0按回车
*/
margin: 0;
padding: 0;
/* 去除超链接a标签的下划线 代码提示用td按回车键*/
text-decoration: none;
/* 去除无序列表li里面前面的点· 代码提示用ls按回车键 打n选none属性*/
list-style: none;
}
/* body {
如果要设置网页的颜色背景 在body里面设置
background-color: #fff;
} */
#toubu{
background-color: rgb(241, 96, 5);
}
#header {
/* 头部内容header居中 */
margin: 0 auto;
width: 1000px;
/* 头部内容左右两边分布 */
display: flex;
/* 子元素 左右贴着两边沿 代码提升jc按回车*/
justify-content: space-between;
background-color: rgb(241, 96, 5);
}
#header p{
/* 调位置 上边距和右边距*/
margin-top: 15px;
position: relative;
margin-right: 40px;
}
#header img{
/* 公司logo的宽高 */
width: 450px;
height: 100px;
}
/* 头部的文字输入框样式
空格是后代选择器 找嵌套关系的子元素
#header 里面的p标签 里面的input输入标签
*/
#header p input {
margin-top: 10px;
/* border: none; */
height: 30px;
width: 180px;
background-color: #eeeeee;
}
.wz {
/* 中文 | English | 加入收藏 | 设为首页 样式 */
margin-left: 25px;
/* 字体颜色 */
color: #fff;
/* 字体大小 */
font-size: 14px;
}
#btn {
position: absolute;
right: -29px;
top: 31px;
/* 设置行内块 设置元素宽高*/
display :inline-block;
width: 30px;
height: 34px;
/* 背景图,搜索的按键 放大镜图标 */
background-image: url(../image/i_bg.png);
}
#daohang{
background-color: rgb(51, 49, 48);
}
#menu {
/* 导航居中 */
margin: 0 auto;
width: 1000px;
background-color: rgb(51, 49, 48);
height: 52px;
}
#menu ul li {
/*选择 menu里面的ul 里面的全部li
float: left;设置全部li排成一行 */
float: left;
}
#menu ul li a {
/* 导航里面的文字 网站首页。公司简介。。。。 */
/* 原本a标签是行内属性不能设置宽高 要设置块才可以设置宽高*/
display :inline-block;
height: 52px;
width: 123px;
/* 文字水平居中 */
text-align: center;
/* 行高和高度一样，文字垂直居中 */
line-height: 52px;
color: #fff;
}
/* 第三题：网站交互功能开发（20分）4.鼠标进过导航显示高亮效果（5分）； */
/* 高亮效果 hover是鼠标悬停的时候显示红色 */
#menu ul li a:hover {
color: rgb(187, 25, 25);
}
#banner {
/* 轮播图盒子居中 */
margin: 0 auto;
width: 1000px;
/* 父容器设置相对定位 */
position: relative;
height: 392px;
}
#banner img {
/* 图片的宽高 */
margin-top: 10px;
height: 392px;
width: 1000px;
}
#banner ul {
/* 指示器的位置 子容器设置绝对布局*/
position: absolute;
/* left和top可以调节指示器相对于轮播图的位置*/
left: 43%;
top: 90%;
}
#banner ul li {
/* 指示器排成一行 */
float: left;
width: 20px;
height: 20px;
/* 方法一：43px是图片左右移动 0是上下移动 找到放大镜图标*/
/* background: url(../image/i_bg.png) 43px 0px; */
/* 方法二：将20*20的正方形 改成圆形，
用宽度的一半裁剪 border-radius: 10px; */
background: gray;
border-radius: 10px;
margin-left: 5px;
}
#banner .active {
/* 指示器被选中的时候改变颜色 */
/* 方法一 用图片*/
/* background: url(../image/i_bg.png) 20px 0px; */
/* 方法二 用正方形裁剪成圆形*/
background: rgb(197, 130, 6);
}
/* 内容区域 居中*/
#content {
margin: 0 auto;
width: 1000px;
height: 200px;
margin-top: 40px;
/* 将子元素排成一行间距均等分布 */
display: flex;
justify-content: space-between;
}
#gs_t {
display: flex;
/* 让里面的子元素左右两边分布 */
justify-content: space-between;
height: 30px;
/* 高度等于行高居中 */
line-height: 30px;
background-color: #ccc;
}
#gsjj {
/* 左边子容器 企业简介 */
float: left;
height: 165px;
width: 600px;
}
#gsjj #gs_b span {
font-size: 14px;
width: 400px;
}
#gsjj #gs_b img {
height: 115px;
}
#xinwen {
/* 右边子容器 新闻公告 */
height: 165px;
width: 370px;
}
#b1{
/* 新闻公告里面5条数据 标题+日期排成一行两边分布 */
line-height: 25px;
display: flex;
justify-content: space-between;
font-size: 14px;
}
#xinwen #xw_b p{
font-size: 13px;
}
/* h3标题的颜色 */
h3 {
color: rgb(241, 96, 5);
}
#gs_t {
display: flex;
/* 让里面的子元素左右两边分布 */
justify-content: space-between;
height: 30px;
/* 高度等于行高居中 */
line-height: 30px;
background-color: #ccc;
}
/* 新品区域 居中*/
#news {
margin: 50px auto;
width: 1000px;
height: 220px;
}
/* 查找news里面的news_b里面的ul */
#news #news_b ul {
display: flex;
/* flex 将li排成一行 间距均等分配 */
justify-content: space-around;
margin-top: 10px;
}
/* 页脚 */
#footer {
/* 高度 */
height: 128px;
/* 背景色 */
background-color: rgb(241, 96, 5);
margin-top: 75px;
padding-top: 20px;
}
#footer p {
/* 字体大小 居中 颜色 行高 */
font-size: 14px;
text-align: center;
color: #fff;
line-height: 30px;
}
#footer p span {
/* 粤ICP备18026605号 黑色 */
color: #000;
}
分页HTML
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<!-- 头部 导航栏 页脚的css样式 首页就有的 公用-->
<link rel="stylesheet" href="./css/index.css">
<!-- 新建的分页的样式 -->
<link rel="stylesheet" href="./css/fenye.css">
<body>
<div id="toubu">
<!-- 头部区域 header要居中-->
<div id="header">
<!-- 公司logo 左边-->
<img src="./image/s_logo_q.png" />
<!-- 文字、输入框和搜索框 右边-->
<p>
<span class="wz"
>设置首页 | 收藏本站</span
>
<br />
<!-- 必考输入框 placeholder提示文字 -->
<input
type="text"
placeholder="请输入产品型号或新闻关键字"
id="inp"
/>
<!-- 搜索框。背景图在css里面设置 -->
<span id="btn"></span>
</p>
</div>
</div>
<div id="daohang">
<!-- 导航栏区域 menu要居中-->
<div id="menu">
<!-- ul li是列表 a是超链接 导航跳转到分页用的 -->
<ul>
<!-- href="./index.html" 跳转到首页 -->
<li><a href="./index.html">网站首页</a></li>
<!-- href="./fenye.html" 跳转到分页，文件和路径要和分页名字一致 -->
<li><a href="./fenye.html">公司简介</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>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</div>
<!-- 分页的内容区域 新写 4分 -->
<div id="content">
<div id="left">
<img src="./image/menu.jpg" alt="">
</div>
<div id="right">
<div id="r_t">
<p>
<span id="r_t_1">公司</span>
<span id="r_t_2">简介</span>
<span id="r_t_3">Company introduce</span>
</p>
<p>首页><span id="r_t_4">公司简介</span></p>
</div>
<div id="r_b">
<img src="./image/13761197661977.jpg" alt="">
<p>
上海市五金科技有限公司是一家集产品开发、制造加工、销售于一体的五金工具专业化企业。
自1996年成立以来，经过13年的发展，公司占地面积已达数万平方米，业务遍及世界近 30多个
国家和地区，并在东南亚设立分支机构。专业的品质管理团队实施严格的质量控制管理，以超前
的创新思想意识和优越的性价比优势，赢得广大消费者的认可。
</p>
<p>
公司于2003 年顺利通过ISO9001:2000质量体系认证，并连续多次荣获全国工商联五金机电商会授
予的“诚信制造商”， “中国五金机电行业最具影响力”等荣誉称号。同时，信念行公司也得到行业内
广大同仁的认可，先后被推选为广东省五金机电商会理事单位，中国五金交电化工商业协会常务理事
单位、中国质量检验协会常务理事单位和中国工商联五金机电商会常务理事单位。
</p>
<p>
"信念人"深知卓越的产品源自完美的设计、精心的选材、优良的工艺、严格的品控和周到的售后服务。
为此我们正积极推行全面的品质管制，提升管理品质，使产品具有更持久的价值.我们将矢志不渝的坚
持专业化的发展之路，以高科技为依托，全面打造专业化的品牌优势。在未来的竞争中,我们以多样化
的品种,精湛的工艺,合理的价格回馈给国内外的客商.
</p>
<p>
佛山市信念行精工科技有限公司真诚希望与更多的国内外朋友结识,在共同的信念,共同的目标,共同的利益下,携手共创明天。
</p>
<p>
FOSHAN BELIEF PRECISION TECHNOLOGY CO. ,LTD is a professional hardware tools company that integrates the R&D.
manufacturing and sales of products．After 13 years development after its foundation in 1996．the company is now
in possession of a land over thirty thousand square meters, having its business spread to more than 30 countries and
regions, and branches have been established in south-east Asia．Wynns has become one of the hardware tools companies in
China that have the fast development speed, the most complete range of Products, and the largest sales volume thanks to
its stringent quality management implemented by professional quality team, leading innovative ideas and excellent price-performance ratio.
</p>
<p>
The company was awarded the certificate for IS09001 Certified Quality Management System in 2003,and received many honors
such as Famous TradeMark of The City and the Province，Famous Trademark of China，Famous Brand of China，as well as titles
of Credit Manufacturer awarded by,and the Most influentiaI Enterprise of China by National Dvevelopment and Reform Commission of China．
China Hardware and Mechanical-electrical Top-ten Famous Brand．Meanwhile,the company has also gained recognition among counterparts of
the industry and was recommended and elected as the vice-Chairman member of the Chamber of Hardware and Electromechanical Commerce of
Guangdong provirice．the standing director of the China Association of Quality Inspection and the member of managing board of directors
of Chamber Of Hardware and Electromechanical Commerce of All-China Federation of industry and Commerce．
</p>
<p>
"The staff of xinnian" are well aware thqt eximious produxcts come from onsummate design.well-chosen mate rial,excellentprocess,strict quality
control and circumspect afterservice.therefore,we are active in pushing total quality controlin order to improve the quality of products and make
the products have permanent value .we shall persist in our way of specialization development,relying on high-tech ,and buid up a predominan of brand
.In the future competition ,we will reciprocate our clients both at home and abroad with diversoform variety ,consummate process andreasonable price,work hard for making the long-term deveopment
strategic objectives of famous enteprises ! Let hand in hand to make a better tomorrow!
</p>
<p>
我们的目标
<br>
给每一个合作伙伴一个创业的平台,并协助合作伙伴走向成功的彼岸.
</p>
</div>
</div>
</div>
<!-- 底部页脚区域 -->
<div id="footer">
<p>地址：上海市北海区工业区 电话：0755-84795356</p>
<p>Copyright ? 2020 - 2021 All Rights reserved.</p>
<p><span> 粤ICP备18026605号</span></p>
</div>
<script src="./js/index.js"></script>
</body>
</html>
分页CSS
/* 分页的内容 */
#content{
/* flex将内容排成一行 设置子元素左右分布 */
display: flex;
justify-content:space-between;
margin-top: 30px;
width: 1000px;
height: 1000px;
}
/* content下面有2个盒子 left和right*/
#content #left{
width: 300px;
margin-top: 5px;
}
#content #right{
width: 650px;
}
/* 公司简介Company introduce 首页>公司简介 */
#content #r_t {
display: flex;
justify-content:space-between;
height: 30px;
line-height: 30px;
}
/* 公司 字样式 */
#r_t_1{
margin-left: 10px;
font-size: 15px;
}
/* 简介 字样式 */
#r_t_2{
font-size: 20px;
color: rgb(241,96,5);
}
/*Company introduce字样式 */
#r_t_3{
font-size: 8px;
color: #ccc;
margin-left: 3px;
}
#r_t_4{
color: rgb(241,96,5);
}
#content #r_b img{
width: 650px;
}
#content #r_b p{
/* 首行缩进2em（字符） */
text-indent: 2em;
padding-top: 10px;
font-size: 13px;
}
#content #r_b p:last-child{
/* 最后一个段落P标签 设置首行缩进0字符 字体大 颜色 加粗 */
text-indent: 0;
padding-top: 10px;
font-size: 18px;
font-weight: bold;
color: rgb(241,96,5);
}
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个指示器圆点 一定要注意ALL，找到全部4个li，不加ALL只能找一个
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>4){ //如果p大于4的时候 p=1，就是p的取值范围是1~4 表示4个图片
p=1;
}
//img.src是设置图片的路径 当p=1时相当于 img.src="./image/banner1.jpg";
img.src="./image/banner"+p+".jpg"; //第一种拼接方式
//img.src=`./image/banner${p}.jpg`;//第二种拼接方式
k++; //k增加1
if(k>3){//如果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[3].classList.remove('active'); //第四个li 移除active类名 圆点变成白色
lix[k].classList.add('active'); //k表示当前选中的圆点 增加active类名 变成橙色
}
// 先给四个圆点指示器 4个小li添加点击事件
for (let i = 0; i < 4; i++) {
lix[i].addEventListener('click', function () {
// 4个点其中一个被选中，全部移除类名，变成白色
lix[0].classList.remove('active');
lix[1].classList.remove('active');
lix[2].classList.remove('active');
lix[3].classList.remove('active');
//假如i=0 就是第一个点被选中 选中的变成橙色
lix[i].classList.add('active');
p = i+1 //p是轮播图当前图片的序号 更新一下
k = i //k是当前圆点的位置 更新一下
// 更换图片
img.src = "./image/banner"+p+".jpg";
})
}
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
