0731-55587844
其他(360、58、霸屏、搜狗、小程序)等代理合作請發(fā)郵箱254596208@qq.com
站內(nèi)公告:  如果您有其它業(yè)務(wù)聯(lián)系,請發(fā)郵件至yaner@y1web.com郵箱,謝謝您的配合!
營銷型網(wǎng)站建設(shè)第一品牌——優(yōu)度網(wǎng)絡(luò)
現(xiàn)在的位置:首頁 > 發(fā)布營銷型網(wǎng)站建設(shè) > 新聞資訊 > 個人主頁 css定位實例
個人主頁 css定位實例
信息來源:優(yōu)度網(wǎng)絡(luò)  發(fā)布日期:2009/3/29 瀏覽數(shù)量:1153
文章導(dǎo)讀:

實例作品

<html>
<head>
<title>個人主頁</title>
<style>
<!--
body, html{
 margin:0px; padding:0px;
 text-align:center;
 background:#e9fbff;
}
#container{
 position: relative;
 margin: 0 auto;
 padding:0px;
 width:700px;
 text-align: left;
 background:url(container_bg.jpg) repeat-y;
}
#banner{
 margin:0px; padding:0px;
}
#links{
 font-size:12px;
 margin:-18px 0px 0px 0px;
 padding:0px;
 position:relative;
}
#links ul{
 list-style-type:none;
 padding:0px; margin:0px;
 width:700px;
}
#links ul li{
 text-align:center;
 width:100px;
 display:block;
 float:left;
}
#links br{
 display:none;
}
#leftbar{
 background-color:#d2e7ff;
 text-align:center;
 font-size:12px;
 width:150px; float:left;
 padding-top:20px;
 padding-bottom:30px;
 margin:0px;
}
#leftbar p{
 padding-left:12px; padding-right:12px;
}
#content{
 font-size:12px;
 float:left; width:550px;
 padding:5px 0px 30px 0px;
 margin:0px;
 background:url(bg1.jpg) no-repeat bottom right;
}
#content p, #content h4{
 padding-left:20px; padding-right:15px;
}
#footer{
 clear:both; font-size:12px;
 width:100%;
 padding:3px 0px 3px 0px;
 text-align:center;
 margin:0px;
 background-color:#b0cfff;
}
.pic1{
 border:1px solid #00406c;
}
p.leftcontent{
 text-align:left;
 color:#001671;
}
h4{
 text-decoration:underline;
 color:#0078aa;
 padding-top:15px;
 font-size:16px;
}
-->
</style>
   </head>
<body>
<div id="container">
 <div id="banner">
  <img src="banner1.jpg" border="0">
 </div>
 <div id="links">
  <ul>
   <li>首頁</li>
   <li>心情日記</li>
   <li>Free</li>
   <li>一起走到</li>
   <li>從明天起</li>
   <li>紙飛機(jī)</li>
   <li>下一站</li>
  </ul>
  <br>
 </div>
 <div id="leftbar">
  <p><img src="selfpic1.jpg" class="pic1">
  <br>我的日記本</p>
  <p class="leftcontent">秋天過半的時候,我搭上了一列火車。我不知道它將要去往的方向,那鐵路看上去無休無止地延伸著。</p>
  <p><img src="selfpic2.jpg" class="pic1">
  <br>心情軌跡</p>
  <p class="leftcontent">無意間發(fā)見,白云的上面,長著許許多多的蒲公英。它在我面前迅速的長大,風(fēng)吹過的時候,紛紛升起,飛向無數(shù)的遠(yuǎn)方。</p>
 </div>
 <div id="content">
  <h4>介紹</h4>
  <p>火車經(jīng)過一個又一個站臺,窗外漫卷的蒲公英向我微笑著。我逐漸記起了自己旅行的目的,一直都在下一站的前方。火車緩緩地駛?cè)胝九_,汽笛聲響的那一瞬間,車廂變得透明,我看見,自己和這長長的列車一起,正在漫天飄舞著的蒲公英中飛行。</p>
  <h4>轉(zhuǎn)播設(shè)備</h4>
  <p>我現(xiàn)在是在萬泉河附近,我們的轉(zhuǎn)播車就在旁邊不遠(yuǎn)的地方,師傅馬上將會把車開過來。我們的轉(zhuǎn)播設(shè)備非常的先進(jìn),具體怎么先進(jìn)我也說不清,師傅比我清楚,總之就是特別特別先進(jìn)。好,現(xiàn)在師傅已經(jīng)把轉(zhuǎn)播車開過來了。……
  </p>
  <h4>旅程</h4>
  <p>夕陽 染紅藍(lán)天<br>
  帶走 美好的一天<br>
  風(fēng) 吹過大地<br>
  炫美的世界<br>
  <br>
  霞光 點亮星辰<br>
  燃起 遼遠(yuǎn)的夢幻<br>
  流星 劃過夜空<br>
  憶起 逝夜的歌聲<br>
  <br>
  是誰昨夜背上行囊<br>
  唱一首滿載風(fēng)塵的歌<br>
  今夜才又想起擁抱的時刻<br>
  <br>
  獨自走的一段旅程<br>
  是否還裝滿苦澀<br>
  一路風(fēng)雨飄搖 那坎坷對誰說<br>
  <br>
  來吧看這遠(yuǎn)處亮起的點點星火<br>
  伸手觸摸那寫在匆匆旅程的歌<br>
  誰在轉(zhuǎn)過的街口從容揮手<br>
  誰用歡笑和擁抱<br>
  記住這一刻
  </p>
 </div>
 <div id="footer">版權(quán)所有 2006.12.7 Next Station</div>
</div>
</body>
</html>

相關(guān)信息
  • 網(wǎng)絡(luò)營銷培訓(xùn)
  • 微網(wǎng)站
  • 掃二維碼
  • 1
  • 2
  • 3
  • 最新上傳
  • 精品案例
  • 自動流水線嘉
  • 湖南省湘江重
  • 湘潭家居\建
  • 湘潭學(xué)校微網(wǎng)