CSS简易导航列表样式
极其简单的导航列表
列表样子:
第一部分字体
全部商品分类 和下面的内容字体不一样是因为加了css样式。
一般常用的字体样式如下所述:
font-style:字体样式;italic斜体 oblique倾斜,实际上可以只使用italic。
font-weight:字体粗细;常用的bold。
font-size:字体大小;可以是指定数值比如12px,也可以是特定值(比如xx-small,x-small,small,medium,large,x-larger,xx-larger,每一个都比前一个大20%),也可以是百分比120%,或者倍数1.2em,也可以用比较级smaller,larger。
font-family:字体样式,浏览器显示的顺序为从左到右,一旦有就选择第一个有的显示,没有的话就下一个,如此继续。
字体样式可以进行简写。
简写的顺序为:
font:
1. font-style
2. (font-variant(不常用)其中small-caps属性会显示小型大写字母的字体)
3. font-weight
4. font-size/(font-line-height(不常用,行高,可以自行设定或者百分比))
5. font-family
比如font:italic bold 20px "shuimo";
中间使用空格隔开。
一个好方法:可以将body的font-size设置成small或者medium,然后其他的字体属性使用百分比或者倍数标识,这样的话比较容易协调。
CSS样式中处理字体的常见问题
1.css文件中设置的中文字体类型不起作用,怎么解决?
css文件编码重新设置为utf-8即可,总之要与HTML文件相一致。
2.如果页面中既有中文又有英文,怎么修饰字体类型?
font-family:cursive,"微软雅黑";
3.如果把中文字体类型写在英文字体类型之前,会出现怎么样的效果?
会导致英文字体使用中文字体样式
4.如果一些电脑上没有设计的字体,比如没有“微软雅黑”,怎么办?
可以增加字体样式类型,如果浏览器发现没有“微软雅黑”这个字体,会自动往下一个字体类型,如“黑体”,如果都没有则使用默认字体来显示。
font-family:"微软雅黑" "黑体" "隶书";
5.如何增加自己的字体?
- 找到一个自己想要的字体;
- 确保有所需字体的所有格式,格式有:.ttf .eot .otf .svg .woff .woff2; 一般网上可能只有ttf格式的字体,需要通过转换,转换网站(我目前使用的):https://www.fontke.com/tool/convfont/;
- 将你的字体文件放到web上(web服务器上);
- 在css中增加@font-face属性:
@font-face{font-family: "shuimo";src: url("../../字体/我字酷默陌写意水墨体.ttf"),url("../../字体/zhongwenshuimo.eot"),url("../../字体/zhongwenshuimo.otf"),url("../../字体/zhongwenshuimo.svg"),url("../../字体/zhongwenshuimo.woff"),url("../../字体/zhongwenshuimo.woff2");
}
5.用这个字体
p{font-family: "shuimo";
}
第二部分文本
一般常用的字体样式如下所述:
color不多说了
颜色使用方式:
1.直接表达:red;
2.使用16进制:#ff0000;
3.使用rgb:rgba(255,0,0,1) 范围0-255,a为透明度,范围0-1;
上面透明度为1,下面透明度为0.5;
text-align:left左对齐 center居中 right右居中
text-indent:首行缩进 可以说具体数值,可以说%(对于父元素来说)可以说使用em,如1em,一个字高的长度。
text-decoration:是对文本进行修饰,比如下划线underline 文本中穿了一条线line-through 上划线overline 什么都没有none
letter-spacing:字符间距,使用具体数值
word-spacing:词间距,使用具体数值(对中文无效)
第三部分背景
css中对背景的美化一般常用的如下:
background-color:随第二部分颜色所述。
background-image:url(“图片路径地址”)。
background-repeat:repeat 重复平铺(为默认值) no-repeat没有重复平铺 repeat-x在水平方向平铺 repeat-y在垂直方向平铺。一般在设置背景图片的时候设置。
background-position:定位,一般有两个值,左右,上下。
简写:
background后面的样式类型可以随意顺序。
第四部分列表
css中对列表的美化一般常用的如下:
list-style-type:列表序号类型
list-style-image:序号改成图像
list-style-position:inside outside 序号位置
简化的话也是直接list-style:type position image;
<ol id="inside"><li>列表项1</li><li>列表项2</li></ol><ol id="outside"><li>列表项1</li><li>列表项2</li></ol>
ol{list-style-type: lower-alpha;list-style-image: url("../images/arrow-right.gif")
}
li
{border: 1px solid black;
}
#inside{list-style-position: inside;
}
#outside{list-style-position: outside;
}
效果如下:
通过上述的CSS 样式可以做出最上面的简易导航列表。
2017年06月24日更新以下内容:
在平常制作网页是,常使用列表来导航和展示,其中有一些常用的CSS样式。
首先是最常用来排列元素的顺序的属性,
float:浮动,使元素像船一样浮动在底下的元素上。
属性值 | 描述 |
---|---|
left | 元素向左浮动 |
right | 元素向左浮动 |
none | 默认值,元素不浮动 |
说到float属性就不得不说clear属性了,如果元素上面不想有浮动的元素怎么办,这时候使用clear属性。
clear:指定段落的左侧或右侧不允许浮动的元素
属性值 | 描述 |
---|---|
left | 在左侧不允许浮动元素 |
right | 在右侧不允许浮动元素 |
both | 在左右两侧均不允许浮动元素 |
none | 默认值,允许浮动元素 |
这里有个问题:使用浮动后,子容器超出父容器的范围,或者说全部子元素都浮动后,底下的父元素没有子元素后,不被扩充,导致只有一点本身的大小,怎么办?
第一种方法:在子元素下面增加一个<div>
,加样式clear:both;
,清除浮动,就可以吧父元素的高度拉下来。
第二种方法:在父容器加入样式overflow:hidden;
。
注意:当子元素有定位的时候,只能使用第一种方法来使父容器自适应子容器的宽高。
上面提到了overflow属性。
overflow:指定如果内容溢出一个元素的框,会发生什么
常用属性值 | 描述 |
---|---|
visible | 默认值,内容不会被修剪,会呈现在盒子外面 |
hidden | 内容会被修剪,并且其余内容是不可见的 |
scroll | 内容会被修剪,但浏览器会显示滚动条以便查看内容 |
auto | 如果内容会被修剪,则浏览器会显示滚动条以便查看内容 |
上面还提到了position属性。
position:定位,一旦定位后会生成一个块级框,不论该元素本身是什么类型。
常用属性值 | 描述 |
---|---|
static | 默认值 |
relative | 生成相对定位的元素,相对于其正常位置进行定位 |
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 |
fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位 |
其中元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
如果两个元素叠在一起,想让后面的显示在前面,一般轮播图基本都会使用z-index这个属性。
z-index:调整元素定位时重叠层的上下位置
–z-index属性值:整数,默认值为0
–设置了position属性时,z-index属性可以设置各元素之间的重叠高低关系
–z-index值大的层位于值小的层上方
本博客仅用于记录web前端学习情况
CSS简易导航列表样式相关推荐
- CSS Ul(列表样式)
CSS Ul(列表样式) CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 一.列表 在HTML中,有两种类型的列表: 无序列表 - 列表 ...
- css修改导航条样式
css修改导航条样式 近期由于工作需要要修改table表格导航条样式. 本人特整理出相关代码,以及最后效果,供各位小伙伴参考. 具体代码如下: .xp-table-content ::-webkit- ...
- html和css实现导航栏样式
前言 一直以来,都不是很重视html和css,最近研究了下html和css实现下拉导航栏的方式,发现写出来很乱,于是好好的研究了一下,终于能够以比较简洁的方式写出来了. 预览效果 代码部分: html ...
- css列表大全,CSS中li列表样式汇总大全,全实例展示
CSS中 列表样式li {list-style-type:符号名称} css中用list-style-type指定列表(lists)前面符号,如下: li {list-style-type:符号名称} ...
- Css中设置列表项目符号属性,CSS如何设置列表样式属性,分享
列表样式属性 在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...
- 如何使用 CSS 自定义无序列表样式
大家好,我是前端西瓜哥. 前段时间实现了个自定义无序列表样式,踩了一些坑,和大家说说. 设计师说我们这个,列表项样式要优化一下,太丑了,这个原点要大一点. 默认的无序列表样式是这样的. <sty ...
- CSS中的列表样式与表格样式
1. 在CSS中我们可以通过添加属性来对列表的样式进行修改. 2.表格样式:我们可以在table标签中使用border属性,cellspacing属性和cellspaci ...
- css+div导航条样式
用双竖线做的效果 <head> <meta http-equiv="Content-Type" content="text/html; charset= ...
- css 无序列表横排列,CSS:无序列表样式
CSS按优先级和标识符工作.要定位页面上的所有H2元素,您将声明 h2 { color: #00FF00; } 但是,您也可以获得更具体的内容,并且仅在DIV中定位H2元素,例如: div h2 { ...
- html根据菜单角色配置菜单代码,CSS设置列表样式和创建导航菜单实现代码
一.设置列表的符号 list-style-type: 属性://设置列表样式 list-style-type: none; //清楚样式 属性有很多可以自己去试:circle,disc,decimal ...
最新文章
- 文件夹浏览(SHBrowseForFolder)
- jBPM 流程设计器和查看【包括Web形式】的总结
- 【Linux指标】内存篇
- 5、员工上班时间的问题 - CEO之公司管理经验谈
- IPC$连接常见问答
- “双击Pycharm无响应”解决方案
- python 画三角函数_用Python计算三角函数之acos()方法的使用
- Mac OS 文件、文件夹重命名的方法
- 【PostgreSQL-9.6.3】函数(1)--数值型函数
- hdu 4313 Matrix 并查集 多校联合赛(二) 第四题
- dopod566使用小参考
- MFC控件学习:按钮
- 会员(用户)数据化运营——分析模型
- 异数OS 织梦师-云(五)-- 容器服务化,绿色拯救未来。
- rs232 485 ttl区别
- DFI(Deep/DynamicFlow Inspection,深度/动态流检测)
- win10在哪找计算机配置,电脑教程:windows10的设置在哪
- 单片机项目:8个发光二极管从上至下间隔一秒流动,其中每个管亮500ms,500ms,亮时蜂鸣器响,灭时蜂鸣器关闭,一直重复下去
- vue版本的仿京东放大镜代码还有原生js版本的。(组件封装
- 按键精灵批量递增保存图片脚本
热门文章
- ES6阮一峰读书笔记第三章字符串的拓展
- win7字体安装_PR CC 下载和安装教程
- 计算机联锁图册计算公式,计算机联锁图册认识文档
- 沟通CTBS物流行业远程接入解决方案
- 简单的求三角函数sin,cos的图像
- STC8G七彩数字时钟、GPIO设置、DS1302使用、热敏电阻测温、SM5166P和MBI5024控制数码管显示
- 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个会动的扔垃圾到垃圾桶动画效果~适合初学者~超简单~ |前端开发 it入门
- 分享一个linux下的steam的rpm安装包的链接
- 学会QT从这里开始——教你快速学会QT
- java 聊天室系统实训总结_关于JAVA聊天室编写的总结