首页 > 代码库 > 第六课 简易网页制作展示

第六课 简易网页制作展示

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

 

技术分享

技术分享

技术分享

第六课 简易网页制作展示