<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link href="test1 html.css" rel="stylesheet" type="text/css" /> </head> <body> <!--这是头部--> <div id="head"> <div id="logo"> <img src="06.11第六课/logo1.png" width="200" height="100"/> </div> <div id="menu"> <div class="list">联系我们</div> <div class="list">关于我们</div> <div class="list">新闻动态</div> <div class="list">产品展示</div> <div class="list xuanzhong">首页</div> </div> </div> <!--头部结束--> <div id="line"></div>
<!--这是大图--> <div id="datu"> <img src="06.11第六课/20170516114133939.jpg" width="1200" height="642"/> <div id="jiantouzuo"></div> <div id="jiantouyou"></div> </div> <!--大图结束--> <!--产品推荐--> <div id="hengfu"> 公司产品推荐 </div> <div id="chanpin"> <div class="chanpin1"> <div class="chanpintu"> <img src="06.11第六课/20170518071914505.jpg" width="280" height="180"/> </div> <div class="tuijian1"> 明星产品推荐 </div> <div class="tuijian2"> 推荐产品 </div> </div> <div class="chanpin1"> <div class="chanpintu"> <img src="06.11第六课/20170518071914505.jpg" width="280" height="180"/> </div> <div class="tuijian1"> 明星产品推荐 </div> <div class="tuijian2"> 推荐产品 </div> </div> <div class="chanpin1"> <div class="chanpintu"> <img src="06.11第六课/20170518071914505.jpg" width="280" height="180"/> </div> <div class="tuijian1"> 明星产品推荐 </div> <div class="tuijian2"> 推荐产品 </div> </div> <div class="chanpin1"> <div class="chanpintu"> <img src="06.11第六课/20170518071914505.jpg" width="280" height="180"/> </div> <div class="tuijian1"> 明星产品推荐 </div> <div class="tuijian2"> 推荐产品 </div> </div> </div> <!--产品推荐结束--> <!--其它--> <div id="qita"> <div class="beijing"> <div class="taitou"> <div class="biaoti1"> 产品展示 </div> <div class="biaoti2"> 更多>> </div> </div> <div class="tupian"> <img src="06.11第六课/20170516071750947.jpg" width="280" height="269"/> </div> <div class="zhushi"> 臻体纤美穴位贴敷治疗贴采用独特配方研发而成，拥有远红外磁疗技术，纯天然外用健康产品，拥有很好的辅助瘦身效果，安全无副作用，此产品均由几十年国家认证老药企-朱氏药业生产。 </div> </div> <div class="beijing"> <div class="taitou"> <div class="biaoti1"> 新闻动态 </div> <div class="biaoti2"> 更多>> </div> </div> <div class="tupian"> <img src="06.11第六课/20170519022757809.jpg" width="280" height="269"/> </div> <div class="zhushi"> 怎样才能成为易瘦体质！有些人怎么吃都不胖，有些人喝水就会长肉，综其原因是体质不同，易瘦体质的人是属于那种怎么吃都不胖的，而且每个人 </div> </div> <div class="beijing"> <div class="taitou"> <div class="biaoti1"> 关于我们 </div> <div class="biaoti2"> 更多>> </div> </div> <div class="tupian"> <img src="06.11第六课/20170519025058768.jpg" width="280" height="269"/> </div> <div class="zhushi"> 臻体纤美坐落于美丽的江北水城，多年来致力于减肥，保健行业，拥有专业的项目研发中心，与国…… </div> </div> <div class="beijing"> <div class="taitou"> <div class="biaoti1"> 联系我们 </div> <div class="biaoti2"> 更多>> </div> </div> <div class="tupian"> <img src="06.11第六课/20170515112752777.jpg" width="280" height="269"/> </div> <div class="zhushi"> 臻体纤美 公司地址：聊城市东昌府区柳园北路市政办公楼 </div> </div> </div> <!--其它结束--> <div id="line2"></div> <!--页脚--> <div id="yejiao"> <div class="wenzi"> Copyright © 2017-2018 臻体纤美 版权所有 天启网络技术支持 </div> <div class="wenzi"> 电话：0635-8240686 邮箱：ztqm001@163.com 地址：聊城市东昌府区市政大楼 </div> </div> <!--页脚结束--> </body>
1 *{ 2 margin:0px auto; 3 padding:0px; 4 font-family:微软雅黑; 5 } 6 #head{ 7 width:1200px; 8 height:118px; 9 10 } 11 #logo{ 12 width:227px; 13 height:118px; 14 float:left; 15 } 16 #menu{ 17 width:873px; 18 height:118px; 19 float:right; 20 } 21 .list{ 22 width:80px; 23 height:80px; 24 background-image:url(06.11%E7%AC%AC%E5%85%AD%E8%AF%BE/li_bg.png); 25 float:right; 26 text-align:center; 27 line-height:80px; 28 vertical-align:middle; 29 font-size:13px; 30 color:#b08f23; 31 margin-top:38px; 32 } 33 .list:hover{ 34 color:white; 35 background-image:url(06.11%E7%AC%AC%E5%85%AD%E8%AF%BE/li_bg_h.png); 36 cursor:pointer; 37 } 38 .xuanzhong{ 39 color:white; 40 background-image:url(06.11%E7%AC%AC%E5%85%AD%E8%AF%BE/li_bg_h.png); 41 } 42 #line{ 43 border:1px solid #FFC; 44 } 45 #datu{ 46 width:1200px; 47 height:642px; 48 margin-top:10px; 49 } 50 #jiantouzuo{ 51 width:44px; 52 height:44px; 53 background-image:url(06.11%E7%AC%AC%E5%85%AD%E8%AF%BE/jiantou.png); 54 position:relative; 55 top:-343px;left:-570px; 56 cursor:pointer; 57 } 58 #jiantouyou{ 59 width:44px; 60 height:44px; 61 background-image:url(06.11%E7%AC%AC%E5%85%AD%E8%AF%BE/jiantou.png); 62 background-position:right 0px; 63 position:relative; 64 top:-387px;left:570px; 65 cursor:pointer; 66 } 67 #hengfu{ 68 width:1200px; 69 height:50px; 70 margin-top:20px; 71 margin-bottom:10px; 72 text-align:center; 73 line-height:50px; 74 vertical-align:middle; 75 font-size:22px; 76 font-weight:bold; 77 color:#1E90FF; 78 } 79 #chanpin{ 80 width:1200px; 81 height:302px; 82 } 83 .chanpin1{ 84 width:280px; 85 height:300px; 86 border:1px solid #f2e5ba; 87 margin:0px 9px 0px 9px; 88 float:left; 89 } 90 .tuijian1{ 91 width:270px; 92 height:30px; 93 font-weight:bold; 94 line-height:30px; 95 vertical-align:middle; 96 padding:5px; 97 } 98 .tuijian2{ 99 width:270px; 100 height:60px; 101 font-size:13px; 102 padding:5px; 103 } 104 #qita{ 105 width:1200px; 106 height:406px; 107 margin-top:20px; 108 } 109 .beijing{ 110 width:280px; 111 height:406px; 112 border:1px solid #f2e5ba; 113 margin-left:9px; 114 margin-right:9px; 115 float:left; 116 } 117 .taitou{ 118 width:280px; 119 height:45px; 120 background-color:#b08f23; 121 color:white; 122 line-height:45px; 123 vertical-align:middle; 124 } 125 .biaoti1{ 126 font-size:15px; 127 font-weight:bold; 128 margin-left:10px; 129 float:left; 130 } 131 .biaoti2{ 132 font-size:14px; 133 margin-right:10px; 134 float:right; 135 } 136 .zhushi{ 137 width:260px; 138 height:72px; 139 font-size:13px; 140 text-indent:20px; 141 padding:10px; 142 color:#7b7b7b; 143 } 144 #line2{ 145 border:1px solid #FFC; 146 margin-top:40px; 147 } 148 #yejiao{ 149 width:100%; 150 height:120px; 151 } 152 .wenzi{ 153 width:1200px; 154 height:35px; 155 font-size:13px; 156 color:#898989; 157 text-align:center; 158 line-height:35px; 159 vertical-align:middle; 160 margin-top:10px; 161 }
