布局例子
Posted 时过境迁E
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了布局例子相关的知识，希望对你有一定的参考价值。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>网页2</title> <style type="text/css"> *{ margin:0px auto; padding:0px; font-family:微软雅黑; } #head{ width:1200px; height:118px; } #logo{ width:200px; height:118px; float:left } #caidan{ width:1000px; height:118px; float:left; } .fenlei{ width:80px; height:80px; float:right; background-image:url(0611%E6%A0%B7%E5%BC%8F%E8%A1%A8/0603/img/li_bg.png); text-align:center; line-height:80px; vertical-align:middle; font-size:12px; color: #b08f23; margin-top:40px; } .fenlei:hover{ background-image:url(0611%E6%A0%B7%E5%BC%8F%E8%A1%A8/0603/img/li_bg_h.png); cursor:pointer; color:#FFF; } .shouye{ color:#FFF; background-image:url(0611%E6%A0%B7%E5%BC%8F%E8%A1%A8/0603/img/li_bg_h.png); } #datu{ width:1200px; height:648px; margin-top:20px; } #zuo{ width:44px; height:44px; background-image:url(0611%E6%A0%B7%E5%BC%8F%E8%A1%A8/0603/img/jiantou.png); position:relative; top:-368px; left:-578px; } #you{ width:44px; height:44px; background-image:url(0611%E6%A0%B7%E5%BC%8F%E8%A1%A8/0603/img/jiantou.png); background-position:right 0px; position:relative; top:-412px; left:578px; } #chanpin-tuijian{ width:1200px; height:50px; font-size:24px line-height:50px; vertical-align:middle; text-align:center; color:#00F; font-weight:bold; } #chanpin{ width:1200px; height:400; } .chanpin-jieshao{ width:200px; height:300px; float:left; margin:0px 20px 0px 20px; } .chanpin-mingcheng{ width:200px; height:50px; font-size:18px; line-height:50px; vertical-align:middle; } .chanpin-yongtu{ width:200px; height:50px; font-size:12px; line-height:50px; vertical-align:middle; } #chanpin-zhanshi{ width:1200px; height:400px;} .qingdan{ width:200px; height:400px; border:1px solid blue; float:left; margin-top:100px; margin-right:35px; } .wenzi{ width:200px; height:50px; background-color:#b08f23;} .zhanshi{ width:100px; height:50px; font-size:18px; float:left; line-height:50px; vertical-align:middle; } .gengduo{ width:100px; height:50px; font-size:18px; float:right; line-height:50px; vertical-align:middle; } .xiaotu{ width:200px; height:300px;} .xuewei{width:200px; height:50px; padding:10px; overflow:hidden; font-size:13px; text-indent:20px; color:#7b7b7b;} </style> </head> <body> <div id="head"> <div id="logo"><img src="0611样式表/0603/img/logo1.png" width="200px" height="118px" /></div> <div id="caidan"> <div class="fenlei">联系我们</div> <div class="fenlei">关于我们</div> <div class="fenlei">新闻动态</div> <div class="fenlei">产品展示</div> <div class="fenlei shouye">首页</div> </div> </div> <hr color="#b08f23" size="5" > <div id="datu"> <img src="0611样式表/0603/img/20170516114133939.jpg" width="1200" height="642" /> <div id="zuo"> </div> <div id="you"> </div> </div> <div id="chanpin-tuijian">公司产品推荐</div> <div id="chanpin"> <div class="chanpin-jieshao"> <img src="20170518071914505.jpg" width="200" height="300" /> <div class="chanpin-mingcheng">明星产品推荐</div> <div class="chanpin-yongtu">推荐产品</div> </div> <div class="chanpin-jieshao"> <img src="20170518071914505.jpg" width="200" height="300" /> <div class="chanpin-mingcheng">明星产品推荐</div> <div class="chanpin-yongtu">推荐产品</div> </div> <div class="chanpin-jieshao"> <img src="20170518071914505.jpg" width="200" height="300" /> <div class="chanpin-mingcheng">明星产品推荐</div> <div class="chanpin-yongtu">推荐产品</div> </div> <div class="chanpin-jieshao"> <img src="20170518071914505.jpg" width="200" height="300" /> <div class="chanpin-mingcheng">明星产品推荐</div> <div class="chanpin-yongtu">推荐产品</div> </div> <div class="chanpin-jieshao"> <img src="20170518071914505.jpg" width="200" height="300" /> <div class="chanpin-mingcheng">明星产品推荐</div> <div class="chanpin-yongtu">推荐产品</div> </div> </div> <div id="chanpin-zhanshi"> <div class="qingdan"> <div class="wenzi"> <div class="zhanshi">产品展示</div> <div class="gengduo">更多</div> </div> <div class="xiaotu"> <img src="20170516071750947.jpg" width="200" height="300" /> </div> <div class="xuewei"> 臻体纤美穴位贴敷治疗贴采用独特配方研发而成，拥有远红外磁疗技术，纯天然外用健康产品，拥有很好的辅助瘦身效果，安全无副作用，此产品均由几十年国家认证老药企-朱氏药业生产。 </div> </div> <div class="qingdan"> <div class="wenzi"> <div class="zhanshi">产品展示</div> <div class="gengduo">更多</div> </div> <div class="xiaotu"> <img src="20170516071750947.jpg" width="200" height="300" /> </div> <div class="xuewei"> 臻体纤美穴位贴敷治疗贴采用独特配方研发而成，拥有远红外磁疗技术，纯天然外用健康产品，拥有很好的辅助瘦身效果，安全无副作用，此产品均由几十年国家认证老药企-朱氏药业生产。 </div> </div> <div class="qingdan"> <div class="wenzi"> <div class="zhanshi">产品展示</div> <div class="gengduo">更多</div> </div> <div class="xiaotu"> <img src="20170516071750947.jpg" width="200" height="300" /> </div> <div class="xuewei"> 臻体纤美穴位贴敷治疗贴采用独特配方研发而成，拥有远红外磁疗技术，纯天然外用健康产品，拥有很好的辅助瘦身效果，安全无副作用，此产品均由几十年国家认证老药企-朱氏药业生产。 </div> </div> <div class="qingdan"> <div class="wenzi"> <div class="zhanshi">产品展示</div> <div class="gengduo">更多</div> </div> <div class="xiaotu"> <img src="20170516071750947.jpg" width="200" height="300" /> </div> <div class="xuewei"> 臻体纤美穴位贴敷治疗贴采用独特配方研发而成，拥有远红外磁疗技术，纯天然外用健康产品，拥有很好的辅助瘦身效果，安全无副作用，此产品均由几十年国家认证老药企-朱氏药业生产。 </div> </div> <div class="qingdan"> <div class="wenzi"> <div class="zhanshi">产品展示</div> <div class="gengduo">更多</div> </div> <div class="xiaotu"> <img src="20170516071750947.jpg" width="200" height="300" /> </div> <div class="xuewei"> 臻体纤美穴位贴敷治疗贴采用独特配方研发而成，拥有远红外磁疗技术，纯天然外用健康产品，拥有很好的辅助瘦身效果，安全无副作用，此产品均由几十年国家认证老药企-朱氏药业生产。 </div> </div> </div> <!--结束--> <hr color="#FF9900" size="1" />
这是今天学习的网页布局例子，刚开始慢慢写还好，后半段写着写着就出问题了，像文字溢出，流的问题等等。
刚入门的新学员的第一次写网页总是沉不住气，后面越写越乱。还是要加强自己的技能训练，多加练习，持之以恒才能写好一个网页。
以上是关于布局例子的主要内容，如果未能解决你的问题，请参考以下文章
如何通过单击片段内的线性布局从片段类开始新活动？下面是我的代码，但这不起作用