devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

这是一个简单的照明材料网站，后续还会更新

作者：繁依Fanyi0 | 2024-05-06 10:38:39

赞

踩

这是一个简单的照明材料网站，后续还会更新

1、首页效果图

代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>爱德照明网站首页</title>
  6.         <style>
  7.             /*=========外部样式===========*/
  8.             @charset "utf-8";
  9.             *{
  10.                 margin: 0;
  11.                 padding: 0;
  12.                 box-sizing: border-box;
  13.             }
  14.             a{
  15.                 text-decoration: none;
  16.             }
  17.             @font-face{
  18.                 font-family: 'iconfont';
  19.                 src: url('../fonts/iconfont.ttf');
  20.             }
  21.             body{
  22.                 width: 1050px;
  23.                 margin: 0 auto;
  24.                 font-family: "微软雅黑";
  25.                 font-size: 13px;
  26.                 color: #333;
  27.                 position: relative;
  28.             }
  29.             h3{
  30.                 font-size: 16px;
  31.                 color: #545861;
  32.                 font-weight: 500;
  33.             }
  34.             h4{
  35.                 font-size: 14px;
  36.             }
  37.             h5{
  38.                 font-size:13px;
  39.             }
  40.             /*=========页面顶部样式===========*/
  41.             header{
  42.                 height: 250px;
  43.                 background-color: #FFFFEE;
  44.                 background-repeat: no-repeat;
  45.                 background-position: 50px;
  46.             }
  47.             .header-left{
  48.                 height: 50px;
  49.             }
  50.             .header-right{
  51.                 width: 250px;
  52.                 height: 50px;
  53.                 line-height: 50px;
  54.                 float: right;
  55.             }
  56.             .header-right img{
  57.                 width: 25px;
  58.                 height: 21px;
  59.             }
  60.             .header-right a:active,.header-right a:visited{
  61.                 text-decoration: none;
  62.                 color: #111111;
  63.             }
  64.             .header-right a:active,.header-right a:hover{
  65.                 color: blue;
  66.             }
  67.             .header-text{
  68.                 font-size: 40px;
  69.                 color: #4FAC00;
  70.                 margin-top: 10px;
  71.                 margin-left: 150px;
  72.             }
  73.             /*=========导航样式定义===========*/
  74.             nav{
  75.                 margin-bottom:5px;
  76.                 height: 36px;
  77.                 background-image: linear-gradient(0deg,#9cf,#fff 60%,#9cf 100%);
  78.                 border-bottom: 1px solid #DBEAEE;
  79.             }
  80.             nav ul{
  81.                 list-style-type: none;
  82.             }
  83.             nav a{
  84.                 display: block;
  85.                 width: 90px;
  86.                 height: 36px;
  87.                 float: left;
  88.                 padding: 0px 8px 0px 8px;
  89.                 margin: 0 10px 0 20px;
  90.                 text-decoration: none;
  91.                 text-align: center;
  92.                 font-family: tahoma;
  93.                 font-size: 14px;
  94.                 font-weight: bold;
  95.             }
  96.             nav ul:nth-child(1)a{
  97.                 width: 50px;
  98.             }
  99.             nav ul li a:link,nav ul li a:visited{
  100.                 color: #333;
  101.             }
  102.             nav ul li a:active,nav ul li a:hover{
  103.                 color: #FFF;
  104.                 background-image: linear-gradient(0deg,#36c,#9CF 60%,#fff 100%);
  105.             }
  106.             /*=========网页中部内容样式===========*/
  107.             #content{
  108.                 width: 1050px;
  109.                 height: auto;
  110.             }
  111.             /*=========热销产品列表样式===========*/
  112.             #hotproduct {
  113.                 height: auto;
  114.             }
  115.             #hotproduct ul{
  116.                 list-style: none;
  117.                 width: 1050px;
  118.                 height: 158px;
  119.                 padding: 6px 0 0px 4px;
  120.                 border: 2px solid #DDDDDD;
  121.             }
  122.             #hotproduct ul li{
  123.                 width: 160px;
  124.                 display: inline-block;
  125.                 float: left;
  126.                 margin-right: 10px;
  127.                 margin-bottom: 1px;
  128.                 position: relative;
  129.                 -webkit-perspective: 250px;
  130.             }
  131.             #hotproduct ul li .evenlist{
  132.                 width: 80px;
  133.                 height: 148px;
  134.                 border-right: 0px;
  135.             }
  136.             #hotproduct ul li img{
  137.                 width: 160px;
  138.                 height: 141px;
  139.                 position: absolute;
  140.                 left: 0;
  141.                 top: 0;
  142.                 -webkit-backface-visibility: hidden;
  143.                 transition: all 0.5s ease-in 0s;
  144.             }
  145.             #hotproduct ul li img .fan {
  146.                 -webkit-transform: rotateX(-180deg);
  147.             }
  148.             #hotproduct ul li :hover img .fan{
  149.                 -webkit-transform: rotateX(0deg);
  150.             }
  151.             #hotproduct ul li :hover img .zheng{
  152.                 -webkit-transform: rotateX(180deg);
  153.             }
  154.             #hotproduct strong{
  155.                 display: block;
  156.                 margin: 10px 0 0;
  157.             }
  158.             
  159.             #hotproduct a{
  160.                 display: inline-block;
  161.                 width: 75px;
  162.                 height: 26px;
  163.                 background-color: #494949;
  164.                 color: #FFF;
  165.                 text-decoration: none;
  166.                 text-align: center;
  167.                 margin-top: 15px;
  168.                 line-height: 26px;
  169.             }
  170.             #hotproduct a ::after{
  171.                 content: url("https://via.placeholder.com");
  172.                 padding-left: 5px;
  173.             }
  174.             #main{
  175.                 clear: both;
  176.             }
  177.             #main .main_left,#main .main_center,#main .main_right{
  178.                 padding: 0px 20px;
  179.                 margin-top: 20px;
  180.                 position: relative;
  181.             }
  182.             main h3 {
  183.                 margin-bottom: 12px;
  184.             }
  185.             
  186.             #main .main_left{
  187.                 width: 307px;
  188.                 padding-left: 0px;
  189.                 float: left;
  190.             }
  191.             #main .main_left video{
  192.                 width: 285px;
  193.                 height: 200px;
  194.                 background-color: #CCCCCC;
  195.                 border: 1px solid #BBBBBB;
  196.             }
  197.             #main .main_left .lianxi {
  198.                 width: 285px;
  199.                 height: auto;
  200.                 border: 1px solid #DDDDDD;
  201.                 border-radius: 5px;
  202.                 margin-top: 15px;
  203.                 padding: 0 15px;
  204.             }
  205.             #main .main_left .lianxi p{
  206.                 font-size: 13px;
  207.                 height: 50px;
  208.                 line-height: 50px;
  209.                 margin-top: 8px;
  210.             }
  211.             #main .main_left .lianxi img {
  212.                 width: 43px;
  213.                 height: 43px;
  214.                 float: left;
  215.                 margin-right: 15px;
  216.             }
  217.             #main .main_center {
  218.                 width: 390px;
  219.                 border-left: 3px solid #DDD;
  220.                 margin-bottom: 10px;
  221.                 float: left;
  222.             }
  223.             #main .main_center ul li {
  224.                 border-top:  1px dotted #999999;
  225.                 padding: 5px 0px;
  226.                 white-space: nowrap;
  227.                 overflow: hidden;
  228.                 text-overflow: ellipsis;
  229.                 line-height: 19px;
  230.             }
  231.             #main .main_center .date{
  232.                 color: #999999;
  233.                 display: block;
  234.                 margin: 0 0px 10px 10px;
  235.             }
  236.             #main .main_right {
  237.                 width: 350px;
  238.                 padding-right: 0px;
  239.                 float: right;
  240.             }
  241.             #main .main_right .imgbox{
  242.                 width: 325px;
  243.                 height: 200px;
  244.                 position: relative;
  245.                 overflow: hidden;
  246.             }
  247.             #main .main_right .imgbox img {
  248.                 width: 325px;
  249.                 height: 200px;
  250.             }
  251.             
  252.             #main .main_right .imgbox hgroup{
  253.                 padding-top: 20px;
  254.                 text-align: center;
  255.                 position: absolute;
  256.                 left: 0;
  257.                 top: 200px;
  258.                 width: 325px;
  259.                 height: 200px;
  260.                 background: rgba(0,0,0,0.5);
  261.                 transition: all 0.5s ease-in 0s;
  262.             }
  263.             #main .main_right .imgbox hgroup h3{
  264.                 color: #BBB;
  265.             }
  266.             #main .main_right .imgbox :hover hgroup{
  267.                 position: absolute;
  268.                 left: 0;
  269.                 top: 0;
  270.             }
  271.                 
  272.             #main .main_right ul li {
  273.                 line-height: 27px;
  274.                 margin-left: 20px;
  275.             }
  276.             
  277.             #main ul a :link,a :visited {
  278.                 text-decoration: none;
  279.                 color: #333333;
  280.             }
  281.             #main ul a:hover{
  282.                 color: red;
  283.                 text-decoration: underline;
  284.             }
  285.             #main .more{
  286.                 position: absolute;
  287.                 top: 10px;
  288.                 right: 10px;
  289.                 text-decoration: none;
  290.                 color: #0091D8;
  291.             }
  292.             footer {
  293.                 clear: both;
  294.                 height: 100px;
  295.                 background: #545861;
  296.                 border-bottom: 1px solid #fff;
  297.                 color: #ffffff;
  298.                 text-align: center;
  299.             }
  300.             footer :link {
  301.                 padding-top: 25px;
  302.             }
  303.             
  304.             footer :link a {
  305.                 display: inline-block;
  306.                 width: 70px;
  307.                 height: 36px;
  308.                 color: #ffffff;
  309.                 padding: 0px 8px 0px 8px;
  310.                 margin: 0 14px 0 14px;
  311.                 text-decoration: none;
  312.                 text-align: center;
  313.             }
  314.             footer :link a:hover {
  315.                 color: #ccc;
  316.                 text-decoration: underline;
  317.             }
  318.             
  319.             .online_zx {
  320.                 position: fixed;
  321.                 top: 30px;
  322.                 right: 10px;
  323.             }
  324.         </style>
  325.     </head>
  326.     <body>
  327.         <header>
  328.             <!--===============占位符图片===================-->
  329.             <img class="header-left" src="https://via.placeholder.com/150" alt="Placeholder Image">
  330.             <div class="header-right">
  331.                 <a href="#"><img src="https://via.placeholder.com/150" alt="" srcset="" />官方微信</a>&nbsp;<span style="color: #930;">|</span>
  332.                 <a href="login.html">管理员登录</a>&nbsp;<span style="color: #930;">|</span>
  333.                 <a href="register.html">会员注册</a>&nbsp;<span style="color: #930;">|</span>
  334.             </div>
  335.               <div class="header-text">照明材料</div>
  336.         </header>
  337.         <!--===================横向导航栏======================-->
  338.         <nav>
  339.             <ul>
  340.                 <li><a href="index.html">首页</a></li>
  341.                 <li><a href="products.html">产品中心</a></li>
  342.                 <li><a href="works.html">工程案例</a></li>
  343.                 <li><a href="news.html">新闻动态</a></li>
  344.                 <li><a href="about.html">招商加盟</a></li>
  345.                 <li><a href="contact.html">联系我们</a></li>
  346.             </ul>
  347.         </nav>
  348.         <!--==================内容区域=====================-->
  349.         <div id="content">
  350.             <div id="hotproduct">
  351.                 <ul>
  352.                     <li>
  353.                         <img class="zheng" src="https://via.placeholder.com/150" alt="">
  354.                         <img class="fan" src="https://via.placeholder.com/150" alt="">
  355.                     </li>
  356.                     <li class="evenlist">
  357.                         <strong>LED射灯</strong>
  358.                         专业技术<br />
  359.                         高校耐用<br />
  360.                         <a href="led_sd_details.html">详细信息</a>
  361.                     </li>
  362.                     <!--===============第二个产品图片====================-->
  363.                     <li style="margin-left: -80px;">
  364.                         <img class="zheng" src="https://via.placeholder.com/150" alt="">
  365.                         <img class="fan" src="https://via.placeholder.com/150" alt="">
  366.                     </li>
  367.                     <li class="evenlist">
  368.                         <strong>LED景观路灯</strong>
  369.                         优越品质<br />
  370.                         绿色环保<br />
  371.                         <a href="led_sd_details.html">详细信息</a>
  372.                     </li>
  373.                     <!--===============第三个产品图片====================-->
  374.                     <li style="margin-left: -80px;">
  375.                         <img class="zheng" src="https://via.placeholder.com/150" alt="">
  376.                         <img class="fan" src="https://via.placeholder.com/150" alt="">
  377.                     </li>
  378.                     <li class="evenlist">
  379.                         <strong>LED映红灯</strong>
  380.                         领先科技<br />
  381.                         节能高效<br />
  382.                         <a href="led_sd_details.html">详细信息</a>
  383.                     </li>
  384.                     <!--===============第四个产品图片====================-->
  385.                 <li style="margin-left: -80px;">
  386.                     <img class="zheng" src="https://via.placeholder.com/150" alt="">
  387.                     <img class="fan" src="https://via.placeholder.com/150" alt="">
  388.                 </li>
  389.                 <li class="lastlist" style="position: relative;left: 90px;">
  390.                     <strong>LED瓦楞灯</strong>
  391.                     优越品质<br />
  392.                     优质体验<br />
  393.                     <a href="led_sd_details.html">详细信息</a>
  394.                 </li>
  395.                 </ul>
  396.             </div>
  397.             <!--===============产品展示====================-->
  398.             <div id="main">
  399.                 <div class="main_left">
  400.                     <h3>&nbsp;产品展示</h3>
  401.                     <video src="https://via.placeholder.com/150" autoplay="autoplay" loop="loop" controls="controls"></video>
  402.                     <div class="lianxi">
  403.                         <p><img src="https://via.placeholder.com/150" alt="" srcset="" >0633-3981234<br />400-180-6789</p>
  404.                         <p><img src="https://via.placeholder.com/150" alt="">地址：山东省日照市学源路<br />科技工业园A区16号</p>
  405.                     </div>
  406.                 </div>
  407.                 <!--===============企业新闻====================-->
  408.                 <div class="main_center">
  409.                     <h3>企业新闻</h3><a href="news.html" target="_blank" class="more">MORE&raquo;</a>
  410.                     <ul>
  411.                         <li><a href="news_details.html">因智慧汽车的概念，ADB智能LED头灯系统发展迅速，ADB智能LED头灯兴起</a></li>
  412.                         <span class="date">2018-03-30</span>
  413.                         <li><a href="">LED灯具有 国内业务市场研讨会LED灯具国内业务。</a></li>
  414.                         <span class="date">2018-03-03</span>
  415.                         <li><a href="">车用、MiniLED等新产品助力，亿光&荣创看好业务运营服务工作。</a></li>
  416.                         <span class="date">2018-03-03</span>
  417.                         <li><a href="">OLED照明市场的机会与挑战-LEDinside</a></li>
  418.                         <span class="date">2018-03-03</span>
  419.                         <li><a href="">智能照明进入高速发展，工业及商业 为最大应用场景。</a></li>
  420.                         <span class="date">2018-03-03</span>
  421.                     </ul>    
  422.                 </div>
  423.                 <!--===============客户案例====================-->
  424.                 <div class="main_right">
  425.                     <h3>客户案例</h3><a href="works.html" target="_blank" class="more">MORE&raquo;</a>
  426.                     <div class="imgbox">
  427.                         <img src="https://via.placeholder.com/150" alt="" srcset="" />
  428.                         <hgroup>
  429.                             <h3>日照水运基地</h3>
  430.                             <h3>日照奥林匹克水上公园</h3>
  431.                             <h3>日照水上运动中心夜景亮化</h3>
  432.                         </hgroup>
  433.                     </div>
  434.                     <ul>
  435.                         <li><a href="">乌海政府亮化工程 --2016年7月完工，美丽的城市。</a></li>
  436.                         <li><a href="">夜景亮化工程公司 --美丽一座城市的夜晚。</a></li>
  437.                         <li><a href="">小区数码管亮化工程 --方便大家出行。</a></li>
  438.                         <li><a href="">水世界楼体亮化 --旅游盛景，等你欣赏美景。</a></li>
  439.                         <li><a href="">开发区委会夜景亮化 --2018年3月完工。</a></li>
  440.                     </ul>
  441.                 </div>
  442.             </div>
  443.         </div>
  444.         <!--===============页尾====================-->
  445.         <footer>
  446.             <p class="link">
  447.                 <a href="index.html">网页首页</a>|<a href="products.html">产品中心</a>|<a href="connect.html">联系方式</a>|<a href="news.html">新闻动态</a>
  448.             </p>
  449.             <p>地址：山东省日照市学院路 爱德照明科技有限公司</p>
  450.         </footer>
  451.         <div class="online_zx"><a href="#"><img src="https://via.placeholder.com/150" alt="" /></a></div>
  452.     </body>
  453. </html>

