css滑動門技術[摘自網路]

來源:互聯網
上載者:User

這是背景映像:

標題文字

說明:你只需要修改h3標記CSS中的width屬性即可,只要寬度不超過背景映像的總寬度即可。

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
               "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>標題文字</TITLE>
<META http-equiv=Content-Language content=en-us>
<META content="MSHTML 6.00.5730.13" name=GENERATOR>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE type=text/css>

h3{
    font-size:13px;
    line-height:21px;
    text-align:center;
    width:200px;  /*修改這個值即可改變寬度,且保持兩端的花紋*/
    background-image:url(http://learning.artech.cn/uploads/blog-images/bg.gif);
    background-repeat:no-repeat;
    padding-left:40px;  /*使底部背景的左側映像顯示出來*/
}
 
span{
    display:block;
    padding-right:40px;  /*為了使上面的文字置中*/
    background-image:url(http://learning.artech.cn/uploads/blog-images/bg.gif);
    background-repeat:no-repeat;
    background-position:right;  /*上邊背景圖片從右往左顯示,用於顯示右側小映像*/
}

</STYLE>
</HEAD>
<BODY>
  <P>這是背景映像:<IMG src="http://learning.artech.cn/uploads/blog-images/bg.gif"></P>
  <H3><SPAN>標題文字</SPAN></H3>
  <P>說明:你只需要修改h3標記CSS中的width屬性即可,只要寬度不超過背景映像的總寬度即可。</P>
</BODY>
</HTML>

 

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.