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

html+css实例_css+h3+html项目

作者：Monodyee | 2024-02-29 17:29:29

赞

踩

css+h3+html项目

1.简单的物品浏览页

(1)reset.css文件(初始化一些样式,例如消除a标签的下划线)

  1.  
  2. /*将标签默认的间距设为0*/
  3. body,ul,p,h1,h2,h3,h4,h5,h6,dl,dd,input,selector,form{
  4.     margin: 0;padding: 0;
  5. }
  6.  
  7. /*让h标签继承body内设置的字体大小*/
  8. h1,h2,h3,h4,h5,h6{
  9.     font-size: 100%;
  10. }
  11.  
  12.  
  13. /*去掉默认的列表标签*/
  14. ul{
  15.     list-style: none;
  16. }
  17.  
  18. /*设置em文字不倾斜*/
  19. em{
  20.     font-style: normal;
  21. }
  22.  
  23. /*清除下划线*/
  24. a{
  25.     text-decoration: none;
  26. }
  27.  
  28. /*清除图片的边框*/
  29. img{
  30.     border: none;
  31. }
  32.  
  33. /*清楚margin-top塌陷和浮动问题*/
  34. .clearfix:before,.clearfix:after{
  35.     content: "";
  36.     display: table;
  37. }
  38.  
  39. .clearfix:after{
  40.     clear: both;
  41. }
  42. /*解决ie清楚浮动的问题*/
  43. .clearfix{
  44.     zoom: 1;
  45. }
  46.  
  47. /*向左浮动*/
  48. .fl{
  49.     float: left;
  50. }
  51. /*向右浮动*/
  52. .fr{
  53.     float: right;
  54. }

