T之家 3 月 25 日消息,在浏览器互通项目 Interop 2023 的倡议下,目前业界主流浏览器都开始统一垂直表单控件支持。近日苹果公司便在 iOS / iPad OS 17.4 及 macOS 14.4 中为 Safari 浏览器添加了完整的垂直表单控件支持。
IT之家注:垂直表单控件主要用于呈现竖排文字,虽然此前 CSS 已经在书写模式属性中添加了竖排文字的支持,不过许多浏览器对表单控件 vertical-lr 和 vertical-rl 值都采用不同的标准,因此在先前的 Interop 2023 会议中,各厂商一致决定实现统一的垂直表单控件支持。
▲ 竖排文字示例在布局方面,目前 WebKit 中的表单控件大量使用自定义布局代码,以在不同的环境和条件下保持一致和功能性,但此类布局代码主要基于横排模式设计,在竖排模式下会出现问题。
开发团队在 Safari 17.4 版本中改进了相关代码,在代码计算逻辑宽度时会同时考虑竖排模式,同时也改进了自定义基线调整逻辑功能,使复选框和单选按钮等控件能与竖排文字相搭配。
开发人员重点谈到了 macOS 平台 Safari 浏览器的改进,由于 macOS 本身不支持竖排模式,例如 <progress> 等控制元件便无法直接在竖排模式下渲染,因此在 Safari 17.4 版本中,WebKit 会直接旋转这些控件来支持竖排渲染。
不过有些拥有阴影的控件(例如 <select> )无法单纯通过旋转来契合竖排模式,在遇到此类特定控件时,WebKit 便会为相关控件使用“特别的渲染逻辑”,从而兼容竖排渲染模式。
本篇文章主要给大家介绍一下如何使用html+css完成二级横向以及竖向菜单导航制作;菜单导航是网站建设中最常用的一块了,基本每个网站内都会有个导航菜单,用鼠标划过还可以有下拉子菜单。
由上图我们可以看出,该图包含一个横向导航条,然后鼠标经过横向导航条之后,子导航显示出来。
我们这里主要用到的知识点就是列表标签(ul、dl)的使用、浮动(float)的使用、绝对定位(absolute)及鼠标经过(hover)的效果。
1、列表标签ul、dl(我们使用ul、dl来创建同类型的导航元素内容,通过设置css样式来达到图片所示效果);
2、浮动元素float(每个导航元素我们需要使用float:left;让其左对齐,这里涉及到了我们之前讲解的如何清除浮动的影响);
3、绝对定位absolute(对于子导航我们要使用绝对定位来让其浮动在上级有定位元素的下方,不占据元素空间)
4、鼠标经过hover(使用css的鼠标经过元素(hover)效果,配合display的none(隐藏)和block(显示)来实现子菜单的显示与隐藏)
具体的实现html代码以及css代码就如下图所示:
还有一个纵向菜单导航原理跟横向的类似,只需简单调整一下css代码即可。
html代码跟横向一样,这里就不再贴图,具体的实现图片效果以及css代码就如下图所示:
好了,本篇文章就给大家说到这里,大家自己动手写一下看能不能写出一样的页面效果出来,也可以找一些类似的页面自己练习一下,有需要源码的可以直接私信我即可。
每日金句:每天收获小进步,积累起来就是大进步;每天收获小幸福,积攒起来便成大幸福。喜欢我的文章的小伙伴记得关注一下哦,每天将为你更新最新知识。
由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版。排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单实用的技巧,希望对大家有所帮助。
Web前端教程
一、如何设定文字字体、颜色、大小等
font-style设定斜体,比如font-style:italic
font-weight设定文字粗细,比如font-weight:bold
font-size设定文字大小,比如font-size:12px
line-height设定行距,比如line-height:150%
color设定文字颜色,注意不是font-color喔,比如color:red
font-family设定字体,比如font-family:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif
二、使用margin,text-align 控制段落
中文段落使用p标签,左右、段前段后的空白,都可以通过margin来控制。
比如
p{
margin:18px 6px 6px 18px;/*分别是上、右、下、左,十二点开始的顺时针方向*/
}
而text-align则用于文字的对齐方式。
比如
p{
text-align:center;/*居中对齐*/
}
除了居中对齐之外,对齐方式还有左对齐、右对齐和两端对齐,对应的属性值分别为left、right、justify。
提示:由于默认的margin值会导致页面排版出现问题,特别是ul、ol、p、dt、dd等标签。小编的解决之道就是把所有标签的margin值定义为0。
三、竖排文字—使用writing-mode
writing-mode属性有两个值lr-tb和tb-rl,前者是默认的左-右、上-下,后者是上-下、右-左。
写法如
p{
writing-mode:tb-rl;
}
四、使用list-style美化列表
如果我们的排版涉及到列表,不妨考虑为它添加些项目符号进行美化。
在CSS里,项目符号包括disc(实心圆点)、circle(空心圆圈)、square(实心方块)、decimal(阿拉伯数字)、lower-roman(小写罗马数字)、upper-roman(大写罗马数字)、lower-alpha(小写英文字母)、upper-alpha(大写英文字母)、none(无)。
嘿嘿!我们可用的项目符号数量不少喔,但美中不足的是我们不能为它们设定大小,也不能设定垂直方向上的对齐。
如果我们想设定一个列表的项目符号为方块,可以这样写:
li{
list-style:square;
}
小编在这里提醒大家一下:当一个项目列表的左外边距设为零的时候,list-style-position:outside的项目符号不会显示。
五、使用text-overflow 实现固定宽度汉字截断
用后台语言可以对从数据库里的字段内容做截断处理,如果想对列表应用该样式,我们可以这样写:
li{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
六、首字下沉
如果你想制作首字下沉效果,不妨考虑伪对象:first-letter并配合font-size、float属性。
p:first-letter{
padding:6px;
font-size:32pt;
float:left;
}
七、首行缩进—使用text-indent
text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。
可以这么写
p{
text-indent:2em;/*em是相对单位,2em即现在一个字大小的两倍*/
}
注意:如果font-size是12px的话,那么text-indent:2em则代表缩进24px。
八、固定宽度汉字(词)折行—使用word-break
在排版的时候,你是否为一个词组,其中一个字出现在上面而另一个字折断到下一行去而发愁呢?不用愁,这时使用word-break就可以轻松解决问题了。
九、关于汉字注音—使用ruby标签和ruby-align属性
最后小编向大家介绍一下ruby标签和ruby-align属性 。这是一个比较冷门的技巧,可能平时使用不多,但小编觉得不妨提供给大家预防不时之需。
如果我们想为汉字注音就可以这样写
<ruby>注音<rt style="font-size:11px;">zhuyin</rt></ruby>
然后通过ruby-align设置其对齐方式。
以上就是今日整理的“Web前端教程:简单实用的CSS网页布局中文排版技巧”一文,希望为正在学习Web前端的同学提供参考。你记住并理解了吗?以后酷仔每日均会提供MySQL、Python及Web相关的教程及习题,赶快学习起来吧。
*请认真填写需求信息,我们会在24小时内与您取得联系。