zoukankan      html  css  js  c++  java
  • 简单制作两个网站的布局(只做了首页)

    第一个做的不是很成熟,第二个感觉好了许多。

    一。长安汽车官网

    HTML代码

      1 <!DOCTYPE html>
      2 <html xmlns="http://www.w3.org/1999/xhtml">
      3 <head>
      4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      5     <title></title>
      6     <style type="text/css">
      7         body {
      8         }
      9     </style>
     10     <link href="长安样式表.css" rel="stylesheet" />
     11 </head>
     12 <body>
     13 
     14     <!--第一栏-->
     15     <div id="kd_1">
     16         <!--左上角-->
     17         <div class="kd_1L"></div>
     18         <div class="kd_1L" style="position: relative;">
     19             <div style="bottom: 0px; position: absolute;">
     20                 <img src="jpg/start1.png" height="60" />
     21             </div>
     22         </div>
     23         <!--中间顶部-->
     24         <div style=" 40%; height: 100%; float: left;">
     25             <div class="ul_1">
     26                 <div class="ul11">预约参观</div>
     27             </div>
     28             <div class="ul_1">
     29                 <div class="ul11">地图下载</div>
     30             </div>
     31             <div class="ul_1">
     32                 <div class="ul11">投资者关系</div>
     33             </div>
     34             <div class="ul_1" style=" 10%;">
     35                 <div class="ul11">公益</div>
     36             </div>
     37             <div class="ul_1" style=" 10%;">
     38                 <div class="ul11">人才</div>
     39             </div>
     40             <div class="ul_1" style=" 10%;">
     41                 <div class="ul11">新闻</div>
     42             </div>
     43             <div class="ul_1" style=" 10%;">
     44                 <div class="ul11">企业</div>
     45             </div>
     46         </div>
     47         <!-- 右上角-->
     48         <div class="kd_1R" style="position: relative;">
     49             <div style="bottom: 0px; position: absolute;">
     50                 <img src="jpg/start2.png" height="50" />
     51             </div>
     52         </div>
     53     </div>
     54 
     55     <!--下拉列表-->
     56     <div id="kd_2">
     57         <div style=" 12%; height: 100%; float: left;">
     58         </div>
     59         <div style=" 73%; height: 100%; float: left;">
     60             <div class="ul_2">首页</div>
     61             <div class="ul_2">乘用车</div>
     62             <div class="ul_2">商用车</div>
     63             <div class="ul_2">轻型车</div>
     64             <div class="ul_2">长安商城</div>
     65             <div class="ul_2">购买支持</div>
     66             <div class="ul_2">客户服务</div>
     67             <div class="ul_2">技术研发</div>
     68             <div class="ul_2">
     69                 <img src="jpg/biaoti1.png" />
     70             </div>
     71         </div>
     72         <div style=" 14%; height: 100%; float: left;">
     73         </div>
     74     </div>
     75     <div style="clear: both;"></div>
     76     <!--滚动图片-->
     77     <div id="kd_3"></div>
     78     <!--活动图片-->
     79     <div id="kd_4">
     80         <div class="kd_41" style="text-align: right;  37%;">
     81             <img src="jpg/pp1.jpg" />
     82         </div>
     83         <div class="kd_41">
     84             <img src="jpg/pp2.png" />
     85         </div>
     86         <div class="kd_41" style="text-align: left;  37%;">
     87             <img src="jpg/pp3.jpg" />
     88         </div>
     89     </div>
     90     <!--底部-->
     91     <div id="kd_5">
     92         <div class="ul5_n2" style="text-align: right;">
     93             <img src="jpg/end1.gif" />
     94         </div>
     95         <div class="ul5_n1" style=" 18%;">
     96             <div class="ul_51">
     97                 互动
     98             </div>
     99             <div class="ul_5">在线客服</div>
    100             <div class="ul_5">热线电话</div>
    101             <div class="ul_5">车友社区</div>
    102             <div class="ul_5">会员专区</div>
    103             <div class="ul_5">官方微信</div>
    104             <div class="ul_5">官方微博</div>
    105         </div>
    106         <div class="ul5_n2" style=" 6%; text-align: right;">
    107             <img src="jpg/end2.gif" />
    108         </div>
    109         <div class="ul5_n1">
    110             <div class="ul_51">
    111                 购买
    112             </div>
    113             <div class="ul_5">4S店查询</div>
    114             <div class="ul_5">长安商城</div>
    115             <div class="ul_5">积分兑换</div>
    116             <div class="ul_5">二手车置换</div>
    117             <div class="ul_5">车价计算器</div>
    118         </div>
    119         <div class="ul5_n2" style=" 9%; text-align: right;">
    120             <img src="jpg/end3.gif" />
    121         </div>
    122         <div class="ul5_n1">
    123             <div class="ul_51">
    124                 商务
    125             </div>
    126             <div class="ul_5">金融速贷</div>
    127             <div class="ul_5">招商加盟</div>
    128             <div class="ul_5">投资者交流</div>
    129             <div class="ul_5">供应商之窗</div>
    130         </div>
    131     </div>
    132     <!--版权-->
    133     <div id="kd_6"></div>
    134 
    135 
    136 
    137 
    138 </body>
    139 </html>

    CSS代码:

      1 * {
      2     margin: 0px;
      3     padding: 0px;
      4     box-sizing: border-box;
      5 }
      6 
      7 /*第一栏*/
      8 #kd_1 {
      9     width: 100%;
     10     height: 80px;
     11 }
     12 
     13 .kd_1L {
     14     width: 15%;
     15     height: 100%;
     16     float: left;
     17 }
     18 
     19 .kd_1R {
     20     width: 20%;
     21     height: 100%;
     22     float: left;
     23     text-align: left;
     24 }
     25 
     26 
     27 .ul_1 {
     28     position: relative;
     29     width: 14%;
     30     height: 100%;
     31     float: right;
     32 }
     33 
     34 .ul11 {
     35     position: absolute;
     36     width: 100%;
     37     font-size: 6px;
     38     text-align: right;
     39     bottom: 10px;
     40     cursor: pointer;
     41 }
     42 
     43 /*下拉列表*/
     44 #kd_2 {
     45     position: absolute;
     46     width: 100%;
     47     height: 30px;
     48     margin-top: 10px;
     49     background-color: #808080;
     50     opacity: 0.5;
     51     -moz-opacity: 0.5;
     52     filter: alpha(opacity=50);
     53 }
     54 
     55 
     56 
     57 .ul_2 {
     58     color: white;
     59     width: 10%;
     60     height: 100%;
     61     line-height: 30px;
     62     float: left;
     63     text-align: center;
     64     margin-left: 9px;
     65     cursor: pointer;
     66 }
     67 /*滚动图片*/
     68 #kd_3 {
     69     width: 100%;
     70     height: 800px;
     71     margin-bottom: 10px;
     72 }
     73 /*活动图片外边框*/
     74 #kd_4 {
     75     width: 100%;
     76     height: 140px;
     77     margin-bottom: 10px;
     78     margin-top: 10px;
     79     text-align: center;
     80 }
     81 /*活动图片为内部三个小边框*/
     82 .kd_41 {
     83     width: 26%;
     84     height: 100%;
     85     float: left;
     86 }
     87 
     88 /*底部*/
     89 #kd_5 {
     90     width: 100%;
     91     height: 300px;
     92     margin-bottom: 10px;
     93     margin-top: 10px;
     94     color: #222020;
     95 }
     96 /*底部大标题*/
     97 .ul_51 {
     98     cursor: pointer;
     99    
    100     height: 16%;
    101     font-size: 17px;
    102     line-height: 50px;
    103     font-weight: bolder;
    104 }
    105 /*底部小标题*/
    106 .ul_5 {
    107     cursor: pointer;
    108   
    109     height: 7%;
    110     font-size: 8px;
    111 }
    112 /*底部大文字标记边框*/
    113 .ul5_n1 {
    114     width: 15%;
    115     height: 100%;
    116     float: left;
    117 }
    118 /*底部图片标记边框*/
    119 .ul5_n2 {
    120     width: 18%;
    121     height: 100%;
    122     float: left;
    123 }
    124 
    125 /*版权*/
    126 #kd_6 {
    127 width: 1200px;

    128 height: 50px;
    129     margin-bottom: 10px;
    130     margin-top: 10px;
    131 }
    132 
    133 div {
    134     border: 1px solid red;
    135 }

    原网站效果:

    初步做出效果:

     

    二。雪佛兰官网

    HTML代码:

      1 <!DOCTYPE html>
      2 <html xmlns="http://www.w3.org/1999/xhtml">
      3 <head>
      4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      5     <title>雪佛兰</title>
      6     <link href="主页.css" rel="stylesheet" />
      7 </head>
      8 <body>
      9     <!--标题-->
     10     <div class="top">
     11         <!--左侧-->
     12         <div class="top_fgl"></div>
     13         <!--右侧-->
     14         <div class="top_fgr">
     15             <!--右侧上层-->
     16             <div class="top_fgr1">
     17                 <!--右侧上部第二次分割-->
     18                 <div class="top_fgr1-1" style=" 6%;">首页</div>
     19                 <div class="top_fgr1-1">雪佛兰品牌</div>
     20                 <div class="top_fgr1-1">活动专区</div>
     21                 <div class="top_fgr1-1" style=" 6%;">网上车贷</div>
     22                 <div class="top_fgr1-1">经销商查询</div>
     23                 <div class="top_fgr1-1" style=" 11%;">预约试驾</div>
     24                 <div class="top_fgr1-1" style=" 11%;">在线客服</div>
     25                 <div class="top_fgr1-1" style=" 11%;">雪佛兰金领结服务</div>
     26                 <div class="top_fgr1-1">CHEVY&nbsp;TECH</div>
     27                 <div class="top_fgr1-1"></div>
     28                 <div class="top_fgr1-1"></div>
     29             </div>
     30             <!-- 右侧下层-->
     31             <div class="top_fgr2">
     32                 <!--右侧下部第二次分割-->
     33                 <div class="top_fgr2-1">
     34                     所有车型<br />
     35                     All&nbsp;Vehicles
     36                 </div>
     37                 <div class="top_fgr2-1">
     38                     迈锐宝XL<br />
     39                     MalibuXL
     40                 </div>
     41                 <div class="top_fgr2-1">
     42                     迈锐宝<br />
     43                     Malibu
     44                 </div>
     45                 <div class="top_fgr2-1">
     46                     科鲁兹<br />
     47                     Cruze
     48                 </div>
     49                 <div class="top_fgr2-1">
     50                     科沃兹<br />
     51                     Cavalier
     52                 </div>
     53                 <div class="top_fgr2-1">
     54                     赛欧3<br />
     55                     Sail3
     56                 </div>
     57                 <div class="top_fgr2-1">
     58                     探界者<br />
     59                     Equinox
     60                 </div>
     61                 <div class="top_fgr2-1">
     62                     科帕奇<br />
     63                     Captiva
     64                 </div>
     65                 <div class="top_fgr2-1">
     66                     全新创酷<br />
     67                     Trax
     68                 </div>
     69                 <div class="top_fgr2-1">
     70                     乐风RV<br />
     71                     Lova&nbsp;RV
     72                 </div>
     73                 <div class="top_fgr2-1">
     74                     科迈罗<br />
     75                     Camaro
     76                 </div>
     77                 <div class="top_fgr2-1">
     78                     皮卡<br />
     79                     Pickup
     80                 </div>
     81                 <div class="top_fgr2-1"></div>
     82                 <div class="top_fgr2-1"></div>
     83             </div>
     84         </div>
     85     </div>
     86     <div class="top-2"></div>
     87     <!--大图轮播-->
     88     <div class="big_jpg">
     89         <img src="jpg/lunbo%20.jpg" style=" 100%; height: 100%;" />
     90     </div>
     91 
     92     <!-- 滚动条-->
     93     <div class="gun">
     94         <marquee scrolldelay="10" scrollamount="10" direction="left">你好</marquee>
     95     </div>
     96     <!--合作单位-->
     97     <div class="parter">
     98         <!-- 合作单位分割-->
     99         <div class="parter_fg" style="text-align: right;">
    100             <img src="jpg/parter1.png" />
    101         </div>
    102         <div class="parter_fg">
    103             <img src="jpg/parter2.png" />
    104         </div>
    105         <div class="parter_fg" style="text-align: left;">
    106             <img src="jpg/parter3.png" />
    107         </div>
    108 
    109     </div>
    110     <!--二维码-->
    111     <div class="code">
    112         <div class="code_fg"></div>
    113         <div class="code_fg"></div>
    114         <div class="code_fg">
    115             <div class="code_fg-3">
    116                 <img src="jpg/weixin1.png" />
    117             </div>
    118             <div class="code_fg-3">
    119                 <img src="jpg/weixin2.png" />
    120             </div>
    121             <div class="code_fg-3">
    122                 <img src="jpg/weixin3.png" />
    123             </div>
    124             <div class="code_fg-3">
    125                 <img src="jpg/weixin4.png" />
    126             </div>
    127             <div class="code_fg-3">
    128                 <img src="jpg/weixin5.png" />
    129             </div>
    130             <div class="code_fg-3"></div>
    131             <div class="code_fg-3"></div>
    132         </div>
    133 
    134     </div>
    135     <!-- 服务-->
    136     <div class="service">
    137         <div class="service_fg" style="border: none; height: 100%;"></div>
    138         <div class="service_fg" style="border: none; height: 100%;"></div>
    139         <div class="service_fg" style="border: none; height: 100%;  10%;">
    140             <div class="service_fg-1">全系车型</div>
    141             <div class="service_fg-1">轿车</div>
    142             <div class="service_fg-1">迈锐宝XL</div>
    143             <div class="service_fg-1">迈锐宝</div>
    144             <div class="service_fg-1">全新科鲁兹两厢版</div>
    145             <div class="service_fg-1">全新科鲁兹</div>
    146             <div class="service_fg-1">科沃兹</div>
    147             <div class="service_fg-1">赛欧3</div>
    148             <div class="service_fg-1">SUV</div>
    149             <div class="service_fg-1">探界者</div>
    150             <div class="service_fg-1">科帕奇</div>
    151             <div class="service_fg-1">全新创酷</div>
    152             <div class="service_fg-1">休旅车</div>
    153             <div class="service_fg-1">乐风RV</div>
    154             <div class="service_fg-1">跑车</div>
    155             <div class="service_fg-1">第六代科迈罗</div>
    156             <div class="service_fg-1">皮卡</div>
    157             <div class="service_fg-1">库罗德</div>
    158             <div class="service_fg-1">索罗德</div>
    159         </div>
    160         <div class="service_fg" style=" 8%;">
    161             <div class="service_fg-1">雪佛兰品牌</div>
    162             <div class="service_fg-1">梦·创未来</div>
    163             <div class="service_fg-1">经典一刻</div>
    164             <div class="service_fg-1">明星车系</div>
    165             <div class="service_fg-1">合作品牌</div>
    166             <div class="service_fg-1">CHEVY&nbsp;TECH</div>
    167         </div>
    168         <div class="service_fg" style=" 6%;">
    169             <div class="service_fg-1">活动专区</div>
    170             <div class="service_fg-1">最新活动</div>
    171             <div class="service_fg-1">新闻报道</div>
    172         </div>
    173         <div class="service_fg" style=" 6%;">
    174             <div class="service_fg-1">网上车贷</div>
    175             <div class="service_fg-1">产品介绍</div>
    176             <div class="service_fg-1">品牌套餐</div>
    177             <div class="service_fg-1">网上申请</div>
    178             <div class="service_fg-1">活动资讯</div>
    179             <div class="service_fg-1">车贷计算</div>
    180         </div>
    181         <div class="service_fg" style=" 12%;">
    182             <div class="service_fg-1">试乘试驾丨经销商查询</div>
    183             <div class="service_fg-1">预约试驾</div>
    184             <div class="service_fg-1">雪佛兰特约经销商</div>
    185             <div class="service_fg-1">雪佛兰特约维修站</div>
    186             <div class="service_fg-1">雪佛兰数字4S店</div>
    187         </div>
    188         <div class="service_fg" style=" 10%;">
    189             <div class="service_fg-1">雪佛兰金领结服务</div>
    190             <div class="service_fg-1">服务特色</div>
    191             <div class="service_fg-1">雪佛兰延保产品</div>
    192             <div class="service_fg-1">用车小贴士</div>
    193         </div>
    194         <div class="service_fg" style=" 10%;">
    195             <div class="service_fg-1">集团网站</div>
    196             <div class="service_fg-1">上汽通用汽车</div>
    197             <div class="service_fg-1">上汽通用汽车金融</div>
    198             <div class="service_fg-1">纯正配件</div>
    199             <div class="service_fg-1">车享平台</div>
    200             <div class="service_fg-1">诚新二手车</div>
    201             <div class="service_fg-1">经销商招募</div>
    202         </div>
    203         <div class="service_fg" style="border: none;"></div>
    204         <div class="service_fg" style="border: none;"></div>
    205     </div>
    206     <!-- 底部-->
    207     <div class="end">
    208         联系我们 : 中国上海·浦东新区申江路1500号 (邮编201206)&nbsp;&nbsp;&nbsp;
    209         全国免费服务热线 : 800-820-1912  400-820-1912&nbsp;&nbsp;&nbsp;
    210         未开通800电话服务的地区及手机用户 : 021-50554584
    211     </div>
    212     <div class="end">
    213         隐私政策&nbsp;&nbsp;&nbsp;
    214         Copyright © 2017 SAIC General Motors Co., Ltd. All Rights Reserved
    215         &nbsp;&nbsp;&nbsp;沪ICP备05015204号-10
    216     </div>
    217     <!--移动客服-->
    218     <div class="kefu">
    219         <img src="jpg/kefu.png" />
    220     </div>
    221 </body>
    222 </html>

    CSS代码:

      1 * {
      2     margin: 0px;
      3     padding: 0px;
      4 }
      5 
      6 div {
      7     
      8 }
      9 /*顶部*/
     10 .top {
     11     width: 100%;
     12     height: 100px;
     13     position: fixed;
     14     background-color: white;
     15 }
     16 
     17 .top-2 {
     18     width: 100%;
     19     height: 100px;
     20 }
     21 /*左侧分割*/
     22 .top_fgl {
     23     width: 25%;
     24     height: 100%;
     25     float: left;
     26 }
     27 /*右侧分割*/
     28 .top_fgr {
     29     width: 75%;
     30     height: 100%;
     31     float: left;
     32 }
     33 /*右侧上部分割*/
     34 .top_fgr1 {
     35     width: 100%;
     36     height: 40%;
     37 }
     38 /*右侧上部第二次分割*/
     39 .top_fgr1-1 {
     40     width: 9%;
     41     height: 100%;
     42     float: left;
     43     font-size: 2px;
     44     text-align: center;
     45     line-height: 35px;
     46 }
     47 /*右侧下部分割*/
     48 .top_fgr2 {
     49     width: 100%;
     50     height: 60%;
     51 }
     52 /*右侧下部第二次分割*/
     53 .top_fgr2-1 {
     54     width: 7.1%;
     55     height: 100%;
     56     float: left;
     57     font-size: 2px;
     58     text-align: center;
     59 }
     60 /*大图轮播*/
     61 .big_jpg {
     62     width: 100%;
     63     height: 400px;
     64 }
     65 
     66 .big_jig img {
     67 }
     68 /*滚动条*/
     69 .gun {
     70     height: 20px;
     71     width: 65%;
     72     margin: 0 auto;
     73 }
     74 /*合作单位*/
     75 .parter {
     76     width: 100%;
     77     height: 80px;
     78 }
     79 /*合作单位分割*/
     80 .parter_fg {
     81     width: 33%;
     82     height: 100%;
     83     float: left;
     84     text-align: center;
     85 }
     86 
     87 /*二维码*/
     88 .code {
     89     width: 100%;
     90     height: 80px;
     91 }
     92 /*二维码分割*/
     93 .code_fg {
     94     width: 33%;
     95     height: 100%;
     96     float: left;
     97 }
     98 /*二维码第三部分第三次分割*/
     99 .code_fg-3 {
    100     width: 14%;
    101     height: 100%;
    102     float: left;
    103 }
    104 
    105 /*服务*/
    106 .service {
    107     width: 100%;
    108     height: 500px;
    109 }
    110 /*服务分割*/
    111 .service_fg {
    112     font-size: 5px;
    113     border-color: black;
    114     border-left: groove;
    115     width: 9%;
    116     float: left;
    117 }
    118 
    119 .service_fg-1 {
    120     height: 5%;
    121 }
    122 /*底部*/
    123 .end {
    124     text-align: center;
    125     font-size: 3px;
    126     height: 50px;
    127     width: 100%;
    128 }
    129 /*移动客服*/
    130 .kefu {
    131     position: fixed;
    132     bottom: 95px;
    133     right: 10px;
    134     width: 40px;
    135     height: 40px;
    136 }

    原网站效果:

    生成效果:

  • 相关阅读:
    CXF.bat
    终于懂了:FWinControls子控件的显示是由Windows来管理,而不是由Delphi来管理(显示透明会导致计算无效区域的方式有所不同——透明的话应减少剪裁区域,所以要进行仔细计算)
    DELPHI语法基础学习笔记-Windows 句柄、回调函数、函数重载等(Delphi中很少需要直接使用句柄,因为句柄藏在窗体、 位图及其他Delphi 对象的内部)
    Delphi体系内部的4种消息传递办法(Send,Post,Perform,Dispatch)
    delphi高手突破之异常及错误处理
    Android 短信模块分析(三) MMS入口分析
    delphi如何加上spliter分割条,任意调整大小
    浅拷贝与深度拷贝(原型模式)
    delphi高手突破学习笔记之面向对象类和对象的本质(有汇编解释 good)
    delphi模态窗体最小化会隐藏的问题
  • 原文地址:https://www.cnblogs.com/zhangxin4477/p/6638892.html
Copyright © 2011-2022 走看看