zoukankan      html  css  js  c++  java
  • 项目一~达人美食图册详情

      1 reset.css:
      2 @charset "utf-8";
      3 /*=========================Reset_start==========================*/
      4 body,h1,h2,h3,h4,h5,h6,div,p,dl,dt,dd,ol,ul,li,form,table,th,td,a,img,span,strong,var,em,input,textarea,select,option
      5     {
      6         margin: 0; 
      7         padding: 0;
      8     }
      9 html,body
     10     {
     11         font-family:"微软雅黑","宋体",Arail,Tabhoma;
     12         text-align: left;
     13     }
     14 ul,ol
     15     {
     16         list-style: none;
     17     }
     18 img
     19     {
     20         border: 0 none;
     21     }
     22 input,select,textarea
     23     {
     24         outline:0;
     25     }
     26 textarea
     27     {
     28         resize:none;
     29         overflow: auto;
     30     }
     31 table
     32     {
     33     border-collapse: collapse;
     34      border-spacing: 0;
     35     }
     36 th,strong,var,em
     37     {
     38         font-weight: normal; 
     39         font-style: normal;
     40     }
     41 a
     42     {
     43         text-decoration: none;
     44     }
     45 
     46 /*==========================Reset_End===========================*/
     47 
     48 
     49 head.css:
     50     *
     51     {
     52         margin: 0;
     53         padding: 0;
     54     }
     55     .head
     56     {
     57         border-bottom:4px solid #176fbb;
     58         min-width: 1000px;
     59     }
     60     .headcon
     61     {
     62         width: 1000px;
     63         margin: 0 auto;
     64         overflow: hidden;
     65         padding-top: 15px;
     66         padding-bottom: 9px;
     67     }
     68     .head1
     69         {
     70             float: left;
     71         }
     72     .head2
     73         {
     74             float: right;
     75         }
     76     .banners
     77         {
     78             float: left;
     79             margin-right: 14px;
     80             font-family: "微软雅黑";
     81             font-size: 14px;
     82             color: #505050;
     83             text-decoration: none;
     84         }
     85     .headboreder
     86         {
     87             border-right: 2px solid #3c3c3c;
     88             padding-right: 14px;
     89         }
     90     .headinp
     91         {
     92             width: 151px;
     93             height: 24px;
     94             margin-right: 0px;
     95         }
     96     .xinglixiang
     97         {
     98             margin-top: -5px;
     99         }
    100     .phone
    101         {
    102             margin-top: -1px;
    103         }
    104     .sousuo
    105         {
    106             margin-top: -6px;
    107         }
    108     .head3
    109         {    
    110             float: left;
    111             margin-left: 56px;
    112             margin-top: 40px;
    113         }
    114     .head3 a
    115         {
    116             font-family: "微软雅黑";
    117             font-size: 18px;
    118             color: #3c3c3c;
    119             text-decoration: none;
    120             margin-left: 38px;
    121         }
    122 
    123 buttom.css:
    124 
    125 .dibuxinxi
    126     {
    127         margin-top: 30px;
    128         overflow: hidden;
    129         width: 100%;
    130         min-width: 1000px;
    131         background-color:#023c4d;
    132     }
    133 .xinxishang            
    134     {
    135         width: 1000px;
    136         color: #ffffff;
    137         overflow: hidden;    
    138         margin: 0 auto;
    139     }
    140 .diyilie
    141     {
    142         float: left;
    143         padding-left: 102px;
    144         float: left;
    145     }    
    146 .l1
    147     {
    148         padding-top: 22px;
    149         font-size: 18px;
    150         font-weight: bold;
    151     }
    152 .l2
    153     {
    154         padding-top: 11px;
    155         font-size: 14px;
    156     }
    157 .l3,.l4,.l5
    158     {
    159         padding-top: 15px;
    160         font-size: 14px;
    161     }
    162 .dierlie
    163     {
    164         float: left;
    165         margin-left: 80px;
    166         float: left;
    167     }
    168 .disanlie
    169     {
    170         float: left;
    171         margin-left: 80px;
    172         float: left;
    173     }
    174 .disilie
    175     {
    176         float: left;
    177         margin-left: 80px;
    178         float: left;
    179     }
    180 .l6
    181     {
    182         padding-top: 22px;
    183         font-size: 14px;
    184     }
    185 .diwulie
    186     {
    187         float: left;
    188         margin-left: 80px;
    189         float: left;
    190     }
    191 .l7
    192     {
    193         font-size: 18px;
    194         padding-top: 18px;
    195     }
    196 .xinxixia
    197     {
    198         border-top:1px solid #ffffff;
    199         margin-top: 22px;
    200     }
    201 .dibukuang
    202     {
    203         height: 57px;
    204         line-height: 57px;
    205         width: 1000px;
    206         margin: 0 auto;
    207     }
    208 .pp
    209     {
    210         text-align: center;
    211         color: #ffffff;
    212     }
       1 <!doctype html>
       2 <html lang="en">
       3 <head>
       4     <meta charset="UTF-8">
       5     <title>Document</title>
       6     <link rel="stylesheet" href="css/head.css">
       7     <link rel="stylesheet" href="css/reset.css">
       8     <link rel="stylesheet" href="css/buttom.css">
       9     <meta name="Keywords" content="达人图册">
      10     <meta name="Description" content="达人图册详情">
      11     <style>
      12         .zsh_body
      13         {
      14             font-size: 14px;
      15             font-weight: bold;
      16             color: #3c3c3c;
      17         }
      18         .zsh_middle
      19         {
      20             width: 1000px;
      21             margin: 0 auto;
      22         }
      23         .zsh_biaoti
      24         {
      25             overflow: hidden;
      26         }
      27         .zsh_shouye
      28         {
      29             margin-top: 21px;
      30         }
      31         .zsh_kdw
      32         {
      33             margin-top: 18px;
      34             position: relative;
      35             height: 18px;
      36         }
      37         .zsh_kendingwan
      38         {    
      39             font-size: 18px;
      40             margin-left: 19px;
      41             float: left;
      42         }
      43         .zsh_hx
      44         {
      45             float: left;
      46             margin-left: 572px;
      47         }
      48         .zsh_hongxin,.zsh_lanxin
      49         {
      50             font-size: 12px;
      51             color: #6e6e6e;
      52         }
      53         .zsh_hongxin
      54         {
      55             float: left;
      56             margin-left: 9px;
      57             line-height: 18px;
      58         }
      59         .zsh_lx
      60         {
      61             float: left;
      62             margin-left: 20px;
      63         }
      64         .zsh_lanxin
      65         {
      66             float: left;
      67             margin-left: 10px;
      68             line-height: 18px;
      69         }
      70         .zsh_fh
      71         {
      72             float: left;
      73             margin-left: 33px;
      74         }
      75         .zsh_fanhuixiangce
      76         {
      77             float: left;
      78             margin-left: 10px;
      79             color: #51b23e;
      80             font-size: 16px;
      81             text-decoration: underline;
      82             line-height: 18px;
      83         }
      84         .zsh_lvse
      85         {
      86             width: 1000px;
      87             border: 2px solid #51b23e;
      88             margin-top: 8px;
      89         }
      90         .zsh_zuocezhengti
      91         {
      92             width: 700px;
      93             float: left;
      94         }
      95         .zsh_datubufen
      96         {
      97             position: relative;
      98         }
      99         .zsh_kdwbj
     100         {
     101             margin-top: 20px;
     102         }
     103         .zsh_yuanquanzuo
     104         {
     105             position: absolute;
     106             left: 13px;
     107             top: 201px;
     108         }
     109         .zsh_yuanquanyou
     110         {
     111             position: absolute;
     112             top: 201px;
     113             right: 13px; 
     114         }
     115         .zsh_yinying
     116         {
     117             position: absolute;
     118             bottom: 0px;
     119             left: 0px;
     120         }
     121         .zsh_yema
     122         {
     123             position: absolute;
     124             left: 286px;
     125             bottom: 16px;
     126             font-size: 18px;
     127             color: #ffffff;
     128         }
     129         .zsh_kuanlvxian
     130         {
     131             margin-top: 30px;
     132             background: #51b23e;
     133             height: 38px;
     134         }
     135         .zsh_talk
     136         {
     137             font-size: 18px;
     138             color: #ffffff;
     139             padding-left: 19px;
     140             line-height: 38px;
     141         }
     142         .zsh_plqts
     143         {
     144             float: left;
     145             height: 166px;
     146             width: 701px;
     147         }
     148         .zsh_tx
     149         {
     150             margin-top: 20px;
     151             margin-left: 21px;
     152             float: left;
     153         }
     154         .zsh_sswj
     155         {
     156             font-weight: bold;
     157             color: #3c3c3c;
     158             margin-left: 5px;
     159             margin-top: 19px;
     160         }
     161         .zsh_plk
     162         {
     163             float: left;
     164             margin-top: 20px;
     165             margin-left: 19px;
     166             width: 588px;
     167             height: 98px;
     168             border: 1px solid #6e6e6e;
     169         }
     170         .zsh_ts1,.zsh_ts2
     171         {
     172             font-size: 12px;
     173             font-weight: bold;
     174             text-align: center;
     175         }
     176         .zsh_ts1
     177         {
     178             padding-top: 30px;
     179             color: #6e6e6e;
     180             
     181         }
     182         .zsh_ts2
     183         {
     184             text-decoration: underline;
     185             margin-top: 15px;
     186             color: #ffa000;
     187         }
     188         .zsh_shuruzishu
     189         {
     190             font-size: 12px;
     191             font-weight: bold;
     192             color: #6e6e6e;
     193             float: right;
     194             margin-top: 9px;
     195         }
     196         .zsh_pl
     197         {
     198             float: left;
     199             width: 701px;
     200             height: 25px;
     201             margin-top: 19px;
     202         }
     203         .zsh_pinglunanniu
     204         {
     205             color: #ffffff;
     206             font-weight: bold;
     207             float: right;
     208             background-color: #5ab4f5;
     209             width: 80px;
     210             height: 25px;
     211         }
     212         .zsh_talk1
     213         {
     214             float: left;
     215             margin-top: 45px;
     216             width: 701px;
     217         }
     218         .zsh_tx1
     219         {
     220             margin-left: 21px;
     221             float: left;
     222         }
     223         .zsh_youcewenzi
     224         {
     225             width: 592px;
     226             height: 491px;
     227             float: left;
     228             margin-left: 18px;
     229             
     230         }
     231         .zsh_pinglun1
     232         {
     233             width: 592px;
     234             font-weight:bold;
     235         }
     236         .zsh_dierhang
     237         {
     238             width: 590px;
     239             border-top: 1px dashed #898989;
     240             border-bottom: 1px dashed #898989;
     241             height: 27px;
     242             margin-top: 40px;
     243         }
     244         .zsh_time
     245         {
     246             line-height: 27px;
     247             color: #6e6e6e;
     248             float: left;
     249         }
     250         .zsh_lx2
     251         {
     252             float: left;
     253             margin-left: 270px;
     254             padding-top: 5px;            
     255         }
     256 
     257         .zsh_huifu
     258         {
     259             line-height: 27px;
     260             color: #6e6e6e;
     261             float: left;
     262             margin-left: 7px;
     263         }
     264         .zsh_xiaoshou
     265         {
     266             float: left;
     267             padding-top: 5px;
     268             margin-left: 30px;
     269         }
     270         .zsh_shuzi1168
     271         {
     272             line-height: 27px;
     273             color: #6e6e6e;
     274             float: left;
     275             margin-left: 7px;
     276         }
     277         .zsh_shouqi
     278         {
     279             line-height: 27px;
     280             color: #144b6e;
     281             float: left;
     282             margin-left: 20px;
     283         }
     284         .zsh_disankuai
     285         {
     286             width: 596px;
     287             height: 105px;
     288             float: left;
     289             margin-top: 19px;
     290         }
     291         .zsh_ssly
     292         {
     293             float: left;
     294         }
     295         .zsh_shishanglvyou
     296         {
     297             margin-top: 14px;
     298         }
     299         .zsh_ycpl
     300         {
     301             float: left;
     302             margin-left: 20px;
     303             width: 520px;
     304         }
     305         .zsh_yihang
     306         {
     307             float: left;
     308 
     309         }
     310         .zsh_zai101
     311         {
     312             float: left;
     313             margin-top: 18px;
     314             color: #626262;
     315         }
     316         .zsh_sanhang
     317         {
     318             margin-top: 21px;
     319             float: left;
     320         }
     321         .zsh_time1
     322         {
     323             color: #626262;
     324             float: left;
     325         }
     326         .zsh_huifu1
     327         {
     328             float: left;
     329             color: #176fbb;
     330             margin-left: 16px;
     331         }
     332         .zsh_disikuai
     333         {
     334             width: 596px;
     335             height: 105px;
     336             float: left;
     337             margin-top: 19px;
     338             position: relative;
     339         }
     340         .zsh_sslytp
     341         {
     342             width: 50px;
     343             height: 50px;
     344         }
     345         .zsh_pinglun
     346         {
     347             position: absolute;
     348             left: 284px;
     349             top: 81px;
     350         }
     351         .zsh_neirong
     352         {
     353             position: absolute;
     354             left: 324px;
     355             top: 91px;
     356             font-size: 12px;
     357             color: #d2d2d2;
     358         }
     359         .zsh_kuangkuang
     360         {
     361             width: 589px;
     362             height: 58px;
     363             border: 1px solid #6e6e6e;
     364             float: left;
     365             margin-top: 4px;
     366         }
     367         .zsh_pinglun,.zsh_neirong
     368         {
     369             display: none;
     370         }
     371         .zsh_kuangkuang:hover .zsh_pinglun
     372         {
     373             display: block;
     374         }
     375         .zsh_kuangkuang:hover .zsh_neirong
     376         {
     377             display: block;
     378         }
     379         .zsh_haikeyi
     380         {
     381             float: right;
     382             margin-top: 9px;
     383             color: #6e6e6e;
     384             font-size: 12px;
     385         }
     386         .zsh_pingluna
     387         {
     388             margin-top: 19px;
     389             float: left;
     390             background-color: #5ab4f5;
     391             width: 80px;
     392             height: 25px;
     393             color: #ffffff;
     394             font-weight: bold;
     395             margin-left: 512px;
     396         }
     397         .zsh_talk2
     398         {
     399             margin-top: 19px;
     400             width: 700px;
     401             float: left;
     402         }
     403         .zsh_dierhang1
     404         {
     405             width: 590px;
     406             border-top: 1px dashed #898989;
     407             border-bottom: 1px dashed #898989;
     408             height: 27px;
     409             margin-top: 40px;
     410             float: left;
     411             margin-left: 18px;
     412         }
     413         .zsh_pinglun2
     414         {
     415             width: 591px;
     416             font-weight:bold;
     417             float: left;
     418             margin-left: 18px;
     419         }
     420         /*翻页部分*/
     421         .fanye
     422         {
     423             float:left;
     424             margin-top: 20px;
     425             margin-left:198px; 
     426         }
     427         .shangyiye
     428         {
     429             float: left;
     430         }
     431         .shuzi1
     432         {
     433             float: left;
     434             margin-left: 14px;
     435         }
     436         .shengluehao
     437         {
     438             float: left;
     439             margin-left: 7px;
     440         }
     441         .shuzi12
     442         {
     443             float: left;
     444             margin-left: 8px;
     445 
     446         }
     447         .shuzi13
     448         {
     449             background-color: #6e6e6e;
     450             width: 30px;
     451             height: 20px;
     452             float: left;
     453             margin-left: 11px;
     454             text-align: center;
     455         }
     456         .shuzi14
     457         {
     458             margin-left: 10px;
     459             float: left;
     460         }
     461         .shengluehao2
     462         {
     463             float: left;
     464             margin-left: 9px;
     465         }
     466         .shuzi40
     467         {
     468             float: left;
     469             margin-left: 9px;
     470         }
     471         .xiayiye
     472         {
     473             float: left;
     474             margin-left: 12px;
     475         }
     476         .zsh_fenjiexian
     477         {
     478             float: left;
     479             width: 700px;
     480             border: 1px solid #898989;
     481             margin-top: 23px;
     482             margin-bottom: 30px;
     483         }
     484         .zsh_youcezhengti
     485         {
     486             width: 270px;
     487             float: left;
     488             margin-left: 30px;
     489             margin-top: 20px;
     490         }
     491         .zsh_youceyikuai
     492         {
     493             width: 268px;
     494             height: 527px;
     495             border: 1px solid #c8c8c8;
     496         }
     497         .zsh_youyiyi
     498         {
     499             float: left;
     500         }
     501         .zsh_yanjingnv
     502         {
     503             float: left;
     504             margin:20px; 
     505         }
     506         .zsh_youce
     507         {
     508             float: left;
     509             width: 150px;
     510         }
     511         .zsh_tianlanse,.zsh_shijian,.zsh_tian1,.zsh_tian2
     512         {
     513             font-size: 12px;
     514             color: #000000;
     515             font-weight: bold;
     516         }
     517         .zsh_tianlanse
     518         {
     519             float: left;
     520             margin-top: 27px;
     521         }
     522         .zsh_shijian
     523         {
     524             float: left;
     525             margin-top: 15px;
     526         }
     527         .zsh_youyier
     528         {
     529             height:41px;
     530             width: 268px;
     531             border-top: 1px solid #c8c8c8;
     532             border-bottom: 1px solid #c8c8c8;
     533             float: left;
     534         }
     535         .zsh_xihuan
     536         {
     537             margin-top: 7px;
     538             margin-left: 15px;
     539             width: 70px;
     540             height: 25px;
     541             background: url(images/zsh_圆角空矩形.png) 0 0 no-repeat;
     542             position: relative;
     543             float: left;
     544         }
     545         .zsh_konghognxin
     546         {
     547             position: absolute;
     548             left: 12px;
     549             top: 6px;
     550         }
     551         .zsh_xihuana
     552         {
     553             position: absolute;
     554             left: 35px;
     555             top: 5px;
     556             font-size: 12px;
     557             font-weight: bold;
     558             color: #7b7b7b;
     559         }
     560         .zsh_fenxiang
     561         {
     562             margin-top: 7px;
     563             margin-left: 15px;
     564             width: 70px;
     565             height: 25px;
     566             position: relative;
     567             float: left;
     568         }
     569         .zsh_youyisan
     570         {
     571             float: left;
     572             margin-top: 20px;
     573             margin-left: 26px;
     574             position: relative;
     575         }
     576         .zsh_xiaowu
     577         {
     578             float: left;
     579             margin-top: 20px;    
     580         }
     581         .zsh_yinying1
     582         {
     583             position: absolute;
     584             float: left;
     585             top: 156px;
     586             left: 0px;
     587         }
     588         .zsh_xiaohongxin
     589         {
     590             float: left;
     591             position: absolute;
     592             left: 70px;
     593             top: 165px;
     594         }
     595         .zsh_1168,.zsh_2hao1168,.zsh_1168b,.zsh_2hao1168b
     596         {
     597             color: #ffffff;
     598             font-weight: bold;
     599             font-size: 12px;
     600         }
     601         .zsh_1168
     602         {
     603             position: absolute;
     604             left: 94px;
     605             top: 164px;
     606         }
     607         .zsh_xiaolanxin
     608         {
     609             float: left;
     610             position: absolute;
     611             left: 142px;
     612             top: 165px;
     613         }
     614         .zsh_2hao1168
     615         {
     616             position: absolute;
     617             float: left;
     618             left: 167px;
     619             top: 164px;
     620         }
     621         .zsh_yinying1a
     622         {
     623             position: absolute;
     624             float: left;
     625             top: 326px;
     626             left: 0px;
     627         }
     628         .zsh_xiaohongxina
     629         {
     630             float: left;
     631             position: absolute;
     632             left: 70px;
     633             top: 335px;
     634         }
     635         .zsh_1168a,.zsh_2hao1168a
     636         {
     637             color: #ffffff;
     638             font-weight: bold;
     639             font-size: 12px;
     640         }
     641         .zsh_1168a
     642         {
     643             position: absolute;
     644             left: 94px;
     645             top: 335px;
     646         }
     647         .zsh_xiaolanxina
     648         {
     649             float: left;
     650             position: absolute;
     651             left: 142px;
     652             top: 335px;
     653         }
     654         .zsh_2hao1168a
     655         {
     656             position: absolute;
     657             float: left;
     658             left: 167px;
     659             top: 335px;
     660         }
     661         .zsh_youceerkuai
     662         {
     663             width: 268px;
     664             height: 224px;
     665             border: 1px solid #c8c8c8;
     666             margin-top: 20px;
     667             position: relative;
     668         }
     669         .zsh_tian2
     670         {
     671             float: left;
     672             margin-top: 20px;
     673             margin-left: 26px;
     674         }
     675         .zsh_haoduochuan
     676         {
     677             margin-top: 20px;
     678             margin-left: 27px;
     679             float: left;
     680         }
     681         .zsh_yinying2
     682         {
     683             position: absolute;
     684             float: left;
     685             top: 176px;
     686             left: 27px;
     687         }
     688         .zsh_xiaohongxinb
     689         {
     690             float: left;
     691             position: absolute;
     692             left: 100px;
     693             top: 183px;
     694         }
     695         .zsh_xiaolanxinb
     696         {
     697             float: left;
     698             position: absolute;
     699             left: 172px;
     700             top: 183px;
     701         }
     702         .zsh_1168b
     703         {
     704             float: left;
     705             position: absolute;
     706             left: 124px;
     707             top: 182px;
     708         }
     709         .zsh_2hao1168b
     710         {
     711             float: left;
     712             position: absolute;
     713             left: 197px;
     714             top: 182px;
     715         }
     716     </style>
     717 </head>
     718 <body class="zsh_body">
     719     <!-- 头部部分开始 -->
     720     <div class="head">
     721         <div class="headcon">
     722             <div class="head1">
     723                 <img src="images/ban.png" alt="">
     724             </div>
     725             <div class="head2">
     726                 <img class="banners phone" src="images/phone.png" alt="">
     727                 <span class="banners headboreder yanse400">400-800-8820</span>
     728                 <a class="banners headboreder" href="###">登陆</a>
     729                 <a class="banners headboreder" href="###">注册</a>
     730                 <img class="banners xinglixiang" src="images/xingli.png" alt="">
     731                 <span class="banners ">行李箱</span>
     732                 <input class="banners headinp sousuo" type="text">
     733                 <img class="banners sousuo" src="images/sousuo.png" alt="">
     734             </div>
     735             <div class="head3">
     736                 <img src="images/fangzi.png" alt="">
     737                 <a href="###">第一次</a>
     738                 <a href="###">目的地</a>
     739                 <a href="###">自定行程</a>
     740                 <a href="###">游记</a>
     741                 <a href="###">特产</a>
     742                 <a href="###">优惠</a>
     743                 <a href="###">环岛巴士</a>
     744             </div>
     745         </div>
     746     </div>
     747     <!-- 头部部分结束 -->
     748     <!-- 中间主体部分开始 -->
     749     <div class="zsh_middle">
     750         <div class="zsh_biaoti"><!--上方标题栏  -->
     751             <div class="zsh_shouye"><!-- 首页>达人>画册>图片详情 -->
     752                 首页>达人>画册>图片详情
     753             </div>
     754             <div class="zsh_kdw">
     755                 <div class="zsh_kendingwan"><!-- 垦丁海湾一角 -->
     756                     垦丁海湾一角
     757                 </div>
     758                 <img src="images/zsh_红心.png" alt="红心" class="zsh_hx">
     759                 <div class="zsh_hongxin"><!-- 红心 -->
     760                     1168
     761                 </div>
     762                 <img src="images/zsh_蓝心.png" alt="蓝心" class="zsh_lx">
     763                 <div class="zsh_lanxin"><!-- 蓝心 -->
     764                     1168
     765                 </div>
     766                 <img src="images/zsh_拐弯箭头.png" alt="返回" class="zsh_fh">
     767                 <div class="zsh_fanhuixiangce"><!-- 返回相册列表 -->
     768                     返回相册列表
     769                 </div>
     770             </div>
     771             <div class="zsh_lvse"><!-- 绿色分界线 -->                
     772             </div>
     773         </div>
     774         <div class="zsh_zuocezhengti"><!-- 左侧整体 -->
     775             <div class="zsh_datubufen"><!-- 垦丁湾大图片 -->
     776                 <img src="images/zsh_垦丁湾.jpg" alt="垦丁湾" class="zsh_kdwbj">
     777                 <img src="images/zsh_圆圈左.png" alt="向左翻页" class="zsh_yuanquanzuo">
     778                 <img src="images/zsh_圆圈右.png" alt="向左翻页" class="zsh_yuanquanyou">
     779                 <img src="images/zsh_阴影.png" alt="底部阴影" class="zsh_yinying">
     780                 <p class="zsh_yema">
     781                     第1张/共55张
     782                 </p>
     783             </div>
     784             <div class="zsh_kuanlvxian"><!-- 宽绿线 -->
     785                 <p class="zsh_talk">
     786                     评论(66)
     787                 </p>
     788             </div>
     789             <div class="zsh_plqts"><!-- 评论区登录提示 -->
     790                 <div class="zsh_tx"><!-- 头像,闪烁尾戒 -->
     791                     <img src="images/zsh_头像.jpg" alt="头像">
     792                     <p class="zsh_sswj"><!-- 网名:闪烁尾戒 -->
     793                         闪烁尾戒
     794                     </p>
     795                 </div>
     796                 <div class="zsh_plk"><!-- 评论框 -->
     797                     <p class="zsh_ts1"><!-- 第一行提示 -->
     798                         要评论?请先注册或者登陆,您也可以快捷登陆:    
     799                     </p>
     800                     <p class="zsh_ts2"><!-- 第二行提示 -->
     801                         已有账号直接登录
     802                     </p>
     803                 </div>
     804                 <p class="zsh_shuruzishu"><!-- 提示还可以输入200字 -->
     805                     还可以输入200字
     806                 </p>
     807                 <div  class="zsh_pl">
     808                     <input type="button" name="评论" value="评论" class="zsh_pinglunanniu">
     809                 </div>
     810             </div>
     811             <div class="zsh_talk1"><!-- 第一个评论 -->
     812                 <div class="zsh_tx1"><!-- 头像,闪烁尾戒 -->
     813                     <img src="images/zsh_头像.jpg" alt="头像">
     814                     <p class="zsh_sswj"><!-- 网名:闪烁尾戒 -->
     815                         闪烁尾戒
     816                     </p>
     817                 </div>
     818                 <div class="zsh_youcewenzi"><!-- 右侧文字评论区 -->
     819                     <div class="zsh_pinglun1"><!-- 第一行 -->
     820                         在101大楼看夕阳超赞,在西门町享受也是的热闹,时尚与怀旧,现代与传统,激情与慢热,在这座城市自由释放。
     821                     </div>
     822                     <div class="zsh_dierhang"><!-- 第二行 -->
     823                         <p class="zsh_time">
     824                             2014-7-26 14:22
     825                         </p>
     826                         <img src="images/zsh_蓝心.png" alt="" class="zsh_lx2">
     827                         <p class="zsh_huifu">
     828                             回复
     829                         </p>
     830                         <img src="images/zsh_小手.png" alt="" class="zsh_xiaoshou">
     831                         <p class="zsh_shuzi1168">
     832                             1168
     833                         </p>
     834                         <p class="zsh_shouqi">
     835                             收起 >
     836                         </p>
     837                     </div>
     838                     <div class="zsh_disankuai"><!-- 第三块-时尚旅游 -->
     839                         <div class="zsh_ssly"><!-- 时尚旅游图片 -->
     840                             <img src="images/zsh_时尚旅游.jpg" alt="时尚旅游" class="zsh_sslytp">
     841                             <p class="zsh_shishanglvyou">
     842                                 时尚旅游
     843                             </p>
     844                         </div>
     845                         <div class="zsh_ycpl"><!-- 右侧文字评论 -->
     846                             <div class="zsh_yihang"><!-- 第一行 -->
     847                                 <span class="zsh_shishang">
     848                                     时尚旅游
     849                                 </span>
     850                                 &nbsp;
     851                                 <span>
     852                                     回复
     853                                 </span>
     854                                 &nbsp;
     855                                 <span>
     856                                     闪烁尾戒
     857                                 </span>
     858                             </div>
     859                             <div class="zsh_zai101">
     860                                 在101大楼看夕阳超赞,在西门町享受也是的热闹,时尚与怀旧,现代与传统,激情与慢热,在这座城市自由释放。
     861                             </div>    
     862                             <div class="zsh_sanhang"><!-- 第三行 -->
     863                                 <p class="zsh_time1">
     864                                     2014-7-26 14:22
     865                                 </p>
     866                                 <p class="zsh_huifu1">
     867                                     回复
     868                                 </p>
     869                             </div>
     870                         </div>
     871                     </div>
     872                     <div class="zsh_disikuai "><!-- 第四块-闪烁尾戒 -->
     873                         <div class="zsh_ssly"><!-- 闪烁尾戒图片 -->
     874                             <img src="images/zsh_头像.jpg" alt="闪烁尾戒" class="zsh_sslytp">
     875                             <p class="zsh_shishanglvyou">
     876                                 闪烁尾戒
     877                             </p>
     878                         </div>
     879                         <div class="zsh_ycpl"><!-- 右侧文字评论 -->
     880                             <div class="zsh_yihang"><!-- 第一行 -->
     881                                 <span class="zsh_shishang">
     882                                     闪烁尾戒
     883                                 </span>
     884                                 &nbsp;
     885                                 <span>
     886                                     回复
     887                                 </span>
     888                                 &nbsp;
     889                                 <span>
     890                                     时尚旅游
     891                                 </span>
     892                             </div>
     893                             <div class="zsh_zai101">
     894                                 在101大楼看夕阳超赞,在西门町享受也是的热闹,时尚与怀旧,现代与传统,激情与慢热,在这座城市自由释放。
     895                             </div>    
     896                             <div class="zsh_sanhang"><!-- 第三行 -->
     897                                 <p class="zsh_time1">
     898                                     2014-7-26 14:22
     899                                 </p>
     900                                 <p class="zsh_huifu1">
     901                                     回复
     902                                 </p>
     903                                 <p class="zsh_huifu1">
     904                                     删除
     905                                 </p>
     906                             </div>
     907                         </div>
     908                         <div class="zsh_kuangkuang"><!-- 框框 -->    
     909                             <img src="images/zsh_评论框.png" alt="评论框" class="zsh_pinglun">
     910                             <p class="zsh_neirong">
     911                                 评论内容不能为空,写点东西吧。
     912                             </p>    
     913                         </div>
     914                         <div class="zsh_haikeyi">
     915                             还可以输入200字
     916                         </div>
     917                         <input type="button" name="评论" value="评论" class="zsh_pingluna">
     918                     </div>
     919                 </div>
     920             </div>
     921             <div class="zsh_talk2"><!-- 第二个评论 -->
     922                 <div class="zsh_tx1"><!-- 头像,闪烁尾戒 -->
     923                     <img src="images/zsh_头像.jpg" alt="头像">
     924                     <p class="zsh_sswj"><!-- 网名:闪烁尾戒 -->
     925                         闪烁尾戒
     926                     </p>
     927                 </div>
     928                 <div class="zsh_pinglun2 "><!-- 第一行 -->
     929                     101大楼看夕阳超赞,在西门町享受也是的热闹,时尚与怀旧,现代与传统,激情与慢热,在这座城市自由释放。
     930                 </div>    
     931                 <div class="zsh_dierhang1"><!-- 第二行 -->
     932                     <p class="zsh_time">
     933                         2014-7-26 14:22
     934                     </p>
     935                     <img src="images/zsh_蓝心.png" alt="" class="zsh_lx2">
     936                     <p class="zsh_huifu">
     937                         回复
     938                     </p>
     939                     <img src="images/zsh_小手.png" alt="" class="zsh_xiaoshou">
     940                     <p class="zsh_shuzi1168">
     941                         1168
     942                     </p>
     943                     <p class="zsh_shouqi">
     944                         收起 >
     945                     </p>
     946                 </div>
     947             </div>
     948             <div class="zsh_talk2"><!-- 第三个评论 -->
     949                 <div class="zsh_tx1"><!-- 头像,闪烁尾戒 -->
     950                     <img src="images/zsh_头像.jpg" alt="头像">
     951                     <p class="zsh_sswj"><!-- 网名:闪烁尾戒 -->
     952                         闪烁尾戒
     953                     </p>
     954                 </div>
     955                 <div class="zsh_pinglun2 "><!-- 第一行 -->
     956                     101大楼看夕阳超赞,在西门町享受也是的热闹,时尚与怀旧,现代与传统,激情与慢热,在这座城市自由释放。
     957                 </div>    
     958                 <div class="zsh_dierhang1"><!-- 第二行 -->
     959                     <p class="zsh_time">
     960                         2014-7-26 14:22
     961                     </p>
     962                     <img src="images/zsh_蓝心.png" alt="" class="zsh_lx2">
     963                     <p class="zsh_huifu">
     964                         回复
     965                     </p>
     966                     <img src="images/zsh_小手.png" alt="" class="zsh_xiaoshou">
     967                     <p class="zsh_shuzi1168">
     968                         1168
     969                     </p>
     970                     <p class="zsh_shouqi">
     971                         收起 >
     972                     </p>
     973                 </div>
     974             </div>
     975             <div class="fanye"><!-- 翻页 -->
     976                 <span class="shangyiye">
     977                 上一页
     978                 </span><!-- 上一页 -->
     979                 <span class="shuzi1">
     980                 1
     981                 </span><!-- 1 -->
     982                 <span class="shengluehao">
     983                     .....
     984                 </span><!-- 省略号 -->
     985                 <span class="shuzi12">
     986                     12
     987                 </span><!-- 12 -->
     988                 <span class="shuzi13">
     989                     13
     990                 </span><!-- 13 -->
     991                 <span class="shuzi14"><!-- 14 -->
     992                     14
     993                 </span>
     994                 <span class="shengluehao2"><!-- 省略号 -->
     995                     .....
     996                 </span>
     997                 <span class="shuzi40"><!-- 40 -->
     998                     40
     999                 </span>
    1000                 <span class="xiayiye"> <!-- 下一页 -->
    1001                     下一页
    1002                 </span>
    1003             </div>
    1004             <div class="zsh_fenjiexian"><!-- 底部分界线 -->                
    1005             </div>
    1006         </div>
    1007         <div class="zsh_youcezhengti"><!-- 右侧整体-两部分 -->
    1008             <div class="zsh_youceyikuai"><!-- 右侧第一块 -->
    1009                 <div class="zsh_youyiyi"><!-- 右侧第一块第一行 -->
    1010                     <img src="images/zsh_眼镜女.jpg" alt="眼镜女" class="zsh_yanjingnv"><!-- 图片 -->
    1011                     <div class="zsh_youce"><!-- 右侧文字介绍 -->
    1012                         <p class="zsh_tianlanse">
    1013                             天蓝色的
    1014                         </p>
    1015                         <p class="zsh_shijian">
    1016                             时间: 2014年12月12日
    1017                         </p>
    1018                     </div>
    1019                 </div>
    1020                 <div class="zsh_youyier"><!-- 右侧第一块第二行 -->
    1021                     <div class="zsh_xihuan"><!-- 喜欢 -->
    1022                         <img src="images/zsh_空红心.png" alt="空红心" class="zsh_konghognxin">
    1023                         <p class="zsh_xihuana">
    1024                             喜欢
    1025                         </p>
    1026                     </div>
    1027                     <div class="zsh_xihuan zsh_pingl1"><!-- 评论 -->
    1028                         <img src="images/zsh_蓝心.png" alt="蓝心" class="zsh_konghognxin">
    1029                         <p class="zsh_xihuana">
    1030                             评论
    1031                         </p>
    1032                     </div>
    1033                     <div class="zsh_fenxiang"><!-- 分享 -->
    1034                         <img src="images/zsh_分享.png" alt="分享" class="zsh_konghognxin">
    1035                         <p class="zsh_xihuana">
    1036                             分享
    1037                         </p>
    1038                     </div>
    1039                 </div>
    1040                 <div class="zsh_youyisan"><!-- 右侧第一块第三行 -->
    1041                     <p class="zsh_tian1">
    1042                         天蓝色的画册
    1043                     </p>
    1044                     <img src="images/zsh_小屋1.jpg" alt="小屋" class="zsh_xiaowu">
    1045                     <img src="images/zsh_背景1.png" alt="阴影" class="zsh_yinying1">
    1046                     <img src="images/zsh_红心.png" alt="红心" class="zsh_xiaohongxin">
    1047                     <p class="zsh_1168">
    1048                         1168
    1049                     </p>
    1050                     <img src="images/zsh_蓝心.png" alt="蓝心" class="zsh_xiaolanxin">
    1051                     <p class="zsh_2hao1168">
    1052                         1168
    1053                     </p>
    1054                     <img src="images/zsh_美丽的夜景.jpg" alt="美丽的夜景" class="zsh_xiaowu">
    1055                     <img src="images/zsh_背景1.png" alt="阴影" class="zsh_yinying1a">
    1056                     <img src="images/zsh_红心.png" alt="红心" class="zsh_xiaohongxina">
    1057                     <p class="zsh_1168a">
    1058                         1168
    1059                     </p>
    1060                     <img src="images/zsh_蓝心.png" alt="蓝心" class="zsh_xiaolanxina">
    1061                     <p class="zsh_2hao1168a">
    1062                         1168
    1063                     </p>
    1064                 </div>
    1065             </div>
    1066             <div class="zsh_youceerkuai"><!-- 右侧第二块 -->
    1067                 <p class="zsh_tian2">
    1068                         天蓝色的画册
    1069                     </p>
    1070                     <img src="images/zsh_好多船.jpg" alt="好多船" class="zsh_haoduochuan">
    1071                     <img src="images/zsh_背景1.png" alt="阴影" class="zsh_yinying2">
    1072                     <img src="images/zsh_红心.png" alt="红心" class="zsh_xiaohongxinb">
    1073                     <p class="zsh_1168b">
    1074                         1168
    1075                     </p>
    1076                     <img src="images/zsh_蓝心.png" alt="蓝心" class="zsh_xiaolanxinb">
    1077                     <p class="zsh_2hao1168b">
    1078                         1168
    1079                     </p>
    1080             </div>
    1081         </div>
    1082     </div>
    1083     <!-- 中间主体部分结束 -->
    1084     <!-- 底部信息栏 -->
    1085     <div class="dibuxinxi"><!-- 底部信息栏 -->
    1086         <div class="xinxishang"><!-- 信息栏上部分 -->
    1087             <ul class="diyilie"><!-- 1 -->
    1088                 <li class="l1">关于遛弯</li>
    1089                 <li class="l2">公司简介</li>
    1090                 <li class="l3">联系我们</li>
    1091                 <li class="l3">诚聘英才</li>
    1092                 <li class="l3">网站地址</li>
    1093             </ul>
    1094             <ul class="dierlie"><!-- 2 -->
    1095                 <li class="l1">帮助中心</li> 
    1096                 <li class="l2">赴台手续</li> 
    1097                 <li class="l3">遛弯玩法</li> 
    1098                 <li class="l3">常见问题</li> 
    1099             </ul>
    1100             <ul class="disanlie"><!-- 3 -->
    1101                 <li class="l1">网站条款</li>
    1102                 <li class="l2">服务条款</li>
    1103                 <li class="l3">免责声明</li>
    1104             </ul>
    1105             <ul class="disilie"><!-- 4 -->
    1106                 <li class="l1">关注我们</li>
    1107                 <li class="l6"><img src="images/微信logo.png" alt=""></li>
    1108             </ul>
    1109             <ul class="diwulie"><!-- 5 -->
    1110                 <li class="l1">400 820 8820</li>
    1111                 <li class="l7">周一至周日</li>
    1112                 <li class="l7">9:00~20:00</li>
    1113                 <li class="l7"><img src="images/zsh_在线服务.png" alt=""></li>
    1114             </ul>
    1115         </div>
    1116         <div class="xinxixia"><!-- 信息栏下部分 -->    
    1117             <div class="dibukuang">
    1118                 <p class="pp">
    1119                     Copyright © 2013-2014 www.6waner.cn All Right Reserved. 京ICP备11015236号
    1120                 </p>
    1121             </div>    
    1122         </div>
    1123     </div>
    1124     <!-- 底部信息栏结束 -->
    1125 </body>
    1126 </html>
  • 相关阅读:
    python——数据库操作
    【笔试】T实习生2014 总结
    【JS】Intermediate6:jQuery
    【JS】Intermediate5:Scope
    【JS】Intermediate4:JSON
    【JS】Intermediate3:AJAX
    【JS】Intermediate2:Events and Callbacks
    【JS】Intermediate1:The DOM
    【JS】Beginner9:Arrays
    【JS】Beginner8:Objects
  • 原文地址:https://www.cnblogs.com/yoyoyoyoyoyo/p/5711725.html
Copyright © 2011-2022 走看看