2、产品中心页面

代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>爱德照明网站首页</title>
  6.         <style>
  7.             /*=========页面顶部样式===========*/
  8.             *{
  9.                 margin: 0;
  10.                 padding: 0;
  11.                 box-sizing: border-box;
  12.             }
  13.             a{
  14.                 text-decoration: none;
  15.             }
  16.             body{
  17.                 width: 1050px;
  18.                 margin: 0 auto;
  19.                 font-family: "微软雅黑";
  20.                 font-size: 13px;
  21.                 color: #333;
  22.                 position: relative;
  23.             }
  24.             h3{
  25.                 font-size: 16px;
  26.                 color: #545861;
  27.                 font-weight: 500;
  28.             }
  29.             header{
  30.                 height: 250px;
  31.                 background-color: #FFFFEE;
  32.                 background-repeat: no-repeat;
  33.                 background-position: 50px;
  34.             }
  35.             .header-left{
  36.                 height: 50px;
  37.             }
  38.             .header-right{
  39.                 width: 250px;
  40.                 height: 50px;
  41.                 line-height: 50px;
  42.                 float: right;
  43.             }
  44.             .header-right img{
  45.                 width: 25px;
  46.                 height: 21px;
  47.             }
  48.             .header-right a:active,.header-right a:visited{
  49.                 text-decoration: none;
  50.                 color: #111111;
  51.             }
  52.             .header-right a:active,.header-right a:hover{
  53.                 color: blue;
  54.             }
  55.             .header-text{
  56.                 font-size: 40px;
  57.                 color: #4FAC00;
  58.                 margin-top: 10px;
  59.                 margin-left: 150px;
  60.             }
  61.             /*=========导航样式定义===========*/
  62.             nav{
  63.                 margin-bottom:5px;
  64.                 height: 36px;
  65.                 background-image: linear-gradient(0deg,#9cf,#fff 60%,#9cf 100%);
  66.                 border-bottom: 1px solid #DBEAEE;
  67.             }
  68.             nav ul{
  69.                 list-style-type: none;
  70.             }
  71.             nav a{
  72.                 display: block;
  73.                 width: 90px;
  74.                 height: 36px;
  75.                 float: left;
  76.                 padding: 0px 8px 0px 8px;
  77.                 margin: 0 10px 0 20px;
  78.                 text-decoration: none;
  79.                 text-align: center;
  80.                 font-family: tahoma;
  81.                 font-size: 14px;
  82.                 font-weight: bold;
  83.             }
  84.             nav ul:nth-child(1)a{
  85.                 width: 50px;
  86.             }
  87.             nav ul li a:link,nav ul li a:visited{
  88.                 color: #333;
  89.             }
  90.             nav ul li a:active,nav ul li a:hover{
  91.                 color: #FFF;
  92.                 background-image: linear-gradient(0deg,#36c,#9CF 60%,#fff 100%);
  93.             }
  94.             /*=========网页中部内容样式===========*/
  95.             #content{
  96.                 width: 1050px;
  97.                 height: auto;
  98.             }
  99.             /*=========热销产品列表样式===========*/
  100.             
  101.             footer {
  102.                 clear: both;
  103.                 height: 100px;
  104.                 background: #545861;
  105.                 border-bottom: 1px solid #fff;
  106.                 color: #ffffff;
  107.                 text-align: center;
  108.             }
  109.             footer :link {
  110.                 padding-top: 25px;
  111.             }
  112.             
  113.             footer :link a {
  114.                 display: inline-block;
  115.                 width: 70px;
  116.                 height: 36px;
  117.                 color: #ffffff;
  118.                 padding: 0px 8px 0px 8px;
  119.                 margin: 0 14px 0 14px;
  120.                 text-decoration: none;
  121.                 text-align: center;
  122.             }
  123.             footer :link a:hover {
  124.                 color: #ccc;
  125.                 text-decoration: underline;
  126.             }
  127.             
  128.             .online_zx {
  129.                 position: fixed;
  130.                 top: 30px;
  131.                 right: 10px;
  132.             }
  133.             
  134.             /*=========左侧样式===========*/
  135.             #content {
  136.                 width: 1050px;
  137.                 height: auto;
  138.             }
  139.             #content-left {
  140.                 width: 250px;
  141.                 height: auto;
  142.                 float: left;
  143.             }
  144.             
  145.             #content-left ul {
  146.                 list-style: none;
  147.                 width: 250px;
  148.                 background: #fff;
  149.                 border-radius: 10px;
  150.                 margin: 0 auto;
  151.             }
  152.             
  153.             #content-left ul li {
  154.                 width: 250px;
  155.                 height: 50px;
  156.                 margin-bottom: 1px;
  157.                 padding-left: 80px;
  158.                 background: #DDDDDD;
  159.                 font-size: 14px;
  160.                 line-height: 55px;
  161.                 text-align: left;
  162.             }
  163.             
  164.             #content ul li a:link,#content-left ul li a:visited{
  165.                 color: #333;
  166.             }
  167.             
  168.             #content-left ul li a:hover{
  169.                 color: #0091D8;
  170.             }
  171.             
  172.             #content-left ul .tp {
  173.                 font-size: 18px;
  174.                 font-weight: 500;
  175.                 padding: 0px;
  176.                 text-align: center;
  177.                 width: 250px;
  178.                 height: 65px;
  179.                 line-height: 80px;
  180.                 background: #BBB;
  181.                 border-radius: 10px 0 0;
  182.             }
  183.             #content-left ul .yj {
  184.                 height: 20px;
  185.                 border-radius: 0 0 0 10px;
  186.                 margin-bottom: 5px;
  187.             }
  188.             #content-right {
  189.                 float: right;
  190.                 width: 800px;
  191.                 height: auto;
  192.             }
  193.                 
  194.             #content-right .tt {
  195.                 height: 40px;
  196.                 width: 785px;
  197.                 margin-left: 15px;
  198.                 border-bottom: 2px solid #D6D6D6;
  199.             }
  200.             #content-right h3 {
  201.                 font-weight: 500;
  202.                 font-size: 16px;
  203.                 border-bottom: 2px solid #0091D8;
  204.                 width: 90px;
  205.                 border-bottom: 10px 0 7px 5px;
  206.             }
  207.             #content-right #article {
  208.                 width: 800px;
  209.                 height: auto;
  210.             }
  211.             #content-right #article .products{
  212.                 width: 800px;
  213.             }
  214.             #article .products ul {
  215.                 list-style: none;
  216.             }
  217.             #article .products ul li {
  218.                 width: 180px;
  219.                 height: 210px;
  220.                 float: left;
  221.                 margin: 10px;
  222.                 font-size: 14px;
  223.                 text-align: center;
  224.             }
  225.             #article .products ul li img {
  226.                 width: 180px;
  227.                 height: 180px;
  228.                 margin: 10px;
  229.             }
  230.             
  231.             #article .products ul li a:hover {
  232.                 color: #0091D8;
  233.             }
  234.             #article .products ul li a:hover img {
  235.                 border: 2px solid #0091D8;
  236.             }
  237.         </style>
  238.     </head>
  239.     <body>
  240.         <header>
  241.             <!--===============占位符图片===================-->
  242.             <img class="header-left" src="https://via.placeholder.com/150" alt="Placeholder Image">
  243.             <div class="header-right">
  244.                 <a href="#"><img src="https://via.placeholder.com/150" alt="" srcset="" />官方微信</a>&nbsp;<span style="color: #930;">|</span>
  245.                 <a href="login.html">管理员登录</a>&nbsp;<span style="color: #930;">|</span>
  246.                 <a href="register.html">会员注册</a>&nbsp;<span style="color: #930;">|</span>
  247.             </div>
  248.               <div class="header-text">照明材料</div>
  249.         </header>
  250.         <!--===================横向导航栏======================-->
  251.         <nav>
  252.             <ul>
  253.                 <li><a href="index.html">首页</a></li>
  254.                 <li><a href="products.html">产品中心</a></li>
  255.                 <li><a href="works.html">工程案例</a></li>
  256.                 <li><a href="news.html">新闻动态</a></li>
  257.                 <li><a href="about.html">招商加盟</a></li>
  258.                 <li><a href="connect.html">联系我们</a></li>
  259.             </ul>
  260.         </nav>
  261.         <!--==================内容区域=====================-->
  262.         <div id="content">
  263.             <aside id="content-left">
  264.                 <ul>
  265.                     <li class="tp">产品中心</li>
  266.                     <li><a href="">LED景观路灯</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://via.placeholder.com/150" alt="" /></li>
  267.                     <li><a href="">LED射灯</a></li>
  268.                     <li><a href="">LED映红灯</a></li>
  269.                     <li><a href="">LED瓦楞灯</a></li>
  270.                     <li><a href="">LED数码灯</a></li>
  271.                     <li><a href="">LED点光源</a></li>
  272.                     <li><a href="">LED墙角灯</a></li>
  273.                     <li class="yj"></li>
  274.                 </ul>
  275.             </aside>
  276.         <div id="content-right">
  277.             <div class="tt">
  278.                 <h3>景观路灯</h3>
  279.             </div>
  280.             <div id="article">
  281.                 <div class="products">
  282.                     <ul>
  283.                         <li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
  284.                         仿古锥形广场灯柱
  285.                         </a></li>
  286.                         <li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
  287.                         多头造型LED景观灯
  288.                         </a></li>
  289.                         <li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
  290.                         镂空方柱形景观柱
  291.                         </a></li>
  292.                         <li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
  293.                         莲花造型广场景观灯柱
  294.                         </a></li>
  295.                         <li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
  296.                         内透光方柱景观灯
  297.                         </a></li>
  298.                         <li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
  299.                         现代园林庭院景观灯
  300.                         </a></li>
  301.                         <li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
  302.                         古典浮雕祥云景观灯柱
  303.                         </a></li>
  304.                         <li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
  305.                         立柱仿云石LED景观灯
  306.                         </a></li>
  307.                     </ul>
  308.                     
  309.                 </div>
  310.             </div>
  311.         </div>
  312.         </div>
  313.         
  314.         <div class="page" style="clear: both;text-align: center;padding: 15px 0;">
  315.             <hr>
  316.             <ul style="margin-top: 10px;">
  317.                 <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%;">&laquo;</a></li>
  318.                 <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%;">&#8249;</a></li>
  319.                 <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>
  320.                 <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>
  321.                 <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>
  322.                 <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>
  323.                 <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>
  324.                 <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>
  325.                 <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%;">&#8250;</a></li>
  326.                 <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%;">&raquo;</a></li>
  327.             </ul>
  328.         </div>
  329.         <!--===============页尾====================-->
  330.         <footer>
  331.             <p class="link">
  332.                 <a href="index.html">网页首页</a>|<a href="products.html">产品中心</a>|<a href="connect.html">联系方式</a>|<a href="news.html">新闻动态</a>
  333.             </p>
  334.             <p>地址：山东省日照市学院路 爱德照明科技有限公司</p>
  335.         </footer>
  336.         <div class="online_zx"><a href="#"><img src="https://via.placeholder.com/150" alt="" /></a></div>
  337.         
  338.     </body>
  339.     
  340. </html>

