【4858美高梅】css十遗集合,边框采纳与导航栏设置

By admin in 4858美高梅 on 2019年4月12日

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”utf-8″ />
        <title></title>
        <style type=”text/css”>
            /*制作三角形*/
            #one{
                width: 0px;
                height: 0px;
                border-top: 100px solid blue;
                border-left: 100px solid transparent;
                border-right: 100px solid transparent;
            }
            /*营造箭头*/
            #two{
                width: 100px;
                height:100px;
                border-bottom: 10px solid blueviolet;
                border-left: 10px solid blueviolet;
              
 /*rotate:旋转*/

              
 transform:rotate(45deg);
            }
          
 /*制作可转移的导航栏*/

            #three{
                width: 800px;
                height: 50px;
                border: 5px solid #e9e9e9;
            }
            #three li{
                width: 140px;
                height: 50px;
                font-family: “微软雅黑”;
                float: left;
                line-height: 50px;
                margin-top: -17px;
            }
          
 /*当鼠标放上后爆发的更改*/

            li:hover{
                width: 140px;
                height: 48px;
                color: white;
                background-color: #b3b6bb;
                border-top: 1px solid #F39;
                line-height: 50px;
                margin-top:-16px;    
            }
          
 /*排列去掉排头序号*/

            ul{
                list-style:
none;

            }
        </style>
    </head>
    <body>
        <center>
            <h3>第一题</h3>
            <div id=”one”></div>
        </center>
        <br />
        <br />
        <br />
        <center>
            <h3>第二题</h3>
            <br />
            <div id=”two”></div>
        </center>
        <center>
        <br />
        <br />
        <br />
            <h3>第三题</h3>
            <br />
            <div id=”three”>
                <ul>
                    <li>春节</li>
                    <li>元宵节</li>
                    <li>端午节</li>
                    <li>中秋节</li>
                    <li>国庆节</li>
                </ul>
            </div>
        </center>
        <br />
        <br />
        <br />
    </body>
</html>

CSS10遗+技巧集合,css10遗集合

一、完毕尖角符号。

这是内联inline-block标签独有的特征。

