<!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遗+才能集结,css十遗集结

一、完成尖角符号。

那是内联inline-block标签独有的风味。

金沙注册送58 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

鼠标临幸前:金沙注册送58 2

鼠标临幸后:金沙注册送58 3

 

二、落成输入框最终有小图标

金沙注册送58 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
/*直达输入到Sportage处就不加强的机能*/ 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

输入前:金沙注册送58 5

输入后:金沙注册送58 6

  文字不会超过“Lacrosse”的任务,通过安装padding-right.

3、达成购物加减开关

金沙注册送58 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

金沙注册送58 8

 

肆、页面布局

金沙注册送58 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;假设剧情超越自动长度,就能够生成三个轮转条.

图上这一个滚动条是属于孔雀绿背景的,非页面包车型客车滚动条

金沙注册送58 10

 

五、达成模态对话框

 

金沙注册送58 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; /*那5行
实现了确实的居中,margin的是框长度宽度的50%*/ 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

 

 金沙注册送58 12

 

6、伪类选用器补充

伪类选用器 能够对别的标签样式修改,比方:

金沙注册送58 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

鼠标临幸前:金沙注册送58 14

 

鼠标临幸后:金沙注册送58 15

 

七、css代码保养体制不被修改(优先级)

金沙注册送58 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”保护

css十遗集结,美丽css选项卡效果大全。 金沙注册送58 17

 

 

八、用position实行固定

金沙注册送58 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:
100px;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

当滚动条在最上端时:

金沙注册送58 19

当滚动条在上面时:能够见到铁青块保持的地方是不变的。这便是position的
fixed属性

金沙注册送58 20

 

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

ruby on
rails框架集成了大气的web2.0功力,结合今后网址大批量运用选项卡效果,大家也得让大家的ror项目结合风尚,下边有七个实例供我们参考使用:
一:仿1贰六信箱选项卡 鼠标点击
金沙注册送58 21

css样式表(二)

Html代码
金沙注册送58 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. <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”>消息列表二</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″ 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″ >资源音信列表壹</div>  
  129.    <div id=”con_two_2″ style=”display:none”>音讯列表贰</div>  
  130.    <div id=”con_two_3″ style=”display:none”>新闻列表三</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代码
金沙注册送58 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. /*率先种格局 第1种情势 改动呈现样式*/   
  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”>资源音讯列表1</div>  
  112.    <div id=”con_one_2″ style=”display:none”>信息列表二</div>  
  113.    <div id=”con_one_3″ style=”display:none”>情报列表三</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″ 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”>情报列表叁</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″>

3:三种简易的Tab选项卡效果

<title>盒模型</title>

Html代码
金沙注册送58 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 m三={0:””,一:”商量内容”,二:”技能内容”,三:”点评内容”}
      
  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属性值最多有多少个:

一写二个值:多个趋势的margin均为这么些值

2写七个值:上、右八个趋势,下私下认可=上,左暗许=右

3写三个值:上、右、下五个方向,左暗中认可=右

肆写五个值:上、右、下、左多个方向

5写多个值:+auto:控件居右呈现

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

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

*/

 

 

/*给子成分加margin-top时,会形成父容器与子容器一下往下,处理方法之壹是,给父容器加overflow:
hidden;*/

 

margin:0px auto;

 

 

/*[border 边框]

border 有八个要素: 颜色color 样式style 宽度width

 

规范上,多少个性格都亟需手动制定(color不写,默以为深黄)

* */

 

/* [border-radius 圆角]

* 1、能够承受九个属性值: X轴(左上、右上、右下、左下)/Y轴

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

*
2、只写X轴时,Y轴默许等于X轴。只写左上角,暗许=右下角。只写右上角,暗中同意=左下角

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

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

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

*

* 三、只写叁个数,暗中同意7个值均相等。

*/

 

border: 10px solid green;

 

 

/*[padding 边框]

使用办法,同margin壹~④

在意:使用padding 会将全数控件撑大,使用时索要专注控件可视区域的实际尺寸

 

* */

 

