静态网页的制作1
<title>无标题文档</title>
<link href="Untitled-1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="head"><!--biaotikaishi-->
<div id="logo"><!--biaotilogokaishi-->
<img src="logo1.png" width="200" height="100" />
</div><!--biaotilogojieshu-->
<div id="menu"><!--zheshicaidankaishi-->
<div class="menulist">联系我们</div>
<div class="menulist">关于我们</div>
<div class="menulist">新闻动态</div>
<div class="menulist">产品展示</div>
<div class="menulist changlv">首页</div>
</div><!--zheshicaidanjieshu-->
</div><!--biaotijieshu-->
<hr size="1" color="#66FF33"/>
<div id="zhongjiandatu"><!--tianjiadatu--> <!--作为一个整体，方向图标的div标签要跟大图的div放在一个DIV下面，否则，将会增加页面的像素-->
<img src="20170516114251198.jpg" width="1200" height="642" />
<div id="left"><!--fangxiangtubiao-->
</div><!--fangxiangtubiao-->
<div id="right"><!--fangxiangtubiao-->
</div><!--fangxiangtubiao-->
</div><!--tianjiadatu-->
<div id="zhongjianbiaoti">公司产品推荐</div>
<div id="chapintuijain"><!--chanpintuijianjiemiankaishi-->
<div id="chanpntupian"><!--chanpintuijiankaishi1-->
<img src="20170518071914505.jpg" width="280" height="180"/>
<div class="mingxingtuijian"><span>明星产品推荐</span></div>
<div class="tuijiandechanpin">推荐产品</div>
</div><!--chanpintuijiankaishi-->
<div id="chanpntupian"><!--chanpintuijiankaishi2-->
<img src="20170518071914505.jpg" width="280" height="180"/>
<div class="mingxingtuijian"><span>明星产品推荐</span></div>
<div class="tuijiandechanpin">推荐产品</div>
</div><!--chanpintuijiankaishi-->
<div id="chanpntupian"><!--chanpintuijiankaishi3-->
<img src="20170518071914505.jpg" width="280" height="180"/>
<div class="mingxingtuijian"><span>明星产品推荐</span></div>
<div class="tuijiandechanpin">推荐产品</div>
</div><!--chanpintuijiankaishi-->
<div id="chanpntupian"><!--chanpintuijiankaishi4-->
<img src="20170518071914505.jpg" width="280" height="180"/>
<div class="mingxingtuijian"><span>明星产品推荐</span></div>
<div class="tuijiandechanpin">推荐产品</div>
</div><!--chanpintuijiankaishi-->
</div><!--chanpintuijianjiemianjieshu-->
<div style="clear:both"></div>
<div id="chanpinqita">
<div id="chanpinzhanshi"><!--chanpinzhanshikaishi-->
<div id="chanpinzhanshilist"><div id="zhanpinzhanshi">产品展示</div>
<div id="chanpinzhanshigengduo">更多》</div>
<div><img src="20170516071750947.jpg" width="280" height="269" /></div>
<div id="chanpindejieshao">臻体纤美穴位贴敷治疗贴采用独特配方研发而成，拥有远红外磁疗技术，纯天然外用健康产品，拥有很好的辅助瘦身效果，安全无副作用，此产品均由几十年国家认证老药企-朱氏药业生产。</div>
</div>
</div>
<div id="chanpinzhanshi"><!--chanpinzhanshikaishi-->
<div id="chanpinzhanshilist"><div id="zhanpinzhanshi">产品展示</div>
<div id="chanpinzhanshigengduo">更多》</div>
<div><img src="20170519022757809.jpg" width="280" height="269" /></div>
<div id="chanpindejieshao">怎样才能成为易瘦体质！有些人怎么吃都不胖，有些人喝水就会长肉，综其原因是体质不同，易瘦体质的人是属于那种怎么吃都不胖的，而且每个人</div>
</div>
</div>
<div id="chanpinzhanshi"><!--chanpinzhanshikaishi-->
<div id="chanpinzhanshilist"><div id="zhanpinzhanshi">产品展示</div>
<div id="chanpinzhanshigengduo">更多》</div>
<div><img src="20170519025058768.jpg" width="280" height="269" /></div>
<div id="chanpindejieshao">臻体纤美坐落于美丽的江北水城，多年来致力于减肥，保健行业，拥有专业的项目研发中心，与国……</div>
</div>
</div>
<div id="chanpinzhanshi"><!--chanpinzhanshikaishi-->
<div id="chanpinzhanshilist"><div id="zhanpinzhanshi">产品展示</div>
<div id="chanpinzhanshigengduo">更多》</div>
<div><img src="20170516071750947.jpg" width="280" height="269" /></div>
<div id="chanpindejieshao">臻体纤美 公司地址：聊城市东昌府区柳园北路市政办公楼</div>
</div>
</div>
</div>
<hr />
<div id="yejiao">Copyright © 2017-2018 臻体纤美 版权所有 天启网络技术支持</div>
<div id="yejiaotwo">电话：0635-8240686 邮箱：ztqm001@163.com 地址：聊城市东昌府区市政大楼</div>
</body>
鼠标的光标变成手指图标cursor：pointer
：hover 表示当鼠标放上之后出现的样式
作为一个整体，方向图标的div标签要跟大图的div放在一个DIV下面，否则，将会增加页面的像素
样式表中需要加分号的地方一定记得加分号
上半部分为网页内容部分，下半部分为css样式表部分，通过做网页才能认识到自己掌握了哪些内容，哪些内容没有掌握，一个网页做了好几个小时，网页的上半部分做了两次，第二次做还是不能很顺利的做下来，不过做完了这个网页以后能自己总结一些平时听课的时候似懂非懂的一些东西，自己认为已经了解的知识也能在练习做网页的时候被自己搞蒙
*{ margin:0px auto;
padding:0px;}
#head{ width:1200px;
height:118px;}
#logo{ width:200px;
height:100px;
float:left}
#menu{ width:1000px;
height:118px;
float:left}
.menulist{ width:80px;
height:80px;
background-image:url(li_bg.png);
font-size:13px;
font-family:微软雅黑;
text-align:center;
line-height:80px;
vertical-align:middle;
float:right;
margin-top:10px;
float:right;
background-position:center;
}
.changlv{background-image:url(li_bg_h.png);
color:#3FC}
.menulist:hover{
cursor:pointer;
background-image:url(li_bg_h.png);
color:#3FC}
#zhongjiandatu{ width:1200px;
height:642px;
margin-top:10px;}
#left{ width:44px;
height:44px;
background-image:url(jiantou.png);
position:relative;
top:-340px;
left:-540px;}
#right{width:44px;
height:44px;
background-image:url(jiantou.png);
background-position:right 0px;
position:relative;
top:-384px;
left:540px;}
#zhongjianbiaoti{ width:1200px;
height:80px;
font-size:22px;
font-weight:bold;
font-family:"微软雅黑";
text-align:center;
line-height:80px;
vertical-align:middle;}
#chapintuijain{ width:1200px;
height:302px;}
#chanpntupian{ width:280px;
height:302px;
border:1px solid #600;
float:left;
margin:8px;}
.mingxingtuijian{ width:280px;
height:40px;
padding:10px;
text-align:center
line-height:30px;
font-size:16px;
font-weight:bold;}
.tuijiandechanpin{width:280px;
height:40px;
padding:10px;}
#chanpinqita{ width:1200px;
height:406px;}
#chanpinzhanshi{ width:280px;
height:406px;
border:1px #33FF00 solid;
margin:0px 8px 0px 8px;
float:left;}
#chanpinzhanshilis{ width:280px;
height:45px;
background-color:#669;
}
#zhanpinzhanshi{ font-size:18px;
float:left;
text-align:center;
line-height:45px;
vertical-align:middle;
}
#chanpinzhanshigengduo{ font-size:18px;
float:right;
text-align:center;
line-height:45px;
vertical-align:middle;}
#chanpindejieshao{ width:260px;
height:72px;
padding:10px;
overflow:hidden;
font-size:13px;
text-indent:20px;
color:#7b7b7b; }
#yejiao{ text-align:center;
width:1200px;
height:50px;
line-height:50px;
vertical-align:middle}
#yejiaotwo{ text-align:center;
width:1200px;
height:50px;
}
第一次做网页，
posted on 2017-06-11 21:20 superficial。 阅读(179) 评论(0) 收藏 举报
浙公网安备 33010602011771号