4858美高梅 1<!DOCTYPE
html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>Title</title> <style> .a{
border-top:30px solid #000000 ; border-bottom: 30px solid #2c78d5;
border-left:30px solid #1dd537 ; border-right: 30px solid #ff3021;
display: inline-block; } .b{ border-top:30px solid #000000 ;
/*border-bottom: 30px solid #2c78d5;*/ border-left:30px solid
#1dd537 ; border-right: 30px solid #ff3021; display: inline-block; }
.c{ border: 30px solid transparent; /*transparent为透明色*/
margin-top:20px ; display: inline-block; border-top:30px solid #000000
; } .c:hover{ margin-top:-10px ; border: 30px solid transparent;
border-bottom:30px solid #000000; } .bb{ border-top:30px solid #000000
; /*border-bottom: 30px solid #2c78d5;*/ border-left:30px solid
#1dd537 ; border-right: 30px solid #ff3021; display: inline-block; }
/*bb为团结想的方法,不必要转移本身的地点即可。*/
/*bb和b为圆锥形,其余为长方形*/ .bb:hover{ margin-top:15px ; border:
0; border-bottom: 30px solid #2c78d5; border-left:30px solid #1dd537 ;
border-right: 30px solid #ff3021; } .a:hover{ } </style>
</head> <body> <div class=”a”></div> <div
class=”b”></div> <div class=”bb”></div> <div
style=”background-color: #ff3021;height: 70px”> <div
class=”c”></div> </div> </body> </html> View Code

鼠标临幸前:4858美高梅 2

鼠标临幸后:4858美高梅 3

 

二、实现输入框最后有小图标

4858美高梅 4 1
<!DOCTYPE html> 2 <html lang=”en”> 3 <head> 4 <meta
charset=”UTF-8″> 5 <title>Title</title> 6 <style> 7
.login{ 8 position: relative; 9 /*父级标签 position为
relative时,子标签才会根据父级标签定位。不然一流一流找,找不到就依照body定位*/
10 } 11 .login input{ 12 width: 170px; 13 padding-right: 20px; 14
/*完结输入到大切诺基处就不增进的法力*/ 15 height: 30px; 16 } 17 .ren{ 18
position: absolute; 19 /*根据父标签 来稳定。*/ 20 top: 8px; 21 left:
180px; 22 } 23 </style> 24 </head> 25 <body> 26
<div class=”login”> 27 <input type=”text”> 28 <span
class=”ren”>R</span> 29 </div> 30 </body> 31
</html> View Code

输入前:4858美高梅 5

输入后:4858美高梅 6

  文字不会当先“瑞虎”的职分,通过安装padding-right.

三、落成购物加减按钮

4858美高梅 7<!DOCTYPE
html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>Title</title> <style>
.left{ float: left; } /*公用left*/ .w{ width: 96px; border: 1px solid
#ddd; height: 22px; } .jia{ text-align: center; line-height: 22px;
height: 22px; width: 22px; cursor: pointer; /*鼠标放上去时,变成小手*/
} .text{ height: 22px; width: 50px; padding: 0; border: 0; border-left:
1px solid #ddd ; border-right: 1px solid #ddd ; }
/*输入框左右贰边各一px边框。*/ </style> </head> <body>
<div class=”w”> <div class=”jia left”>+</div>
<input type=”text” class=”text left”> <div class=”jia
left”>-</div> </div> </body> </html> View Code

4858美高梅 8

 

四、页面布局

4858美高梅 9<!DOCTYPE
html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>Title</title> <style> body{
margin: 0; } .top{ height: 48px; width: 100%; background-color:
#7d7d7d; } .left{ position: absolute; top:48px; left: 0px; width:
180px; bottom: 0; background-color: #1dd537; } .right{ position:
absolute; top:48px; right: 0px; left: 183px; bottom: 0;
background-color: #1c6a9e; overflow: auto;
/*固然剧情超过自动长度,就会变动三个滚动条*/ } </style>
</head> <body> <div class=”top”> </div> <div
class=”left”> <ul> <li></li> <li></li>
<li></li> <li></li> <li></li>
<li></li> <li></li> <li></li>
</ul> </div> <div class=”right”>
<h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1>
<h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1>
<h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1>
<h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1>
<h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1>
<h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1>
<h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1>
<h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1>
<h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1>
</div> </body> </html> View Code

此地最要害的正是:overflow:
auto;假诺剧情超越自动长度,就会转变三个滚动条.

图上那么些滚动条是属于松石绿背景的,非页面的滚动条

4858美高梅 10

 

伍、落成模态对话框

 

4858美高梅 11<!DOCTYPE
html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>Title</title> <style>
/*分成叁层 一、最尾部内容 二、一个遮罩层 3、对话框层*/ .zhezhao{
background-color: rgba(0,0,0,0.4); position: fixed; top:0; left: 0;
bottom: 0; right: 0; z-index: 2; /*优先级 比较低*/ } .kuang{ width:
350px; height: 250px; /*5行*/ position: fixed; top:50%; left: 50%;
margin-left: -175px; margin-top:-125px; /*那伍行
达成了实在的居中,margin的是框长度宽度的五分之三*/ background-color: white;
z-index: 3; /*优先级 比较高 在最上方展现*/ } </style>
</head> <body>
<div><h一>Mr不小的龙</h一></div> <div
class=”zhezhao”> </div> <div class=”kuang”></div>
</body> </html> View
Code

 

 4858美高梅 12

 

六、伪类采用器补充

伪类选用器 能够对其他标签样式修改,例如:

4858美高梅 13<!DOCTYPE
html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>Title</title> <style>
.touch{ background-color: #1c6a9e; width: 300px; height: 300px;
overflow: hidden; position: relative; /*用来给子标签提供稳定参考*/ }
.touch .content{ position: absolute; top: 0; left: 0; right: 0;
bottom:0; /*占满父级标签*/ background:rgba(0,0,0,0.6);
/*设置光滑度*/ color: white; text-align: center; visibility: hidden;
/*暗藏起来*/ } .touch:hover .content{ visibility: visible; }
/*当touch被鼠标临幸时,修改content为体现*/ .touch .c1{ font-size:
32px; /*padding: 60px 0;*/ line-height: 300px; } </style>
</head> <body> <div class=”touch”> <div
class=”img”><img
src=”;
<div class=”content c1″> 大龙 </div> </div>
</body> </html> View
Code

鼠标临幸前:4858美高梅 14

 

鼠标临幸后:4858美高梅 15

 

柒、css代码爱抚体制不被改动(优先级)

4858美高梅 16<!DOCTYPE
html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>Title</title> <style> .a{
color: #ff3021 !important; /*当一句css代码
后边跟!important的时候,上面的一般代码改变不了*/ font-size:50px ; } .b{
color: #1dd537 ; /*意欲改变颜色*/ } </style> </head>
<body> <div class=”a b”>Mr相当的大的龙</div> </body>
</html> View Code

遵纪守法CSS执行各种来说,文字应该是土红,但文字为革命,因为被后面包车型大巴“!important”保护

 4858美高梅 17

 

 

捌、用position进行定点

4858美高梅 18<!DOCTYPE
html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>Title</title> </head>
<body> <div style=”height: 2000px;width: 1000px”> <div
style=”width: 500px;height: 200px;margin: 0 auto;background-color:
#2c78d5″> <!–有肯定的幅度在设置margin:0 auto
能够让该标签左右居中–> <div style=”width: 300px;height:
拾0px;margin: 0 auto;background-color:#Fc78d5;position: relative”>
<!–父级设置了relative–> <div style=”width: 30px;height:
30px;margin: 0 auto;background-color:#f7fc42;position:absolute;bottom:
0;left: 0″></div>
<!–子标签会基于新近的relative来拓展固化–> </div>
</div> <div style=”width: 50px;height: 50px;margin: 0
auto;background-color: #1dd537;position: fixed;top: 30px;right:
50px;”> <!–fixed
用来绝对定位,根据窗口来稳定,滑动滚轮,地方也不会转移–>
</div> </body> </html> View Code

当滚动条在最上端时:

4858美高梅 19

当滚动条在上边时:能够看到煤黑块保持的职责是不变的。那正是position的
fixed属性

4858美高梅 20

 

壹、完成尖角符号。
那是内联inline-block标签独有的天性。 ! DOCTYPE html html lang =”en” head
meta charset =”UTF-8″ title…

ruby on
rails框架集成了汪洋的web贰.0作用,结合以往网址大批量使用选项卡效果,我们也得让咱们的ror项目整合时尚,上面有四个实例供我们参考运用:
一:仿1二陆邮箱选项卡 鼠标点击
4858美高梅 21

css样式表(二)

Html代码
4858美高梅 22

css盒模型

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” >  
  2. <html xmlns=”  
  3. <head>  
  4. <meta http-equiv=”Content-Type” content=”text/html;charset=gb2312″ />  
  5. <title>简洁Tab</title>  
  6. 【4858美高梅】css十遗集合,边框采纳与导航栏设置。<style type=”text/css”>  
  7. <!–   
  8. body,div,ul,li{   
  9.  padding:0;   
  10.  text-align:center;   
  11. }   
  12. body{   
  13.  font:12px “宋体”;   
  14.  text-align:center;   
  15. }   
  16. a:link{   
  17.  color:#00F;   
  18.  text-decoration:none;   
  19. }   
  20. a:visited {   
  21.  color: #00F;   
  22.  text-decoration:none;   
  23. }   
  24. a:hover {   
  25.  color: #c00;   
  26.  text-decoration:underline;   
  27. }   
  28. ul{ list-style:none;}   
  29. /*选项卡1*/   
  30. #Tab1{   
  31. width:460px;   
  32. margin:0px;   
  33. padding:0px;   
  34. margin:0 auto;}   
  35. /*选项卡2*/   
  36. #Tab2{   
  37. width:576px;   
  38. margin:0px;   
  39. padding:0px;   
  40. margin:0 auto;}   
  41. /*菜单class*/   
  42. .Menubox {   
  43. width:100%;   
  44. background:url();
      
  45. height:28px;   
  46. line-height:28px;   
  47. }   
  48. .Menubox ul{   
  49. margin:0px;   
  50. padding:0px;   
  51. }   
  52. .Menubox li{   
  53.  float:left;   
  54.  display:block;   
  55.  cursor:pointer;   
  56.  width:114px;   
  57.  text-align:center;   
  58.  color:#949694;   
  59.  font-weight:bold;   
  60.  }   
  61. .Menubox li.hover{   
  62.  padding:0px;   
  63.  background:#fff;   
  64.  width:116px;   
  65.  border-left:1px solid #A8C29F;   
  66.  border-top:1px solid #A8C29F;   
  67.  border-right:1px solid #A8C29F;   
  68. background:url();
      
  69.  color:#739242;   
  70.  font-weight:bold;   
  71.  height:27px;   
  72. line-height:27px;   
  73. }   
  74. .Contentbox{   
  75.  clear:both;   
  76.  margin-top:0px;   
  77.  border:1px solid #A8C29F;   
  78.  border-top:none;   
  79.  height:181px;   
  80.  text-align:center;   
  81.  padding-top:8px;   
  82. }   
  83. >  
  84. </style>  
  85. <script>  
  86. <!–   
  87. /*先是种情势 第两种样式 更换展现样式*/   
  88. function setTab(name,cursel,n){   
  89.  for(i=1;i<=n;i++){   
  90.   var menu=document.getElementById(name+i);   
  91.   var con=document.getElementById(“con_”+name+”_”+i);
      
  92.   menu.className=i==cursel?”hover”:””;   
  93.   con.style.display=i==cursel?”block”:”none”;
      
  94.  }   
  95. }   
  96. //–>  
  97. </script>  
  98. </head>  
  99. <body>  
  100. <br><br>  
  101. <div id=”Tab1″>  
  102. <div class=”Menubox”>  
  103. <ul>  
  104.    <li id=”one1″ onclick=”setTab(‘one’,1,4)”  class=”hover”>新闻1</li>  
  105.    <li id=”one2″ onclick=”setTab(‘one’,2,4)” >新闻2</li>  
  106.    <li id=”one3″ onclick=”setTab(‘one’,3,4)”>新闻3</li>  
  107.    <li id=”one4″ onclick=”setTab(‘one’,4,4)”>新闻4</li>  
  108. </ul>  
  109. </div>  
  110.  <div class=”Contentbox”>  
  111.    <div id=”con_one_1″ class=”hover”>新闻列表一</div>  
  112.    <div id=”con_one_2″ style=”display:none”>消息列表2</div>  
  113.    <div id=”con_one_3″ style=”display:none”>资源音讯列表3</div>  
  114.    <div id=”con_one_4″ style=”display:none”>消息列表4</div>  
  115.  </div>  
  116. </div>  
  117. <br>  
  118. <div id=”Tab2″>  
  119. <div class=”Menubox”>  
  120. <ul>  
  121.    <li id=”two1″ onclick=”setTab(‘two’,1,4)”  class=”hover”>新闻1</li>  
  122.    <li id=”two2″ onclick=”setTab(‘two’,2,4)” >新闻2</li>  
  123.    <li id=”two3″ onclick=”setTab(‘two’,3,4)”>新闻3</li>  
  124.    <li id=”two4″ onclick=”setTab(‘two’,4,4)”>新闻4</li>  
  125. </ul>  
  126. </div>  
  127.  <div class=”Contentbox”>  
  128.    <div id=”con_two_1″ >情报列表1</div>  
  129.    <div id=”con_two_2″ style=”display:none”>消息列表2</div>  
  130.    <div id=”con_two_3″ style=”display:none”>情报列表3</div>  
  131.    <div id=”con_two_4″ style=”display:none”>音信列表四</div>  
  132.  </div>  
  133. </div>  
  134. </body>  
  135. </html>  




    简洁Tab



    新闻列表1

    新闻列表1


<!DOCTYPE html>

2:鼠标经过的

<html>

Html代码
4858美高梅 23

<head>

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” >  
  2. <html xmlns=”  
  3. <head>  
  4. <meta http-equiv=”Content-Type” content=”text/html;charset=gb2312″ />  
  5. <title>简洁Tab</title>  
  6. <style type=”text/css”>  
  7. <!–   
  8. body,div,ul,li{   
  9.  padding:0;   
  10.  text-align:center;   
  11. }   
  12. body{   
  13.  font:12px “宋体”;   
  14.  text-align:center;   
  15. }   
  16. a:link{   
  17.  color:#00F;   
  18.  text-decoration:none;   
  19. }   
  20. a:visited {   
  21.  color: #00F;   
  22.  text-decoration:none;   
  23. }   
  24. a:hover {   
  25.  color: #c00;   
  26.  text-decoration:underline;   
  27. }   
  28. ul{ list-style:none;}   
  29. /*选项卡1*/   
  30. #Tab1{   
  31. width:460px;   
  32. margin:0px;   
  33. padding:0px;   
  34. margin:0 auto;}   
  35. /*选项卡2*/   
  36. #Tab2{   
  37. width:576px;   
  38. margin:0px;   
  39. padding:0px;   
  40. margin:0 auto;}   
  41. /*菜单class*/   
  42. .Menubox {   
  43. width:100%;   
  44. background:url();
      
  45. height:28px;   
  46. line-height:28px;   
  47. }   
  48. .Menubox ul{   
  49. margin:0px;   
  50. padding:0px;   
  51. }   
  52. .Menubox li{   
  53.  float:left;   
  54.  display:block;   
  55.  cursor:pointer;   
  56.  width:114px;   
  57.  text-align:center;   
  58.  color:#949694;   
  59.  font-weight:bold;   
  60.  }   
  61. .Menubox li.hover{   
  62.  padding:0px;   
  63.  background:#fff;   
  64.  width:116px;   
  65.  border-left:1px solid #A8C29F;   
  66.  border-top:1px solid #A8C29F;   
  67.  border-right:1px solid #A8C29F;   
  68. background:url();
      
  69.  color:#739242;   
  70.  font-weight:bold;   
  71.  height:27px;   
  72. line-height:27px;   
  73. }   
  74. .Contentbox{   
  75.  clear:both;   
  76.  margin-top:0px;   
  77.  border:1px solid #A8C29F;   
  78.  border-top:none;   
  79.  height:181px;   
  80.  text-align:center;   
  81.  padding-top:8px;   
  82. }   
  83. >  
  84. </style>  
  85. <script>  
  86. <!–   
  87. /*首先种样式 第三种情势 更换展现样式*/   
  88. function setTab(name,cursel,n){   
  89.  for(i=1;i<=n;i++){   
  90.   var menu=document.getElementById(name+i);   
  91.   var con=document.getElementById(“con_”+name+”_”+i);
      
  92.   menu.className=i==cursel?”hover”:””;   
  93.   con.style.display=i==cursel?”block”:”none”;
      
  94.  }   
  95. }   
  96. //–>  
  97. </script>  
  98. </head>  
  99. <body>  
  100. <br><br>  
  101. <div id=”Tab1″>  
  102. <div class=”Menubox”>  
  103. <ul>  
  104.    <li id=”one1″ onmouseover=”setTab(‘one’,1,4)”  class=”hover”>新闻1</li>  
  105.    <li id=”one2″ onmouseover=”setTab(‘one’,2,4)” >新闻2</li>  
  106.    <li id=”one3″ onmouseover=”setTab(‘one’,3,4)”>新闻3</li>  
  107.    <li id=”one4″ onmouseover=”setTab(‘one’,4,4)”>新闻4</li>  
  108. </ul>  
  109. </div>  
  110.  <div class=”Contentbox”>  
  111.    <div id=”con_one_1″ class=”hover”>情报列表一</div>  
  112.    <div id=”con_one_2″ style=”display:none”>新闻列表2</div>  
  113.    <div id=”con_one_3″ style=”display:none”>音信列表叁</div>  
  114.    <div id=”con_one_4″ style=”display:none”>信息列表四</div>  
  115.  </div>  
  116. </div>  
  117. <br>  
  118. <div id=”Tab2″>  
  119. <div class=”Menubox”>  
  120. <ul>  
  121.    <li id=”two1″ onmouseover=”setTab(‘two’,1,4)”  class=”hover”>新闻1</li>  
  122.    <li id=”two2″ onmouseover=”setTab(‘two’,2,4)” >新闻2</li>  
  123.    <li id=”two3″ onmouseover=”setTab(‘two’,3,4)”>新闻3</li>  
  124.    <li id=”two4″ onmouseover=”setTab(‘two’,4,4)”>新闻4</li>  
  125. </ul>  
  126. </div>  
  127.  <div class=”Contentbox”>  
  128.    <div id=”con_two_1″ >快讯列表壹</div>  
  129.    <div id=”con_two_2″ style=”display:none”>音讯列表二</div>  
  130.    <div id=”con_two_3″ style=”display:none”>音讯列表3</div>  
  131.    <div id=”con_two_4″ style=”display:none”>音信列表四</div>  
  132.  </div>  
  133. </div>  
  134. </body>  
  135. </html>  




    简洁Tab



    新闻列表1

    新闻列表1


<meta charset=”UTF-8″>

叁:二种不难的Tab选项卡效果

<title>盒模型</title>

Html代码
4858美高梅 24

<style type=”text/css”>

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ”  
  2. <html xmlns=”  
  3. <head>  
  4. <meta http-equiv=”Content-Type” content=”text/html;charset=gb2312″ />  
  5. <title>简洁Tab</title>  
  6. <style type=”text/css”>  
  7. <!–   
  8. body,div,ul,li{   
  9.  margin:0 auto;   
  10.  padding:0;   
  11. }   
  12. body{   
  13.  font:12px “宋体”;   
  14.  text-align:center;   
  15. }   
  16. a:link{   
  17.  color:#00F;   
  18.  text-decoration:none;   
  19. }   
  20. a:visited {   
  21.  color: #00F;   
  22.  text-decoration:none;   
  23. }   
  24. a:hover {   
  25.  color: #c00;   
  26.  text-decoration:underline;   
  27. }   
  28. ul{   
  29.  list-style:none;   
  30. }   
  31. .main{   
  32.  clear:both;   
  33.  padding:8px;   
  34.  text-align:center;   
  35. }   
  36. /*第三种样式*/   
  37. #tabs0 {   
  38.  height: 200px;   
  39.  width: 400px;   
  40.  border: 1px solid #cbcbcb;   
  41.  background-color: #f2f6fb;   
  42. }   
  43. .menu0{   
  44.  width: 400px;   
  45. }   
  46. .menu0 li{   
  47.  display:block;   
  48.  float: left;   
  49.  padding: 4px 0;   
  50.  width:100px;   
  51.  text-align: center;   
  52.  cursor:pointer;   
  53.  background: #FFFFff;   
  54. }   
  55. .menu0 li.hover{   
  56.  background: #f2f6fb;   
  57. }   
  58. #main0 ul{   
  59.  display: none;   
  60. }   
  61. #main0 ul.block{   
  62.  display: block;   
  63. }   
  64. /*第三种样式*/   
  65. #tabs1{   
  66.  text-align:left;   
  67.  width:400px;   
  68. }   
  69. .menu1box{   
  70.  position:relative;   
  71.  overflow:hidden;   
  72.  height:22px;   
  73.  width:400px;   
  74.  text-align:left;   
  75. }   
  76. #menu1{   
  77.  position:absolute;   
  78.  top:0;   
  79.  left:0;   
  80.  z-index:1;   
  81. }   
  82. #menu1 li{   
  83.  float:left;   
  84.  display:block;   
  85.  cursor:pointer;   
  86.  width:72px;   
  87.  text-align:center;   
  88.  line-height:21px;   
  89.  height:21px;   
  90. }   
  91. #menu1 li.hover{   
  92.  background:#fff;   
  93.  border-left:1px solid #333;   
  94.  border-top:1px solid #333;   
  95.  border-right:1px solid #333;   
  96. }   
  97. .main1box{   
  98.  clear:both;   
  99.  margin-top:-1px;   
  100.  border:1px solid #333;   
  101.  height:181px;   
  102.  width:400px;   
  103. }   
  104. #main1 ul{   
  105.  display: none;   
  106. }   
  107. #main1 ul.block{   
  108.  display: block;   
  109. }   
  110. /*其两种样式*/   
  111. .menu2box{   
  112.  position:relative;   
  113.  overflow:hidden;   
  114.  height:22px;   
  115.  width:400px;   
  116.  text-align:left;   
  117.  background: #FFFFff;   
  118. }   
  119. #tabs2 {   
  120.  height: 200px;   
  121.  width: 400px;   
  122.  border: 1px solid #cbcbcb;   
  123.  background-color: #f2f6fb;   
  124. }   
  125. #tip2{   
  126.  position:absolute;   
  127.  top:0;   
  128.  left:0;   
  129.  height:22px;   
  130.  line-height:22px;   
  131.  z-index:0;   
  132.  width:100px;   
  133.  background: #f2f6fb;   
  134. }   
  135. #menu2{   
  136.  position:absolute;   
  137.  top:0;   
  138.  left:0;   
  139.  z-index:1;   
  140. }   
  141. #menu2 li{   
  142.  display:block;   
  143.  float: left;   
  144.  padding: 4px 0;   
  145.  width:100px;   
  146.  text-align: center;   
  147.  cursor:pointer;   
  148. }   
  149. >  
  150. </style>  
  151. <script>  
  152. <!–   
  153. /*先是种样式 第两种样式 更换呈现样式*/   
  154. function setTab(m,n){   
  155.  var tli=document.getElementById(“menu”+m).getElementsByTagName(“li”);
      
  156.  var mli=document.getElementById(“main”+m).getElementsByTagName(“ul”);
      
  157.  for(i=0;i<tli.length;i++){   
  158.   tli[i].className=i==n?”hover”:””;   
  159.   mli[i].style.display=i==n?”block”:”none”;   
  160.  }   
  161. }   
  162. /*其三种格局 利用三个背景层定位*/   
  163. var m3={0:””,一:”评论内容”,二:”技术内容”,3:”点评内容”}
      
  164. function nowtab(m,n){   
  165.  if(n!=0&&m3[0]==””)m3[0]=document.getElementById(“main2”).innerHTML;
      
  166.  document.getElementById(“tip”+m).style.left=n*100+’px’;   
  167.  document.getElementById(“main2”).innerHTML=m3[n];   
  168. }   
  169. //–>  
  170. </script>  
  171. </head>  
  172. <body>  
  173. <br />  
  174. <br />  
  175. <!–第三种样式–>  
  176. <div id=”tabs0″>  
  177.  <ul class=”menu0″ id=”menu0″>  
  178.   <li onclick=”setTab(0,0)” class=”hover”>新闻</li>  
  179.   <li onclick=”setTab(0,1)”>评论</li>  
  180.   <li onclick=”setTab(0,2)”>技术</li>  
  181.   <li onclick=”setTab(0,3)”>点评</li>  
  182.  </ul>  
  183.  <div class=”main” id=”main0″>  
  184.   <ul class=”block”><li>新闻列表</li></ul>  
  185.   <ul><li>评价列表</li></ul>  
  186.   <ul><li>技巧列表</li></ul>  
  187.   <ul><li>点评列表</li></ul>  
  188.  </div>  
  189. </div>  
  190. <br />  
  191. <br />  
  192. <!–次之种样式–>  
  193. <div id=”tabs1″>  
  194.  <div class=”menu1box”>  
  195.   <ul id=”menu1″>  
  196.    <li class=”hover” onmouseover=”setTab(1,0)”><a href=”#”>新闻</a></li>  
  197.    <li onmouseover=”setTab(1,1)”><a href=”#”>评论</a></li>  
  198.    <li onmouseover=”setTab(1,2)”><a href=”#”>技术</a></li>  
  199.    <li onmouseover=”setTab(1,3)”><a href=”#”>点评</a></li>  
  200.   </ul>  
  201.  </div>  
  202.  <div class=”main1box”>  
  203.   <div class=”main” id=”main1″>  
  204.    <ul class=”block”><li>快讯列表</li></ul>  
  205.    <ul><li>评说列表</li></ul>  
  206.    <ul><li>技术列表</li></ul>  
  207.    <ul><li>点评列表</li></ul>  
  208.   </div>  
  209.  </div>  
  210. </div>  
  211. <br />  
  212. <br />  
  213. <!–第二种样式–>  
  214. <div id=”tabs2″>  
  215.  <div class=”menu2box”>  
  216.   <div id=”tip2″></div>  
  217.   <ul id=”menu2″>  
  218.    <li class=”hover” onmouseover=”nowtab(2,0)”><a href=”#”>新闻</a></li>  
  219.    <li onmouseover=”nowtab(2,1)”><a href=”#”>评论</a></li>  
  220.    <li onmouseover=”nowtab(2,2)”><a href=”#”>技术</a></li>  
  221.    <li onmouseover=”nowtab(2,3)”><a href=”#”>点评</a></li>  
  222.   </ul>  
  223.  </div>  
  224.   <div class=”main” id=”main2″>  
  225. 音讯内容   
  226.  </div>  
  227. </div>  
  228. <br />  
  229. <br />  
  230. <br />  
  231. <br />  
  232. <br />  
  233. <br />  
  234. <br />  
  235. <br />  
  236. </body>  
  237. </html>  

 