2.页面内详细css样式

  1. body{
  2.     font-family: "Microsoft Yahei";
  3.     color: #666;
  4.     font-size: 12px;
  5. }
  6.  
  7.  
  8. /*=======================首页样式==========================*/
  9. /*顶部状态条样式*/
  10. .header_con{
  11.     height:29px;
  12.     background-color: #f7f7f7;
  13.     border-bottom: 1px solid #ddd;
  14. }
  15.  
  16.  
  17. .header{
  18.     width: 1200px;
  19.     height: 29px;
  20.     margin: 0 auto;
  21. }
  22.  
  23. .welcome{
  24.     font:12px/29px 'Microsoft Yahei';
  25.     color: #666666;
  26. }
  27. .user_login_link,.user_welcome,.user_shopping{
  28.     height: 29px;
  29.     line-height: 29px;
  30. }
  31.  
  32. .user_login_link a,.user_shopping a{
  33.     color: #666666;
  34.  
  35. }
  36.  
  37. .user_login_link a:hover,.user_shopping a:hover{
  38.     color: #ff8800;
  39. }
  40. .user_login_link span,.user_shopping span{
  41.     margin: 0px 15px;
  42.     color: #cecece;
  43. }
  44.  
  45. .user_welcome{
  46.     display: none;
  47. }
  48. .user_welcome em{
  49.     color: #ff8800;
  50. }
  51.  
  52.  
  53.  
  54. /*logo 搜索  购物车样式*/
  55. .logo_bar{
  56.     width: 1200px;
  57.     height: 115px;
  58.     margin: 0 auto;
  59. }
  60.  
  61. .logo{
  62.     width: 151px;
  63.     height: 59px;
  64.     margin: 29px 0 0 17px;
  65. }
  66.  
  67. .search{
  68.     width: 616px;
  69.     height: 38px;
  70.     border:1px solid #37ab40;
  71.     margin: 34px 0 0 123px;
  72.     background: url("../image_day/icons.png") 8px -337px no-repeat;
  73. }
  74.  
  75. .search .input_text{
  76.     width: 470px;
  77.     height: 38px;
  78.     border: 0px;
  79.     outline: none;
  80.     margin-left: 37px;
  81. }
  82.  
  83. .search .input_btn{
  84.     width: 100px;
  85.     height: 38px;
  86.     background-color: #37ab40;
  87.     border: 0px;
  88.     font: 14px/38px 'Microsoft Yahei';
  89.     color: #ffffff;
  90.     cursor: pointer;
  91. }
  92.  
  93. .chart{
  94.     width: 200px;
  95.     height: 40px;
  96.     margin-top: 34px;
  97. }
  98.  
  99. .chart a{
  100.     width: 158px;
  101.     height: 38px;
  102.     border: 1px solid #ddd;
  103.     font: 14px/38px 'Microsoft Yahei';
  104.     color: #37ab40;
  105.     text-indent: 56px;
  106.     background: url("../image_day/icons.png") 15px -301px no-repeat #f7f7f7;
  107. }
  108.  
  109. .chart span{
  110.     width: 40px;
  111.     height: 40px;
  112.     background-color: #f80;
  113.     font: bold 18px/40px 'Microsoft Yahei';
  114.     color: white;
  115.     text-align: center;
  116. }
  117.  
  118. .sub_menu_con{
  119.     height: 40px;
  120.     border-bottom: 2px solid #37ab40;
  121. }
  122.  
  123. .sub_menu{
  124.     width: 1200px;
  125.     height: 40px;
  126.     margin: 0 auto;
  127. }
  128.  
  129. .sub_menu h1{
  130.     width: 200px;
  131.     height: 40px;
  132.     background-color: #37ab40;
  133.     font: 14px/40px 'Microsoft Yahei';
  134.     color: #fff;
  135.     text-align: center;
  136. }
  137.  
  138. .sub_menu ul{
  139.     overflow: hidden;
  140. }
  141. .sub_menu li{
  142.     float: left;
  143.     height: 14px;
  144.     padding: 0 25px;
  145.     border-left: 1px solid #666;
  146.     margin-left: -1px;
  147.     margin-top: 13px;
  148. }
  149.  
  150.  
  151.  
  152. .sub_menu li a{
  153.     font: 14px/14px 'Microsoft Yahei';
  154.     color: #666;
  155. }
  156.  
  157. .sub_menu li a:hover{
  158.     color: #f80;
  159. }
  160.  
  161.  
  162. /*左侧菜单样式*/
  163.  
  164. .center_con{
  165.     width: 1200px;
  166.     height: 270px;
  167.     margin: 0 auto;
  168. }
  169.  
  170. .center_con .main_menu{
  171.     width: 200px;
  172.     height: 270px;
  173.     overflow: hidden;
  174. }
  175.  
  176. .center_con .main_menu li{
  177.     width: 198px;
  178.     height: 44px;
  179.     border: 1px solid #eee;
  180.     margin-top: -1px;
  181.     background: url("../image_day/icons.png") 175px -259px no-repeat;
  182. }
  183.  
  184. .center_con .main_menu li a{
  185.     display: block;
  186.     width: 198px;
  187.     height: 44px;
  188.     font: 14px/44px 'Microsoft Yahei';
  189.     color: #333333;
  190.     text-indent: 71px;
  191.     background: url("../image_day/icons.png") 16px 0px no-repeat;
  192. }
  193. .center_con .main_menu li .fruit{
  194.     background-position: 16px 0px;
  195. }
  196.  
  197. .center_con .main_menu li .seafood{
  198.     background-position: 16px -44px;
  199. }
  200. .center_con .main_menu li .meat{
  201.     background-position: 16px -88px;
  202. }
  203. .center_con .main_menu li .egg{
  204.     background-position: 16px -134px;
  205. }
  206. .center_con .main_menu li .vegetables{
  207.     background-position: 16px -176px;
  208. }
  209. .center_con .main_menu li .ice{
  210.     background-position: 16px -221px;
  211. }
  212.  
  213. /*轮播图*/
  214.  
  215. .slide_con{
  216.     width: 760px;
  217.     height: 270px;
  218.     position: relative;
  219. }
  220.  
  221. .prev{
  222.     width: 15px;
  223.     height: 23px;
  224.     position: absolute;
  225.     left: 11px;
  226.     top: 122px;
  227.     cursor: pointer;
  228.     background: url("../image_day/icons.png") 40px -387px;
  229. }
  230.  
  231. .next{
  232.     width: 15px;
  233.     height: 23px;
  234.     position: absolute;
  235.     right: 11px;
  236.     top: 122px;
  237.     cursor: pointer;
  238.     background: url("../image_day/icons.png") 40px -427px;
  239. }
  240.  
  241. .points{
  242.     position: absolute;
  243.     width: 100%;
  244.     height: 11px;
  245.     left: 0px;
  246.     bottom: 9px;
  247.     text-align: center;
  248.     font-size: 0px;
  249. }
  250. .points li{
  251.     width: 11px;
  252.     height: 11px;
  253.     display: inline-block;
  254.     background-color: #9f9f9f;
  255.     margin: 0 5px;
  256.     border-radius: 50%;
  257. }
  258.  
  259. .points .active{
  260.     background-color: #cecece;
  261. }
  262.  
  263. .adv{
  264.     width: 240px;
  265.     height: 270px;
  266.  
  267. }
  268. .adv a{
  269.     float: left;
  270.     width: 240px;
  271.     height: 135px;
  272. }
  273.  
  274. /*解决图片下方出现的3像素的空白*/
  275. .adv a img{
  276.     display: block;
  277. }
  278.  
  279.  
  280. /*商品列表*/
  281. .common_model{
  282.     width: 1200px;
  283.     height: 340px;
  284.     margin: 18px auto 0;
  285. }
  286.  
  287. .common_model .common_title{
  288.     height: 38px;
  289.     border-bottom: 2px solid #42ad46;
  290. }
  291.  
  292. .common_model .common_title h3{
  293.     font: bold 16px/38px 'Microsoft Yahei';
  294.     color: #37ab40;
  295. }
  296.  
  297. .common_model .common_title ul{
  298.     height: 12px;
  299.     margin: 13px 0 0 20px;
  300. }
  301.  
  302.  
  303. .common_model .common_title li{
  304.     float: left;
  305.     margin: 0 10px;
  306. }
  307.  
  308. .common_model .common_title li a{
  309.     color: #666;
  310.     font-size: 12px;
  311.     line-height: 10px;
  312. }
  313.  
  314. .common_model .common_title li a:hover,.common_model .common_title .more:hover{
  315.     color: #f80;
  316. }
  317.  
  318. .common_model .common_title .more{
  319.     height: 38px;
  320.     line-height: 38px;
  321.     color: #666;
  322. }
  323.  
  324. .common_model .common_goods_list{
  325.     width: 1200px;
  326.     height: 300px;
  327. }
  328.  
  329. .common_model .goods_banner{
  330.     width: 200px;
  331.     height: 300px;
  332. }
  333.  
  334. .common_model .common_goods_list .goods_list{
  335.     width: 1000px;
  336.     height: 300px;
  337. }
  338.  
  339. .common_model .common_goods_list .goods_list li{
  340.     width: 249px;
  341.     height: 299px;
  342.     border-right:1px solid #ededed;
  343.     border-bottom: 1px solid #ededed;
  344.     float: left;
  345. }
  346.  
  347. .common_model .common_goods_list .goods_list li h4{
  348.     height: 52px;
  349.     font: 14px/52px 'Microsoft Yahei';
  350.     color: #666666;
  351.     text-align: center;
  352. }
  353.  
  354. .common_model .common_goods_list .goods_list li a{
  355.     display: block;
  356.     width: 180px;
  357.     height: 180px;
  358.     margin: 0 auto;
  359. }
  360.  
  361. .common_model .common_goods_list .goods_list li p{
  362.     height: 52px;
  363.     font: bold 20px/52px 'Microsoft Yahei';
  364.     color: #c40000;
  365.     text-align: center;
  366. }
  367.  
  368. .common_model .common_goods_list .goods_list li:hover{
  369.     width: 248px;
  370.     height: 298px;
  371.     border: 1px solid gold;
  372. }
  373.  
  374. .footer{
  375.     height: 145px;
  376.     border-top: 2px solid #4ab14e;
  377.     margin-top: 30px;
  378. }
  379.  
  380. .footer .links{
  381.     text-align: center;
  382.     margin-top: 40px;
  383. }
  384.  
  385. .footer .links a{
  386.     color: #4e4e4e;
  387. }
  388.  
  389. .footer .links a:hover{
  390.     color: #f80;
  391. }
  392.  
  393. .footer .links span{
  394.     color: #4e4e4e;
  395.     margin: 0 10px;
  396. }
  397.  
  398. .footer p{
  399.     text-align: center;
  400.     line-height: 27px;
  401.     color: #4e4e4e;
  402.     margin-top: 10px;
  403. }
  404.  
  405.  
  406. /*=======================首页样式==========================*/
  407.  
  408.  
  409.  
  410. /*=======================登录页样式==========================*/
  411.  
  412.  
  413.  
  414.  
  415. .login_header{
  416.     width: 953px;
  417.     height: 133px;
  418.     margin: 0 auto;
  419. }
  420.  
  421. .login_header a{
  422.     display: block;
  423.     width: 193px;
  424.     height: 76px;
  425.     margin-top: 28px;
  426. }
  427.  
  428. .login_form_con{
  429.     border-top: 1px solid #79a652;
  430.     height: 480px;
  431.     background-color: #518e17;
  432. }
  433.  
  434. .login_form{
  435.     width: 953px;
  436.     height: 482px;
  437.     margin: 0 auto;
  438. }
  439.  
  440. .login_form .login_banner{
  441.     margin: 92px 0 0 15px;
  442. }
  443.  
  444. .login_form .slogan{
  445.     color: #ffffff;
  446.     font-size: 30px;
  447.     width: 30px;
  448.     height: 293px;
  449.     text-align: center;
  450.     line-height: 36px;
  451.     margin-top: 83px;
  452.     margin-left: 114px;
  453. }
  454.  
  455. .login_form .form_input_con{
  456.     width: 368px;
  457.     height: 379px;
  458.     background-color: white;
  459.     border: 1px solid #c6c6c5;
  460.     margin-top: 50px;
  461. }
  462.  
  463. .login_footer{
  464.     border-top: 0px;
  465.     margin-top: 0px;
  466. }
  467.  
  468. .form_title{
  469.     width: 308px;
  470.     height: 70px;
  471.     border-bottom: 1px solid #e0e0e0;
  472.     margin: 0 auto;
  473. }
  474.  
  475. .form_title h1{
  476.     float: left;
  477.     height: 70px;
  478.     font: bold 24px/70px 'Microsoft Yahei';
  479.     color: #a8a8a8;
  480.     margin-left: 44px;
  481. }
  482.  
  483. .form_title a{
  484.     width: 100px;
  485.     height: 16px;
  486.     font: 16px/16px 'Microsoft Yahei';
  487.     color: #5fb42a;
  488.     text-indent: 25px;
  489.     float: left;
  490.     background: url("../image_day/icons02.png") 0px 0px no-repeat;
  491.     margin: 27px 0 0 33px;
  492. }
  493.  
  494.  
  495. .form_input_con form{
  496.     width: 308px;
  497.     height: 221px;
  498.     margin: 20px auto 0;
  499. }
  500.  
  501. .form_input_con form .form_group{
  502.     width: 308px;
  503.     height: 68px;
  504.  
  505. }
  506.  
  507. .form_group .input_txt,.form_group .input_pwd{
  508.     width: 306px;
  509.     height: 38px;
  510.     border: 1px solid #e0e0e0;
  511.     outline: none;
  512.     text-indent: 10px;
  513.     background: url("../image_day/icons02.png") 274px -43px no-repeat #f8f8f8;
  514. }
  515.  
  516. .form_group .input_pwd{
  517.     background-position: 274px -93px;
  518. }
  519.  
  520. .form_group .error{
  521.     font: 12px/28px 'Microsoft Yahei';
  522.     color: #ff5400;
  523.     display: none;
  524. }
  525.  
  526. .form_group .input_check{
  527.     margin: 2px 10px 0 0;
  528. }
  529.  
  530. .find_pass{
  531.     color: #4b4b4b;
  532. }
  533.  
  534. .find_pass:hover{
  535.     color: #f80;
  536. }
  537.  
  538. .input_sub{
  539.     width: 308px;
  540.     height: 40px;
  541.     background-color: #47aa34;
  542.     border: 0;
  543.     font: 24px/40px 'Microsoft Yahei';
  544.     color: white;
  545.     cursor: pointer;
  546. }