3、工程案例页面效果图

代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>爱德照明网站首页</title>
  6.         <style>
  7.             /*=========页面顶部样式===========*/
  8.             *{
  9.                 margin: 0;
  10.                 padding: 0;
  11.                 box-sizing: border-box;
  12.             }
  13.             a{
  14.                 text-decoration: none;
  15.             }
  16.             body{
  17.                 width: 1050px;
  18.                 margin: 0 auto;
  19.                 font-family: "微软雅黑";
  20.                 font-size: 13px;
  21.                 color: #333;
  22.                 position: relative;
  23.             }
  24.             h3{
  25.                 font-size: 16px;
  26.                 color: #545861;
  27.                 font-weight: 500;
  28.             }
  29.             header{
  30.                 height: 250px;
  31.                 background-color: #FFFFEE;
  32.                 background-repeat: no-repeat;
  33.                 background-position: 50px;
  34.             }
  35.             .header-left{
  36.                 height: 50px;
  37.             }
  38.             .header-right{
  39.                 width: 250px;
  40.                 height: 50px;
  41.                 line-height: 50px;
  42.                 float: right;
  43.             }
  44.             .header-right img{
  45.                 width: 25px;
  46.                 height: 21px;
  47.             }
  48.             .header-right a:active,.header-right a:visited{
  49.                 text-decoration: none;
  50.                 color: #111111;
  51.             }
  52.             .header-right a:active,.header-right a:hover{
  53.                 color: blue;
  54.             }
  55.             .header-text{
  56.                 font-size: 40px;
  57.                 color: #4FAC00;
  58.                 margin-top: 10px;
  59.                 margin-left: 150px;
  60.             }
  61.             /*=========导航样式定义===========*/
  62.             nav{
  63.                 margin-bottom:5px;
  64.                 height: 36px;
  65.                 background-image: linear-gradient(0deg,#9cf,#fff 60%,#9cf 100%);
  66.                 border-bottom: 1px solid #DBEAEE;
  67.             }
  68.             nav ul{
  69.                 list-style-type: none;
  70.             }
  71.             nav a{
  72.                 display: block;
  73.                 width: 90px;
  74.                 height: 36px;
  75.                 float: left;
  76.                 padding: 0px 8px 0px 8px;
  77.                 margin: 0 10px 0 20px;
  78.                 text-decoration: none;
  79.                 text-align: center;
  80.                 font-family: tahoma;
  81.                 font-size: 14px;
  82.                 font-weight: bold;
  83.             }
  84.             nav ul:nth-child(1)a{
  85.                 width: 50px;
  86.             }
  87.             nav ul li a:link,nav ul li a:visited{
  88.                 color: #333;
  89.             }
  90.             nav ul li a:active,nav ul li a:hover{
  91.                 color: #FFF;
  92.                 background-image: linear-gradient(0deg,#36c,#9CF 60%,#fff 100%);
  93.             }
  94.             /*=========网页中部内容样式===========*/
  95.             #content{
  96.                 width: 1050px;
  97.                 height: auto;
  98.             }
  99.             /*=========热销产品列表样式===========*/
  100.             
  101.             footer {
  102.                 clear: both;
  103.                 height: 100px;
  104.                 background: #545861;
  105.                 border-bottom: 1px solid #fff;
  106.                 color: #ffffff;
  107.                 text-align: center;
  108.             }
  109.             footer :link {
  110.                 padding-top: 25px;
  111.             }
  112.             
  113.             footer :link a {
  114.                 display: inline-block;
  115.                 width: 70px;
  116.                 height: 36px;
  117.                 color: #ffffff;
  118.                 padding: 0px 8px 0px 8px;
  119.                 margin: 0 14px 0 14px;
  120.                 text-decoration: none;
  121.                 text-align: center;
  122.             }
  123.             footer :link a:hover {
  124.                 color: #ccc;
  125.                 text-decoration: underline;
  126.             }
  127.             
  128.             .online_zx {
  129.                 position: fixed;
  130.                 top: 30px;
  131.                 right: 10px;
  132.             }
  133.             
  134.             /*=========左侧样式===========*/
  135.             #content {
  136.                 width: 1050px;
  137.                 height: auto;
  138.             }
  139.             #content-left {
  140.                 width: 250px;
  141.                 height: auto;
  142.                 float: left;
  143.             }
  144.             
  145.             #content-left ul {
  146.                 list-style: none;
  147.                 width: 250px;
  148.                 background: #fff;
  149.                 border-radius: 10px;
  150.                 margin: 0 auto;
  151.             }
  152.             
  153.             #content-left ul li {
  154.                 width: 250px;
  155.                 height: 50px;
  156.                 margin-bottom: 1px;
  157.                 padding-left: 80px;
  158.                 background: #DDDDDD;
  159.                 font-size: 14px;
  160.                 line-height: 55px;
  161.                 text-align: left;
  162.             }
  163.             
  164.             #content ul li a:link,#content-left ul li a:visited{
  165.                 color: #333;
  166.             }
  167.             
  168.             #content-left ul li a:hover{
  169.                 color: #0091D8;
  170.             }
  171.             
  172.             #content-left ul .tp {
  173.                 font-size: 18px;
  174.                 font-weight: 500;
  175.                 padding: 0px;
  176.                 text-align: center;
  177.                 width: 250px;
  178.                 height: 65px;
  179.                 line-height: 80px;
  180.                 background: #BBB;
  181.                 border-radius: 10px 0 0;
  182.             }
  183.             #content-left ul .yj {
  184.                 height: 20px;
  185.                 border-radius: 0 0 0 10px;
  186.                 margin-bottom: 5px;
  187.             }
  188.             #content-right {
  189.                 float: right;
  190.                 width: 800px;
  191.                 height: auto;
  192.             }
  193.                 
  194.             #content-right .tt {
  195.                 height: 40px;
  196.                 width: 785px;
  197.                 margin-left: 15px;
  198.                 border-bottom: 2px solid #D6D6D6;
  199.             }
  200.             #content-right h3 {
  201.                 font-weight: 500;
  202.                 font-size: 16px;
  203.                 border-bottom: 2px solid #0091D8;
  204.                 width: 90px;
  205.                 border-bottom: 10px 0 7px 5px;
  206.             }
  207.             #content-right #article {
  208.                 width: 800px;
  209.                 height: auto;
  210.             }
  211.             #content-right #article .products{
  212.                 width: 800px;
  213.             }
  214.             #article .products ul {
  215.                 list-style: none;
  216.             }
  217.             #article .products ul li {
  218.                 width: 180px;
  219.                 height: 210px;
  220.                 float: left;
  221.                 margin: 10px;
  222.                 font-size: 14px;
  223.                 text-align: center;
  224.             }
  225.             #article .products ul li img {
  226.                 width: 180px;
  227.                 height: 180px;
  228.                 margin: 10px;
  229.             }
  230.             
  231.             #article .products ul li a:hover {
  232.                 color: #0091D8;
  233.             }
  234.             #article .products ul li a:hover img {
  235.                 border: 2px solid #0091D8;
  236.             }
  237.         </style>
  238.     </head>
  239.     <body>
  240.         <header>
  241.             <!--===============占位符图片===================-->
  242.             <img class="header-left" src="https://via.placeholder.com/150" alt="Placeholder Image">
  243.             <div class="header-right">
  244.                 <a href="#"><img src="https://via.placeholder.com/150" alt="" srcset="" />官方微信</a>&nbsp;<span style="color: #930;">|</span>
  245.                 <a href="login.html">管理员登录</a>&nbsp;<span style="color: #930;">|</span>
  246.                 <a href="register.html">会员注册</a>&nbsp;<span style="color: #930;">|</span>
  247.             </div>
  248.               <div class="header-text">照明材料</div>
  249.         </header>
  250.         <!--===================横向导航栏======================-->
  251.         <nav>
  252.             <ul>
  253.                 <li><a href="index.html">首页</a></li>
  254.                 <li><a href="companyfile.html">关于我们</a></li>
  255.                 <li><a href="products.html">产品中心</a></li>
  256.                 <li><a href="works.html">工程案例</a></li>
  257.                 <li><a href="news.html">新闻动态</a></li>
  258.                 <li><a href="about.html">招商加盟</a></li>
  259.                 <li><a href="contact.html">联系我们</a></li>
  260.             </ul>
  261.         </nav>
  262.         <!--==================内容区域=====================-->
  263.         <div id="content">
  264.             <aside id="content-left">
  265.                 <ul>
  266.                     <li class="tp">工程案例</li>
  267.                     <li><a href="worls_detail.html">客户案例</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://via.placeholder.com/150" alt="" /></li>
  268.                     <li><a href="">数码灯案例</a></li>
  269.                     <li><a href="">西培灯案例</a></li>
  270.                     <li><a href="">墙角灯案例</a></li>
  271.                     <li class="yj"></li>
  272.                 </ul>
  273.             </aside>
  274.         <div id="content-right">
  275.             <div class="tt">
  276.                 <h3>客户案例</h3>
  277.             </div>
  278.             <div id="article">
  279.                 <div class="products">
  280.                     <ul>
  281.                         <li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
  282.                         英伦风格商场亮化工程夜景
  283.                         <dd style="color: #333;font-size: 11px;position: relative;width: 250px;left: -25px;opacity: 0.4;">施工时间 2015-03-21 投资 ￥12.35万</dd>
  284.                         </a></li>
  285.                         <li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
  286.                         <p style="margin-left: -10px;">内蒙古广场夜景亮化工程</p>
  287.                         <dd style="color: #333;font-size: 11px;position: relative;width: 250px;left: -22px;opacity: 0.4;">施工时间 2015-03-21 投资 ￥12.35万</dd>
  288.                         </a></li>
  289.                         <li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
  290.                         <p style="margin-left: -50px;">七天酒店亮化工程</p>
  291.                         <dd style="color: #333;font-size: 11px;position: relative;width: 250px;left: -30px;opacity: 0.4;">施工时间 2015-08-6 投资 ￥8.73万</dd>
  292.                         </a></li>
  293.                         <li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
  294.                         <p style="margin-left: -50px;">奥林匹克亮化工程</p>
  295.                         <dd style="color: #333;font-size: 11px;position: relative;width: 250px;left: -30px;opacity: 0.4;">施工时间 2008-08-1 投资 ￥8.73万</dd>
  296.                         </a></li>
  297.                         <li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
  298.                         <p style="margin-left: -40px;">城市步行街夜景亮化</p>
  299.                         <dd style="color: #333;font-size: 11px;position: relative;width: 250px;left: -25px;opacity: 0.4;">施工时间 2015-06-21 投资 ￥11.03万</dd>
  300.                         </a></li>
  301.                         <li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
  302.                         <p style="margin-left: -20px;">长乐首席观江豪宅亮化</p>
  303.                         <dd style="color: #333;font-size: 11px;position: relative;width: 250px;left: -25px;opacity: 0.4;">施工时间 2018-01-6 投资 ￥7.32万</dd>
  304.                         </a></li>
  305.                         <li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
  306.                         <p style="margin-left: -35px;">城市公园景观灯夜景</p>
  307.                         <dd style="color: #333;font-size: 11px;position: relative;width: 250px;left: -25px;opacity: 0.4;">施工时间 2017-07-04 投资 ￥4.17万</dd>
  308.                         </a></li>
  309.                         <li><a href=""><img src="https://via.placeholder.com/150" alt="" srcset="" ><br />
  310.                         <p style="margin-left: -20px;">智能家庭LED射灯亮化</p>
  311.                         <dd style="color: #333;font-size: 11px;position: relative;width: 250px;left: -25px;opacity: 0.4;">施工时间 2022-01-6 投资 ￥17.32万</dd>
  312.                         </a></li>
  313.                     </ul>
  314.                     
  315.                 </div>
  316.             </div>
  317.         </div>
  318.         </div>
  319.         
  320.         <div class="page" style="clear: both;text-align: center;padding: 15px 0;">
  321.             <hr>
  322.             <ul style="margin-top: 10px;">
  323.                 <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%;">&laquo;</a></li>
  324.                 <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%;">&#8249;</a></li>
  325.                 <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>
  326.                 <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>
  327.                 <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>
  328.                 <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>
  329.                 <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>
  330.                 <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>
  331.                 <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%;">&#8250;</a></li>
  332.                 <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%;">&raquo;</a></li>
  333.             </ul>
  334.         </div>
  335.         <!--===============页尾====================-->
  336.         <footer>
  337.             <p class="link">
  338.                 <a href="index.html">网页首页</a>|<a href="products.html">产品中心</a>|<a href="contact.html">联系方式</a>|<a href="news.html">新闻动态</a>
  339.             </p>
  340.             <p>地址：山东省日照市学院路 爱德照明科技有限公司</p>
  341.         </footer>
  342.         <div class="online_zx"><a href="#"><img src="https://via.placeholder.com/150" alt="" /></a></div>
  343.         
  344.     </body>
  345.     
  346. </html>

