第七课简易网页制作展示

<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 }

posted on 2017-06-11 22:19 为伊消得阅读(180) 评论(0) 收藏举报

第七课 简易网页制作展示

第七课简易网页制作展示