App下載

html橫向?qū)Ш綑谠趺醋?？橫向?qū)Ш綏l代碼實例

猿友 2021-03-11 10:53:28 瀏覽數(shù) (24697)
反饋

有不少小伙伴在剛學(xué)習(xí) html 的時候都會遇到這樣一個問題：html 橫向?qū)Ш綑谠趺醋觯拷裉霿3Cschool小編就為大家分享一下簡單的橫向?qū)Ш綏l代碼，相信會對大家有所幫助。

html 橫向?qū)Ш綑谝话阌脙煞N方法來制作：第一種，我們使用塊狀結(jié)構(gòu)結(jié)合行內(nèi)結(jié)構(gòu)來制作。第二種，我們使用?float?屬性來制作。由于第一種比較常用，一下就以第一種方式來介紹。

首先大家要明確一下塊狀元素與行內(nèi)結(jié)構(gòu)的不同之處：

（1）塊狀結(jié)構(gòu)可以自定義寬、高、邊框、邊距等屬性，而行內(nèi)元素只支持對行高、邊距進(jìn)行自定義，塊狀元素?fù)碛械耐膺吘唷⑸暇€邊距、邊框?qū)傩孕袃?nèi)元素都沒有。

（2）塊狀結(jié)構(gòu)不能與其他元素在同一行使用，而行內(nèi)元素支持在其他元素中嵌套使用。

橫向?qū)Ш綏l代碼實例：

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:140px;
font-weight:bold;
color:#FFFFFF;
background-color:#bebebe;
text-align:center;
padding:15px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#e6e6e6;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">W3Cschool</a></li>
<li><a href="#news">入門教程</a></li>
<li><a href="#contact">編程課程</a></li>
<li><a href="#about">編程實戰(zhàn)</a></li>
</ul>
</body>
</html>

橫向?qū)Ш綑谛Ч麍D - w3cschool

以上就是本文的全部內(nèi)容了，今天和大家分享了 html 橫向?qū)Ш綑谠趺醋?，有興趣的朋友可以使用我們W3Cschool的 html在線編輯器進(jìn)行調(diào)試非常方便！


HTML

0 人點贊