4、新闻页面效果图：

代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>爱德照明网站首页</title>
  6.         <style>
  7.             /*=========外部样式===========*/
  8.             @charset "utf-8";
  9.             *{
  10.                 margin: 0;
  11.                 padding: 0;
  12.                 box-sizing: border-box;
  13.             }
  14.             a{
  15.                 text-decoration: none;
  16.             }
  17.             @font-face{
  18.                 font-family: 'iconfont';
  19.                 src: url('../fonts/iconfont.ttf');
  20.             }
  21.             body{
  22.                 width: 1050px;
  23.                 margin: 0 auto;
  24.                 font-family: "微软雅黑";
  25.                 font-size: 13px;
  26.                 color: #333;
  27.                 position: relative;
  28.             }
  29.             h3{
  30.                 font-size: 16px;
  31.                 color: #545861;
  32.                 font-weight: 500;
  33.             }
  34.             h4{
  35.                 font-size: 14px;
  36.             }
  37.             h5{
  38.                 font-size:13px;
  39.             }
  40.             /*=========页面顶部样式===========*/
  41.             header{
  42.                 height: 250px;
  43.                 background-color: #FFFFEE;
  44.                 background-repeat: no-repeat;
  45.                 background-position: 50px;
  46.             }
  47.             .header-left{
  48.                 height: 50px;
  49.             }
  50.             .header-right{
  51.                 width: 250px;
  52.                 height: 50px;
  53.                 line-height: 50px;
  54.                 float: right;
  55.             }
  56.             .header-right img{
  57.                 width: 25px;
  58.                 height: 21px;
  59.             }
  60.             .header-right a:active,.header-right a:visited{
  61.                 text-decoration: none;
  62.                 color: #111111;
  63.             }
  64.             .header-right a:active,.header-right a:hover{
  65.                 color: blue;
  66.             }
  67.             .header-text{
  68.                 font-size: 40px;
  69.                 color: #4FAC00;
  70.                 margin-top: 10px;
  71.                 margin-left: 150px;
  72.             }
  73.             /*=========导航样式定义===========*/
  74.             nav{
  75.                 margin-bottom:5px;
  76.                 height: 36px;
  77.                 background-image: linear-gradient(0deg,#9cf,#fff 60%,#9cf 100%);
  78.                 border-bottom: 1px solid #DBEAEE;
  79.             }
  80.             nav ul{
  81.                 list-style-type: none;
  82.             }
  83.             nav a{
  84.                 display: block;
  85.                 width: 90px;
  86.                 height: 36px;
  87.                 float: left;
  88.                 padding: 0px 8px 0px 8px;
  89.                 margin: 0 10px 0 20px;
  90.                 text-decoration: none;
  91.                 text-align: center;
  92.                 font-family: tahoma;
  93.                 font-size: 14px;
  94.                 font-weight: bold;
  95.             }
  96.             nav ul:nth-child(1)a{
  97.                 width: 50px;
  98.             }
  99.             nav ul li a:link,nav ul li a:visited{
  100.                 color: #333;
  101.             }
  102.             nav ul li a:active,nav ul li a:hover{
  103.                 color: #FFF;
  104.                 background-image: linear-gradient(0deg,#36c,#9CF 60%,#fff 100%);
  105.             }
  106.             /*=========网页中部内容样式===========*/
  107.             #content{
  108.                 width: 1050px;
  109.                 height: auto;
  110.             }
  111.             /*=========热销产品列表样式===========*/
  112.             
  113.             footer {
  114.                 clear: both;
  115.                 height: 100px;
  116.                 background: #545861;
  117.                 border-bottom: 1px solid #fff;
  118.                 color: #ffffff;
  119.                 text-align: center;
  120.             }
  121.             footer :link {
  122.                 padding-top: 25px;
  123.             }
  124.             
  125.             footer :link a {
  126.                 display: inline-block;
  127.                 width: 70px;
  128.                 height: 36px;
  129.                 color: #ffffff;
  130.                 padding: 0px 8px 0px 8px;
  131.                 margin: 0 14px 0 14px;
  132.                 text-decoration: none;
  133.                 text-align: center;
  134.             }
  135.             footer :link a:hover {
  136.                 color: #ccc;
  137.                 text-decoration: underline;
  138.             }
  139.             
  140.             .online_zx {
  141.                 position: fixed;
  142.                 top: 30px;
  143.                 right: 10px;
  144.             }
  145.             
  146.             /*=========左侧样式===========*/
  147.             #content-left{
  148.                 width: 250px;
  149.                 height: auto;
  150.                 float: left;
  151.             }
  152.             #content-left ul {
  153.                 list-style: none;
  154.                 width: 250px;
  155.                 background: #fff;
  156.                 border-radius: 10px;
  157.                 margin: 0 auto;
  158.             }
  159.             
  160.             #content-left ul li {
  161.                 width: 250px;
  162.                 height: 50px;
  163.                 margin-bottom: 1px;
  164.                 padding-left: 80px;
  165.                 background: #DDDDDD;
  166.                 font-size: 14px;
  167.                 line-height: 55px;
  168.                 text-align: left;
  169.             }
  170.             #content-left ul li a :link,#content-left ul li a :visited {
  171.                 color: #333;
  172.             }
  173.             
  174.             #content-left ul li a:hover{
  175.                 color: #0091D8;
  176.             }
  177.             #content-left ul .tp {
  178.                 font-size: 18px;
  179.                 font-weight: 500;
  180.                 padding: 0;
  181.                 text-align: center;
  182.                 width: 250px;
  183.                 height: 65px;
  184.                 line-height: 80px;
  185.                 background: #BBB;
  186.                 border-radius: 10px 0 0;
  187.             }
  188.             #content-left ul .yj {
  189.                 height: 20px;
  190.                 border-radius: 0 0 0 10px;
  191.                 margin-bottom: 5px;
  192.             }
  193.             #content-right {
  194.                 float: right;
  195.                 width: 800px;
  196.                 height: auto;
  197.             }
  198.             #content-right .tt {
  199.                 height: 40px;
  200.                 width: 785px;
  201.                 margin-left: 15px;
  202.                 border-bottom: 2px solid #D6D6D6;
  203.             }
  204.             #content-right h3 {
  205.                 font-weight: 500;
  206.                 font-size: 16px;
  207.                 border-bottom: 2px solid #0091D8;
  208.                 width: 90px;
  209.                 padding: 10px 0 7px 5px;
  210.             }
  211.             #content-right #article{
  212.                 width: 800px;
  213.                 height: auto;
  214.             }
  215.             
  216.             #article .news {
  217.                 width: 780px;
  218.                 height: auto;
  219.                 margin: 20px 0 20px 20px;
  220.             }
  221.             #article .news ul{
  222.                 list-style: none;
  223.             }
  224.             #article .news ul li {
  225.                 width: 780px;
  226.                 height: 30px;
  227.                 float: left;
  228.                 margin: 5px;
  229.                 border-bottom: 1px dotted #999999;
  230.             }
  231.             #article .news ul li:before {
  232.                 margin-right: 5px;
  233.             }
  234.             #article .news ul li:nth-last-child(1){
  235.                 border-bottom: 0px;
  236.             }
  237.             #article .news ul li a:link,a:valid{
  238.                 text-decoration: none;
  239.                 color: #494949;
  240.             }
  241.             #article .news ul li a:hover{
  242.                 color: #0091D8;
  243.             }
  244.             #article .page a:hover {
  245.                 background-color: #DDD;
  246.             }
  247.         </style>
  248.     </head>
  249.     <body>
  250.         <header>
  251.             <!--===============占位符图片===================-->
  252.             <img class="header-left" src="https://via.placeholder.com/150" alt="Placeholder Image">
  253.             <div class="header-right">
  254.                 <a href="#"><img src="https://via.placeholder.com/150" alt="" srcset="" />官方微信</a>&nbsp;<span style="color: #930;">|</span>
  255.                 <a href="login.html">管理员登录</a>&nbsp;<span style="color: #930;">|</span>
  256.                 <a href="register.html">会员注册</a>&nbsp;<span style="color: #930;">|</span>
  257.             </div>
  258.               <div class="header-text">照明材料</div>
  259.         </header>
  260.         <!--===================横向导航栏======================-->
  261.         <nav>
  262.             <ul>
  263.                 <li><a href="index.html">首页</a></li>
  264.                 <li><a href="products.html">产品中心</a></li>
  265.                 <li><a href="works.html">工程案例</a></li>
  266.                 <li><a href="news.html">新闻动态</a></li>
  267.                 <li><a href="about.html">招商加盟</a></li>
  268.                 <li><a href="contact.html">联系我们</a></li>
  269.             </ul>
  270.         </nav>
  271.         <!--==================内容区域=====================-->
  272.         <div id="content">
  273.             <aside id="content-left">
  274.                 <ul>
  275.                     <li class="tp">新闻动态</li>
  276.                     <li><a href="news.html">公司新闻&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://via.placeholder.com/150" alt="" /></a></li>
  277.                     <li><a href="news_proinfo.html">产品资讯</a></li>
  278.                     <li class="yj"></li>
  279.                 </ul>
  280.             </aside>
  281.             <!--===============公司新闻====================-->
  282.             <div id="content-right">
  283.                 <div class="tt">
  284.                     <h3>公司新闻</h3>
  285.                 </div>
  286.                 <div id="article">
  287.                     <div class="news">
  288.                         <ul>
  289.                             <li><a href="news_detail.html">因应智慧汽车概念：ADB智能LED头灯系统发展迅速，ADB智能LED头灯兴起。</a></li>
  290.                             <span class="date" style="float: right;margin-right: 10px;">2018-03-30</span>
  291.                             <li><a href="">LED灯具国内业务市场研讨会LED灯具有国内业务2017-4-6</a></li>
  292.                             <span class="date" style="float: right;margin-right: 10px;">2018-03-23</span>
  293.                             <li><a href="">车用、MiniLED等新产品助力，亿光荣创看好营运服务工作。</a></li>
  294.                             <span class="date" style="float: right;margin-right: 10px;">2018-03-19</span>
  295.                             <li><a href="">OLED照明市场的机会与挑战 -- LEDinside</a></li>
  296.                             <span class="date" style="float: right;margin-right: 10px;">2018-03-16</span>
  297.                             <li><a href="">江苏加快半导体照明产业发展，2020年规模将达1200亿。</a></li>
  298.                             <span class="date" style="float: right;margin-right: 10px;">2018-02-28</span>
  299.                             <li><a href="">智能照明进入高速发展，工业及商业为最大应用场景。</a></li>
  300.                             <span class="date" style="float: right;margin-right: 10px;">2018-02-21</span>
  301.                             <li><a href="">景观坝LED洗墙灯怎么选购？您不能忽略这些细节！</a></li>
  302.                             <span class="date" style="float: right;margin-right: 10px;">2018-02-18</span>
  303.                             <li><a href="">LED点光灯源的线路板使用什么材质质量最好？</a></li>
  304.                             <span class="date" style="float: right;margin-right: 10px;">2018-02-13</span>
  305.                             <li><a href="">智能照明进入高速发展，工业及商业为最大应用场景。</a></li>
  306.                             <span class="date"style="float: right;margin-right: 10px;">2018-03-08</span>
  307.                         </ul>
  308.                     </div>
  309.                 </div>
  310.             </div>
  311. <!--===============分页器====================-->    
  312.             <div class="page" style="clear: both;text-align: center;padding: 15px 0;">
  313.                 <hr>
  314.                 <ul style="margin-top: 10px;">
  315.                     <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%;">&laquo;</a></li>
  316.                     <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%;">&#8249;</a></li>
  317.                     <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>
  318.                     <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>
  319.                     <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>
  320.                     <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>
  321.                     <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>
  322.                     <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>
  323.                     <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%;">&#8250;</a></li>
  324.                     <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%;">&raquo;</a></li>
  325.                 </ul>
  326.             </div>
  327.             </div>
  328.         </div>
  329.         <!--===============页尾====================-->
  330.         <footer>
  331.             <p class="link">
  332.                 <a href="index.html">网页首页</a>|<a href="products.html">产品中心</a>|<a href="connect.html">联系方式</a>|<a href="news.html">新闻动态</a>
  333.             </p>
  334.             <p>地址：山东省日照市学院路 爱德照明科技有限公司</p>
  335.         </footer>
  336.         <div class="online_zx"><a href="#"><img src="https://via.placeholder.com/150" alt="" /></a></div>
  337.     </body>
  338. </html>