.div{width: 100px;

height: 100px;

 

/*[margin 外边距]

margin属性值最多有三个:

一写1个值:四个方向的margin均为这些值

2写五个值:上、右三个样子,下暗中同意=上,左暗许=右

3写八个值:上、右、下八个样子,左暗中认可=右

4写七个值:上、右、下、左三个样子

5写五个值:+auto:控件居右展现

margin:50px 30px 20px auto; 距离父左边 30px

6margin:0 auto;设置控件在父容器中,水平居中

*/

 

 

/*给子成分加margin-top时,会招致父容器与子容器一下往下,处理措施之1是,给父容器加overflow:
hidden;*/

 

margin:0px auto;

 

 

/*[border 边框]

border 有多少个成分: 颜色color 样式style 宽度width

 

标准上,6本性情都亟需手动制定(color不写,暗许为浅灰褐)

* */

 

/* [border-radius 圆角]

* 一、可以承受七个属性值: X轴(左上、右上、右下、左下)/Y轴

* 例如:border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;

*
二、只写X轴时,Y轴暗中认可等于X轴。只写左上角,默许=右下角。只写右上角,私下认可=左下角

* 例如:border-radius: 50px 0px ;

* =border-radius: 50px 0px 50px 0px;

* =border-radius: 50px 0px 50px 0px/50px 0px 50px 0px;

*

* 三、只写2个数,默许几个值均相等。

*/

 

border: 10px solid green;

 

 

/*[padding 边框]

使用方法,同margin壹~④

在意:使用padding 会将整个控件撑大,使用时索要注意控件可视区域的骨子里尺寸

 

* */

 

/* [box-shadow 盒子阴影]

* 一、七个属性值,空格分割:

* x轴阴影距离:(必选) 可正可负,正——右移 负——左移

* y轴阴影距离:(必选) 可正可负,正——下移 负——上移

* 阴影模糊半径:(可选) 只好为正,私下认可为0。数值越大,阴影越模糊

* 阴影扩展半径:(可选)
可正可负,暗中同意为0。数值增大,阴影扩充。数值减小,阴影缩短

* 阴影颜色:(可选) 默许为水泥灰

* 内外阴影:(可选) 可选值:inset(内阴影) 暗中同意为外阴影

*/

box-shadow: 0px 0px 10px 0px white inset;

 

}

