CSS简易导航列表样式

最新推荐文章于 2023-02-04 17:21:55 发布

WiniceS

最新推荐文章于 2023-02-04 17:21:55 发布

阅读量1.7k

点赞数 1

分类专栏： web前端学习记录文章标签： CSS基本常用样式

本文链接：https://blog.csdn.net/WiniceS/article/details/72911486

版权

web前端学习记录专栏收录该内容

10 篇文章 0 订阅

订阅专栏

极其简单的导航列表

列表样子：
导航列表

第一部分字体

全部商品分类 和下面的内容字体不一样是因为加了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前端学习情况