5、联系我们页面效果图

代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>爱德照明网站首页</title>
  6.         <style>
  7.             /*=========外部样式===========*/
  8.             @charset "utf-8";
  9.             *{
  10.                 margin: 0;
  11.                 padding: 0;
  12.                 box-sizing: border-box;
  13.             }
  14.             a{
  15.                 text-decoration: none;
  16.             }
  17.             @font-face{
  18.                 font-family: 'iconfont';
  19.                 src: url('../fonts/iconfont.ttf');
  20.             }
  21.             body{
  22.                 width: 1050px;
  23.                 margin: 0 auto;
  24.                 font-family: "微软雅黑";
  25.                 font-size: 13px;
  26.                 color: #333;
  27.                 position: relative;
  28.             }
  29.             h3{
  30.                 font-size: 16px;
  31.                 color: #545861;
  32.                 font-weight: 500;
  33.             }
  34.             h4{
  35.                 font-size: 14px;
  36.             }
  37.             h5{
  38.                 font-size:13px;
  39.             }
  40.             /*=========页面顶部样式===========*/
  41.             header{
  42.                 height: 250px;
  43.                 background-color: #FFFFEE;
  44.                 background-repeat: no-repeat;
  45.                 background-position: 50px;
  46.             }
  47.             .header-left{
  48.                 height: 50px;
  49.             }
  50.             .header-right{
  51.                 width: 250px;
  52.                 height: 50px;
  53.                 line-height: 50px;
  54.                 float: right;
  55.             }
  56.             .header-right img{
  57.                 width: 25px;
  58.                 height: 21px;
  59.             }
  60.             .header-right a:active,.header-right a:visited{
  61.                 text-decoration: none;
  62.                 color: #111111;
  63.             }
  64.             .header-right a:active,.header-right a:hover{
  65.                 color: blue;
  66.             }
  67.             .header-text{
  68.                 font-size: 40px;
  69.                 color: #4FAC00;
  70.                 margin-top: 10px;
  71.                 margin-left: 150px;
  72.             }
  73.             /*=========导航样式定义===========*/
  74.             nav{
  75.                 margin-bottom:5px;
  76.                 height: 36px;
  77.                 background-image: linear-gradient(0deg,#9cf,#fff 60%,#9cf 100%);
  78.                 border-bottom: 1px solid #DBEAEE;
  79.             }
  80.             nav ul{
  81.                 list-style-type: none;
  82.             }
  83.             nav a{
  84.                 display: block;
  85.                 width: 90px;
  86.                 height: 36px;
  87.                 float: left;
  88.                 padding: 0px 8px 0px 8px;
  89.                 margin: 0 10px 0 20px;
  90.                 text-decoration: none;
  91.                 text-align: center;
  92.                 font-family: tahoma;
  93.                 font-size: 14px;
  94.                 font-weight: bold;
  95.             }
  96.             nav ul:nth-child(1)a{
  97.                 width: 50px;
  98.             }
  99.             nav ul li a:link,nav ul li a:visited{
  100.                 color: #333;
  101.             }
  102.             nav ul li a:active,nav ul li a:hover{
  103.                 color: #FFF;
  104.                 background-image: linear-gradient(0deg,#36c,#9CF 60%,#fff 100%);
  105.             }
  106.             /*=========网页中部内容样式===========*/
  107.             #content{
  108.                 width: 1050px;
  109.                 height: auto;
  110.             }
  111.             /*=========热销产品列表样式===========*/
  112.             
  113.             footer {
  114.                 clear: both;
  115.                 height: 100px;
  116.                 background: #545861;
  117.                 border-bottom: 1px solid #fff;
  118.                 color: #ffffff;
  119.                 text-align: center;
  120.             }
  121.             footer :link {
  122.                 padding-top: 25px;
  123.             }
  124.             
  125.             footer :link a {
  126.                 display: inline-block;
  127.                 width: 70px;
  128.                 height: 36px;
  129.                 color: #ffffff;
  130.                 padding: 0px 8px 0px 8px;
  131.                 margin: 0 14px 0 14px;
  132.                 text-decoration: none;
  133.                 text-align: center;
  134.             }
  135.             footer :link a:hover {
  136.                 color: #ccc;
  137.                 text-decoration: underline;
  138.             }
  139.             
  140.             .online_zx {
  141.                 position: fixed;
  142.                 top: 30px;
  143.                 right: 10px;
  144.             }
  145.             
  146.             /*=========左侧样式===========*/
  147.             #content .contact {
  148.                 width: 1050px;
  149.                 height: auto;
  150.                 margin: 20px 0 20px 0px;
  151.             }
  152.             
  153.             #content .contact h3 {
  154.                 font-size: 16px;
  155.                 font-weight: 500;
  156.                 margin: 20px 0 10px 5px;
  157.             }
  158.             #content .contact img {
  159.                 width: 550px;
  160.                 height: 400px;
  161.                 float: left;
  162.                 margin: 10px 30px 10px 0;
  163.                 border: 1px solid #D6D6D6;
  164.             }
  165.             
  166.             #content .contact h4 {
  167.                 font-size: 14px;
  168.                 font-weight: 800;
  169.                 margin: 30px 0 10px 30px;
  170.             }
  171.             
  172.             #content .contact p {
  173.                 text-indent: 2em;
  174.             }
  175.         </style>
  176.     </head>
  177.     <body>
  178.         <header>
  179.             <!--===============占位符图片===================-->
  180.             <img class="header-left" src="https://via.placeholder.com/150" alt="Placeholder Image">
  181.             <div class="header-right">
  182.                 <a href="#"><img src="https://via.placeholder.com/150" alt="" srcset="" />官方微信</a>&nbsp;<span style="color: #930;">|</span>
  183.                 <a href="login.html">管理员登录</a>&nbsp;<span style="color: #930;">|</span>
  184.                 <a href="register.html">会员注册</a>&nbsp;<span style="color: #930;">|</span>
  185.             </div>
  186.               <div class="header-text">照明材料</div>
  187.         </header>
  188.         <!--===================横向导航栏======================-->
  189.         <nav>
  190.             <ul>
  191.                 <li><a href="index.html">首页</a></li>
  192.                 <li><a href="products.html">产品中心</a></li>
  193.                 <li><a href="works.html">工程案例</a></li>
  194.                 <li><a href="news.html">新闻动态</a></li>
  195.                 <li><a href="about.html">招商加盟</a></li>
  196.                 <li><a href="connect.html">联系我们</a></li>
  197.             </ul>
  198.         </nav>
  199.         <!--==================内容区域=====================-->
  200.         <div id="content">
  201.             <div class="contact">
  202.                 <h3>CONTACT联系我们</h3>
  203.                 <hr color="#D6D6D6" size="3" width="100%" align="center"/>
  204.                 <img src="https://via.placeholder.com/150" alt="" />
  205.                 <h4>联系电话：</h4>
  206.                 <p>0633-3981234</p>
  207.                 <p>0633-3981235</p>
  208.                 <h4>传真：</h4>
  209.                 <p>0633-3961234</p>
  210.                 <h4>通信地址：</h4>
  211.                 <p>山东省日照市学院路 科技工业园A区16号</p>
  212.                 <p>邮编：276826</p>
  213.             
  214.         </div>
  215.         <!--===============页尾====================-->
  216.         <footer>
  217.             <p class="link">
  218.                 <a href="index.html">网页首页</a>|<a href="products.html">产品中心</a>|<a href="connect.html">联系方式</a>|<a href="news.html">新闻动态</a>
  219.             </p>
  220.             <p>地址：山东省日照市学院路 爱德照明科技有限公司</p>
  221.         </footer>
  222.         <div class="online_zx"><a href="#"><img src="https://via.placeholder.com/150" alt="" /></a></div>
  223.         
  224.     </body>
  225.     <script type="text/javascript"
  226.       src="https://webapi.amap.com/maps?v=1.4.8&key=d1d488592fbee456f8a48033f59f7cd2"></script>
  227.       <script>
  228.           
  229.       </script>
  230. </html>

登陆注册页面效果图：

