Java瑣事

          -I am not alone
          posts - 54, comments - 30, trackbacks - 0, articles - 1
            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理

          用圖片制作圓角表格

          Posted on 2010-09-22 00:30 石子路口 閱讀(262) 評論(0)  編輯  收藏 所屬分類: 網頁制作

          這是最常用也是最通用的方法,它能很好地適應各種瀏覽器和不同分辨率,大部分網頁都使用這種方法。

          ①先用Photoshop等作圖軟件繪制一個圓角矩形,再用“矩形選框工具”選取左上交的圓角部分(如圖1),復制它。

           

          ②不要取消選取,直接新建一副圖像,Photoshop會根據選取部分的高度、寬度自動設置新建圖像的大小。張貼后,保存為WEB所用格式即可。

          ③重復步驟②,分別用“水平翻轉”工具和“垂直翻轉”工具,保存另外三個方向的圓角。(如圖2)

           

          ④打開網頁制作軟件,這里以Dreamweaver為例。插入一個一行三列的表格,設置其CellPad、CellSpace和Border屬性值都為0。在第一列插入圖片1.gif,第三列插入圖片3.gif,并設置單元格的高度和寬度與圖片一致。設置第二列的背景顏色為與圓角圖片一致的顏色,設置寬度為整個表格的寬度減去兩個圖片的寬度,并打開源代碼察看器,刪除這列中的字符” ”(Dreamweaver會自動在每個單元格中插入此字符,若不刪除會撐大表格)。依葫蘆畫瓢,做好下半部分的圓角。

          ⑤再已插入的兩個表格中間再插入一個一行三列同寬的的表格,CellPad、CellSpace和Border屬性值都為0,寬度為100%。設置第一列和第三列背景顏色為與圓角圖片一致的顏色,寬度為1像素,并打開源代碼察看器,刪除這兩列中的字符” ”。到這,一個圓角表格就做好了,您可以在第二列中添加您想要的內容。(如圖3)


          轉載于:http://tech.163.com/05/0922/09/1U8AMVOV00091589.html
          主站蜘蛛池模板: 永宁县| 阿克陶县| 调兵山市| 余干县| 营口市| 和平县| 迁西县| 托克托县| 洞头县| 资溪县| 林州市| 阳信县| 德兴市| 浮梁县| 金坛市| 石台县| 河津市| 北宁市| 杂多县| 惠东县| 将乐县| 霍州市| 通江县| 枣强县| 城固县| 富锦市| 阿拉尔市| 安岳县| 紫云| 甘南县| 阳信县| 汉源县| 拜城县| 唐山市| 新干县| 高唐县| 涟源市| 重庆市| 留坝县| 宜良县| 九龙坡区|