.div2{padding: 10px 10px 10px 10px;

width: 100px;

height: 100px;

 

border: 10px solid green;}

 

 

 

.div3{width: 270px; height: 200px;

border: 3px #F1B562 solid;

 

}

ul{list-style: none;

text-indent: -20px;

line-height: 30px;}

#span2{

margin-right: 16px;

}

 

 

</style>

</head>

<body>

<div class=”div”>

那是div中的文字</div>

 

<div class=”div2″>

那是div中的文字</div>

 

<br /> <br /><br /><br /><br /><br
/>

 

<div class=”div3″>

<p><img src=”css/会员登录.jpg”60px” height=”60px”></p>

<ul>

<li id=”li1″>用户名:<input type=”text”></li>

<li id=”li2″><span id=”span2″>密</span>码:<input
type=”password” /></li>

<li><input type=”submit” name=”li3″ id=”li3″ value=”登录”
/></li>

</ul>

 

</div>

</body>

</html>

图形如下:

4858美高梅 25

 

 

案例演习:

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title></title>

<style type=”text/css”>

#div1{

width: 150px;

height:450px;}

li {float: left;

width:12px;

height: 30px;

line-height: 30px;

list-style: none;

}

 

#div2{width: 120px;

height: 60px;

margin: 0px auto;

