布局例子

<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" />

　　

这是今天学习的网页布局例子，刚开始慢慢写还好，后半段写着写着就出问题了，像文字溢出，流的问题等等。

刚入门的新学员的第一次写网页总是沉不住气，后面越写越乱。还是要加强自己的技能训练，多加练习，持之以恒才能写好一个网页。

时间： 2024-11-09 02:49:00

布局例子的相关文章

flex弹性布局例子

<style> ul{ display: flex; width:300px; } li{ flex: 1; text-align: center; line-height: 100px; } ul li{ list-style:none; background:#6bc3e6; border-right:1px solid #fff; color:#fff; } body,p{margin:0;} </style> <body> <ul> <li&g

java攻城师之路(Android篇)--搭建开发环境、拨打电话、发送短信、布局例子

一.搭建开发环境 1.所需资源 JDK6以上 Eclipse3.6以上 SDK17, 2.3.3 ADT17 2.安装注意事项 不要使用中文路径 如果模拟器默认路径包含中文, 可以设置android_sdk_home环境变量解决.效果如下: 二.拨打电话 1.步骤 在Button节点中添加onClick属性, 指定一个方法名 在Activity中定义一个public void 方法名 (View view) 获取文本框中的号码 创建意图, 设置动作, 设置数据 使用意图开启Activity 2.

最简单的响应式布局例子

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> .foo { width: 1200px; height: 400px; background: #ccc; margin: 20px auto; } /*如果连续的min-with,那么两者之间就可以构成一个范围()*/ /* * [500,900), [900,1

响应式布局与弹性布局基础篇

响应式布局与弹性布局 一.响应式布局 1.响应式布局的概念 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用"大势所趋"来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式. 2.响应式布局的实现 2

CSS布局（二）

本节内容: position float clear 浮动布局例子 百分比宽度 position CSS中的position属性设置元素的位置.属性值:static.relative.fixed.absolute. static static属性是默认值.任意的position:static:的元素不会被特殊的定位.一个static元素表示它不会定位,一个position属性被设置为其他值的元素表示它会被定位. relative Relative表现的和static一样,除非添加了一些额外的属性

布局技巧3：创建高效布局

Android UI工具包提供了一些布局管理器,它们使用起来相当容易,而且,大多数的时候,你只需要使用它们最基本的特征来实现UI. 执着于基本特征的使用对于创建UI来说,往往不是最高效的.一个常见的例子就是滥用LinearLayout,它将会导致View树中的View数量激增.View——更糟的是,布局管理器——添加到应用程序里都会带来一定的消耗:初始化,布局和绘制变得更加缓慢.嵌套布局的花销尤其“昂贵”,例如,如果你嵌套了一些LinearLayout,并使用了weight参数,这会导致子元素要

qt——常用的布局方法

布局相关对象及简介 窗体上的所有的控件必须有一个合适的尺寸和位置.Qt提供了一些类负责排列窗体上的控件,主要有:QHBoxLayout,QVBoxLayout,QGridLayout,QStackLayout.(布局管理类)这些类简单易用,无论在代码中还是用Qt Designer开发程序都能用到. 1)         布局类简介 QHBoxLayout:水平布局 QVBoxLayout:垂直布局 QGridLayout: 表格布局 QGridLayout::addWidget()语法 layo

使用em为单位制作两列弹性布局

一.DIV布局按照定位的方法分为:浮动方法(float),坐标定位方法(position),还有就是两者相结合的方法. 二.DIV布局按照定义单位的不同可分为:固定宽度布局.流体布局.弹性布局和混合布局. 固定宽度布局是将宽度用像素单位定义,它的宽度总保持不变,也被成为“冰布局”. 它的缺点是由于宽度固定,无论浏览器窗口尺寸有多大,它的尺寸也不变,无法充分利用空间. 当浏览器窗口变小时,会出现水平滚动条.这些缺点可以用其他两种布局方法解决. 流体布局的单位是用百分比控制的,不是像素.这使流体布局

Android开发笔记（一百三十四）协调布局CoordinatorLayout

协调布局CoordinatorLayout Android自5.0之后对UI做了较大的提升,一个重大的改进是推出了MaterialDesign库,而该库的基础即为协调布局CoordinatorLayout,几乎所有的design控件都依赖于该布局.协调布局的含义,指的是内部控件互相之前的动作关联,比如在A视图的位置发生变化之时,B视图的位置也按照某种规则来变化,仿佛弹钢琴有了协奏曲一般. 使用CoordinatorLayout时,要注意以下几点:1.导入design库:2.根布局采用androi