代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>登录</title>
  6.         <style>
  7.             body{
  8.                 font-size: 13px;
  9.                 font-family: "微软雅黑";
  10.             }
  11.             body,form,input,h1,p{
  12.                 padding: 0;
  13.                 margin: 0;
  14.                 border: 0;
  15.             }
  16.             #bg{
  17.                 width: 100%;
  18.                 height: 750px;
  19.                 background: linear-gradient(to right, rgba(255,255,255,0),rgba(255,255,255,0) 30%,rgba(255,255,255,1)),
  20.                 url("img/single-page-header.jpg");
  21.                 background-size: cover;
  22.                 background-position: center;
  23.             }
  24.             form {
  25.                 width: 450px;
  26.                 height: 600px;
  27.                 position: absolute;
  28.                 right: 8%;
  29.                 top: 4%;
  30.             }
  31.             h2{
  32.                 width: 400px;
  33.                 text-align: center;
  34.                 margin: 25px 0;
  35.                 font-weight: 600;
  36.             }
  37.             
  38.             
  39.             p{
  40.                 margin-top: 20px;
  41.             }
  42.             
  43.             p span {
  44.                 width: 75px;
  45.                 display: inline-block;
  46.                 text-align: right;
  47.                 padding-right: 10px;
  48.             }
  49.             p input{
  50.                 width: 200px;
  51.                 height: 18px;
  52.                 border: 1px solid #d4cdba;
  53.                 padding: 2px;
  54.             }
  55.             
  56.             .btn input {
  57.                 width: 70px;
  58.                 height: 25px;
  59.                 border: 1px solid #AAA;
  60.                 background: #DDD;
  61.                 margin-top: 15px;
  62.                 margin-left: 80px;
  63.                 border-radius: 3px;
  64.                 font-size: 13px;
  65.                 font-family: "微软雅黑";
  66.                 color: #111;
  67.             }
  68.         </style>
  69.     </head>
  70.     <body>
  71.         <div id="bg">
  72.             <form action="#" method="get" autocomplete="0ff">
  73.                 <h2>会员注册</h2>
  74.                 <p><span>登录名：</span><input type="text" name="user_name" placeholder="姓名" required/>（必填）</p>
  75.                 <p><span>密&nbsp;&nbsp;码：</span><input type="password" name="user_pwd" value="" required/>(必填，不能少于8位)</p>
  76.                 <p><span>确认密码：</span><input type="password" name="pwdl" value="" required />(必填，不能少于8位)</p>
  77.                 <p><span>真实姓名：</span><input type="text" name="real_name" pattern="^[\u4e00-\u9fa5]{0,}$" required />(必填，只能输入汉字)</p>
  78.                 <p><span>真实年龄：</span><input type="number" name="real_age" value="24" min="15" max="120" required/>(必填)</p>
  79.                 <p><span>出生日期：</span><input type="date" name="birthday" value="1990-10-1" required/>(必填)</p>
  80.                 <p><span>电子邮箱：</span><input type="email" name="myemail" placeholder="name@163.com" required multiple/>(必填)</p>
  81.                 <p><span>身份证号：</span><input type="text" name="card" required pattern="^d{8,18}{0-9x}{8,18}{0-9X}{8,18}?&"/>(必填：18位身份证号)</p>
  82.                 <p><span>手机号码：</span><input type="tel" name="telphone" pattern="^\d{11}$" required>(必填)</p>
  83.                 <p><span>个人主页：</span><input type="url" name="myurl" list="urllist" placeholder="http://www.sdwrp.com" pattern="http://([w-]+\.)+[\w-]+(/[\w-./?%&=])"/>请选择网址
  84.                 <datalist id="urlist">
  85.                     <option>http://www.sdwrp.com</option>
  86.                     <option>http://www.baidu.com</option>
  87.                     <option>http://www.w3school.com.cn</option>
  88.                 </datalist>
  89.                 </p>
  90.                 <p class="btn">
  91.                     <input type="submit" value="提交"/>
  92.                     <input type="reset" value="重置"/>
  93.                 </p>
  94.             </form>
  95.         </div>
  96.     </body>
  97. </html>

6、客户案例页效果图：

代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>爱德照明网站首页</title>
  6.         <style>
  7.             /*=========页面顶部样式===========*/
  8.             *{
  9.                 margin: 0;
  10.                 padding: 0;
  11.                 box-sizing: border-box;
  12.             }
  13.             a{
  14.                 text-decoration: none;
  15.             }
  16.             body{
  17.                 width: 1050px;
  18.                 margin: 0 auto;
  19.                 font-family: "微软雅黑";
  20.                 font-size: 13px;
  21.                 color: #333;
  22.                 position: relative;
  23.             }
  24.             h3{
  25.                 font-size: 16px;
  26.                 color: #545861;
  27.                 font-weight: 500;
  28.             }
  29.             header{
  30.                 height: 250px;
  31.                 background-color: #FFFFEE;
  32.                 background-repeat: no-repeat;
  33.                 background-position: 50px;
  34.             }
  35.             .header-left{
  36.                 height: 50px;
  37.             }
  38.             .header-right{
  39.                 width: 250px;
  40.                 height: 50px;
  41.                 line-height: 50px;
  42.                 float: right;
  43.             }
  44.             .header-right img{
  45.                 width: 25px;
  46.                 height: 21px;
  47.             }
  48.             .header-right a:active,.header-right a:visited{
  49.                 text-decoration: none;
  50.                 color: #111111;
  51.             }
  52.             .header-right a:active,.header-right a:hover{
  53.                 color: blue;
  54.             }
  55.             .header-text{
  56.                 font-size: 40px;
  57.                 color: #4FAC00;
  58.                 margin-top: 10px;
  59.                 margin-left: 150px;
  60.             }
  61.             /*=========导航样式定义===========*/
  62.             nav{
  63.                 margin-bottom:5px;
  64.                 height: 36px;
  65.                 background-image: linear-gradient(0deg,#9cf,#fff 60%,#9cf 100%);
  66.                 border-bottom: 1px solid #DBEAEE;
  67.             }
  68.             nav ul{
  69.                 list-style-type: none;
  70.             }
  71.             nav a{
  72.                 display: block;
  73.                 width: 90px;
  74.                 height: 36px;
  75.                 float: left;
  76.                 padding: 0px 8px 0px 8px;
  77.                 margin: 0 10px 0 20px;
  78.                 text-decoration: none;
  79.                 text-align: center;
  80.                 font-family: tahoma;
  81.                 font-size: 14px;
  82.                 font-weight: bold;
  83.             }
  84.             nav ul:nth-child(1)a{
  85.                 width: 50px;
  86.             }
  87.             nav ul li a:link,nav ul li a:visited{
  88.                 color: #333;
  89.             }
  90.             nav ul li a:active,nav ul li a:hover{
  91.                 color: #FFF;
  92.                 background-image: linear-gradient(0deg,#36c,#9CF 60%,#fff 100%);
  93.             }
  94.             /*=========网页中部内容样式===========*/
  95.             #content{
  96.                 width: 1050px;
  97.                 height: auto;
  98.             }
  99.             /*=========热销产品列表样式===========*/
  100.             
  101.             footer {
  102.                 clear: both;
  103.                 height: 100px;
  104.                 background: #545861;
  105.                 border-bottom: 1px solid #fff;
  106.                 color: #ffffff;
  107.                 text-align: center;
  108.             }
  109.             footer :link {
  110.                 padding-top: 25px;
  111.             }
  112.             
  113.             footer :link a {
  114.                 display: inline-block;
  115.                 width: 70px;
  116.                 height: 36px;
  117.                 color: #ffffff;
  118.                 padding: 0px 8px 0px 8px;
  119.                 margin: 0 14px 0 14px;
  120.                 text-decoration: none;
  121.                 text-align: center;
  122.             }
  123.             footer :link a:hover {
  124.                 color: #ccc;
  125.                 text-decoration: underline;
  126.             }
  127.             
  128.             .online_zx {
  129.                 position: fixed;
  130.                 top: 30px;
  131.                 right: 10px;
  132.             }
  133.             
  134.             /*=========左侧样式===========*/
  135.             #content {
  136.                 width: 1050px;
  137.                 height: auto;
  138.             }
  139.             #content-left {
  140.                 width: 250px;
  141.                 height: auto;
  142.                 float: left;
  143.             }
  144.             
  145.             #content-left ul {
  146.                 list-style: none;
  147.                 width: 250px;
  148.                 background: #fff;
  149.                 border-radius: 10px;
  150.                 margin: 0 auto;
  151.             }
  152.             
  153.             #content-left ul li {
  154.                 width: 250px;
  155.                 height: 50px;
  156.                 margin-bottom: 1px;
  157.                 padding-left: 80px;
  158.                 background: #DDDDDD;
  159.                 font-size: 14px;
  160.                 line-height: 55px;
  161.                 text-align: left;
  162.             }
  163.             
  164.             #content ul li a:link,#content-left ul li a:visited{
  165.                 color: #333;
  166.             }
  167.             
  168.             #content-left ul li a:hover{
  169.                 color: #0091D8;
  170.             }
  171.             
  172.             #content-left ul .tp {
  173.                 font-size: 18px;
  174.                 font-weight: 500;
  175.                 padding: 0px;
  176.                 text-align: center;
  177.                 width: 250px;
  178.                 height: 65px;
  179.                 line-height: 80px;
  180.                 background: #BBB;
  181.                 border-radius: 10px 0 0;
  182.             }
  183.             #content-left ul .yj {
  184.                 height: 20px;
  185.                 border-radius: 0 0 0 10px;
  186.                 margin-bottom: 5px;
  187.             }
  188.             #content-right {
  189.                 float: right;
  190.                 width: 800px;
  191.                 height: auto;
  192.             }
  193.                 
  194.             #content-right .tt {
  195.                 height: 40px;
  196.                 width: 785px;
  197.                 margin-left: 15px;
  198.                 border-bottom: 2px solid #D6D6D6;
  199.             }
  200.             #content-right h3 {
  201.                 font-weight: 500;
  202.                 font-size: 16px;
  203.                 border-bottom: 2px solid #0091D8;
  204.                 width: 90px;
  205.                 border-bottom: 10px 0 7px 5px;
  206.             }
  207.             #content-right #article {
  208.                 width: 800px;
  209.                 height: auto;
  210.             }
  211.             #content-right #article .products{
  212.                 width: 800px;
  213.             }
  214.             #article .products ul {
  215.                 list-style: none;
  216.             }
  217.             #article .products ul li {
  218.                 width: 180px;
  219.                 height: 210px;
  220.                 float: left;
  221.                 margin: 10px;
  222.                 font-size: 14px;
  223.                 text-align: center;
  224.             }
  225.             #article .products ul li img {
  226.                 width: 180px;
  227.                 height: 180px;
  228.                 margin: 10px;
  229.             }
  230.             
  231.             #article .products ul li a:hover {
  232.                 color: #0091D8;
  233.             }
  234.             #article .products ul li a:hover img {
  235.                 border: 2px solid #0091D8;
  236.             }
  237.             
  238.             #imagePopup {
  239.               display: none;
  240.               position: fixed;
  241.               z-index: 9999;
  242.               left: 0;
  243.               top: 0;
  244.               width: 100%;
  245.               height: 100%;
  246.               overflow: auto;
  247.               background-color: rgba(0,0,0,0.8);
  248.             }
  249.             
  250.             #imagePopup img {
  251.               margin: auto;
  252.               display: block;
  253.               max-width: 100%;
  254.               max-height: 100%;
  255.               background-position: center;
  256.               margin-top: 300px;
  257.             }
  258.             
  259.             .closePopup {
  260.               color: #fff;
  261.               float: right;
  262.               font-size: 28px;
  263.               font-weight: bold;
  264.               cursor: pointer;
  265.               padding: 10px;
  266.             }
  267.             
  268.             .closePopup:hover {
  269.               color: #ccc;
  270.             }
  271.             
  272.             .content_center {
  273.               display: flex;
  274.               flex-wrap: wrap;
  275.               justify-content: center;
  276.             }
  277.             
  278.             .content_center img {
  279.               margin: 10px;
  280.               cursor: pointer;
  281.             }
  282.         </style>
  283.     </head>
  284.     <body>
  285.         <header>
  286.             <!--===============占位符图片===================-->
  287.             <img class="header-left" src="https://via.placeholder.com/150" alt="Placeholder Image">
  288.             <div class="header-right">
  289.                 <a href="#"><img src="https://via.placeholder.com/150" alt="" srcset="" />官方微信</a>&nbsp;<span style="color: #930;">|</span>
  290.                 <a href="login.html">管理员登录</a>&nbsp;<span style="color: #930;">|</span>
  291.                 <a href="register.html">会员注册</a>&nbsp;<span style="color: #930;">|</span>
  292.             </div>
  293.               <div class="header-text">照明材料</div>
  294.         </header>
  295.         <!--===================横向导航栏======================-->
  296.         <nav>
  297.             <ul>
  298.                 <li><a href="index.html">首页</a></li>
  299.                 <li><a href="companyfile.html">关于我们</a></li>
  300.                 <li><a href="products.html">产品中心</a></li>
  301.                 <li><a href="works.html">工程案例</a></li>
  302.                 <li><a href="news.html">新闻动态</a></li>
  303.                 <li><a href="about.html">招商加盟</a></li>
  304.                 <li><a href="contact.html">联系我们</a></li>
  305.             </ul>
  306.         </nav>
  307.         <!--==================内容区域=====================-->
  308.         <div id="content">
  309.             <aside id="content-left">
  310.                 <ul>
  311.                     <li class="tp">工程案例</li>
  312.                     <li><a href="">客户案例</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://via.placeholder.com/150" alt="" /></li>
  313.                     <li><a href="">数码灯案例</a></li>
  314.                     <li><a href="">西培灯案例</a></li>
  315.                     <li><a href="">墙角灯案例</a></li>
  316.                     <li class="yj"></li>
  317.                 </ul>
  318.             </aside>
  319.         <div id="content-right">
  320.             <div class="tt">
  321.                 <h3>客户案例</h3>
  322.             </div>
  323.             <h2 style="font-weight: 500;margin-left: 35px;font-size: 15px;margin-top: 20px;">灯光表现力主要作用：</h2>
  324.             <div id="article">
  325.                 <p style="margin-left: 35px;margin-top: 4px;">1、加工空间艺术：利用灯光的表现力对环境空间进行艺术加工，满足了人们对视觉的需求，得到美的享受和视觉平衡。</p>
  326.                 <p style="margin-left: 35px;margin-top: 4px;">2、物体造型渲染：利用灯光对广场建筑和物体造型的渲染，以利用灯光作出廊画等，发挥丰富的艺术效果。</p>
  327.                 <p style="margin-left: 35px;margin-top: 4px;">3、丰富空间内容：通过明暗对比，在一片环境宽度较低的背景中出现即视效应，增加空间层次，吸引人们视觉注意力。</p>
  328.                 <p style="margin-left: 35px;margin-top: 4px;">4、装饰空间艺术：通过自身的造型，质感以及灯具排列组合对空间起点强化艺术效果的作用。</p>
  329.             </div>
  330.             
  331.              <div class="content_center" style="margin-top: 20px;margin-left: -125px;width: 1050px;">
  332.                 <img src="https://via.placeholder.com/150" alt="" srcset="" onclick="showImagePopup(this.src)" style="width: 130px; height: 130px;"/>
  333.                 <img src="https://via.placeholder.com/150" alt="" srcset="" onclick="showImagePopup(this.src)" style="width: 130px; height: 130px;"/>
  334.                 <img src="https://via.placeholder.com/150" alt="" srcset="" onclick="showImagePopup(this.src)" style="width: 130px; height: 130px;"/>
  335.                 <img src="https://via.placeholder.com/150" alt="" srcset="" onclick="showImagePopup(this.src)" style="width: 130px; height: 130px;"/>
  336.                 <img src="https://via.placeholder.com/150" alt="" srcset="" onclick="showImagePopup(this.src)" style="width: 130px; height: 130px;"/>
  337.               </div>
  338.             
  339.               <div id="imagePopup">
  340.                 <span class="closePopup" onclick="closeImagePopup()">&times;</span>
  341.                 <img id="popupImage" src="" alt="" srcset="" />
  342.               </div>
  343.  
  344.         </div>
  345.         </div>
  346.         
  347.  
  348.         <!--===============页尾====================-->
  349.         <footer>
  350.             <p class="link">
  351.                 <a href="index.html">网页首页</a>|<a href="products.html">产品中心</a>|<a href="contact.html">联系方式</a>|<a href="news.html">新闻动态</a>
  352.             </p>
  353.             <p>地址：山东省日照市学院路 爱德照明科技有限公司</p>
  354.         </footer>
  355.         <div class="online_zx"><a href="#"><img src="https://via.placeholder.com/150" alt="" /></a></div>
  356.         
  357.     </body>
  358.     <script>
  359.         function showImagePopup(src) {
  360.             var popup = document.getElementById("imagePopup");
  361.             var image = document.getElementById("popupImage");
  362.             image.src = src;
  363.             popup.style.display = "block";
  364.             }
  365.         function closeImagePopup() {
  366.             var popup = document.getElementById("imagePopup");
  367.             popup.style.display = "none";
  368.             }
  369.     </script>
  370. </html>

