• <abbr id="qqgmy"></abbr>
      <menu id="qqgmy"><abbr id="qqgmy"></abbr></menu>
    • <rt id="qqgmy"><code id="qqgmy"></code></rt>
      • 在網頁設計中定義鼠標指針樣式

        網站建設中,在默認狀態(tài)下,鼠標移過鏈接則顯示為箭頭樣式,如果鏈接顯示為按鈕樣式,我們還可以把光標設計為手形樣式,這樣能夠提高用戶使用體驗。

        【操作步驟】

        第1步,構建網頁結構,在<body>標簽中輸入以下內容:

        <ul>    

        <li> <a href="#">幫助</a></li>    

        <li> <a href="#">文本</a></li>    

        <li> <a href="#" >等待</a></li>    

        <li> <a href="#">斜箭頭</a></li>    

        <li> <a href="#">十字</a></li>    

        <li> <a href="#">移動</a></li></ul>

        第2步,規(guī)劃整個頁面的基本顯示屬性以及統(tǒng)一所有元素的默認樣式。

        * {    margin:10px 0 0 10px;    padding:0px;}body {    

        font-size:14px;    

        font-family:"宋體";}

        第3步,在制作網頁時,定義水平顯示的導航菜單樣式。在ul類型選擇器中清除列表項目符號,通過li選擇器讓所有列表項并列顯示,通過添加左側邊界2像素,在網頁設計時,實現(xiàn)列表項目之間留有一點距離。定義a元素為塊顯示,設計背景色為亮藍色,通過固定高和寬設置方形樣式,利用line-height屬性實現(xiàn)文本垂直居中,清除默認的下劃線樣式,設置字體為白色。

        ul {    list-style-type:none;

        }li {    float:left;    

        margin-left:2px;}a {    display:block;    

        background-color:#3424ff;    

        width:100px;    

        height:30px;    

        line-height:30px;    

        text-align:center;    

        color:#FFFFFF;    

        text-decoration:none;}

        第4步,利用CSS的cursor屬性定義多個光標樣式類。

        .help {    cursor:help;}

        .text {    cursor:text;}.wait {    cursor:wait;}

        .sw-resize {    cursor:sw-resize;}

        .crosshair {    cursor:crosshair;}

        .move {    cursor:move;}

        提示:cursor是CSS2.0定義的一個屬性,具體用法如下:

        cursor: auto | all-scroll | col-resize| crosshair | default | hand | move | help | no-drop | not-allowed | pointer | progress | row-resize | text | vertical-text | wait | *-resize | url (url)

        第5步,把這些樣式類綁定到列表項目中包含的鏈接a元素上即可。

        <ul>    

        <li> <a href="#" class="help">幫助</a></li>    

        <li> <a href="#" class="text">文本</a></li>    

        <li> <a href="#" class="wait">等待</a></li>

        <li> <a href="#" class="sw-resize">斜箭頭</a></li>    

        <li> <a href="#" class="crosshair">十字</a></li>    

        <li> <a href="#" class="move">移動</a></li>

        </ul>

        網站建設、網絡營銷咨詢專線:0871-63535511(點擊可一鍵撥號)
        在线一区视频二区三区,av无码久久久不卡网站,亚洲国产人成精品,国产成人白丝视频
        • <abbr id="qqgmy"></abbr>
          <menu id="qqgmy"><abbr id="qqgmy"></abbr></menu>
        • <rt id="qqgmy"><code id="qqgmy"></code></rt>