border-bottom: 2px #B3B3B3 solid;}

#li2{white-space: nowrap;

height: 50px;width: 55px;line-height: 10px;

margin-top: 5px;color: #B3B3B3;

}

#li1{background: url(css/3-13-练习.png);

background-repeat: no-repeat;

width: 55px;height: 60px;

background-position: -90px 5px;

}

p{color: black;}

#div3{font-size: 12px;

}

 

</style>

</head>

<body>

<div id=”div1″>

<h四>宗旨活动</h四>

<div id=”div2″>

<div id=”div3″>

 

<li id=”li1″></li>

<li id=”li贰”><p>显示秒杀</p>限时秒杀</li>

</div>

</div>

<div id=”div2″>

<div id=”div3″>

 

<li id=”li1″></li>

<li id=”li二”><p>展现秒杀</p>限时秒杀</li>

</div>

</div>

<div id=”div2″>

<div id=”div3″>

 

<li id=”li1″></li>

<li id=”li2″><p>呈现秒杀</p>限时秒杀</li>

</div>

</div>

<div id=”div2″>

<div id=”div3″>

 

<li id=”li1″></li>

<li id=”li2″><p>显示秒杀</p>限时秒杀</li>

</div>

</div>

<div id=”div2″>

<div id=”div3″>

 