弹出层效果图：

7、公司简介页面效果图：

代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>爱德照明网站首页</title>
  6.         <style>
  7.             /*=========页面顶部样式===========*/
  8.             *{
  9.                 margin: 0;
  10.                 padding: 0;
  11.                 box-sizing: border-box;
  12.             }
  13.             a{
  14.                 text-decoration: none;
  15.             }
  16.             body{
  17.                 width: 1050px;
  18.                 margin: 0 auto;
  19.                 font-family: "微软雅黑";
  20.                 font-size: 13px;
  21.                 color: #333;
  22.                 position: relative;
  23.             }
  24.             h3{
  25.                 font-size: 16px;
  26.                 color: #545861;
  27.                 font-weight: 500;
  28.             }
  29.             header{
  30.                 height: 250px;
  31.                 background-color: #FFFFEE;
  32.                 background-repeat: no-repeat;
  33.                 background-position: 50px;
  34.             }
  35.             .header-left{
  36.                 height: 50px;
  37.             }
  38.             .header-right{
  39.                 width: 250px;
  40.                 height: 50px;
  41.                 line-height: 50px;
  42.                 float: right;
  43.             }
  44.             .header-right img{
  45.                 width: 25px;
  46.                 height: 21px;
  47.             }
  48.             .header-right a:active,.header-right a:visited{
  49.                 text-decoration: none;
  50.                 color: #111111;
  51.             }
  52.             .header-right a:active,.header-right a:hover{
  53.                 color: blue;
  54.             }
  55.             .header-text{
  56.                 font-size: 40px;
  57.                 color: #4FAC00;
  58.                 margin-top: 10px;
  59.                 margin-left: 150px;
  60.             }
  61.             /*=========导航样式定义===========*/
  62.             nav{
  63.                 margin-bottom:5px;
  64.                 height: 36px;
  65.                 background-image: linear-gradient(0deg,#9cf,#fff 60%,#9cf 100%);
  66.                 border-bottom: 1px solid #DBEAEE;
  67.             }
  68.             nav ul{
  69.                 list-style-type: none;
  70.             }
  71.             nav a{
  72.                 display: block;
  73.                 width: 90px;
  74.                 height: 36px;
  75.                 float: left;
  76.                 padding: 0px 8px 0px 8px;
  77.                 margin: 0 10px 0 20px;
  78.                 text-decoration: none;
  79.                 text-align: center;
  80.                 font-family: tahoma;
  81.                 font-size: 14px;
  82.                 font-weight: bold;
  83.             }
  84.             nav ul:nth-child(1)a{
  85.                 width: 50px;
  86.             }
  87.             nav ul li a:link,nav ul li a:visited{
  88.                 color: #333;
  89.             }
  90.             nav ul li a:active,nav ul li a:hover{
  91.                 color: #FFF;
  92.                 background-image: linear-gradient(0deg,#36c,#9CF 60%,#fff 100%);
  93.             }
  94.             /*=========网页中部内容样式===========*/
  95.             #content{
  96.                 width: 1050px;
  97.                 height: auto;
  98.             }
  99.             /*=========热销产品列表样式===========*/
  100.             
  101.             footer {
  102.                 clear: both;
  103.                 height: 100px;
  104.                 background: #545861;
  105.                 border-bottom: 1px solid #fff;
  106.                 color: #ffffff;
  107.                 text-align: center;
  108.             }
  109.             footer :link {
  110.                 padding-top: 25px;
  111.             }
  112.             
  113.             footer :link a {
  114.                 display: inline-block;
  115.                 width: 70px;
  116.                 height: 36px;
  117.                 color: #ffffff;
  118.                 padding: 0px 8px 0px 8px;
  119.                 margin: 0 14px 0 14px;
  120.                 text-decoration: none;
  121.                 text-align: center;
  122.             }
  123.             footer :link a:hover {
  124.                 color: #ccc;
  125.                 text-decoration: underline;
  126.             }
  127.             
  128.             .online_zx {
  129.                 position: fixed;
  130.                 top: 30px;
  131.                 right: 10px;
  132.             }
  133.             
  134.             /*=========左侧样式===========*/
  135.             #content {
  136.                 width: 1050px;
  137.                 height: auto;
  138.             }
  139.             #content-left {
  140.                 width: 250px;
  141.                 height: auto;
  142.                 float: left;
  143.             }
  144.             
  145.             #content-left ul {
  146.                 list-style: none;
  147.                 width: 250px;
  148.                 background: #fff;
  149.                 border-radius: 10px;
  150.                 margin: 0 auto;
  151.             }
  152.             
  153.             #content-left ul li {
  154.                 width: 250px;
  155.                 height: 50px;
  156.                 margin-bottom: 1px;
  157.                 padding-left: 80px;
  158.                 background: #DDDDDD;
  159.                 font-size: 14px;
  160.                 line-height: 55px;
  161.                 text-align: left;
  162.             }
  163.             
  164.             #content ul li a:link,#content-left ul li a:visited{
  165.                 color: #333;
  166.             }
  167.             
  168.             #content-left ul li a:hover{
  169.                 color: #0091D8;
  170.             }
  171.             
  172.             #content-left ul .tp {
  173.                 font-size: 18px;
  174.                 font-weight: 500;
  175.                 padding: 0px;
  176.                 text-align: center;
  177.                 width: 250px;
  178.                 height: 65px;
  179.                 line-height: 80px;
  180.                 background: #BBB;
  181.                 border-radius: 10px 0 0;
  182.             }
  183.             #content-left ul .yj {
  184.                 height: 20px;
  185.                 border-radius: 0 0 0 10px;
  186.                 margin-bottom: 5px;
  187.             }
  188.             #content-right {
  189.                 float: right;
  190.                 width: 800px;
  191.                 height: auto;
  192.             }
  193.                 
  194.             #content-right .tt {
  195.                 height: 40px;
  196.                 width: 785px;
  197.                 margin-left: 15px;
  198.                 border-bottom: 2px solid #D6D6D6;
  199.             }
  200.             #content-right h3 {
  201.                 font-weight: 500;
  202.                 font-size: 16px;
  203.                 border-bottom: 2px solid #0091D8;
  204.                 width: 90px;
  205.                 border-bottom: 10px 0 7px 5px;
  206.             }
  207.             #content-right #article {
  208.                 width: 800px;
  209.                 height: auto;
  210.             }
  211.             
  212.             .tt p{
  213.                 font-family: Tahoma;
  214.                 color: #444;
  215.                 text-align: left;
  216.                 font-size: 13px;
  217.                 line-height: 24px;
  218.                 text-indent: 2em;
  219.                 margin: 5px;
  220.             }
  221.         </style>
  222.     </head>
  223.     <body>
  224.         <header>
  225.             <!--===============占位符图片===================-->
  226.             <img class="header-left" src="https://via.placeholder.com/150" alt="Placeholder Image">
  227.             <div class="header-right">
  228.                 <a href="#"><img src="https://via.placeholder.com/150" alt="" srcset="" />官方微信</a>&nbsp;<span style="color: #930;">|</span>
  229.                 <a href="login.html">管理员登录</a>&nbsp;<span style="color: #930;">|</span>
  230.                 <a href="register.html">会员注册</a>&nbsp;<span style="color: #930;">|</span>
  231.             </div>
  232.               <div class="header-text">照明材料</div>
  233.         </header>
  234.         <!--===================横向导航栏======================-->
  235.         <nav>
  236.             <ul>
  237.                 <li><a href="index.html">首页</a></li>
  238.                 <li><a href="">关于我们</a></li>
  239.                 <li><a href="products.html">产品中心</a></li>
  240.                 <li><a href="works.html">工程案例</a></li>
  241.                 <li><a href="news.html">新闻动态</a></li>
  242.                 <li><a href="about.html">招商加盟</a></li>
  243.                 <li><a href="contact.html">联系我们</a></li>
  244.             </ul>
  245.         </nav>
  246.         <!--=================内容区域===================-->
  247.         <div id="content">
  248.             <aside id="content-left">
  249.                 <ul>
  250.                     <li class="tp">关于我们</li>
  251.                     <li><a href="">公司简介</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://via.placeholder.com/150" alt="" /></li>
  252.                     <li><a href="honner.html">公司荣誉</a></li>
  253.                     <li><a href="history.html">发展历程</a></li>
  254.                     <li><a href="team.html">企业团队</a></li>
  255.                     <li><a href="cuture.html">企业文化</a></li>
  256.                     <li><a href="encormainls.html">公司环境</a></li>
  257.                     <li class="yj"></li>
  258.                 </ul>
  259.             </aside>
  260.         <div id="content-right">
  261.             <div class="tt">
  262.                 <h3>公司简介</h3>
  263.                 <p style="margin-top: 30px;">公司成立于2008年，是一家专业照明亮化工程公司，公司拥有国家一级工程施工资质，同时也是一家集市政路灯、户外亮化、照明工程设计、LED室内外灯销售及施工为一体的大型专业话“照明工程"公司。</p>
  264.                 <p style="position: relative;top: -5px;">公司现有员工中专及以上学历的占66.9%，中级工程师占32.8%，高级工程师占11.2%。现已形成一只技术精湛，富有敬业，创新精确的专业型人才队伍。是中国照明行业，城市及道路专业施工一级资质的企业，能为客户提供独具匠心的照明设计，环保节能的产品配置，经济实惠的造价理念，一战式美化照明解决方案和完善的售后服务保障。</p>
  265.                 <p style="position: relative;top: -10px;">公司在员工的不懈努力和社会各界的支持下，经过7年多的发展，已由普通的城市及道路照明三级资质晋升为中国一级施工企业。公司严格遵守ISO9001质量保证体系，荣获全国照明行业“AAA级施工单位”、“质量优”、“信誉好先进单位”、“质量信的过单位”等等，是“政府采购”首选优良工程施工单位，是中国照明电器协会会员单位，同时也是中国照明电器协会LED生产专业委员会委员。</p>
  266.                 <p style="position: relative;top: -15px;">公司立于广州中山，辐射全国，是LED照明、LED景观美化、LED显示屏、太阳能照明、风能照明、风光两能照明、光导照明、光纤照明及补光照明工程公司，做中国照明行业一流企业是我们的目标，在今后的企业发展道路上，用我们的专业照明技术为智慧城市及道路照明的节能环保，创造舒适的环境。</p>
  267.             </div>
  268.             
  269.         </div>
  270.         
  272.         <!--===============页尾====================-->
  273.         <footer style="position: relative;top: 30px;">
  274.             <p class="link">
  275.                 <a href="index.html">网页首页</a>|<a href="products.html">产品中心</a>|<a href="contact.html">联系方式</a>|<a href="news.html">新闻动态</a>
  276.             </p>
  277.             <p>地址：山东省日照市学院路 爱德照明科技有限公司</p>
  278.         </footer>
  279.         <div class="online_zx"><a href="#"><img src="https://via.placeholder.com/150" alt="" /></a></div>
  280.         
  281.     </body>
  282.     <script>
  283.         
  284.     </script>
  285. </html>