3.html文件:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html
  3.         PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  4.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head>
  7.     <title>天天生鲜-首页</title>
  8.     <link rel="stylesheet" type="text/css" href="css/reset.css"/>
  9.     <link rel="stylesheet" type="text/css" href="css/main.css"/>
  10. </head>
  11. <body>
  12. <div class="header_con">
  13.      <div class="header">
  14.          <div class="welcome fl">欢迎来到天天生鲜</div>
  15.          <div class="user_info fr">
  16.              <!--登录注册块-->
  17.              <div class="user_login_link fl" style="display: none">
  18.  
  19.                  <a href="#">登录</a>
  20.                  <span>|</span>
  21.                  <a href="#">注册</a>
  22.  
  23.              </div>
  24.              <!--用户欢迎页-->
  25.              <div class="user_welcome fl" style="display: block">
  26.                  欢迎您:<em>胖哥哥</em>
  27.              </div>
  28.  
  29.              <div class="user_shopping fl">
  30.                  <span>|</span>
  31.                  <a href="#">我的购物车</a>
  32.                  <span>|</span>
  33.                  <a href="#">我的订单</a>
  34.              </div>
  35.  
  36.          </div>
  37.      </div>
  38. </div>
  39.  
  40. <div class="logo_bar">
  41.  
  42.     <div class="logo fl">
  43.         <a href="#"><img src="image_day/logo.png" alt="logo"/></a>
  44.     </div>
  45.  
  46.     <div class="search fl">
  47.         <form action="#">
  48.             <input type="text" name="" placeholder="搜索" class="input_text fl" >
  49.             <input type="button" name="" value="搜索" class="input_btn fr">
  50.         </form>
  51.  
  52.     </div>
  53.  
  54.     <div class="chart fr">
  55.         <a href="#" class="fl">我的购物车</a>
  56.         <span class="fr">0</span>
  57.     </div>
  58.  
  59. </div>
  60.  
  61. <div class="sub_menu_con">
  62.     <div class="sub_menu">
  63.         <h1 class="fl">全部商品分类</h1>
  64.         <ul>
  65.             <li><a href="">首页</a></li>
  66.             <li><a href="">手机生鲜</a></li>
  67.             <li><a href="">抽奖</a></li>
  68.         </ul>
  69.     </div>
  70. </div>
  71.  
  72. <div class="center_con">
  73.     <ul class="main_menu fl">
  74.         <li><a href="" class="fruit">新鲜水果</a></li>
  75.         <li><a href="" class="seafood">海鲜水产</a></li>
  76.         <li><a href="" class="meat">猪牛羊肉</a></li>
  77.         <li><a href="" class="egg">禽类蛋品</a></li>
  78.         <li><a href="" class="vegetables">新鲜蔬菜</a></li>
  79.         <li><a href="" class="ice">速冻食品</a></li>
  80.     </ul>
  81.  
  82.     <div class="slide_con fl">
  83.         <ul class="slide">
  84.             <li><a href=""><img src="image_day/slide.jpg" alt="轮播图"></a></li>
  85.         </ul>
  86.  
  87.         <div class="prev"></div>
  88.         <div class="next"></div>
  89.         <ul class="points">
  90.             <li class="active"></li>
  91.             <li></li>
  92.             <li></li>
  93.             <li></li>
  94.             <li></li>
  95.             <li></li>
  96.         </ul>
  97.  
  98.     </div>
  99.     <div class="adv fl">
  100.         <a href=""><img src="image_day/adv01.jpg" alt="广告1"></a>
  101.         <a href=""><img src="image_day/adv02.jpg" alt="广告2"></a>
  102.     </div>
  103. </div>
  104.  
  105. <div class="common_model">
  106.     <div class="common_title">
  107.         <h3 class="fl">新鲜水果</h3>
  108.         <ul class="fl">
  109.             <li><span>|</span></li>
  110.             <li><a href="#">鲜芒</a></li>
  111.             <li><a href="#">加州提子</a></li>
  112.             <li><a href="#">亚马逊牛油果</a></li>
  113.         </ul>
  114.  
  115.         <a href="" class="more fr">查看更多&gt;</a>
  116.     </div>
  117.     
  118.     <div class="common_goods_list">
  119.         <div class="goods_banner fl"><img src="image_day/banner01.jpg" alt="banner"/></div>
  120.         <ul class="goods_list fl">
  121.             <li>
  122.                 <h4>草莓</h4>
  123.                 <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
  124.                 <p>￥ 38.00</p>
  125.             </li>
  126.             <li>
  127.                 <h4>草莓</h4>
  128.                 <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
  129.                 <p>￥ 38.00</p>
  130.             </li>
  131.             <li>
  132.                 <h4>草莓</h4>
  133.                 <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
  134.                 <p>￥ 38.00</p>
  135.             </li>
  136.             <li>
  137.                 <h4>草莓</h4>
  138.                 <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
  139.                 <p>￥ 38.00</p>
  140.             </li>
  141.         </ul>
  142.     </div>
  143. </div>
  144.  
  145. <div class="common_model">
  146.     <div class="common_title">
  147.         <h3 class="fl">海鲜水产</h3>
  148.         <ul class="fl">
  149.             <li><span>|</span></li>
  150.             <li><a href="#">鲜芒</a></li>
  151.             <li><a href="#">加州提子</a></li>
  152.             <li><a href="#">亚马逊牛油果</a></li>
  153.         </ul>
  154.  
  155.         <a href="" class="more fr">查看更多&gt;</a>
  156.     </div>
  157.  
  158.     <div class="common_goods_list">
  159.         <div class="goods_banner fl"><img src="image_day/banner02.jpg" alt="banner"/></div>
  160.         <ul class="goods_list fl">
  161.             <li>
  162.                 <h4>草莓</h4>
  163.                 <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
  164.                 <p>￥ 38.00</p>
  165.             </li>
  166.             <li>
  167.                 <h4>草莓</h4>
  168.                 <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
  169.                 <p>￥ 38.00</p>
  170.             </li>
  171.             <li>
  172.                 <h4>草莓</h4>
  173.                 <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
  174.                 <p>￥ 38.00</p>
  175.             </li>
  176.             <li>
  177.                 <h4>草莓</h4>
  178.                 <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
  179.                 <p>￥ 38.00</p>
  180.             </li>
  181.         </ul>
  182.     </div>
  183. </div>
  184.  
  185. <div class="common_model">
  186.     <div class="common_title">
  187.         <h3 class="fl">猪牛羊肉</h3>
  188.         <ul class="fl">
  189.             <li><span>|</span></li>
  190.             <li><a href="#">鲜芒</a></li>
  191.             <li><a href="#">加州提子</a></li>
  192.             <li><a href="#">亚马逊牛油果</a></li>
  193.         </ul>
  194.  
  195.         <a href="" class="more fr">查看更多&gt;</a>
  196.     </div>
  197.  
  198.     <div class="common_goods_list">
  199.         <div class="goods_banner fl"><img src="image_day/banner03.jpg" alt="banner"/></div>
  200.         <ul class="goods_list fl">
  201.             <li>
  202.                 <h4>草莓</h4>
  203.                 <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
  204.                 <p>￥ 38.00</p>
  205.             </li>
  206.             <li>
  207.                 <h4>草莓</h4>
  208.                 <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
  209.                 <p>￥ 38.00</p>
  210.             </li>
  211.             <li>
  212.                 <h4>草莓</h4>
  213.                 <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
  214.                 <p>￥ 38.00</p>
  215.             </li>
  216.             <li>
  217.                 <h4>草莓</h4>
  218.                 <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
  219.                 <p>￥ 38.00</p>
  220.             </li>
  221.         </ul>
  222.     </div>
  223. </div>
  224.  
  225. <div class="common_model">
  226.     <div class="common_title">
  227.         <h3 class="fl">原地出产</h3>
  228.         <ul class="fl">
  229.             <li><span>|</span></li>
  230.             <li><a href="#">鲜芒</a></li>
  231.             <li><a href="#">加州提子</a></li>
  232.             <li><a href="#">亚马逊牛油果</a></li>
  233.         </ul>
  234.  
  235.         <a href="" class="more fr">查看更多&gt;</a>
  236.     </div>
  237.  
  238.     <div class="common_goods_list">
  239.         <div class="goods_banner fl"><img src="image_day/banner04.jpg" alt="banner"/></div>
  240.         <ul class="goods_list fl">
  241.             <li>
  242.                 <h4>草莓</h4>
  243.                 <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
  244.                 <p>￥ 38.00</p>
  245.             </li>
  246.             <li>
  247.                 <h4>草莓</h4>
  248.                 <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
  249.                 <p>￥ 38.00</p>
  250.             </li>
  251.             <li>
  252.                 <h4>草莓</h4>
  253.                 <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
  254.                 <p>￥ 38.00</p>
  255.             </li>
  256.             <li>
  257.                 <h4>草莓</h4>
  258.                 <a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
  259.                 <p>￥ 38.00</p>
  260.             </li>
  261.         </ul>
  262.     </div>
  263. </div>
  264.  
  265.  
  266. <div class="footer">
  267.     <div class="links">
  268.         <a href="">关于我们</a>
  269.         <span>|</span>
  270.         <a href="">联系我们</a>
  271.         <span>|</span>
  272.         <a href="">招聘人才</a>
  273.         <span>|</span>
  274.         <a href="">友情链接</a>
  275.     </div>
  276.  
  277.     <p>
  278.         CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved<br/>
  279.  
  280.         电话：010-****888 京ICP备*******8号
  281.     </p>
  282. </div>
  283. </body>
  284. </html>

