<output id="jbxdv"></output>

      1. 在網頁設計中設置帶花紋邊框(一)

        • 2020-01-09 15:46:40
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.freenetsites.com

        網頁設計時,為頁面添加邊框,只要使用border屬性就可以做到,但是,如果想要給頁面添加一個帶花紋的邊框,使用border屬性是無法完成的,本例利用圖片背景,來實現為頁面添加帶花紋的邊框。

        【操作步驟】

        第1步,構建網頁結構。在本例中首先用<div>標記設置container容器,在此頁面中,所有內容分為4個部分,分別用<div>定義為header、menu、content和footer。

        <div id="container">    

        <div id="header">        

        <div class="logo"><img src="images/logo.gif"></div> 

        <div id="title">高質.高效 <span>是我們一直的追求</span> </div>    

        </div>

        <div id="menu_container">        

        <div id="menu">            

        <ul>

                        

        <li><a href="#" class="current"><span></span>首頁</a></li>                

        <li><a href="#" target="_parent"><span></span>新產品</a></li>                

        <li><a href="#" target="_blank"><span></span>服務指南</a></li>                

        <li><a href="#"><span></span>合作伙伴</a></li>                

        <li><a href="#"><span></span>聯系我們</a></li>            

        </ul>        

        </div>    

        </div>    

        <div id="content_container">

         <div id="content">            

        <h2>奔騰信息資詢(北京)有限公司  簡介</h2>            

        <p>信息咨詢(北京)有限公司是中國領先的營銷解決方案和信用解決方案提供商。我們收集、分析和管理關于市場、消費者和商業機構的信息,通過信息、服務和技術的整合,提供市場研究、商業信息、咨詢和數據庫營銷服務,協助您做出更好的營銷決策和信貸決策并發展盈利的客戶關系。我們在北京、上海和廣州擁有近600名員工,為各行業的機構客戶提供專業服務,包括汽車、金融、保險、零售、電信、IT、制造業、消費品和貿易。            ……            

        </p>        

        </div>    

        </div>    

        <div id="footer_container"> 

        <div id="footer"> Copyright@ 2015    | Designed by us <a href="#/" target="_parent">聯系我們</a></div>    

        </div>

        </div>

        此時的顯示效果如圖所示,可以看到,網頁的基本結構已經搭建好了,但是由于沒有進行CSS樣式設置,界面中只是把圖片和文字內容羅列起來,沒有任何修飾。

        7bc6020ad0fde631d6f4b0d0ee02450f.jpg

        提示:在本例中,網頁設計時的的結構是:在container容器中包含了header、menu、content和footer 4部分,設計帶花紋邊框的原理就是container的寬度設置比header、menu、content和footer的寬度多,并讓這4部分居中顯示,那么container中的背景圖片就會在左右各露出一部分,我們所看到的似乎就是頁面左右各有兩條帶花紋的邊框,如果是設置上、下、左、右邊框,道理是一樣的。

        第2步,定義網頁基本屬性、container容器的樣式以及所有段落的共有樣式。

        * {    

        padding : 0;    

        margin :0;}

        body { /*網頁基本樣式*/    

        font-family : 宋體, Arial, Helvetica, sans-serif;    

        color : #024977;    

        font-size : 14px;

         background: #dfbfc0;    text-align: center;}p {    /*段落文本樣式*/    

        margin: 0px;    

        padding: 0 20px;                           

         /*段落之間的間距*/    line-height: 1.6em;    text-align: justify;                        

        /*兩端對齊*/    text-indent: 2em;                           

        /*首行縮進*/}#container {    width: 810px;                               

        /*容器寬度*/    margin: 0 auto;                             

        /*居中*/    background: url(images/bg1.jpg) repeat-y;   /*網頁背景圖片*/

        }以上代碼中,*{margin:0px;padding:0px}將網頁中所有標簽的padding和margin都設定為0px,在body中定義了頁面的背景顏色,在con-tainer中設置了容器寬度為810px,并為其添加了圖片背景。

        第3步,定義網頁header部分樣式。

        #header {    

        width: 790px;                    /*header部分div塊的寬度*/    

        height: 200px;                   /*高寬*/    

        margin: 0 auto;                  /*header居中*/    

        background:#3f4857;              /*背景顏色*/    

        border-top:#FFFFFF 2px solid;    /*header上邊框*/}

        #header .logo{                       /*logo圖片樣式*/    

        float:left;                      /*左對齊*/    

        margin-top:40px;                 /*頂端補白*/    

        margin-left:20px;                /*左側補白*/    }

        #header #title {    

        float: right;    

        color: #ff;

        font-size: 34px;    

        font-weight: bold;               /*文字粗細*/    

        letter-spacing: 5px;             /*字間距*/    

        font-family:黑體;    

        margin-top:50px;    

        margin-right:60px;}

        #header #title span {    display: block;                  /*定義為塊級元素*/    

        margin: 10px 0 0 5px;    

        font-size: 14px;    

        color: #fff;    

        font-weight: bold;    

        leter-spacing: 5px;}

        以上代碼中,首先定義了header樣式,其寬度為790px,這樣設置正是實現頁面兩側帶花紋邊框的關鍵,因為在網站建設時,圖片背景(container)的寬度是810px,也就是說在header的左右兩側會各顯示10px的背景圖片,這就是帶花紋邊框;在logo中設置了logo圖片的樣式;title中定義了文字“高質.高效”的樣式;在span樣式中定義了文字“是我們一直的追求”的樣式,由于<span>標記是行內元素,但是在這里需要按塊級元素來設置其樣式,所以display:block表示將<span>標記中的內容定義為塊級元素。

        當前文章標題:在網頁設計中設置帶花紋邊框(一)

        當前URL:http://www.freenetsites.com/news/wzzz/3154.html

        上一篇:定義背景圖片的位置

        下一篇:在網頁設計中設置帶花紋邊框(二)

        網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
        国产成人亚洲综合无码
        <output id="jbxdv"></output>