整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
T之家 3 月 25 日消息，在瀏覽器互通項(xiàng)目 Interop 2023 的倡議下，目前業(yè)界主流瀏覽器都開始統(tǒng)一垂直表單控件支持。近日蘋果公司便在 iOS / iPad OS 17.4 及 macOS 14.4 中為 Safari 瀏覽器添加了完整的垂直表單控件支持。
IT之家注：垂直表單控件主要用于呈現(xiàn)豎排文字，雖然此前 CSS 已經(jīng)在書寫模式屬性中添加了豎排文字的支持，不過(guò)許多瀏覽器對(duì)表單控件 vertical-lr 和 vertical-rl 值都采用不同的標(biāo)準(zhǔn)，因此在先前的 Interop 2023 會(huì)議中，各廠商一致決定實(shí)現(xiàn)統(tǒng)一的垂直表單控件支持。
▲ 豎排文字示例在布局方面，目前 WebKit 中的表單控件大量使用自定義布局代碼，以在不同的環(huán)境和條件下保持一致和功能性，但此類布局代碼主要基于橫排模式設(shè)計(jì)，在豎排模式下會(huì)出現(xiàn)問題。
開發(fā)團(tuán)隊(duì)在 Safari 17.4 版本中改進(jìn)了相關(guān)代碼，在代碼計(jì)算邏輯寬度時(shí)會(huì)同時(shí)考慮豎排模式，同時(shí)也改進(jìn)了自定義基線調(diào)整邏輯功能，使復(fù)選框和單選按鈕等控件能與豎排文字相搭配。
開發(fā)人員重點(diǎn)談到了 macOS 平臺(tái) Safari 瀏覽器的改進(jìn)，由于 macOS 本身不支持豎排模式，例如 <progress> 等控制元件便無(wú)法直接在豎排模式下渲染，因此在 Safari 17.4 版本中，WebKit 會(huì)直接旋轉(zhuǎn)這些控件來(lái)支持豎排渲染。
不過(guò)有些擁有陰影的控件（例如 <select> ）無(wú)法單純通過(guò)旋轉(zhuǎn)來(lái)契合豎排模式，在遇到此類特定控件時(shí)，WebKit 便會(huì)為相關(guān)控件使用“特別的渲染邏輯”，從而兼容豎排渲染模式。
本篇文章主要給大家介紹一下如何使用html+css完成二級(jí)橫向以及豎向菜單導(dǎo)航制作；菜單導(dǎo)航是網(wǎng)站建設(shè)中最常用的一塊了，基本每個(gè)網(wǎng)站內(nèi)都會(huì)有個(gè)導(dǎo)航菜單，用鼠標(biāo)劃過(guò)還可以有下拉子菜單。
由上圖我們可以看出，該圖包含一個(gè)橫向?qū)Ш綏l，然后鼠標(biāo)經(jīng)過(guò)橫向?qū)Ш綏l之后，子導(dǎo)航顯示出來(lái)。
我們這里主要用到的知識(shí)點(diǎn)就是列表標(biāo)簽（ul、dl）的使用、浮動(dòng)（float）的使用、絕對(duì)定位（absolute）及鼠標(biāo)經(jīng)過(guò)（hover）的效果。
1、列表標(biāo)簽ul、dl（我們使用ul、dl來(lái)創(chuàng)建同類型的導(dǎo)航元素內(nèi)容，通過(guò)設(shè)置css樣式來(lái)達(dá)到圖片所示效果）；
2、浮動(dòng)元素float（每個(gè)導(dǎo)航元素我們需要使用float:left;讓其左對(duì)齊，這里涉及到了我們之前講解的如何清除浮動(dòng)的影響）；
3、絕對(duì)定位absolute（對(duì)于子導(dǎo)航我們要使用絕對(duì)定位來(lái)讓其浮動(dòng)在上級(jí)有定位元素的下方，不占據(jù)元素空間）
4、鼠標(biāo)經(jīng)過(guò)hover（使用css的鼠標(biāo)經(jīng)過(guò)元素（hover）效果，配合display的none（隱藏）和block（顯示）來(lái)實(shí)現(xiàn)子菜單的顯示與隱藏）
具體的實(shí)現(xiàn)html代碼以及css代碼就如下圖所示：
還有一個(gè)縱向菜單導(dǎo)航原理跟橫向的類似，只需簡(jiǎn)單調(diào)整一下css代碼即可。
html代碼跟橫向一樣，這里就不再貼圖，具體的實(shí)現(xiàn)圖片效果以及css代碼就如下圖所示：
好了，本篇文章就給大家說(shuō)到這里，大家自己動(dòng)手寫一下看能不能寫出一樣的頁(yè)面效果出來(lái)，也可以找一些類似的頁(yè)面自己練習(xí)一下，有需要源碼的可以直接私信我即可。
每日金句：每天收獲小進(jìn)步，積累起來(lái)就是大進(jìn)步；每天收獲小幸福，積攢起來(lái)便成大幸福。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。
由于漢字的特殊性，在css網(wǎng)頁(yè)布局中，中文排版有別于英文排版。排版是一個(gè)麻煩的問題，小編認(rèn)為，作為一個(gè)優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)師和網(wǎng)頁(yè)制作人員，掌握一些簡(jiǎn)單的中文排版技巧是不可或缺的，所以今天特意總結(jié)了幾個(gè)簡(jiǎn)單實(shí)用的技巧，希望對(duì)大家有所幫助。
Web前端教程
一、如何設(shè)定文字字體、顏色、大小等
font-style設(shè)定斜體，比如font-style:italic
font-weight設(shè)定文字粗細(xì)，比如font-weight:bold
font-size設(shè)定文字大小，比如font-size:12px
line-height設(shè)定行距，比如line-height:150%
color設(shè)定文字顏色，注意不是font-color喔，比如color:red
font-family設(shè)定字體，比如font-family:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋體,sans-serif
二、使用margin，text-align 控制段落
中文段落使用p標(biāo)簽，左右、段前段后的空白，都可以通過(guò)margin來(lái)控制。
比如
p{
margin:18px 6px 6px 18px;/*分別是上、右、下、左，十二點(diǎn)開始的順時(shí)針方向*/
}
而text-align則用于文字的對(duì)齊方式。
比如
p{
text-align:center;/*居中對(duì)齊*/
}
除了居中對(duì)齊之外,對(duì)齊方式還有左對(duì)齊、右對(duì)齊和兩端對(duì)齊，對(duì)應(yīng)的屬性值分別為left、right、justify。
提示：由于默認(rèn)的margin值會(huì)導(dǎo)致頁(yè)面排版出現(xiàn)問題，特別是ul、ol、p、dt、dd等標(biāo)簽。小編的解決之道就是把所有標(biāo)簽的margin值定義為0。
三、豎排文字—使用writing-mode
writing-mode屬性有兩個(gè)值lr-tb和tb-rl，前者是默認(rèn)的左-右、上-下，后者是上-下、右-左。
寫法如
p{
writing-mode:tb-rl;
}
四、使用list-style美化列表
如果我們的排版涉及到列表，不妨考慮為它添加些項(xiàng)目符號(hào)進(jìn)行美化。
在CSS里，項(xiàng)目符號(hào)包括disc（實(shí)心圓點(diǎn)）、circle（空心圓圈）、square（實(shí)心方塊）、decimal（阿拉伯?dāng)?shù)字）、lower-roman（小寫羅馬數(shù)字）、upper-roman（大寫羅馬數(shù)字）、lower-alpha（小寫英文字母）、upper-alpha（大寫英文字母）、none（無(wú)）。
嘿嘿！我們可用的項(xiàng)目符號(hào)數(shù)量不少喔，但美中不足的是我們不能為它們?cè)O(shè)定大小，也不能設(shè)定垂直方向上的對(duì)齊。
如果我們想設(shè)定一個(gè)列表的項(xiàng)目符號(hào)為方塊，可以這樣寫：
li{
list-style:square;
}
小編在這里提醒大家一下：當(dāng)一個(gè)項(xiàng)目列表的左外邊距設(shè)為零的時(shí)候，list-style-position:outside的項(xiàng)目符號(hào)不會(huì)顯示。
五、使用text-overflow 實(shí)現(xiàn)固定寬度漢字截?cái)?/strong>
用后臺(tái)語(yǔ)言可以對(duì)從數(shù)據(jù)庫(kù)里的字段內(nèi)容做截?cái)嗵幚恚绻雽?duì)列表應(yīng)用該樣式，我們可以這樣寫：
li{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
六、首字下沉
如果你想制作首字下沉效果，不妨考慮偽對(duì)象:first-letter并配合font-size、float屬性。
p:first-letter{
padding:6px;
font-size:32pt;
float:left;
}
七、首行縮進(jìn)—使用text-indent
text-indent可以使得容器內(nèi)首行縮進(jìn)一定單位。比如中文段落一般每段前空兩個(gè)漢字。
可以這么寫
p{
text-indent:2em;/*em是相對(duì)單位，2em即現(xiàn)在一個(gè)字大小的兩倍*/
}
注意：如果font-size是12px的話，那么text-indent:2em則代表縮進(jìn)24px。
八、固定寬度漢字（詞）折行—使用word-break
在排版的時(shí)候，你是否為一個(gè)詞組，其中一個(gè)字出現(xiàn)在上面而另一個(gè)字折斷到下一行去而發(fā)愁呢？不用愁，這時(shí)使用word-break就可以輕松解決問題了。
九、關(guān)于漢字注音—使用ruby標(biāo)簽和ruby-align屬性
最后小編向大家介紹一下ruby標(biāo)簽和ruby-align屬性 。這是一個(gè)比較冷門的技巧，可能平時(shí)使用不多，但小編覺得不妨提供給大家預(yù)防不時(shí)之需。
如果我們想為漢字注音就可以這樣寫
<ruby>注音<rt style="font-size:11px;">zhuyin</rt></ruby>
然后通過(guò)ruby-align設(shè)置其對(duì)齊方式。
以上就是今日整理的“Web前端教程：簡(jiǎn)單實(shí)用的CSS網(wǎng)頁(yè)布局中文排版技巧”一文，希望為正在學(xué)習(xí)Web前端的同學(xué)提供參考。你記住并理解了嗎？以后酷仔每日均會(huì)提供MySQL、Python及Web相關(guān)的教程及習(xí)題，趕快學(xué)習(xí)起來(lái)吧。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
