麻豆黑色丝袜jk制服福利网站-麻豆精品传媒视频观看-麻豆精品传媒一二三区在线视频-麻豆精选传媒4区2021-在线视频99-在线视频a

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > 困擾初學者的小豎線

困擾初學者的小豎線

來源:千鋒教育
發布人:qyf
時間: 2022-08-25 16:15:00 1661415300

  解決初學者的小問題;

  我們平時在寫網頁的時候經常看到兩個超鏈接中間會存在一個小豎線,如下圖:

圖片1

  問:如何實現

  可以給你講三種方法;

  第一種:邊框實現法

  css樣式:

<style>

* {

margin: 0;

padding: 0;

}

 

div {

height: 40px;

background: #999;

}

 

a {

text-decorationnone;

color: #000;

floatleft;

padding: 0 10px;

font-size: 12px;

border-right: 1px solid #000;

margin-top: 10px;

}

 

.last {

border-rightnone;

}

</style>

  html結構

<div>

<a href="#">首頁</a>

<a href="#" class="last">首頁</a>

</div>

  這個方法有點小難搞,得控制margin,padding,還得計算距離上面的距離,難搞奧!!!那這個怎么辦呢?莫慌我來告訴你怎么搞定!

  第二種:背景圖片實現法

  css樣式:

<style>

* {

margin: 0;

padding: 0;

}

 

div {

height: 40px;

background: #999;

font-size: 12px;

line-height: 40px;

}

 

a {

text-decorationnone;

color: #000;

floatleft;

padding: 0 10px;

background: url(line.jpg) no-repeat right center;

}

 

.last {

backgroundnone;

}

</style>

  html結構:

<div>

<a href="#">首頁</a>

<a href="#" class="last">首頁</a>

</div>

  這種方法就沒有那么多margin,padding 了,只需要一個padding就搞定了是不是很厲害的亞子

  如果你覺得這種方法已經很好了,那么我告訴你還有哦。

  第三種:手寫實現法

  css樣式:

<style>

* {

margin: 0;

padding: 0;

}

 

div {

height: 40px;

background: #999;

font-size: 12px;

line-height: 40px;

}

 

a {

text-decorationnone;

color: #000;

floatleft;

padding: 0 10px;

}

 

span {

floatleft;

}

</style>

  html結構:

<div>

<a href="#">首頁</a>

<span>|</span>

<a href="#">首頁</a>

</div>

  且慢,請聽我說,自己手寫 “|” 相對于前兩種方式來說更方便一些,前兩種方式最后一個元素的 “|” 都需要單獨去掉的,自己手寫不需要就可以不寫,前兩種方式還會涉及到選擇器的權重問題,如果你的權重不夠可能導致最后一個沒有的去不掉噢。

  更多關于web前端培訓的問題,歡迎咨詢千鋒教育在線名師,如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問,獲取試聽資格來試聽我們的課程,在線零距離接觸千鋒教育大咖名師,讓你輕松從入門到精通。

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT
主站蜘蛛池模板: 欧美一级高清黄图片| 精品亚洲欧美无人区乱码| 午夜不卡av免费| 乱子伦xxxx| 一个人看的www免费高清中文字幕| 岛国片在线播放| 欧美最猛黑人xxxx黑人猛交98 | 成年美女黄网站色大片免费看| 男和女一起怼怼怼30分钟| 啊v在线播放| 羞羞漫画页面免费入口欢迎你| 欧美四虎| 亚洲黄色免费电影| 欧美亚洲一二三区| 欧美乱妇高清无乱码在线观看| 天堂√在线中文最新版| 久久精品国内一区二区三区| 国产福利一区二区三区在线视频| 女人张开腿让男人捅爽| 正在播放宾馆露脸对白视频| 国产成人精品999在线观看| 你懂的在线看| 欧美成人精品第一区二区三区| 7777精品伊人久久久大香线蕉| 国产国产成人久久精品杨幂| 欧洲动作大片免费在线看| 五十路老熟道中出在线播放| 高清毛片免费看| 国产四区| 免费99热在线观看| 国产精品久久久久免费a∨| 成人做受120秒试看动态图| 黑人巨茎大战欧美白妇| 日韩三级电影院| 旧里番洗濯屋1一2集无删减| a级毛片免费观看网站| 欧美一级在线观看| 日韩在线视频一区二区三区| 护士bd| 樱桃直播免费看| 精品国产柚木在线观看|