4.简单的登录页

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>登录页</title>
  6.     <link rel="stylesheet" type="text/css" href="css/reset.css">
  7.     <link rel="stylesheet" type="text/css" href="css/main.css">
  8.  
  9. </head>
  10. <body>
  11. <div class="login_header clearfix">
  12.     <a href=""><img src="image_day/logo02.png" alt="logo"></a>
  13. </div>
  14.  
  15. <div class="login_form_con clearfix">
  16.     <div class="login_form">
  17.         <img src="image_day/login_banner.png" class="login_banner fl">
  18.         <p class="slogan fl">日夜兼程 . 急速送达</p>
  19.  
  20.         <div class="form_input_con fr">
  21.  
  22.             <div class="form_title">
  23.                 <h1>会员登录</h1>
  24.                 <a href="#">立即注册</a>
  25.             </div>
  26.  
  27.             <form>
  28.                 <div class="form_group">
  29.                     <input type="text" name="username" class="input_txt" placeholder="请输入用户名">
  30.                     <span class="error">文字提示</span>
  31.  
  32.                 </div>
  33.  
  34.  
  35.                 <div class="form_group">
  36.                     <input type="password" name="pwd" class="input_pwd" placeholder="请输入密码">
  37.                     <span class="error">文字提示</span>
  38.                 </div>
  39.  
  40.  
  41.                 <div class="form_group">
  42.                     <input type="checkbox" name="remember" id="remember" class="input_check fl">
  43.                     <label class="fl" for="remember">记住用户名</label>
  44.                     <a href="#" class="find_pass fr">忘记密码</a>
  45.                 </div>
  46.  
  47.                 <input class="input_sub" type="submit" name="" value="登 录">
  48.             </form>
  49.  
  50.         </div>
  51.     </div>
  52. </div>
  53.  
  54. <div class="footer login_footer">
  55.     <div class="links">
  56.         <a href="">关于我们</a>
  57.         <span>|</span>
  58.         <a href="">联系我们</a>
  59.         <span>|</span>
  60.         <a href="">招聘人才</a>
  61.         <span>|</span>
  62.         <a href="">友情链接</a>
  63.     </div>
  64.  
  65.     <p>
  66.         CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved<br/>
  67.  
  68.         电话：010-****888 京ICP备*******8号
  69.     </p>
  70. </div>
  71. </body>
  72. </html>

 

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

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

  

闽ICP备14008679号