<li id=”li1″></li>

<li id=”li贰”><p>展现秒杀</p>限时秒杀</li>

</div>

</div><div id=”div2″>

<div id=”div3″>

 

<li id=”li1″></li>

<li id=”li2″><p>展现秒杀</p>限时秒杀</li>

</div>

</div>

 

 

 

 

 

 

 

 

</div>

</body>

</html>

图如下:

 

4858美高梅 26

 

 

 

案例-02

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title></title>

<style type=”text/css”>

img{height: 200px;

width:200px;border: 6px #FF8C00 solid;}

#img1{border-radius: 53px 0px;}

#img2{border-radius: 103px 100px;}

#img3{height: 0px;

width: 1px;

padding: 50px;

border: 50px #F3C17E solid;

border-radius:100px;}

</style>

</head>

<body>

<img id=”img1″ src=”css/3-13-猫.jpg”/>

 

<img id=’img2′ src=”css/3-13-猫.jpg”/>

 

<img id=’img3′ src=””/>

</body>

</html>

图如下:

4858美高梅 27

 

 

 

阴影:

 

4858美高梅 28

 

 

4858美高梅 29

 

4858美高梅 30

 

4858美高梅 31

 

 

 

解析课后练习

图如下:

 

4858美高梅 32

 

 

4858美高梅 33

 

4858美高梅 34

 

代码如下:

01-

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title></title>

<style type=”text/css”>

.div1{width: 800px;

height:80px;

 

color: white;}

div div .li{float: right;

width: 100px;

 

margin: 20px 6px;

text-align: center;

line-height: 40px;

list-style: none;

border: 2px solid #8B9CBC;

font-weight: bold;}

 

 

 

.div2{float: left;line-height:30px;text-indent: 40px;}

</style>

</head>

<body>

<div class=”div1″>

<div class=”div2″> <h1>搞机派</h1></div>

<div><ul>

<li class=”li”>双卡双待</li>

<li class=”li”>前置双录像</li>

<li class=”li”>拍照神器</li>

<li class=”li”>快捷充电</li>

<li class=”li”>金属机身</li>

 

</ul></div>

</div>

</body>

</html>

02-

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title>爱护心得</title>

<style type=”text/css”>

#div1{width: 410px;

height: 450px;

overflow: hidden;}

#div2{width: 390px;

margin:30px 20px;

 

border-bottom: 2px #DDDDDD solid;

}

#div2 span{color: red;}

#div3{float: right

}

#div4{

height: 380px;

width: 410px;

overflow: hidden;}

#div5{border-bottom: 2px #DDDDDD solid;

width: 390px;height: 50px;

overflow: hidden;

}

#div5 ul {list-style: none;

width: 260px;

margin-left: 5px;

overflow: hidden;

 

}

#div5 ul #li1{

 

width: 74px;

float: left;

}

#div5 ul #li2{float: left;

width: 150px;margin-left: 5px ;

}

 

#div5:hover{

border-left: 2px #FF0000 solid;

color: #FF0000;

width: 388px;}

 

 

#div5:hover #li1{border-bottom: 2px #FF0000 solid;

}

#div5:hover #li2{border-bottom: 2px #FF0000 solid;

}

 

 

 

</style>

</head>

<body>

