zoukankan      html  css  js  c++  java
  • 023 一个完整的简单页面

    1.index.html

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4     <meta charset="UTF-8">
      5     <title>Document</title>
      6     <link rel="stylesheet" href="css/index.css" />
      7 </head>
      8 <body>
      9     <!-- header部分 -->
     10     <div class="header">
     11         <div class="inner">
     12             <div class="logo">
     13                 <!-- 在logo上加一个连接 -->
     14                 <a href="#"><img src="image/logo.png" height="63px" alt="logo"></a>
     15             </div>
     16             <div class="nav">
     17                 <!-- nav链接 -->
     18                 <ul>
     19                     <li><a href="#">首页</a></li>
     20                     <li><a href="#">商城</a></li>
     21                     <li><a href="#">门店</a></li>
     22                     <li><a href="#">平台</a></li>
     23                     <li><a href="#">联盟</a></li>
     24                     <li><a href="#">关于云道</a></li>
     25                 </ul>
     26             </div>        
     27         </div>
     28     </div>
     29     <!-- banner部分 -->
     30     <div class="banner">
     31             <!-- 使用背景-->
     32     </div>
     33     <!-- 服务块 -->
     34     <div class="service">
     35         <!-- 我们的产品 -->
     36         <div class="service-hd">
     37             <h3>
     38                 <img src="image/produce.jpg" alt="">
     39             </h3>
     40             <p>平台上诸多优秀设计师开设个人公众号,分享设计知识、设计经验及行业资讯等内容。为整合更多优质内容,同时也为平台用户带来更好的阅读体验,UI中国推出设计公众号联盟。UI中国愿与优秀设计师们,共同打造良好的设计知识生态圈。</p>
     41         </div>
     42         <div class="service-bd">
     43             <ul>
     44                 <li class="service-li-head">
     45                     <img src="image/a.jpg" alt="">
     46                     <h3>云商场</h3>
     47                     <p>能够让企业看到未来互联网网上商城的发展,也能让企业的渗透性得到很大的提升!云商城为什么这么的神奇,看到下文你就知道云商城带给你的魅力了!</p>
     48                     <a href="#">用心服务</a>
     49                 </li>
     50                 <li class="service-li-middle">
     51                     <img src="image/b.jpg" alt="">
     52                     <h3>云综合</h3>
     53                     <p>能够让企业看到未来互联网网上商城的发展,也能让企业的渗透性得到很大的提升!云商城为什么这么的神奇,看到下文你就知道云商城带给你的魅力了!</p>
     54                     <a href="#">用心服务</a>
     55                 </li>
     56                 <li>
     57                     <img src="image/c.jpg" alt="">
     58                     <h3>云门店</h3>
     59                     <p>能够让企业看到未来互联网网上商城的发展,也能让企业的渗透性得到很大的提升!云商城为什么这么的神奇,看到下文你就知道云商城带给你的魅力了!</p>
     60                     <a href="#">用心服务</a>
     61                 </li>
     62 
     63             </ul>
     64         </div>
     65     </div>
     66     <!-- 经典案例 -->
     67     <div class="case">
     68         <!-- 我们的产品 -->
     69         <div class="service-hd">
     70             <h3>
     71                 <img src="image/produce.jpg" alt="">
     72             </h3>
     73         </div>
     74         <div class="case-bd clearfix">
     75             <ul>
     76                 <li class="case-bd-head">
     77                     <img src="image/1.png" alt="" height="210" width="324">
     78                     <div class="mask"></div>
     79                 </li>
     80                 <li class="case-bd-middle">
     81                     <img src="image/2.png" alt="" height="210" width="324">
     82                     <div class="text">帮助中小企业进步</div>
     83                     <div class="mask"></div>
     84                 </li>
     85                 <li>
     86                     <img src="image/3.png" alt="" height="210" width="324">
     87                     <div class="text">帮助中小企业进步</div>
     88                     <div class="mask"></div>
     89                 </li>
     90             </ul>
     91             <!-- 两个箭头 -->
     92             <a href="#" class="left"><</a>
     93             <a href="#" class="right">></a>
     94         </div>
     95     </div>
     96     <br/>
     97     <!-- 合作媒体 -->
     98     <div class="case">
     99         <!-- 我们的产品 -->
    100         <div class="service-hd">
    101             <h3>
    102                 <img src="image/830.png" alt="">
    103             </h3>
    104         </div>
    105         <div class="media-bd clearfix">
    106             <ul>
    107                 <li>
    108                     <img src="image/aa.jpg" alt="">
    109                 </li>
    110                 <li>
    111                     <img src="image/bb_03.jpg" alt="">
    112                 </li>
    113                 <li>
    114                     <img src="image/cc_03.jpg" alt="">
    115                 </li>
    116                 <li>
    117                     <img src="image/dd_03.jpg" alt="">
    118                 </li>
    119             </ul>
    120         </div>
    121     </div>
    122     <!-- 页面底部 -->
    123     <div class="footer">
    124         <div class="subnav">
    125             <a href="#">shopcmd</a>
    126             <a href="#">首页</a>
    127             <a href="#">官网</a>
    128             <a href="#">第三方</a>
    129             <a href="#">销售</a>
    130             <a href="#">云商场</a>
    131         </div>
    132         <p>@Copyright 2015 公司版权所有</p>
    133     </div>
    134     <br>
    135     <div class="employ_height"></div>
    136 </body>
    137 </html>

    2.css

      1 * {
      2     margin: 0;
      3     padding: 0;
      4 }
      5 body {
      6     background-color: #fafafa;
      7 }
      8 .nav li {
      9     list-style: none;
     10     float: left;
     11     margin: 0 20px;
     12 }
     13 
     14 /* 顶部导航栏*/
     15 .header {
     16     height: 63px;
     17     background-color: #fff;
     18 }
     19 .inner {
     20     height: 63px;
     21     width: 1157px;
     22     margin: 0 auto;
     23     /*background-color: #e5c5f6;*/
     24     line-height: 63px; /*行高会继承,所以li会得到*/
     25 }
     26 .logo {
     27     height: 63px;
     28     float: left;
     29 }
     30 .nav {
     31     height: 63px;
     32     float: right;
     33 }
     34 
     35 .nav li a {
     36     color: #333;
     37     text-decoration: none;
     38 }
     39 .nav li a:hover {
     40     color: #207adf;
     41 }
     42 
     43 .banner {
     44     height: 350px;
     45     background: url(../image/banner.jpg) no-repeat top center;
     46 }
     47 .service {
     48     /*margin-top: 75px;*/
     49     width: 1157px;
     50     /*height: 650px;*/
     51     margin: 25px auto 0;
     52     /*background-color: pink;*/
     53 }
     54 .service-hd {
     55     border-top: 1px dashed black;
     56     margin: 0 25px; 
     57 }
     58 .service-hd h3 {
     59     width: 103px;
     60     height: 20px;
     61     margin: 0 auto;
     62     margin-top: -8px;
     63 }
     64 .service-hd p {
     65     font-size: 16px;
     66     color: #666;
     67     line-height: 26px;
     68     text-align: center;
     69     width: 900px;
     70     margin: 15px auto 0;
     71 }
     72 
     73 .service-bd {
     74     margin-top: 40px;
     75     overflow: hidden;  /*清除浮动*/
     76 }
     77 .service-bd li{
     78     /*border: 1px solid red;*/
     79     width: 330px;
     80     height: 500px;
     81     background-color: #eee;
     82     list-style: none;
     83     float: left;
     84 }
     85 .service-li-head {
     86     margin-left: 30px ; 
     87 }
     88 .service-li-middle {
     89     margin: 0 60px; 
     90 }
     91 
     92 .service-bd img {
     93     /*margin: 30px 48px;*/
     94     margin: 30px auto;
     95     display: block;
     96 }
     97 .service-bd h3 {
     98     text-align: center;
     99     font-size: 18px;
    100     font-weight: normal;
    101 }
    102 
    103 .service-bd p {
    104     font-size: 16px;
    105     color: #666;
    106     width: 200px;
    107     margin: 0 auto;
    108     line-height: 24px;
    109 }
    110 .service-bd a {
    111     display: block;
    112     width: 190px;
    113     height: 45px;
    114     border: 1px solid #ff9412;
    115     margin: 25px auto;
    116     text-align: center;
    117     line-height: 45px;
    118     font-size: 20px;
    119     text-decoration: none;
    120     border-radius: 8px;
    121 }
    122 .service-bd a:hover {
    123     color: red;
    124     background-color: #ff9412;
    125 }
    126 
    127 .case {
    128     /*margin-top: 75px;*/
    129     width: 1157px;
    130     /*height: 650px;*/
    131     margin: 70px auto 0;
    132     /*background-color: pink;*/
    133 }
    134 
    135 .case-bd {
    136     margin-top: 80px;
    137     position: relative;
    138 }
    139 
    140 .case-bd li{
    141     width: 325px;
    142     height: 210px;
    143     background-color: pink;
    144     float: left;
    145     list-style: none;
    146     position: relative;
    147 }
    148 
    149 .case-bd-middle {
    150     margin: 0 70px;
    151 }
    152 
    153 .case-bd-head {
    154     margin-left: 25px ; 
    155 }
    156 
    157 /*图片上的下地字体*/
    158 .text {
    159     height: 45px;
    160     width: 100%;
    161     position: absolute;
    162     left: 0;
    163     bottom: 0;
    164     background: rgba(0,0,0,0.3);
    165     line-height: 45px;
    166     text-align: center;
    167     font-size: 18px;
    168     color: red;
    169 }
    170 
    171 .mask {
    172     width: 100%;
    173     height: 100%;
    174     background: rgba(0,0,0,0.3) url(../image/timg.jpg) center no-repeat;
    175     position: absolute;
    176     top: 0;
    177     left: 0;
    178     display: none;
    179 }
    180 .case-bd li:hover .mask{
    181     display: block;
    182 }
    183 
    184 .left, .right {
    185     width: 60px;
    186     height: 60px;
    187     background: rgba(0,0,0,0.5);
    188     position: absolute;
    189     top: 50%;
    190     margin-top: -30px;
    191     /*樣式*/
    192     text-align: center;
    193     line-height: 60px;
    194     color: #fff;
    195     font-size: 20px;
    196     text-decoration: none;
    197     border-radius: 50%;
    198 
    199 }
    200 .left {
    201     left: -60px;
    202 }
    203 
    204 .right {
    205     right: -60px;
    206 }
    207 
    208 .clearfix:before,.clearfix:after {
    209     content: "";
    210     display: table;
    211 }
    212 .clearfix:after {
    213     clear: both;
    214 }
    215 
    216 .case-bd a:hover {
    217     background: rgba(0,255,0,0.2);
    218 }
    219 
    220 .media-bd {
    221     margin: 10px;
    222 }
    223 
    224 .media-bd li {
    225     width: 238px;
    226     height: 92px;
    227     background-color: #eee;
    228     float: left;
    229     list-style: none;
    230     margin: 0 20px;
    231     border: 2px solid #ccc;
    232     text-align: center;
    233 }
    234 .employ_height {
    235     height: 10px;
    236 }
    237 
    238 .footer {
    239     height: 135px;
    240     background-color: #212425;
    241     margin-top: 100px;
    242     overflow: hidden;
    243 }
    244 .subnav {
    245     text-align: center;
    246     margin-top: 50px;
    247 }
    248 
    249 .subnav a {
    250     color: #f0f1f1;
    251     text-decoration: none;
    252     font-size: 18px;
    253     margin: 0 20px;
    254 }
    255 
    256 .footer p {
    257     text-align: center;
    258     color: #888;
    259     margin-top: 20px;
    260 
    261 }

    3.效果

      

  • 相关阅读:
    Android Studio 开发
    Jsp编写的页面如何适应手机浏览器页面
    电影
    Oracle 拆分列为多行 Splitting string into multiple rows in Oracle
    sql server 2008 自动备份
    WINGIDE 激活失败
    python安装 错误 “User installations are disabled via policy on the machine”
    ble编程-外设发送数据到中心
    iOS开发-NSString去掉所有换行及空格
    ios9 字符串与UTF-8 互相转换
  • 原文地址:https://www.cnblogs.com/juncaoit/p/11027192.html
Copyright © 2011-2022 走看看