devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML+CSS基础综合案例_尚合项目代码

作者：从前慢现在也慢 | 2024-02-29 17:32:49

赞

踩

尚合项目代码

1.尚合综合案例

学完盒子模型，浮动之后，从技术层面上，已经可以完成一个简单的页面案例了，我们来看一下如下案例。

        效果图

​​​​​​

HTML代码如下： 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="./css/index.css" />
  9.   </head>
  10.   <body>
  11.     <div class="header">
  12.       <div class="h-top w">
  13.         <img src="./images/logo.png" alt="" />
  14.         <img src="./images/search.png" alt="" class="h-right" />
  15.       </div>
  16.       <div class="nav">
  17.         <ul class="w">
  18.           <li><a href="#">首页</a></li>
  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.         </ul>
  25.       </div>
  26.     </div>
  27.     <div class="banner w">
  28.       <img src="./images/banner.png" alt="" />
  29.     </div>
  30.     <div class="content">
  31.       <div class="c-bac">
  32.         <div class="c-top w">
  33.           <span
  34.             >最新公告：
  35.             尚合Aone智能手机入网证已经获工信部门审批下发。尚合官方</span
  36.           >
  37.           <img src="./images/share.png" alt="" class="c-right" />
  38.         </div>
  39.       </div>
  40.  
  41.       <div class="c-bottom w">
  42.         <div class="c-b-left">
  43.           <p><img src="./images/jiantou.png" alt="" /><span>新品发布</span></p>
  44.  
  45.           <div class="c-b-box">
  46.             <img
  47.               style="float: left"
  48.               class="icon"
  49.               src="./images/left_icon.png"
  50.               alt=""
  51.             />
  52.             <img class="shouji" src="./images/shouji.png" alt="" />
  53.             <img
  54.               style="float: right"
  55.               class="icon"
  56.               src="./images/right_icon.png"
  57.               alt=""
  58.             />
  59.           </div>
  60.         </div>
  61.         <div class="c-b-center">
  62.           <p><img src="./images/jiantou.png" alt="" /><span>新闻中心</span></p>
  63.           <div class="c-b-box">
  64.             <ul>
  65.               <li><a href="#">致歉公告</a></li>
  66.               <li><a href="#">首批尚合Aonet已全部售馨!</a></li>
  67.               <li>
  68.                 <a href="#">【媒体报导】国产高性价比 尚合Aonet四核手机评测</a>
  69.               </li>
  70.               <li><a href="#">我司产品已经通过了国家强制性产品3C认证</a></li>
  71.               <li>
  72.                 <a href="#">尚合Aone智能手机入网证已经获工信部门审批下发.</a>
  73.               </li>
  74.               <li><a href="#">我司通过ISO9001:2008国际质量管理体系认证.</a></li>
  75.             </ul>
  76.           </div>
  77.         </div>
  78.         <div class="c-b-right">
  79.           <p>
  80.             <img src="./images/jiantou.png" alt="" /><span>技术与支持</span>
  81.           </p>
  82.           <div class="c-b-box">
  83.             <ul class="shouhou">
  84.               <li><a href="#">售后服务</a></li>
  85.               <li><a href="#">投诉与建议</a></li>
  86.               <li><a href="#">联保网点</a></li>
  87.               <li><a href="#">常见问题FAQ？</a></li>
  88.               <li><a href="#">深圳市汇聚众合科技发展有限公司</a></li>
  89.               <li><a href="#">服务热线：400-633-7922</a></li>
  90.             </ul>
  91.           </div>
  92.         </div>
  93.       </div>
  94.     </div>
  95.     <div class="footer">
  96.       <div class="w">
  97.         <div class="f-table">
  98.           <table>
  99.             <tr>
  100.               <th>尚合首页</th>
  101.               <th>智能手机</th>
  102.               <th>平板电脑</th>
  103.               <th>配件中心</th>
  104.               <th>服务与支持</th>
  105.               <th>关于我们</th>
  106.               <th>新闻中心</th>
  107.               <th>常用链接</th>
  108.             </tr>
  109.             <tr>
  110.               <td>返回首页</td>
  111.               <td>Aone-T</td>
  112.               <td>尚PAD S200</td>
  113.               <td>Aone 智能手机</td>
  114.               <td>售后服务</td>
  115.               <td>公司介绍</td>
  116.               <td>公司新闻</td>
  117.               <td>百度</td>
  118.             </tr>
  119.             <tr>
  120.               <td></td>
  121.               <td>Aone</td>
  122.               <td>尚PAD S100</td>
  123.               <td></td>
  124.               <td>投诉与建议</td>
  125.               <td>企业文化</td>
  126.               <td>媒体报导</td>
  127.               <td>Google</td>
  128.             </tr>
  129.             <tr>
  130.               <td></td>
  131.               <td></td>
  132.               <td>尚PAD SH-Q7</td>
  133.               <td></td>
  134.               <td>联保网点</td>
  135.               <td>工作机会</td>
  136.               <td>行业动态</td>
  137.               <td>新浪微博</td>
  138.             </tr>
  139.             <tr>
  140.               <td></td>
  141.               <td></td>
  142.               <td>尚PAD SH-Q5</td>
  143.               <td></td>
  144.               <td>常见问题FAQ</td>
  145.               <td>法律声明</td>
  146.               <td></td>
  147.               <td></td>
  148.             </tr>
  149.             <tr>
  150.               <td></td>
  151.               <td></td>
  152.               <td></td>
  153.               <td></td>
  154.               <td>订单查询</td>
  155.               <td>联系我们</td>
  156.               <td></td>
  157.               <td></td>
  158.             </tr>
  159.             <tr>
  160.               <td></td>
  161.               <td></td>
  162.               <td></td>
  163.               <td></td>
  164.               <td>下载专区</td>
  165.               <td></td>
  166.               <td></td>
  167.               <td></td>
  168.             </tr>
  169.           </table>
  170.           <div class="f-top">
  171.             <a href="#"><img src="./images/top.png" alt="" /></a>
  172.           </div>
  173.         </div>
  174.       </div>
  175.       <div class="f-copy">
  176.         <p>
  177.           2011-2012版权所有 深圳市汇聚众合科技发展有限公司
  178.           （品牌：尚合-SAMHAVE） 服务热线：400-633-7922
  179.         </p>
  180.         <p>经营许可证编号：粤ICP备11077821号-1</p>
  181.         <p><img src="./images/bottom_logo.png" alt="" /></p>
  182.       </div>
  183.     </div>
  184.   </body>
  185. </html>