<div id=”div1″>

<div id=”div2″>

<span id=”span”>保养心得</span>

<div id=”div3″>

MORE+

</div>

 

</div>

<div id=”div4″>

<div id=”div5″>

<ul>

 

<li id=”li1″>2016.03.22</li>

<li id=”li2″>燃油粗滤器定期防水</li>

</ul>

</div>

 

<div id=”div5″>

<ul>

 

<li id=”li1″>2016.03.22</li>

<li id=”li2″>燃油粗滤器定期防水</li>

</ul>

</div>

 

<div id=”div5″>

<ul>

 

<li id=”li1″>2016.03.22</li>

<li id=”li贰”>燃油粗滤器定期防水</li>

</ul>

</div>

 

<div id=”div5″>

<ul>

 

<li id=”li1″>2016.03.22</li>

<li id=”li贰”>燃油粗滤器定期防水</li>

</ul>

</div>

 

<div id=”div5″>

<ul>

 

<li id=”li1″>2016.03.22</li>

<li id=”li2″>燃油粗滤器定期防水</li>

</ul>

</div>

 

<div id=”div5″>

<ul>

 

<li id=”li1″>2016.03.22</li>

<li id=”li二”>燃油粗滤器定期防水</li>

</ul>

</div>

 

<div id=”div5″>

<ul>

 

<li id=”li1″>2016.03.22</li>

<li id=”li二”>燃油粗滤器定期防水</li>

</ul>

</div>

 

</div>

 

 

</div>

</div>

</body>

</html>

03-

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title></title>

<style type=”text/css”>

.a{width: 800px;height: 800px;overflow: hidden;}

.b{width: 200px;height: 400px;margin-left: 205px;margin-top: 5px;float:
left;}

.c{width: 200px;height: 400px;margin-top: 5px;float: left;}

.d{width: 190px;height: 200px;;margin-top: 5px;float: left;}

.e{width: 190px;height: 200px;float: left;}

.f{width: 400px;height: 390px;float: left;margin-left: 205px;float:
left}

.g{width: 190px;height: 200px;float: left;}

.h{width: 190px;height: 190px;float: left;}

 

</style>

</head>

<body><div class=”a”>

<div class=”b”></div>

<div class=”c”></div>

<div class=”d”></div>

<div class=”e”></div>

<div class=”f”></div>

<div class=”g”></div>

<div class=”h”></div>

</div>

</body>

</html>

 

 

 

 

 

学学新知识

 

css样式表(二):

 

/*[border-image 图片边框]

* 一、10个性子:

* 1 图片路径:url()

* 贰图片切片宽度:四个值,分别代表上、右、下、左,4条切线。通过肆条切线切割后,会把图纸分成九宫格,七个角分别对应边框的四角(不会进展任何拉伸),八个边分别对应边框的四边(依照设置开始展览拉伸/平铺/铺满)。

* 写的时候,无法带px单位

* 三 图片边框的宽窄:4个值,分别表示上、右、下、左4条边框

* 写的时候,必须带px单位

* 肆 边框背景重复方式:stretch(拉伸)、round(铺满)、repeat(平铺)

* 【铺满和平铺分裂】

*
平铺:会保持原来四条边的急剧,实行平铺。大概引致角落处无法出示完整1个图标;

* 铺满:会对四条边举行适量的拉伸压缩,确定保障可以正好呈现完全。

*

* 贰、属性值写法:border-image: 1 贰/三px 4;

* 第一部分可以只写3个、一个、1个,判断格局同margin

*/

 4858美高梅 354858美高梅 36

 

 

新知识-

3-14-CSS样式表(三)

/*[相持固定relative]

* 一.使用position:relativw;设置成分为相对固定的要素

* 二.永恒机制:

*
壹相对于本人原来文书档案流中的地方固定,当不制定TOP等原则性值时,不会变动成分地方

* 2相对稳定成分,仍会站间距原有文书档案流中的地点,而不会释放。

*
三.使用top、left、bottom、right调整地点。当left和right同时存在,left生效,当top和bottom同时存在,top生效。

*/

 

/*[absolute相对定位]

* 一、使用position:absolute;那是因素为相对定位成分

* 2、定位机制:

*
壹相对于第1个非static的先世成分(即利用了relative/absolute/fixed定位的祖辈成分)举办定点;

* 二假使祖先成分均为定制,相对于浏览器浏览器左上角永恒;

* 叁使用absolute的成分,会从文书档案6中完全除去,原有控件释放不再占有

*/

/*[稳定定位fixed]

*
一、position:fixed;是壹种非凡的断然定位,夫荣妻贵不妨使用relative锁住

* 二、定位机制:永远相对于浏览器定位

*/

/*[z-indexs 属性]

* 1.效果:设置固定成分的Z轴层叠顺序

* 二.行使供给: 1须借使稳定成分才能选择。relative/absolute/fixed

* 贰使用z-index须求驰念父容器的束缚。

1经父容器为z-inex,则子容器的z-index能够不受父容器的封锁;

假若父容器z-index举行了设置,则子容器的层叠将以父容器的z-index为准(在同一父容器的例外子成分,还是能够因此的要好的z-index调整层叠关系)

* 3.z-index:auto & z-index:0的异同

* 壹z-index:auto为暗中认可值,与z-index:0处于同一层面

*
二z-index:auto,不会约束子成分的z-index层次,而z-index:0,会束缚子成分必须与福成分处于同一平面

* 四.z-index相同(处于同一平面包车型大巴永恒成分)的层叠关系:后来居上

* */

 

 

新知识:

 

 

 

 

display属性 – none: 隐藏成分,成分所占空间释放

– block :设为块级成分

– inline :设为内联成分(行级元素)

4858美高梅 , inline-block
:设为内联块级元素(自个儿为行级成分,可是拥有会计成分所特有的种种质量,比如,宽、高
、text-align等)

 

 

 

课后功课:

4858美高梅 37

 

新知识:

 

 

 

 

display属性 – none: 隐藏元素,成分所占空间释放

– block :设为块级成分

– inline :设为内联成分(行级元素)

– inline-block
:设为内联块级元素(本人为行级成分,不过富有会计成分所特有的各类品质,比如,宽、高
、text-align等)

 

 

 

4858美高梅 38

4858美高梅 39

4858美高梅 40

 

 

 

读书新知识:

一、过渡、变换

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title></title>