/* [box-shadow 盒子阴影]

* 1、八个属性值,空格分割:

* 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>

图表如下:

金沙注册送58 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=”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 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>

图如下:

 

金沙注册送58 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>

图如下:

金沙注册送58 27

 

 

 

阴影:

 

金沙注册送58 28

 

 

金沙注册送58 29

 

金沙注册送58 30

 

金沙注册送58 31

 

 

 

解析课后演练

图如下:

 

金沙注册送58 32

 

 

金沙注册送58 33

 

金沙注册送58 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=”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 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>

 

 

</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 图片边框]

* 一、13个属性:

* 一 图片路线:url()

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

* 写的时候,不能够带px单位

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

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

* 四 边框背景重复格局:stretch(拉伸)、round(铺满)、repeat(平铺)

* 【铺满和平铺区别】

*
平铺:会保持原来肆条边的幅度,进行平铺。恐怕引致角落处不可能展示完整三个Logo;

* 铺满:会对4条边进行适宜的拉伸压缩,确定保证能够正好彰显完全。

*

* 二、属性值写法:border-image: 一 2/叁px 4;

* 第一局部能够只写3个、1个、二个,判定方法同margin

*/

 金沙注册送58 35金沙注册送58 36

 

 

新知识-

3-14-CSS样式表(三)

/*[对立固化relative]

* 一.应用position:relativw;设置成分为相对固化的成分

* 2.稳固机制:

*
壹相对于团结本来文书档案流中的地方固定,当不制定TOP等固定值时,不会转移成分地点

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

*
3.使用top、left、bottom、right调治岗位。当left和right同时存在,left生效,当top和bottom同时存在,top生效。

*/

 

/*[absolute相对定位]

* 1、使用position:absolute;那是因素为相对定位元素

* 二、定位机制:

*
一相对于第7个非static的祖宗成分(即利用了relative/absolute/fixed定位的祖先元素)进行一定;

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

* 3使用absolute的要素,会从文书档案陆中完全除去,原有控件释放不再据有

*/

/*[一直定位fixed]

*
1、position:fixed;是一种相当的相对化定位,夫荣妻贵不妨使用relative锁住

* 贰、定位机制:永世相对于浏览器定位

*/

/*[z-indexs 属性]

* 一.功力:设置一定成分的Z轴层叠顺序

* 2.施用须要: 1供给是牢固元素才能应用。relative/absolute/fixed

* 2使用z-index须要考虑父容器的羁绊。

假设父容器为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,会束缚子成分必须与福成分处于同1平面

* 四.z-index一样(处于同1平面包车型地铁定势成分)的层叠关系:后发先至

* */

 

 

新知识:

 

 

 

 

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

– block :设为块级成分

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

– inline-block
:设为内联块级成分(本人为行级成分,不过富有会计成分所特有的种种质量,举例,宽、高
、text-align等)

 

 

 

课后学业:

金沙注册送58 37

 

新知识:

 

 

 

 

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

– block :设为块级成分

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

– inline-block
:设为内联块级成分(本人为行级成分,可是全数会计成分所特有的各样品质,比方,宽、高
、text-align等)

 

 

 

金沙注册送58 38

金沙注册送58 39

金沙注册送58 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>

金沙注册送58,<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}

/*CSS叁 动画的施用

一.宣称二个动画片(关键帧)

@-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 播放次数,默认为一,无限次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

 

 

官网:金沙注册送58 41

 

 

 

我做的:

金沙注册送58 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=”right1″><img
src=”img/九a070470f3f74032922八f7f167517柒e2.jpg”/>
<div>品牌文化</div> </div>

<div class=”right1″><img
src=”img/f1a3七b八三b957肆edbb1d0f0肆e1207伍a七b.jpg”/>
<div>建党职业</div> </div>

</div>

 

</div> </div>

</section>

 

 

 

</body>

</html>

相关文章

网站地图xml地图