css代码如下：

 

  1. *{
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5. a{
  6.   text-decoration: none;
  7. }
  8. li{
  9.   list-style: none;
  10. }
  11. .header{
  12.   background-color: #fff;
  13. }
  14. .w{
  15.   width: 980px;
  16.   margin: 0 auto;
  17. }
  18. .h-top{
  19.   height:40px;
  20.   padding-top: 20px;
  21.   padding-bottom: 10px;
  22. }
  23. .h-top img{
  24.   display: inline-block;
  25.   background-color: #fff;
  26. }
  27. .h-right{
  28.   float: right;
  29.   padding-right: 10px;
  30. }
  31. .nav{
  32.   position: relative;
  33.   width: 100%;
  34.   height: 55px;
  35.   background-color: #ebebeb;
  36.   border: 1px solid #ccc;
  37.   background-image: url(../images/nav_bg.png);
  38. }
  39. .nav li{
  40.   display: inline-block;
  41.   text-align: center;
  42.   width: 130px;
  43.   height: 55px;
  44.   line-height: 55px;
  45.   border-right: 1px solid #ccc;
  46. }
  47. .nav li a{
  48.   color: #000;
  49. }
  50. .content{
  51.   line-height: 30px;
  52.   font-size: 10px;
  53. }
  54. .c-bac{
  55.   background-color: #fbfbfb;
  56.   border: 1px solid #efefef;
  57. }
  58. .c-top span{
  59.   font-weight: 700;
  60. }
  61. .c-right{
  62.   float: right;
  63.   padding-top: 5px;
  64. }
  65. .c-bottom{
  66.   margin-top: 15px;
  67.   height: 224px;
  68.   margin-bottom: 50px;
  69. }
  70. .c-b-left{
  71.   float: left;
  72.   width: 310px;
  73.   height: 224px;
  74.   border: 1px solid #efefef;
  75.   box-sizing: border-box;
  76. }
  77. .c-b-box{
  78.   width: 310px;
  79.   height: 194px;
  80. }
  81. .c-b-left .shouji{
  82.   padding-bottom: 50px;
  83. }
  84. .c-b-left .icon{
  85.   padding: 50px 40px 100px 20px;
  86. }
  87.  
  88. .c-bottom p{
  89.   box-sizing: border-box;
  90.   height: 30px;
  91.   padding: 5px;
  92.   color: #7ab800;
  93.   font-weight: 700;
  94.   font-size: 12px;
  95. }
  96. .c-bottom  span{
  97.   margin-left: 5px;
  98. }
  99. .c-b-center{
  100.   float: left;
  101.   height: 224px;
  102.   border: 1px solid #efefef;
  103.   width: 375px;
  104.   margin-left: 12px;
  105.   box-sizing: border-box;
  106. }
  107. .c-bottom li{
  108.   box-sizing: border-box;
  109.   width: 100%;
  110.   height: 28px;
  111.   line-height: 28px;
  112.   border-bottom: 1px dashed #dcdcdc;
  113.   margin-left: 20px;
  114. }
  115. .c-b-center li:first-child a{
  116.   color: #f00;
  117.   font-weight: 700;
  118. }
  119. .c-bottom li a{
  120.   font-size: 12px;
  121.   color: #666;  
  122. }
  123.  
  124. .c-b-right{
  125.   float: right;
  126.   border: 1px solid #efefef;
  127.   width: 270px;
  128.   height: 224px;
  129.   box-sizing: border-box;
  130. }
  131. .shouhou li{
  132.   border: none;
  133.   padding-left: 5px;
  134.   height: 20px;
  135. }
  136. .shouhou li a{
  137.   border-left:3px solid #7ab800;
  138.   padding-left: 3px;
  139. }
  140. .shouhou li:nth-child(5){
  141.   margin-top: 35px;
  142. }
  143. .shouhou li:nth-child(n+5) a{
  144.   border: none;
  145. }
  146. .footer{
  147.   /* height: 305px; */
  148.   background-color: #2d2d2d;
  149. }
  150. .f-table{
  151.   margin-bottom:50px ;
  152.   overflow: hidden;
  153. }
  154. .f-table table{
  155.   float: left;
  156.   width: 900px;
  157. }
  158. .f-top{
  159.   float: right;
  160.   margin-right: 5px;
  161. }
  162. .f-table th{
  163.   width: 110px;
  164.   font-size: 12px;
  165.   text-align: left;
  166.   padding: 15px;
  167.   color: #c7c7c7;
  168.   box-sizing: border-box;
  169. }
  170. .f-table td{
  171.   width: 110px;
  172.   color: #707070;
  173.   font-size: 12px;
  174.   text-align: left;
  175.   padding-left: 15px;
  176.   box-sizing: border-box;
  177. }
  178. .f-copy{
  179.   border-top: 1px dashed #414141;
  180.   text-align: center;
  181.   font-size: 12px;
  182.   color: #000;
  183. }
  184. .f-copy p{
  185.   margin: 10px 0;
  186. }

成果图： 

 

 2.腾讯云综合案例

        效果图

html代码如下：

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>腾讯云</title>
  8.     <link rel="stylesheet" href="css/index.css" />
  9.   </head>
  10.   <body>
  11.     <!-- 头部内容 -->
  12.     <div class="header">
  13.       <div class="h-top w">
  14.         <h3><img src="./images/logo.png" alt="" /></h3>
  15.         <ul>
  16.           <li><a href="#">最新活动</a></li>
  17.           <li><a href="#">产品</a></li>
  18.           <li><a href="#">解决方案</a></li>
  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.           <li><a href="#">客户</a></li>
  26.         </ul>
  27.       </div>
  28.     </div>
  29.     <!-- 列表内容 -->
  30.     <div class="list">
  31.       <div class="banner w">
  32.         <ul>
  33.           <li><a href="#">云服务</a><span>&gt;</span></li>
  34.           <li><a href="#">轻量应用服务器</a><span>&gt;</span></li>
  35.           <li><a href="#">域名注册</a><span>&gt;</span></li>
  36.           <li><a href="#">网站备案</a><span>&gt;</span></li>
  37.           <li><a href="#">对象存储</a><span>&gt;</span></li>
  38.           <li><a href="#">云硬盘</a><span>&gt;</span></li>
  39.           <li><a href="#">云数据库</a><span>&gt;</span></li>
  40.           <li><a href="#">云数据库</a><span>&gt;</span></li>
  41.           <li><a href="#">批量计算</a><span>&gt;</span></li>
  42.           <li><a href="#">容器服务</a><span>&gt;</span></li>
  43.           <li></li>
  44.         </ul>
  45.       </div>
  46.     </div>
  47.     <!-- 学习内容 -->
  48.     <div class="study">
  49.       <div class="leran w clearfix">
  50.         <h2>云从业者培训及认证</h2>
  51.         <p>好好学习，天天向上</p>
  52.         <div class="kecheng">
  53.           <div class="k-left">
  54.             <h3>在线课程</h3>
  55.             <p>
  56.               本课程专为云计算初学者、学生、个人开发者打造，购买云+校园任意套餐可免费观看课程视频本课程专为云计算初学者、学生、个人开发者打造，购买云+校园任意套餐可免费观看课程视频本课程专为云计算初学者、学生、个人开发者打造，购买云+校园任意套餐可免费观看课程视频本课程专为云计算初学者、学生、个人开发者打造，购买云+校园任意套餐可免费观看课程视频本课程专为云计算初学者、学生、个人开发者打造，购买云+校园任意套餐可免费观看课程视频
  57.             </p>
  58.             <button>开始学习</button>
  59.           </div>
  60.           <div class="k-right"><img src="./images/right.png" alt="" /></div>
  61.         </div>
  62.       </div>
  63.     </div>
  64.     <!-- 页脚内容 -->
  65.     <div class="footer">
  66.       <div class="w">
  67.         <div class="f-left">
  68.           <ul>
  69.             <li><a href="#">腾讯云计算</a></li>
  70.             <li><a href="#">产品</a></li>
  71.             <li><a href="#">云市场</a></li>
  72.             <li><a href="#">客户案例</a></li>
  73.             <li><a href="#">产品发布台</a></li>
  74.             <li><a href="#">网站备案</a></li>
  75.             <li><a href="#">认证信息</a></li>
  76.             <li><a href="#">许可证说明</a></li>
  77.             <li><a href="#">隐私声明</a></li>
  78.             <li><a href="#">关于我们</a></li>
  79.           </ul>
  80.           <ul>
  81.             <li><a href="#">解决方案</a></li>
  82.             <li><a href="#">视频</a></li>
  83.             <li><a href="#">游戏</a></li>
  84.             <li><a href="#">金融</a></li>
  85.             <li><a href="#">电商</a></li>
  86.             <li><a href="#">网站</a></li>
  87.             <li><a href="#">大数据</a></li>
  88.             <li><a href="#">人脸核身</a></li>
  89.             <li><a href="#">在线教育</a></li>
  90.             <li><a href="#">微信小程序</a></li>
  91.             <li><a href="#">微信小程序音视频</a></li>
  92.           </ul>
  93.           <ul>
  94.             <li><a href="#">资源与社区</a></li>
  95.             <li><a href="#">免费套餐</a></li>
  96.             <li><a href="#">入门中心</a></li>
  97.             <li><a href="#">定价中心</a></li>
  98.             <li><a href="#">资源中心</a></li>
  99.             <li><a href="#">腾讯云大学</a></li>
  100.             <li><a href="#">云+社区</a></li>
  101.             <li><a href="#">专栏</a></li>
  102.             <li><a href="#">问答</a></li>
  103.             <li><a href="#">沙龙</a></li>
  104.           </ul>
  105.           <ul>
  106.             <li><a href="#">合作与生态</a></li>
  107.             <li><a href="#">合作伙伴</a></li>
  108.             <li><a href="#">合作伙伴学院</a></li>
  109.             <li><a href="#">推广奖励</a></li>
  110.             <li><a href="#">云+公益</a></li>
  111.             <li><a href="#">云+校园</a></li>
  112.             <li><a href="#">云+社区</a></li>
  113.             <li><a href="#">Techo 开发者大会 </a></li>
  114.             <li><a href="#">腾讯数字生态大会</a></li>
  115.             <li><a href="#">云启产业计划</a></li>
  116.             <li><a href="#">腾讯云启创新基地 </a></li>
  117.           </ul>
  118.           <ul>
  119.             <li><a href="#">管理与支持</a></li>
  120.             <li><a href="#">公告</a></li>
  121.             <li><a href="#">控制台</a></li>
  122.             <li><a href="#">续费管理</a></li>
  123.             <li><a href="#">访问管理</a></li>
  124.             <li><a href="#">安全中心</a></li>
  125.             <li><a href="#">举报平台</a></li>
  126.             <li><a href="#">工单管理</a></li>
  127.             <li><a href="#">联系我们</a></li>
  128.           </ul>
  129.         </div>
  130.         <div class="f-right">
  131.           <p>Copyright © 2013 - 2020 Tencent Cloud. All Rights Reserved.</p>
  132.           <p>腾讯云 版权所有</p>
  133.           <p>购买咨询</p>
  134.         </div>
  135.       </div>
  136.     </div>
  137.   </body>
  138. </html>

css代码如下：

  1. *{
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5. li{
  6.   list-style: none;
  7. }
  8. a{
  9.   text-decoration: none;
  10.   color: #fff;
  11. }
  12. .header{
  13.   height: 40px;
  14.   background-color: #2b303b;
  15. }
  16. .w{
  17.   margin: 0 auto;
  18.   width: 1200px;
  19. }
  20. .h-top{
  21.   height: 40px;
  22.   line-height: 40px;
  23.   color: #fff;
  24. }
  25. .h-top h3{
  26.   float: left;
  27. }
  28. .h-top h3::after{
  29.   background-image: url(../images/logo.png);
  30. }
  31. .h-top ul{
  32.   float: right;
  33. }
  34. .h-top li{
  35.   float: left;
  36.   
  37.   height: 40px;
  38.  
  39. }
  40. .h-top a{
  41.   padding: 0 8px;
  42.   font-size: 14px;
  43.   border-right: 1px solid #fff;
  44. }
  45. .h-top li:last-child a{
  46.   border: 0;
  47. }
  48. .list{
  49.   background-color: #181c28;
  50. }
  51. .banner{
  52.   height: 480px;
  53.   background-image: url(../images/banner.png);
  54. }
  55. .banner ul{
  56.   width: 230px;
  57.   background-color: #1a2b3f;
  58.   padding-top: 40px;
  59. }
  60. .banner li{
  61.   padding: 0 20px;
  62.   height: 40px;
  63.   line-height: 40px;
  64. }
  65.  
  66. .banner li span{
  67.   float: right;
  68.   color: #fff;
  69. }
  70. .leran h2{
  71.   text-align: center;
  72.   font-weight: normal;
  73.   margin-top: 30px;
  74.   margin-bottom: 20px;
  75. }
  76. .leran p{
  77.   text-align: center;
  78.   margin-bottom: 30px;
  79.   font-size: 16px;
  80. }
  81. .kecheng{
  82.   width: 1200px;
  83.   height: 460px;
  84.   border: 1px solid #ccc;
  85.   text-align: center;
  86.   padding: 40px 50px 70px 40px;
  87.   box-sizing: border-box;
  88. }
  89. .k-left{
  90.   float: left;
  91.   width: 450px;
  92.   height: 350px;
  93. }
  94. .k-left h3{
  95.   font-size: 26px;
  96.   width: 110px;
  97.   line-height: 40px;
  98.   font-weight: normal;
  99.   text-align: left;
  100.   border-bottom: 1px solid #ccc;
  101. }
  102. .k-left p{
  103.   padding-top: 20px;
  104.   line-height: 30px;
  105.   text-align: left;
  106.   font-size: 12px;
  107.   color: #666;
  108. }
  109. .k-left button{
  110.   float: left;
  111.   width: 160px;
  112.   height: 45px;
  113.   border: 2px solid #ffa500;
  114.   background-color: #fff;
  115. }
  116. .k-right{
  117.   float: left;
  118.   width: 580px;
  119. }
  120. .clearfix::after{
  121.   content: "";
  122.   display: block;
  123.   clear: both;
  124. }
  125. .k-right img{
  126.   width: 100%;
  127. }
  128. .footer{
  129.   margin-top:135px ;
  130.   height: 350px;
  131.   background-color: #2e3033;
  132. }
  133. .f-left ul{
  134.   float: left;
  135.   width: 200px;
  136.   padding-top: 20px;
  137. }
  138.  
  139. .f-left ul li:first-child{
  140.   margin-bottom: 10px;
  141. }
  142. .f-left ul li:first-child a{
  143.   font-weight: 700;
  144.   font-size: 16px;
  145. }
  146. .f-left a{
  147.   font-size: 12px;
  148.   color: #eee;
  149. }
  150. .f-right{
  151.   float: right;
  152.   width: 190px;
  153.   margin-top: 20px;
  154.   color: #eee;
  155.   font-size: 12px;
  156. }
  157. .f-right p{
  158.   line-height: 20px;
  159. }
  160. .f-right p:last-child{
  161.   margin-top: 20px;
  162.   width: 190px;
  163.   height: 35px;
  164.   line-height: 35px;
  165.   text-align: center;
  166.   background-color: #00a4ff;
  167.   color:#fff;
  168. }

成果图如下：

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/167169
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号