这是一个简单的照明材料网站,以后还会更新!
最编程
2024-05-04 16:25:09
...
1、首页效果图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>爱德照明网站首页</title>
<style>
/*=========外部样式===========*/
@charset "utf-8";
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
}
@font-face{
font-family: 'iconfont';
src: url('../fonts/iconfont.ttf');
}
body{
width: 1050px;
margin: 0 auto;
font-family: "微软雅黑";
font-size: 13px;
color: #333;
position: relative;
}
h3{
font-size: 16px;
color: #545861;
font-weight: 500;
}
h4{
font-size: 14px;
}
h5{
font-size:13px;
}
/*=========页面顶部样式===========*/
header{
height: 250px;
background-color: #FFFFEE;
background-repeat: no-repeat;
background-position: 50px;
}
.header-left{
height: 50px;
}
.header-right{
width: 250px;
height: 50px;
line-height: 50px;
float: right;
}
.header-right img{
width: 25px;
height: 21px;
}
.header-right a:active,.header-right a:visited{
text-decoration: none;
color: #111111;
}
.header-right a:active,.header-right a:hover{
color: blue;
}
.header-text{
font-size: 40px;
color: #4FAC00;
margin-top: 10px;
margin-left: 150px;
}
/*=========导航样式定义===========*/
nav{
margin-bottom:5px;
height: 36px;
background-image: linear-gradient(0deg,#9cf,#fff 60%,#9cf 100%);
border-bottom: 1px solid #DBEAEE;
}
nav ul{
list-style-type: none;
}
nav a{
display: block;
width: 90px;
height: 36px;
float: left;
padding: 0px 8px 0px 8px;
margin: 0 10px 0 20px;
text-decoration: none;
text-align: center;
font-family: tahoma;
font-size: 14px;
font-weight: bold;
}
nav ul:nth-child(1)a{
width: 50px;
}
nav ul li a:link,nav ul li a:visited{
color: #333;
}
nav ul li a:active,nav ul li a:hover{
color: #FFF;
background-image: linear-gradient(0deg,#36c,#9CF 60%,#fff 100%);
}
/*=========网页中部内容样式===========*/
#content{
width: 1050px;
height: auto;
}
/*=========热销产品列表样式===========*/
#hotproduct {
height: auto;
}
#hotproduct ul{
list-style: none;
width: 1050px;
height: 158px;
padding: 6px 0 0px 4px;
border: 2px solid #DDDDDD;
}
#hotproduct ul li{
width: 160px;
display: inline-block;
float: left;
margin-right: 10px;
margin-bottom: 1px;
position: relative;
-webkit-perspective: 250px;
}
#hotproduct ul li .evenlist{
width: 80px;
height: 148px;
border-right: 0px;
}
#hotproduct ul li img{
width: 160px;
height: 141px;
position: absolute;
left: 0;
top: 0;
-webkit-backface-visibility: hidden;
transition: all 0.5s ease-in 0s;
}
#hotproduct ul li img .fan {
-webkit-transform: rotateX(-180deg);
}
#hotproduct ul li :hover img .fan{
-webkit-transform: rotateX(0deg);
}
#hotproduct ul li :hover img .zheng{
-webkit-transform: rotateX(180deg);
}
#hotproduct strong{
display: block;
margin: 10px 0 0;
}
#hotproduct a{
display: inline-block;
width: 75px;
height: 26px;
background-color: #494949;
color: #FFF;
text-decoration: none;
text-align: center;
margin-top: 15px;
line-height: 26px;
}
#hotproduct a ::after{
content: url("https://via.placeholder.com");
padding-left: 5px;
}
#main{
clear: both;
}
#main .main_left,#main .main_center,#main .main_right{
padding: 0px 20px;
margin-top: 20px;
position: relative;
}
main h3 {
margin-bottom: 12px;
}
#main .main_left{
width: 307px;
padding-left: 0px;
float: left;
}
#main .main_left video{
width: 285px;
height: 200px;
background-color: #CCCCCC;
border: 1px solid #BBBBBB;
}
#main .main_left .lianxi {
width: 285px;
height: auto;
border: 1px solid #DDDDDD;
border-radius: 5px;
margin-top: 15px;
padding: 0 15px;
}
#main .main_left .lianxi p{
font-size: 13px;
height: 50px;
line-height: 50px;
margin-top: 8px;
}
#main .main_left .lianxi img {
width: 43px;
height: 43px;
float: left;
margin-right: 15px;
}
#main .main_center {
width: 390px;
border-left: 3px solid #DDD;
margin-bottom: 10px;
float: left;
}
#main .main_center ul li {
border-top: 1px dotted #999999;
padding: 5px 0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 19px;
}
#main .main_center .date{
color: #999999;
display: block;
margin: 0 0px 10px 10px;
}
#main .main_right {
width: 350px;
padding-right: 0px;
float: right;
}
#main .main_right .imgbox{
width: 325px;
height: 200px;
position: relative;
overflow: hidden;
}
#main .main_right .imgbox img {
width: 325px;
height: 200px;
}
#main .main_right .imgbox hgroup{
padding-top: 20px;
text-align: center;
position: absolute;
left: 0;
top: 200px;
width: 325px;
height: 200px;
background: rgba(0,0,0,0.5);
transition: all 0.5s ease-in 0s;
}
#main .main_right .imgbox hgroup h3{
color: #BBB;
}
#main .main_right .imgbox :hover hgroup{
position: absolute;
left: 0;
top: 0;
}
#main .main_right ul li {
line-height: 27px;
margin-left: 20px;
}
#main ul a :link,a :visited {
text-decoration: none;
color: #333333;
}
#main ul a:hover{
color: red;
text-decoration: underline;
}
#main .more{
position: absolute;
top: 10px;
right: 10px;
text-decoration: none;
color: #0091D8;
}
footer {
clear: both;
height: 100px;
background: #545861;
border-bottom: 1px solid #fff;
color: #ffffff;
text-align: center;
}
footer :link {
padding-top: 25px;
}
footer :link a {
display: inline-block;
width: 70px;
height: 36px;
color: #ffffff;
padding: 0px 8px 0px 8px;
margin: 0 14px 0 14px;
text-decoration: none;
text-align: center;
}
footer :link a:hover {
color: #ccc;
text-decoration: underline;
}
.online_zx {
position: fixed;
top: 30px;
right: 10px;
}
</style>
</head>
<body>
<header>
<!--===============占位符图片===================-->
<img class="header-left" src="https://via.placeholder.com/150" alt="Placeholder Image">
<div class="header-right">
<a href="#"><img src="https://via.placeholder.com/150" alt="" srcset="" />官方微信</a> <span style="color: #930;">|</span>
<a href="login.html">管理员登录</a> <span style="color: #930;">|</span>
<a href="register.html">会员注册</a> <span style="color: #930;">|</span>
</div>
<div class="header-text">照明材料</div>
</header>
<!--===================横向导航栏======================-->
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="products.html">产品中心</a></li>
<li><a href="works.html">工程案例</a></li>
<li><a href="news.html">新闻动态</a></li>
<li><a href="about.html">招商加盟</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
<!--==================内容区域=====================-->
<div id="content">
<div id="hotproduct">
<ul>
<li>
<img class="zheng" src="https://via.placeholder.com/150" alt="">
<img class="fan" src="https://via.placeholder.com/150" alt="">
</li>
<li class="evenlist">
<strong>LED射灯</strong>
专业技术<br />
高校耐用<br />
<a href="led_sd_details.html">详细信息</a>
</li>
<!--===============第二个产品图片====================-->
<li style="margin-left: -80px;">
<img class="zheng" src="https://via.placeholder.com/150" alt="">
<img class="fan" src="https://via.placeholder.com/150" alt="">
</li>
<li class="evenlist">
<strong>LED景观路灯</strong>
优越品质<br />
绿色环保<br />
<a href="led_sd_details.html">详细信息</a>
</li>
<!--===============第三个产品图片====================-->
<li style="margin-left: -80px;">
<img class="zheng" src="https://via.placeholder.com/150" alt="">
<img class="fan" src="https://via.placeholder.com/150" alt="">
</li>
<li class="evenlist">
<strong>LED映红灯</strong>
领先科技<br />
节能高效<br />
<a href="led_sd_details.html">详细信息</a>
</li>
<!--===============第四个产品图片====================-->
<li style="margin-left: -80px;">
<img class="zheng" src="https://via.placeholder.com/150" alt="">
<img class="fan" src="https://via.placeholder.com/150" alt="">
</li>
<li class="lastlist" style="position: relative;left: 90px;">
<strong>LED瓦楞灯</strong>
优越品质<br />
优质体验<br />
<a href="led_sd_details.html">详细信息</a>
</li>
</ul>
</div>
<!--===============产品展示====================-->
<div id="main">
<div class="main_left">
<h3> 产品展示</h3>
<video src="https://via.placeholder.com/150" autoplay="autoplay" loop="loop" controls="controls"></video>
<div class="lianxi">
<p><img src="https://via.placeholder.com/150" alt="" srcset="" >0633-3981234<br />400-180-6789</p>
<p><img src="https://via.placeholder.com/150" alt="">地址:山东省日照市学源路<br />科技工业园A区16号</p>
</div>
</div>
<!--===============企业新闻====================-->
<div class="main_center">
<h3>企业新闻</h3><a href="news.html" target="_blank" class="more">MORE»</a>
<ul>
<li><a href="news_details.html">因智慧汽车的概念,ADB智能LED头灯系统发展迅速,ADB智能LED头灯兴起</a></li>
<span class="date">2018-03-30</span>
<li><a href="">LED灯具有 国内业务市场研讨会LED灯具国内业务。</a></li>
<span class="date">2018-03-03</span>
<li><a href="">车用、MiniLED等新产品助力,亿光&荣创看好业务运营服务工作。</a></li>
<span class="date">2018-03-03</span>
<li><a href="">OLED照明市场的机会与挑战-LEDinside</a></li>
<span class="date">2018-03-03</span>
<li><a href="">智能照明进入高速发展,工业及商业 为最大应用场景。</a></li>
<span class="date">2018-03-03</span>
</ul>
</div>
<!--===============客户案例====================-->
<div class="main_right">
<h3>客户案例</h3><a href="works.html" target="_blank" class="more">MORE»</a>
<div class="imgbox">
<img src="https://via.placeholder.com/150" alt="" srcset="" />
<hgroup>
<h3>日照水运基地</h3>
<h3>日照奥林匹克水上公园</h3>
<h3>日照水上运动中心夜景亮化</h3>
</hgroup>
</div>
<ul>
<li><a href="">乌海*亮化工程 --2016年7月完工,美丽的城市。</a></li>
<li><a href="">夜景亮化工程公司 --美丽一座城市的夜晚。</a></li>
<li><a href="">小区数码管亮化工程 --方便大家出行。</a></li>
<li><a href="">水世界楼体亮化 --旅游盛景,等你欣赏美景。</a></li>
<li><a href="">开发区委会夜景亮化 --2018年3月完工。</a></li>
</ul>
</div>
</div>
</div>
<!--===============页尾====================-->
<footer>
<p class="link">
<a href="index.html">网页首页</a>|<a href="products.html">产品中心</a>|<a href="connect.html">联系方式</a>|<a href="news.html">新闻动态</a>
</p>
<p>地址:山东省日照市学院路 爱德照明科技有限公司</p>
</footer>
<div class="online_zx"><a href="#"><img src="https://via.placeholder.com/150" alt="" /></a></div>
</body>
</html>
2、产品中心页面
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>爱德照明网站首页</title>
<style>
/*=========页面顶部样式===========*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
}
body{
width: 1050px;
margin: 0 auto;
font-family: "微软雅黑";
font-size: 13px;
color: #333;
position: relative;
}
h3{
font-size: 16px;
color: #545861;
font-weight: 500;
}
header{
height: 250px;
background-color: #FFFFEE;
background-repeat: no-repeat;
background-position: 50px;
}
.header-left{
height: 50px;
}
.header-right{
width: 250px;
height: 50px;
line-height: 50px;
float: right;
}
.header-right img{
width: 25px;
height: 21px;
}
.header-right a:active,.header-right a:visited{
text-decoration: none;
color: #111111;
}
.header-right a:active,.header-right a:hover{
color: blue;
}
.header-text{
font-size: 40px;
color: #4FAC00;
margin-top: 10px;
margin-left: 150px;
}
/*=========导航样式定义===========*/
nav{
margin-bottom:5px;
height: 36px;
background-image: linear-gradient(0deg,#9cf,#fff 60%,#9cf 100%);
border-bottom: 1px solid #DBEAEE;
}
nav ul{
list-style-type: none;
}
nav a{
display: block;
width: 90px;
height: 36px;
float: left;
padding: 0px 8px 0px 8px;
margin: 0 10px 0 20px;
text-decoration: none;
text-align: center;
font-family: tahoma;
font-size: 14px;
font-weight: bold;
}
nav ul:nth-child(1)a{
width: 50px;
}
nav ul li a:link,nav ul li a:visited{
color: #333;
}
nav ul li a:active,nav ul li a:hover{
color: #FFF;
background-image: linear-gradient(0deg,#36c,#9CF 60%,#fff 100%);
}
/*=========网页中部内容样式===========*/
#content{
width: 1050px;
height: auto;
}
/*=========热销产品列表样式===========*/
footer {
clear: both;
height: 100px;
background: #545861;
border-bottom: 1px solid #fff;
color: #ffffff;
text-align: center;
}
footer :link {
padding-top: 25px;
}
footer :link a {
display: inline-block;
width: 70px;
height: 36px;
color: #ffffff;
padding: 0px 8px 0px 8px;
margin: 0 14px 0 14px;
text-decoration: none;
text-align: center;
}
footer :link a:hover {
color: #ccc;
text-decoration: underline;
}
.online_zx {
position: fixed;
top: 30px;
right: 10px;
}
/*=========左侧样式===========*/
#content {
width: 1050px;
height: auto;
}
#content-left {
width: 250px;
height: auto;
float: left;
}
#content-left ul {
list-style: none;
width: 250px;
background: #fff;
border-radius: 10px;
margin: 0 auto;
}
#content-left ul li {
width: 250px;
height: 50px;
margin-bottom: 1px;
padding-left: 80px;
background: #DDDDDD;
font-size: 14px;
line-height: 55px;
text-align: left;
}
#content ul li a:link,#content-left ul li a:visited{
color: #333;
}
#content-left ul li a:hover{
color: #0091D8;
}
#content-left ul .tp {
font-size: 18px;
font-weight: 500;
padding: 0px;
text-align: center;
width: 250px;
height: 65px;
line-height: 80px;
background: #BBB;
border-radius: 10px 0 0;
}
#content-left ul .yj {
height: 20px;
border-radius: 0 0 0 10px;
margin-bottom: 5px;
}
#content-right {
float: right;
width: 800px;
height: auto;
}
#content-right .tt {
height: 40px;
width: 785px;
margin-left: 15px;
border-bottom: 2px solid #D6D6D6;
}
#content-right h3 {
font-weight: 500;
font-size: 16px;
border-bottom: 2px solid #0091D8;
width: 90px;
border-bottom: 10px 0 7px 5px;
}
#content-right #article {
width: 800px;
height: auto;
}
#content-right #article .products{
width: 800px;
}
#article .products ul {
list-style: none;
}
#article .products ul li {
width: 180px;
height: 210px;
float: left;
margin: 10px;
font-size: 14px;
text-align: center;
}
#article .products ul li img {
width: 180px;
height: 180px;
margin: 10px;
}
#article .products ul li a:hover {
color: #0091D8;
}
#article .products ul li a:hover img {
border: 2px solid #0091D8;
}
</style>
</head>
<body>
<header>
<!--===============占位符图片===================-->
<img class="header-left" src="https://via.placeholder.com/150" alt="Placeholder Image">
<div class="header-right">
<a href="#"><img src="https://via.placeholder.com/150" alt="" srcset="" />官方微信</a> <span style="color: #930;">|</span>
<a href="login.html">管理员登录</a> <span style="color: #930;">|</span>
<a href="register.html">会员注册</a> <span style="color: #930;">|</span>
</div>
<div class="header-text">照明材料</div>
</header>
<!--===================横向导航栏======================-->
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="products.html">产品中心</a></li>
<li><a href="works.html">工程案例</a></li>
<li><a href="news.html">新闻动态</a></li>
<li><a href="about.html">招商加盟</a></li>
<li><a href="connect.html">联系我们</a></li>
</ul>
</nav>
<!--==================内容区域=====================-->
<div id="content">
<aside id="content-left">
<ul>
<li class="tp">产品中心</li>
<li><a href="">LED景观路灯</a> <img src="https://via.placeholder.com/150" alt="" /></li>
<li><a href="">LED射灯</a></li>
<li><a href="">LED映红灯</a></li>
<li><a href="">LED瓦楞灯</a></li>
<li><a href="">LED数码灯</a></li>
<li><a href="">LED点光源</a></li>
<li><a href="">LED墙角灯</a></li>
<li class="yj"></li>
</ul>
</aside>
<div id="content-right">
<div class="tt">
<h3>景观路灯</h3>
</div>
<div id="article">
<div class="products">
<ul>
<li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
仿古锥形广场灯柱
</a></li>
<li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
多头造型LED景观灯
</a></li>
<li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
镂空方柱形景观柱
</a></li>
<li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
莲花造型广场景观灯柱
</a></li>
<li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
内透光方柱景观灯
</a></li>
<li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
现代园林庭院景观灯
</a></li>
<li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
古典浮雕祥云景观灯柱
</a></li>
<li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
立柱仿云石LED景观灯
</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="page" style="clear: both;text-align: center;padding: 15px 0;">
<hr>
<ul style="margin-top: 10px;">
<li style="display: inline;"><a href="" style="display: inline-block;width: 20px;border: 1px solid #0091D8;font-size: 14px;text-align: center;line-height: 20px;border-radius: 50%;">«</a></li>
<li style="display: inline;"><a href="" style="display: inline-block;width: 20px;border: 1px solid #0091D8;font-size: 14px;text-align: center;line-height: 20px;border-radius: 50%;">‹</a></li>
<li style="display: inline;"><a href="" style="display: inline-block;width: 20px;border: 1px solid #0091D8;font-size: 14px;text-align: center;line-height: 20px;border-radius: 50%;">1</a></li>
<li style="display: inline;"><a href="" style="display: inline-block;width: 20px;border: 1px solid #0091D8;font-size: 14px;text-align: center;line-height: 20px;border-radius: 50%;">2</a></li>
<li style="display: inline;"><a href="" style="display: inline-block;width: 20px;border: 1px solid #0091D8;font-size: 14px;text-align: center;line-height: 20px;border-radius: 50%;">3</a></li>
<li style="display: inline;"><a href="" style="display: inline-block;width: 20px;border: 1px solid #0091D8;font-size: 14px;text-align: center;line-height: 20px;border-radius: 50%;">4</a></li>
<li style="display: inline;"><a href="" style="display: inline-block;width: 20px;border: 1px solid #0091D8;font-size: 14px;text-align: center;line-height: 20px;border-radius: 50%;">5</a></li>
<li style="display: inline;"><a href="" style="display: inline-block;width: 20px;border: 1px solid #0091D8;font-size: 14px;text-align: center;line-height: 20px;border-radius: 50%;">6</a></li>
<li style="display: inline;"><a href="" style="display: inline-block;width: 20px;border: 1px solid #0091D8;font-size: 14px;text-align: center;line-height: 20px;border-radius: 50%;">›</a></li>
<li style="display: inline;"><a href="" style="display: inline-block;width: 20px;border: 1px solid #0091D8;font-size: 14px;text-align: center;line-height: 20px;border-radius: 50%;">»</a></li>
</ul>
</div>
<!--===============页尾====================-->
<footer>
<p class="link">
<a href="index.html">网页首页</a>|<a href="products.html">产品中心</a>|<a href="connect.html">联系方式</a>|<a href="news.html">新闻动态</a>
</p>
<p>地址:山东省日照市学院路 爱德照明科技有限公司</p>
</footer>
<div class="online_zx"><a href="#"><img src="https://via.placeholder.com/150" alt="" /></a></div>
</body>
</html>
3、工程案例页面效果图
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>爱德照明网站首页</title>
<style>
/*=========页面顶部样式===========*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
}
body{
width: 1050px;
margin: 0 auto;
font-family: "微软雅黑";
font-size: 13px;
color: #333;
position: relative;
}
h3{
font-size: 16px;
color: #545861;
font-weight: 500;
}
header{
height: 250px;
background-color: #FFFFEE;
background-repeat: no-repeat;
background-position: 50px;
}
.header-left{
height: 50px;
}
.header-right{
width: 250px;
height: 50px;
line-height: 50px;
float: right;
}
.header-right img{
width: 25px;
height: 21px;
}
.header-right a:active,.header-right a:visited{
text-decoration: none;
color: #111111;
}
.header-right a:active,.header-right a:hover{
color: blue;
}
.header-text{
font-size: 40px;
color: #4FAC00;
margin-top: 10px;
margin-left: 150px;
}
/*=========导航样式定义===========*/
nav{
margin-bottom:5px;
height: 36px;
background-image: linear-gradient(0deg,#9cf,#fff 60%,#9cf 100%);
border-bottom: 1px solid #DBEAEE;
}
nav ul{
list-style-type: none;
}
nav a{
display: block;
width: 90px;
height: 36px;
float: left;
padding: 0px 8px 0px 8px;
margin: 0 10px 0 20px;
text-decoration: none;
text-align: center;
font-family: tahoma;
font-size: 14px;
font-weight: bold;
}
nav ul:nth-child(1)a{
width: 50px;
}
nav ul li a:link,nav ul li a:visited{
color: #333;
}
nav ul li a:active,nav ul li a:hover{
color: #FFF;
background-image: linear-gradient(0deg,#36c,#9CF 60%,#fff 100%);
}
/*=========网页中部内容样式===========*/
#content{
width: 1050px;
height: auto;
}
/*=========热销产品列表样式===========*/
footer {
clear: both;
height: 100px;
background: #545861;
border-bottom: 1px solid #fff;
color: #ffffff;
text-align: center;
}
footer :link {
padding-top: 25px;
}
footer :link a {
display: inline-block;
width: 70px;
height: 36px;
color: #ffffff;
padding: 0px 8px 0px 8px;
margin: 0 14px 0 14px;
text-decoration: none;
text-align: center;
}
footer :link a:hover {
color: #ccc;
text-decoration: underline;
}
.online_zx {
position: fixed;
top: 30px;
right: 10px;
}
/*=========左侧样式===========*/
#content {
width: 1050px;
height: auto;
}
#content-left {
width: 250px;
height: auto;
float: left;
}
#content-left ul {
list-style: none;
width: 250px;
background: #fff;
border-radius: 10px;
margin: 0 auto;
}
#content-left ul li {
width: 250px;
height: 50px;
margin-bottom: 1px;
padding-left: 80px;
background: #DDDDDD;
font-size: 14px;
line-height: 55px;
text-align: left;
}
#content ul li a:link,#content-left ul li a:visited{
color: #333;
}
#content-left ul li a:hover{
color: #0091D8;
}
#content-left ul .tp {
font-size: 18px;
font-weight: 500;
padding: 0px;
text-align: center;
width: 250px;
height: 65px;
line-height: 80px;
background: #BBB;
border-radius: 10px 0 0;
}
#content-left ul .yj {
height: 20px;
border-radius: 0 0 0 10px;
margin-bottom: 5px;
}
#content-right {
float: right;
width: 800px;
height: auto;
}
#content-right .tt {
height: 40px;
width: 785px;
margin-left: 15px;
border-bottom: 2px solid #D6D6D6;
}
#content-right h3 {
font-weight: 500;
font-size: 16px;
border-bottom: 2px solid #0091D8;
width: 90px;
border-bottom: 10px 0 7px 5px;
}
#content-right #article {
width: 800px;
height: auto;
}
#content-right #article .products{
width: 800px;
}
#article .products ul {
list-style: none;
}
#article .products ul li {
width: 180px;
height: 210px;
float: left;
margin: 10px;
font-size: 14px;
text-align: center;
}
#article .products ul li img {
width: 180px;
height: 180px;
margin: 10px;
}
#article .products ul li a:hover {
color: #0091D8;
}
#article .products ul li a:hover img {
border: 2px solid #0091D8;
}
</style>
</head>
<body>
<header>
<!--===============占位符图片===================-->
<img class="header-left" src="https://via.placeholder.com/150" alt="Placeholder Image">
<div class="header-right">
<a href="#"><img src="https://via.placeholder.com/150" alt="" srcset="" />官方微信</a> <span style="color: #930;">|</span>
<a href="login.html">管理员登录</a> <span style="color: #930;">|</span>
<a href="register.html">会员注册</a> <span style="color: #930;">|</span>
</div>
<div class="header-text">照明材料</div>
</header>
<!--===================横向导航栏======================-->
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="companyfile.html">关于我们</a></li>
<li><a href="products.html">产品中心</a></li>
<li><a href="works.html">工程案例</a></li>
<li><a href="news.html">新闻动态</a></li>
<li><a href="about.html">招商加盟</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
<!--==================内容区域=====================-->
<div id="content">
<aside id="content-left">
<ul>
<li class="tp">工程案例</li>
<li><a href="worls_detail.html">客户案例</a> <img src="https://via.placeholder.com/150" alt="" /></li>
<li><a href="">数码灯案例</a></li>
<li><a href="">西培灯案例</a></li>
<li><a href="">墙角灯案例</a></li>
<li class="yj"></li>
</ul>
</aside>
<div id="content-right">
<div class="tt">
<h3>客户案例</h3>
</div>
<div id="article">
<div class="products">
<ul>
<li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
英伦风格商场亮化工程夜景
<dd style="color: #333;font-size: 11px;position: relative;width: 250px;left: -25px;opacity: 0.4;">施工时间 2015-03-21 投资 ¥12.35万</dd>
</a></li>
<li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
<p style="margin-left: -10px;">内蒙古广场夜景亮化工程</p>
<dd style="color: #333;font-size: 11px;position: relative;width: 250px;left: -22px;opacity: 0.4;">施工时间 2015-03-21 投资 ¥12.35万</dd>
</a></li>
<li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
<p style="margin-left: -50px;">七天酒店亮化工程</p>
<dd style="color: #333;font-size: 11px;position: relative;width: 250px;left: -30px;opacity: 0.4;">施工时间 2015-08-6 投资 ¥8.73万</dd>
</a></li>
<li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
<p style="margin-left: -50px;">奥林匹克亮化工程</p>
<dd style="color: #333;font-size: 11px;position: relative;width: 250px;left: -30px;opacity: 0.4;">施工时间 2008-08-1 投资 ¥8.73万</dd>
</a></li>
<li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
<p style="margin-left: -40px;">城市步行街夜景亮化</p>
<dd style="color: #333;font-size: 11px;position: relative;width: 250px;left: -25px;opacity: 0.4;">施工时间 2015-06-21 投资 ¥11.03万</dd>
</a></li>
<li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
<p style="margin-left: -20px;">长乐首席观江豪宅亮化</p>
<dd style="color: #333;font-size: 11px;position: relative;width: 250px;left: -25px;opacity: 0.4;">施工时间 2018-01-6 投资 ¥7.32万</dd>
</a></li>
<li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
<p style="margin-left: -35px;">城市公园景观灯夜景</p>
<dd style="color: #333;font-size: 11px;position: relative;width: 250px;left: -25px;opacity: 0.4;">施工时间 2017-07-04 投资 ¥4.17万</dd>
</a></li>
<li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
<p style="margin-left: -20px;">智能家庭LED射灯亮化</p>
<dd style="color: #333;font-size: 11px;position: relative;width: 250px;left: -25px;opacity: 0.4;">施工时间 2022-01-6 投资 ¥17.32万</dd>
</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="page" style="clear: both;text-align: center;padding: 15px 0;">
<hr>
<ul style="margin-top: 10px;">
<li style="display: inline;"><a href="" style="display: inline-block;width: 20px;border: 1px solid #0091D8;font-size: 14px;text-align: center;line-height: 20px;border-radius: 50%;">«</a></li>
<li style="display: inline;"><a href="" style="display: inline-block;width: 20px;border: 1px solid #0091D8;font-size: 14px;text-align: center;line-height: 20px;border-radius: 50%;">‹</a></li>
<li style="display: inline;"><a href="" style="display: inline-block;width: 20px;border: 1px solid #0091D8;font-size: 14px;text-align: center;line-height: 20px;border-radius: 50%;">1</a></li>
<li style="display: inline;"><a href="" style="display: inline-block;width: 20px;border: 1px solid #0091D8;font-size: 14px;text-align: center;line-height: 20px;border-radius: 50%;">2</a></li>
<li style="display: inline;"><a href="" style="display: inline-block;width: 20px;border: 1px solid #0091D8;font-size: 14px;text-align: center;line-height: 20px;border-radius: 50%;">3</a></li>
<li style="display: inline;"><a href="" style="display: inline-block;width: 20px;border: 1px solid #0091D8;font-size: 14px;text-align: center;line-height: 20px;border-radius: 50%;">4</a></li>
<li style="display: inline;"><a href="" style="display: inline-block;width: 20px;border: 1px solid #0091D8;font-size: 14px;text-align: center;line-height: 20px;border-radius: 50%;">5</a></li>
<li style="display: inline;"><a href="" style="display: inline-block;width: 20px;border: 1px solid #0091D8;font-size: 14px;text-align: center;line-height: 20px;border-radius: 50%;">6</a></li>
<li style="display: inline;"><a href="" style="display: inline-block;width: 20px;border: 1px solid #0091D8;font-size: 14px;text-align: center;line-height: 20px;border-radius: 50%;">›</a></li>
<li style="display: inline;"><a href="" style="display: inline-block;width: 20px;border: 1px solid #0091D8;font-size: 14px;text-align: center;line-height: 20px;border-radius: 50%;">»</a></li>
</ul>
</div>
<!--===============页尾====================-->
<footer>
<p class="link">
<a href="index.html">网页首页</a>|<a href="products.html">产品中心</a>|<a href="contact.html">联系方式</a>|<a href="news.html">新闻动态</a>
</p>
<p>地址:山东省日照市学院路 爱德照明科技有限公司</p>
</footer>
<div class="online_zx"><a href="#"><img src="https://via.placeholder.com/150" alt="" /></a></div>
</body>
</html>
4、新闻页面效果图:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>爱德照明网站首页</title>
<style>
/*=========外部样式===========*/
@charset "utf-8";
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
}
@font-face{
font-family: 'iconfont';
src: url('../fonts/iconfont.ttf');
}
body{
width: 1050px;
margin: 0 auto;
font-family: "微软雅黑";
font-size: 13px;
color: #333;
positio
上一篇: OpenWRT 自己手动添加广域网端口,拨号但无法上网
下一篇: 伪静态隐藏 php 后缀 - 掘金
推荐阅读
-
这是一个简单的照明材料网站,以后还会更新!
-
41 个下载免费 3D 模型的最佳网站-使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 17. Clara.io Clara.io 是一个创建 3D 内容的全球平台,也是一个培养新 3D 艺术家的社区。Clara.io 提供+100,000个免费的3D模型,包括OBJ,Blend,STL,FBX,DAE,Babylon.JS,Three.JS格式,用于 Clara.io,Unity 3D,Blender,Sketchup,Cinema 4D,3DS Max和Maya。 使用说明:免费,标准和专业帐户仅供个人使用,如果您需要将 clara.io 用于商业用途,请与销售团队联系。 18. 3DExport 3DExport是一个市场,您可以在其中购买和销售用于CG项目的3D模型,3D打印模型和纹理。它提供15 +不同的3D格式供下载,如3DS MAX(.max),Cinema4D(.c4d),Maya(.mb,.ma),Lightwave(.lwo),Softimage(.xsi),Wavefront OBJ(.obj),Autodesk FBX(.fbx)等。它还提供15种不同的语言! 使用说明:免费下载仅供个人和非商业用途。 19. 3D Warehouse 3D Warehouse是一个开放的库,允许用户共享和下载SketchUp 3D模型,用于建筑,设计,施工和娱乐!任何人都可以免费制作,修改和重新上传内容到3D仓库,您可以找到任何您能想到的东西,如家具,电子产品,室内产品等。 使用说明:3D Warehouse中的所有模型都是免费的,因此任何人都可以下载文件以用于SketchUp甚至其他软件,如AutoCAD,Revit和ArchiCAD。 20. CadNav.com CadNav是CGI平面设计师和CAD / CAM / CAE工程师的在线3D模型库,我们提供超过50000 +免费3D模型和CAD模型下载。在CadNav网站上,您可以下载高质量的多边形网格3D模型,3D CAD实体对象,纹理,Vray材料,3D作品,CAD图纸等。 使用说明:免费下载仅供个人和非商业用途。 21. All3dfree.net 就像网站名称一样,它提供免费的3D模型,还包括Vray材料,CAD块,2d和3d纹理集合,无需注册即可免费下载。它是不断更新的,因此您可以查找或请求3DS,MAX,C4D,skp,OBJ,FBX,MTL等格式的模型。 使用说明:所有资源均不允许用于商业用途,否则您将承担责任。 22. Hum3D 自2005年以来,Hum3D帮助来自3多个国家的80D艺术家节省3D建模时间,并制作逼真的3D模型,用于电影,视频游戏,AR应用程序和可视化。所有模型均由首席3D艺术家进行验证,他们检查其是否符合专业要求和最新的3D建模标准。 使用说明:免费下载仅供个人和非商业用途。 23. Artist-3D.com 艺术家-3D 库存的免费 3D 模型下载按通用类别排序。它为人体解剖学、汽车、家具、火箭、卫星等模型提供 AutoDesk 3DS Max 格式。您还可以在浏览他们的网站时找到教程和类似类型的建模。 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 24. Free the models 就像本网站的标题一样,它为3d应用程序和3d游戏引擎提供免费的内容模型。您可以为您的任何项目找到许多有趣且有用的模型!它提供3ds,wavefront,bryce,poser,lightwave,md2和unity3d格式的模型。还有一个很棒的纹理集合,可以在您最喜欢的建模和渲染程序中使用。 使用说明:您从这里下载的所有内容都可以免费使用,除非它不能包含在另一个免费的网络或CD收藏中,也不能单独出售。否则,您可以在商业游戏,3D应用程序或渲染作品中使用它。您不必提供信用,但如果您这样做,那就太好了。 25. Resources.blogscopia 本网站由一家名为Scopia的公司创建。他们制作3D图像和视频,您可以找到许多为CGI工作的信息架构设计的模型,所有这些都可以在现实生活中使用。您可以免费下载它们,但是,如果您想一次下载它们,您可以支付 3 到 9 欧元。 使用说明:您可以免费下载模型部分的所有文件。每个压缩文件都包含您也可以在此处找到的许可证。基本上,您可以对文件执行任何操作。唯一的限制是不归属于Scopia的重新分发。 26.ambientCG 1000+公共领域PBR材料适合所有人!环境CG是使用许多不同的方法和资产类型创建的,例如照片纹理(PBR),贴花(PBR),图集(PBR),照片纹理(普通),物质存档(SBSAR),雕刻画笔,3D模型和地形。您可以在所有项目中*使用它们! 使用说明:在 ambientCG 上提供下载的所有 PBR 材料、画笔、照片和 3D 模型均根据知识共享 CC0 1.0 通用许可提供。您可以复制、修改、分发和执行作品,即使是出于商业目的,也无需征得许可。信用将不胜感激。 不要满足于平庸的大理石纹理 - 立即使用我们的免费PBR大理石纹理升级您的3D设计。 27.Pixar One Twenty Eight 这是一个提供官方动画行业经典纹理的网站:皮克斯,创建于 1993 年,该纹理库包括 128 个重复纹理,现在免费提供。 它包含您来到的纹理,包括砖块和动物毛皮。肯定会有一些你可以使用的东西。 使用说明:皮克斯动画工作室的《Pixar One Twenty Eight》根据知识共享署名4.0国际许可协议进行许可。即使出于商业目的,您也可以重新混合、调整和构建您的作品,只要您以相同的条款对新创作进行信用和许可。 访问数以千计的免费纹理并提升您的设计游戏 - 立即开始下载! 28. 3DXO 即使有近 620 个免费贴纸可供下载,3DXO 也不是最大的资源,但它的内容非常有用,不需要注册。无论是简单的墙壁或地板,还是一些奇怪的小东西,您都需要的纹理都可以在此网站上看到。 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 29. 3DModelsCC0 3DModelsCC0 与其他产品的不同之处在于它包含超过 250+ 个高质量 3D 模型,并且本网站上的所有内容都是免费的,完全是公共领域!使用我们的模型时无需信用或归属! 使用说明:为每个人提供完全免费的公共领域内容。 30.Sketch up texture club Sketchup Texture Club是一个非营利性的教育和信息门户网站,由3D社区的图像促进协会管理,特别强调面向学生和建筑和室内设计专业人士的可视化和渲染技术,以及所有正在学习3D可视化的人。 使用说明:您无需支付版税或使用费。纹理可以免费下载和使用。不允许将纹理作为竞争产品出售或重新分发,即使图像被修改也是如此。 31. FlippedNormals FlippedNormal 是一个提供计算机图形和 3D 资产的市场,您可以找到许多用于雕刻、建模、纹理、概念艺术、3D 模型、游戏资产或课程的高级资产! 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 32. NASA 3D NASA 3D网站是一个在线门户,提供与太空和各种NASA任务相关的大量三维模型和模拟。该网站是用户友好的,并提供有关每个型号的详细信息。该网站允许用户探索和下载几种不同格式的模型,包括 OBJ、STL 和 FBX,只需单击下载按钮即可。 使用说明: 要下载模型,只需单击模型页面上的下载按钮并选择所需的格式。 33. 3DAGOGO (Astroprint) 3DAGOGO 是一个提供广泛 3D 模型的网站,包括角色、车辆和建筑物。3DAGOGO 的独特功能之一是它专注于适合 3D 打印的模型,使其成为希望创建物理原型或模型的设计师的绝佳资源。要使用 3DAGOGO,设计师只需在网站上搜索他们正在寻找的模型类型,然后下载 STL 格式的文件。 使用说明: 要使用 3DAGOGO,只需搜索所需的 3D 模型类型并下载 STL 格式的文件。根据需要自定义模型,并确保在将其用于商业目的之前检查使用权限。 34. FreeCAD FreeCAD是一款了不起的3D建模软件,可让您在计算机上创建令人难以置信的3D设计。该软件可免费下载和使用,它提供了广泛的工具和功能,可用于创建用于各种目的的3D模型。 该网站易于浏览,您可以找到开始使用FreeCAD的所有必要信息。此外,该网站还提供一系列教程和指南,可帮助您了解 3D 建模的来龙去脉。 使用说明: 要下载模型,请访问网站并从库中选择所需的模型。该网站还提供了一系列使用该软件的教程和指南。 35. Pinshape Pinshape是一个提供一系列3D打印模型的网站。网站上提供的型号质量很高,因此您可以确保您的最终印刷产品看起来很棒。该网站提供了广泛的模型,包括从家居用品到小雕像和珠宝的所有物品。 但这还不是Pinshape所能提供的全部!该网站还允许用户上传和共享自己的3D模型。这意味着您不仅可以下载出色的模型,还可以通过分享自己的设计为社区做出贡献。此外,Pinshape 提供了一系列自定义选项,因此您可以调整和调整模型以满足您的特定需求。 使用说明: 要下载模型,请在网站上创建一个帐户,搜索所需的模型,然后单击下载按钮。该网站还为每种型号提供了一系列定制选项。 36.Yeggi Yeggi 提供了大量免费的 3D 模型,您可以下载各种格式的模型,例如 STL、OBJ 和 FBX。该网站易于使用,您可以按关键字、类别或特定网站搜索模型。 Yeggi 对于任何寻找 3D 模型的人来说都是一个很好的资源。它提供了大量的模型集合,从日常物品到复杂的机械,以及介于两者之间的一切。该网站的收藏量在不断增长,每天都有新的型号增加。 使用说明: 要下载模型,请在网站上搜索所需的模型,然后单击下载按钮。该网站还提供指向托管模型的原始网站的链接。 37. Open3DModel 来自开放3D模型的图像 Open3DModel具有各种类别的模型,包括建筑,车辆和角色。无论您需要建筑物,汽车还是人的3D模型,都可以在此网站上找到。 该网站易于浏览,您可以按类别或关键字搜索模型。每个模型都附带预览图像和详细信息,例如文件格式、大小和多边形数量。此信息可以帮助您选择适合您需求的模型。 使用说明: 要下载模型,请访问网站,从库中选择所需的模型,然后单击下载按钮。 使用最好的 3D 资产管理工具简化您的 3D 制作流程。立即试用它们,将您的 3D 项目提升到一个新的水平! 38. 3DExport 对于那些为其 3D 设计项目寻找 3D 模型、纹理和其他资源的人来说,该平台是一个很好的资源。该网站有大量模型可供选择,包括 3D 打印对象、游戏资产等。用户可以按类别、文件格式或价格范围浏览,以找到适合其项目的完美资源。此外,3DExport 还提供一系列教程和其他 3D 资源,以帮助用户提高技能并创建更令人印象深刻的设计。 使用说明: 要使用 3DExport,只需创建一个帐户并浏览可用型号。您可以按类别、格式和价格进行搜索,以找到所需的型号。找到喜欢的模型后,只需下载它并开始在您的项目中使用它。 39.Blend Swap Blend Swap是一个社区驱动的市场,提供与Blender软件兼容的各种免费3D模型。该平台允许用户共享和下载模型、纹理和其他资产,以便在他们的项目中使用。 使用说明: 创建免费帐户后,您可以浏览社区上传的大量3D模型。当您找到要使用的一个时,只需下载它并将其导入您选择的 3D 软件即可。 40. 3DShook 3DShook 是一个高级 3D 模型市场,提供一系列用于建筑、游戏等各个行业的高质量模型。该平台提供基于订阅的模型,具有不同的定价计划,允许用户访问一系列模型。 使用说明: 注册免费帐户后,只需浏览3D模型库,选择您喜欢的模型,然后以您需要的格式下载它们。 41. Smithsonian X 3D 史密森尼 X 3D 对于正在寻找历史文物和文物的高质量 3D 模型的设计师来说,这是一个独特的资源。该平台提供了大量3D模型,这些模型是根据史密森尼博物馆和研究中心中的真实物体扫描创建的。 使用说明: