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

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁  >  技術(shù)干貨  > 困擾初學(xué)者的小豎線

困擾初學(xué)者的小豎線

來源:千鋒教育
發(fā)布人:qyf
時(shí)間: 2022-08-25 16:15:00 1661415300

  解決初學(xué)者的小問題;

  我們平時(shí)在寫網(wǎng)頁的時(shí)候經(jīng)常看到兩個(gè)超鏈接中間會(huì)存在一個(gè)小豎線,如下圖:

圖片1

  問:如何實(shí)現(xiàn)

  可以給你講三種方法;

  第一種:邊框?qū)崿F(xiàn)法

  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結(jié)構(gòu)

<div>

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

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

</div>

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

  第二種:背景圖片實(shí)現(xiàn)法

  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結(jié)構(gòu):

<div>

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

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

</div>

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

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

  第三種:手寫實(shí)現(xiàn)法

  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結(jié)構(gòu):

<div>

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

<span>|</span>

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

</div>

  且慢,請(qǐng)聽我說,自己手寫 “|” 相對(duì)于前兩種方式來說更方便一些,前兩種方式最后一個(gè)元素的 “|” 都需要單獨(dú)去掉的,自己手寫不需要就可以不寫,前兩種方式還會(huì)涉及到選擇器的權(quán)重問題,如果你的權(quán)重不夠可能導(dǎo)致最后一個(gè)沒有的去不掉噢。

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

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
軟件開發(fā)管理流程中會(huì)出現(xiàn)哪些問題?

一、需求不清需求不明確是導(dǎo)致項(xiàng)目失敗的主要原因之一。如果需求沒有清晰定義,開發(fā)人員可能會(huì)開發(fā)出不符合用戶期望的產(chǎn)品。二、通信不足溝通問...詳情>>

2023-10-14 13:43:21
軟件定制開發(fā)中的敏捷開發(fā)是什么?

軟件定制開發(fā)中的敏捷開發(fā)是什么軟件定制開發(fā)中的敏捷開發(fā),從宏觀上看,是一個(gè)高度關(guān)注人員交互,持續(xù)開發(fā)與交付,接受需求變更并適應(yīng)環(huán)境變化...詳情>>

2023-10-14 13:24:57
什么是PlatformIo?

PlatformIO是什么PlatformIO是一個(gè)全面的物聯(lián)網(wǎng)開發(fā)平臺(tái),它為眾多硬件平臺(tái)和開發(fā)環(huán)境提供了統(tǒng)一的工作流程,有效簡化了開發(fā)過程,并能兼容各種...詳情>>

2023-10-14 12:55:06
云快照與自動(dòng)備份有什么區(qū)別?

1、定義和目標(biāo)不同云快照的主要目標(biāo)是提供一種快速恢復(fù)數(shù)據(jù)的方法,它只記錄在快照時(shí)間點(diǎn)后的數(shù)據(jù)變化,而不是所有的數(shù)據(jù)。自動(dòng)備份的主要目標(biāo)...詳情>>

2023-10-14 12:48:59
服務(wù)器為什么要用Linux?

服務(wù)器為什么要用Linux作為服務(wù)器操作系統(tǒng)的優(yōu)選,Linux在眾多選擇中脫穎而出。Linux作為服務(wù)器操作系統(tǒng)的優(yōu)選,有其獨(dú)特的優(yōu)勢(shì)和特點(diǎn)。包括其...詳情>>

2023-10-14 12:34:11
快速通道
主站蜘蛛池模板: 嫩草视频在线免费观看| 成人动漫在线免费观看| 一二三四视频在线观看韩国电视剧 | 丝袜美腿中文字幕| 欧美日韩一区二区综合| 国产一区二区精品久久| 亚洲第一永久在线观看| 日本高清不卡免费| aaaaaa级特色特黄的毛片| 黄色不卡视频| 伊人a.v在线| 亚洲国产毛片| 午夜老司机在线观看免费| 妞干网在线观看视频| 四虎影永久在线高清免费| 泰国午夜理伦三级| acg里番全彩| 啊灬啊灬啊灬深灬快用力| 91亚洲自偷手机在线观看| 无毒不卡在线观看| 在线观看北条麻妃| 99精品视频在线观看免费| 国产馆在线观看| 一个人看的片免费高清大全| 四虎在线视频免费观看| 幻女free性zozo交| 欧美高清不卡| 好男人在线社区www我在线观看| 美国式禁忌芭芭拉| 里番acg※里番acg本子全彩| 夫妇交换性3中文字幕k8| 女人扒开裤子让男人捅| 一级毛片成人免费看免费不卡| 污网站在线观看免费| 久热这里只有精品视频6| 美女被羞羞网站免费下载| 2021韩国三级理论电影网站| 久草福利资源站| 精品无人区一区二区三区a| 动漫美女吸乳羞羞动漫| 四虎精品成人免费观看|