9、公司荣誉页面效果图：

代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>爱德照明网站首页</title>
  6.         <style>
  7.             /*=========页面顶部样式===========*/
  8.             *{
  9.                 margin: 0;
  10.                 padding: 0;
  11.                 box-sizing: border-box;
  12.             }
  13.             a{
  14.                 text-decoration: none;
  15.             }
  16.             body{
  17.                 width: 1050px;
  18.                 margin: 0 auto;
  19.                 font-family: "微软雅黑";
  20.                 font-size: 13px;
  21.                 color: #333;
  22.                 position: relative;
  23.             }
  24.             h3{
  25.                 font-size: 16px;
  26.                 color: #545861;
  27.                 font-weight: 500;
  28.             }
  29.             header{
  30.                 height: 250px;
  31.                 background-color: #FFFFEE;
  32.                 background-repeat: no-repeat;
  33.                 background-position: 50px;
  34.             }
  35.             .header-left{
  36.                 height: 50px;
  37.             }
  38.             .header-right{
  39.                 width: 250px;
  40.                 height: 50px;
  41.                 line-height: 50px;
  42.                 float: right;
  43.             }
  44.             .header-right img{
  45.                 width: 25px;
  46.                 height: 21px;
  47.             }
  48.             .header-right a:active,.header-right a:visited{
  49.                 text-decoration: none;
  50.                 color: #111111;
  51.             }
  52.             .header-right a:active,.header-right a:hover{
  53.                 color: blue;
  54.             }
  55.             .header-text{
  56.                 font-size: 40px;
  57.                 color: #4FAC00;
  58.                 margin-top: 10px;
  59.                 margin-left: 150px;
  60.             }
  61.             /*=========导航样式定义===========*/
  62.             nav{
  63.                 margin-bottom:5px;
  64.                 height: 36px;
  65.                 background-image: linear-gradient(0deg,#9cf,#fff 60%,#9cf 100%);
  66.                 border-bottom: 1px solid #DBEAEE;
  67.             }
  68.             nav ul{
  69.                 list-style-type: none;
  70.             }
  71.             nav a{
  72.                 display: block;
  73.                 width: 90px;
  74.                 height: 36px;
  75.                 float: left;
  76.                 padding: 0px 8px 0px 8px;
  77.                 margin: 0 10px 0 20px;
  78.                 text-decoration: none;
  79.                 text-align: center;
  80.                 font-family: tahoma;
  81.                 font-size: 14px;
  82.                 font-weight: bold;
  83.             }
  84.             nav ul:nth-child(1)a{
  85.                 width: 50px;
  86.             }
  87.             nav ul li a:link,nav ul li a:visited{
  88.                 color: #333;
  89.             }
  90.             nav ul li a:active,nav ul li a:hover{
  91.                 color: #FFF;
  92.                 background-image: linear-gradient(0deg,#36c,#9CF 60%,#fff 100%);
  93.             }
  94.             /*=========网页中部内容样式===========*/
  95.             #content{
  96.                 width: 1050px;
  97.                 height: auto;
  98.             }
  99.             /*=========热销产品列表样式===========*/
  100.             
  101.             footer {
  102.                 clear: both;
  103.                 height: 100px;
  104.                 background: #545861;
  105.                 border-bottom: 1px solid #fff;
  106.                 color: #ffffff;
  107.                 text-align: center;
  108.             }
  109.             footer :link {
  110.                 padding-top: 25px;
  111.             }
  112.             
  113.             footer :link a {
  114.                 display: inline-block;
  115.                 width: 70px;
  116.                 height: 36px;
  117.                 color: #ffffff;
  118.                 padding: 0px 8px 0px 8px;
  119.                 margin: 0 14px 0 14px;
  120.                 text-decoration: none;
  121.                 text-align: center;
  122.             }
  123.             footer :link a:hover {
  124.                 color: #ccc;
  125.                 text-decoration: underline;
  126.             }
  127.             
  128.             .online_zx {
  129.                 position: fixed;
  130.                 top: 30px;
  131.                 right: 10px;
  132.             }
  133.             
  134.             /*=========左侧样式===========*/
  135.             #content {
  136.                 width: 1050px;
  137.                 height: auto;
  138.             }
  139.             #content-left {
  140.                 width: 250px;
  141.                 height: auto;
  142.                 float: left;
  143.             }
  144.             
  145.             #content-left ul {
  146.                 list-style: none;
  147.                 width: 250px;
  148.                 background: #fff;
  149.                 border-radius: 10px;
  150.                 margin: 0 auto;
  151.             }
  152.             
  153.             #content-left ul li {
  154.                 width: 250px;
  155.                 height: 50px;
  156.                 margin-bottom: 1px;
  157.                 padding-left: 80px;
  158.                 background: #DDDDDD;
  159.                 font-size: 14px;
  160.                 line-height: 55px;
  161.                 text-align: left;
  162.             }
  163.             
  164.             #content ul li a:link,#content-left ul li a:visited{
  165.                 color: #333;
  166.             }
  167.             
  168.             #content-left ul li a:hover{
  169.                 color: #0091D8;
  170.             }
  171.             
  172.             #content-left ul .tp {
  173.                 font-size: 18px;
  174.                 font-weight: 500;
  175.                 padding: 0px;
  176.                 text-align: center;
  177.                 width: 250px;
  178.                 height: 65px;
  179.                 line-height: 80px;
  180.                 background: #BBB;
  181.                 border-radius: 10px 0 0;
  182.             }
  183.             #content-left ul .yj {
  184.                 height: 20px;
  185.                 border-radius: 0 0 0 10px;
  186.                 margin-bottom: 5px;
  187.             }
  188.             #content-right {
  189.                 float: right;
  190.                 width: 800px;
  191.                 height: auto;
  192.             }
  193.                 
  194.             #content-right .tt {
  195.                 height: 40px;
  196.                 width: 785px;
  197.                 margin-left: 15px;
  198.                 border-bottom: 2px solid #D6D6D6;
  199.             }
  200.             #content-right h3 {
  201.                 font-weight: 500;
  202.                 font-size: 16px;
  203.                 border-bottom: 2px solid #0091D8;
  204.                 width: 90px;
  205.                 border-bottom: 10px 0 7px 5px;
  206.             }
  207.             #content-right #article {
  208.                 width: 800px;
  209.                 height: auto;
  210.             }
  211.         
  212.             
  213.         </style>
  214.     </head>
  215.     <body>
  216.         <header>
  217.             <!--===============占位符图片===================-->
  218.             <img class="header-left" src="https://via.placeholder.com/150" alt="Placeholder Image">
  219.             <div class="header-right">
  220.                 <a href="#"><img src="https://via.placeholder.com/150" alt="" srcset="" />官方微信</a>&nbsp;<span style="color: #930;">|</span>
  221.                 <a href="login.html">管理员登录</a>&nbsp;<span style="color: #930;">|</span>
  222.                 <a href="register.html">会员注册</a>&nbsp;<span style="color: #930;">|</span>
  223.             </div>
  224.               <div class="header-text">照明材料</div>
  225.         </header>
  226.         <!--===================横向导航栏======================-->
  227.         <nav>
  228.             <ul>
  229.                 <li><a href="index.html">首页</a></li>
  230.                 <li><a href="about_us.html">关于我们</a></li>
  231.                 <li><a href="products.html">产品中心</a></li>
  232.                 <li><a href="works.html">工程案例</a></li>
  233.                 <li><a href="news.html">新闻动态</a></li>
  234.                 <li><a href="about.html">招商加盟</a></li>
  235.                 <li><a href="contact.html">联系我们</a></li>
  236.             </ul>
  237.         </nav>
  238.         <!--==================内容区域=====================-->
  239.         <div id="content">
  240.             <aside id="content-left">
  241.                 <ul>
  242.                     <li class="tp">关于我们</li>
  243.                     <li><a href="companyfile.html">公司简介</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://via.placeholder.com/150" alt="" /></li>
  244.                     <li><a href="">公司荣誉</a></li>
  245.                     <li><a href="history.html">发展历程</a></li>
  246.                     <li><a href="team.html">企业团队</a></li>
  247.                     <li><a href="cuture.html">企业文化</a></li>
  248.                     <li><a href="encormainls.html">公司环境</a></li>
  249.                     <li class="yj"></li>
  250.                 </ul>
  251.             </aside>
  252.         <div id="content-right">
  253.             <div class="tt">
  254.                 <h3>公司荣誉</h3>
  255.             </div>
  256.             <article style="position: relative;left:15px;margin-top: 20px;">
  257.                 <div class="tp" style="">
  258.                     <img src="https://via.placeholder.com/150" alt="" style="width: 180px;height: 200px;"/>
  259.                     <img src="https://via.placeholder.com/150" alt="" style="width: 180px;height: 200px;position: relative;left: 10px;"/>
  260.                     <img src="https://via.placeholder.com/150" alt="" style="width: 180px;height: 200px;position: relative;left: 20px;"/>
  261.                     <img src="https://via.placeholder.com/150" alt="" style="width: 180px;height: 200px;position: relative;left: 30px;"/>
  262.                     <img src="https://via.placeholder.com/150" alt="" style="width: 180px;height: 200px;position: relative;top: 10px;"/>
  263.                     <img src="https://via.placeholder.com/150" alt="" style="width: 180px;height: 200px;position: relative;left: 10px;top: 10px;"/>
  264.                     <img src="https://via.placeholder.com/150" alt="" style="width: 180px;height: 200px;position: relative;left: 20px;top: 10px;"/>
  265.                     <img src="https://via.placeholder.com/150" alt="" style="width: 180px;height: 200px;position: relative;left: 30px;top: 10px;"/>
  266.                     <img src="https://via.placeholder.com/150" alt="" style="width: 180px;height: 200px;top: 15px;position: relative;"/>
  267.                     <img src="https://via.placeholder.com/150" alt="" style="width: 180px;height: 200px;position: relative;left: 10px;top: 15px;"/>
  268.                     <img src="https://via.placeholder.com/150" alt="" style="width: 180px;height: 200px;position: relative;left: 20px;top: 15px;"/>
  269.                     <img src="https://via.placeholder.com/150" alt="" style="width: 180px;height: 200px;position: relative;left: 30px;top: 15px;"/>
  270.                     <img src="https://via.placeholder.com/150" alt="" style="width: 180px;height: 200px;top: 20px;position: relative;"/>
  271.                     <img src="https://via.placeholder.com/150" alt="" style="width: 180px;height: 200px;position: relative;left: 10px;top: 20px;"/>
  272.                     <img src="https://via.placeholder.com/150" alt="" style="width: 180px;height: 200px;position: relative;left: 20px;top: 20px;"/>
  273.                     <img src="https://via.placeholder.com/150" alt="" style="width: 180px;height: 200px;position: relative;left: 30px;top: 20px;"/>
  274.                 </div>
  275.             </article>
  276.         </div>
  277.         
  278.  
  279.         <!--===============页尾====================-->
  280.         <footer style="position: relative;top: 30px;">
  281.             <p class="link">
  282.                 <a href="index.html">网页首页</a>|<a href="products.html">产品中心</a>|<a href="contact.html">联系方式</a>|<a href="news.html">新闻动态</a>
  283.             </p>
  284.             <p>地址：山东省日照市学院路 爱德照明科技有限公司</p>
  285.         </footer>
  286.         <div class="online_zx"><a href="#"><img src="https://via.placeholder.com/150" alt="" /></a></div>
  287.         
  288.     </body>
  289.     <script>
  290.         
  291.     </script>
  292. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/543791
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号