<style type=”text/css”>

/*transform定义变换

* 常用变换:translate 平移

* scale缩放

* rotale定义旋转(Z轴 二D平面转 x-翻转 y-翻转)

* transform可同时展开各个转换,多样转换之间空格分隔

* 例如:transform:scale(1.8,3.0) translatey(0px)

 

*transform-origin:定义变形起源

* 可选值:left/center/tight left/center/tight

* 大概,直接写X Y 轴坐标点

* 例如:transform:rotate(180deg):

* transform-origin:right bottom;

* 表示,绕左下角,旋转180度

*/

 

 

/*transtion属性:定义过渡

* ⒈参预对接的脾气,能够独自制定有些CSS属性,也得以all/none

* ⒉过渡伊始到联网停止时间: .三S .5S

* ⒊过渡的体裁行数常选 ease

* ⒋过渡开首前的延迟时间,能够省略。

 

*transition 属性能够而且定义八个个性,用逗号分隔

* transition:标签 .叁s ease(由快到慢的体裁)

*

*/

 

 

#div1{width: 300px;

height: 300px;

overflow: hidden;

}

#div1 img{width: 100px;

height: 100px;

transition: all 3s ease;}

div:hover img{transform:scale(2) translate(40px,20px) rotateY(180deg);

transform-origin: left top}

</style>

</head>

<body>

<div id=”div1″>

<img src=”css/3-13-猫.jpg”>

</div>

 

 

</body>

</html>

 

 

 

 

 

二、动画

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title></title>

<style type=”text/css”>

#div1{width: 300px;

height: 300px;

 

-webkit-animation: mymymy 5s ease 3s infinite}

/*CSS3 动画的采纳

壹.宣称八个卡通(关键帧)

@-webkit-keyframes name{

from{}

to{}

阶段:

⒈.每一种阶段必须用百分比表示,从0%到百分之百

⒉.起源必须设置即0%到百分百如故from和to

二、在CSS采纳器中,使用Animation动画属性,调用评释好的关键帧

【Animation:缩写顺序】

Animation-name 动画名称(@keyframes 名称)

 

Animation-duration 动画持续时间

 

Animtaion-timing-function动画速度曲线 常选ease

 

Animtaion-delay 动画延迟时间

 

Animation-iteration-count 播放次数,暗许为1,Infiniti次Infinite

 

Animation-direction 设置对象动画在循环中是还是不是反向运动 ( Alternate
逆向播放)

 

* animation-fill-mode 设置对象动画时间之外的情形(forwards:
停留在动画结束状态 backwards:停留在动画开首情形)

 

>>> 注意animation-name和animation-duration必须设置

>>> animation能够而且安装八个卡通 动画之间用,分隔

animation:frame1 .3s,frame2 .5s……

*/

@-webkit-keyframes mymymy{

0%{}

25%{}

50%{ line-height: 1.75;”> 75%{background-color: whitesmoke}

100%{ line-height: 1.75;”> }

 

</style>

</head>

<body>

<div id=”div1″>

 

</div>

 

</body>

</html>

发端笔者的造作网页之旅:

临摹宾之郎guanwang

 

 

官网:4858美高梅 41

 

 

 

我做的:

4858美高梅 42

 

 

代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″ />

<title>用心做好没口槟榔_宾之郎</title>

<link rel=”stylesheet” href=”css/head.css” />

<link rel=”stylesheet” href=”css/section.css”/>

<link rel=”icon” href=”img/icon.jpg” />

 

</head>

 

 

<body>

<!–

Head部分

–>

<header id=”head”>

<div class=”bg1″></div>

<div class=”bg2″></div>

<div class=”inside”>

<div class=”logo”></div>

<nav class=”nav”>

<li class=”first”>

<a href=”#”>首页</a>

</li>

<li>

<a href=”#”>走进宾之郎</a>

<ul>

<li>集团概略</li>

<li>发展历程</li>

<li>发展历程</li>

<li>发展历程</li>

<li>发展历程</li>

<li>发展历程</li>

<li>发展历程</li>

<li>发展历程</li>

</ul>

</li>

<li>

<a href=”#”>聚焦宾之郎</a>

</li>

<li>

<a href=”#”>品味宾之郎</a>

</li>

<li>

<a href=”#”>加盟宾之郎</a>

</li>

<li>

<a href=”#”>买卖招标</a>

</li>

<li>

<a href=”#”>人力财富</a>

</li>

<li>

<a href=”#”>联系大家</a>

</li>

</nav>

<ul class=”icons”>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

<div class=”bg_right”></div>

</div>

</header>

 

 

<section id=”banner”>

<video src=”img/binzhiliang1.mp4″ autoplay=”autoplay” class=”video”
>

您的浏览器不帮衬video标签

</video>

<div class=”banner_cover”>

<img src=”img/video_text.png”/>

</div>

</section>

 

 

<section class=”section”>

 

<div class=”wrap”>

<div class=”zi1″>

 

<p>走进宾之郎</p> </div>

<div id=”line1″>

<div id=”line2″></div>

</div>

 

 

<div class=”zi2″>

<p>广东宾之郎食物科学和技术有限集团位居西藏▪宁德-黄华经济技术开发区。是近来槟榔食物行业唯一一家达成自动工艺生产工艺流程的现代化槟榔食物科学和技术生产公司。</p>

</div>

<div class=”tupian”>

 

 

<div class=”left-1″>

<img class=”img-da1″
src=”img/7e987b0c163a41eaa27b6fcea7747560.jpg”/>

<div class=”left-1-1″>

提升进度

</div>

</div>

<div class=”left-2″>

<div class=”right1″>

<img src=”img/0b373cfdb3e64c13a9f0974d4eca6020.jpg”/> <div
class=”right1-1″>

集团轮廓</div>

</div>

<div class=”right一”> <img
src=”img/ae0d6350596047陆eb5981780捌cc97a捌四.jpg”/>
<div>印象宾之郎</div> </div>

<div class=”right一”><img
src=”img/9a070470f三f740329228f七f167517七e2.jpg”/>
<div>品牌文化</div> </div>

<div class=”right一”><img
src=”img/f一a叁7b八三b957四edbb一d0f04e1207五a7b.jpg”/>
<div>建党务工作作</div> </div>

</div>

 

</div> </div>

</section>

 

 

 

</body>

</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有