网页设计css标题属性 第1篇
对于网页来说，导航栏至关重要。导航栏能够快速跳转到另一个页面或当前页面的某个位置，实用性高，可以提高用户的体验感。
导航栏需要标准 HTML 作为基础。
导航栏基本上就是链接列表，因此使用
导航栏主要有垂直导航栏和水平导航栏。
使用CSS设置垂直导航栏：
1.创建一个无序列表，在每一个
2.每一项之前都会有一个默认的列表项标记。面对默认的列表项标记，我们可以使用list-style-type: none;消除。
3.使用 margin 和 padding 设置每一项的间隔和填充。
4.如果希望导航栏在不同状态有不同的效果，可以使用 伪类选择器 设置。
使用CSS设置水平导航栏：
网页布局有很多种方式，一般包含一下部分：头部区域、菜单导航区域、内容区域、底部区域。
头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo。
菜单导航条包含了一些链接，可以引导用户浏览其他页面。
内容区域一般有三种形式：
底部区域在网页的最下方，一般包含版权信息和联系方式等。
网页设计css标题属性 第2篇
在网页设计中，元素有了定位就可以更快更准地调整元素的位置。
元素其实是使用 top、bottom、left 和 right 属性定位的，前提是元素设置了 position 属性，否则，top、bottom、left 和 right 将不起作用。
在CSS中，元素的定位类型主要分为五种：
HTML 元素默认情况下的定位方式为 static（静态）。
使用 static(默认)定位的元素根据页面的正常流进行定位，此时的元素不受 top、bottom、left 和 right 属性的影响。
将position 属性值设置为 relative 的元素相对于其正常位置定位，此时 top、bottom、left 和 right 属性将导致元素偏离其正常位置，以此达到布局的效果。
偏移前：
偏移后：
将position 属性值设置为 fixed 的元素相对于视口定位，这就意味着就算我们滚动页面，元素位置始终不变，通过top、bottom、left 和 right 属性确定元素在视口中的位置。
固定定位的实例：红框中的元素就使用了固定定位。
将position 属性值设置为 absolute 的元素相对于已经定位的父级元素定位，如果元素已经定位的父级元素，它将相对于HTML文档主体(body)定位，并且随着页面一起滚动。
实例：红色框相当于绿色框定位
将position 属性值设置为 sticky 的元素相对于用户的滚动位置定位，粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置。
淘宝官网的搜索框便使用了 sticky 定位：
元素在定位时，可以与其他元素重叠。
z-index 属性决定了元素的堆叠顺序。
z-index 属性值最大的元素堆在最上面。
网页设计css标题属性 第3篇
常见块级元素：
div、form、h1·h6、hr、p、table、ul等
常见内联（行内）元素：
a、b、em、i、span、strong等
行内块级元素（特点：不换行、能够识别宽高）：
button、img、input
又叫级联样式表，简称样式表，使网页变得美观一致
语法： 在头部添加
内联（行内）样式、内部样式、外部样式（引入css文件）
外部样式需要在头部引入
可以与任何元素匹配，优先级最低，一般做样式初始化
id属性在style中是通过#来索引的，id是唯一的，不能重复
作用：提取共同的样式，减少重复的代码
css中，权重用数字衡量
元素选择器权重为：1
class权重为：10
id权重为：100
内联（行内）样式权重为：1000
同级别下按照代码执行顺序，后执行的生效！
最小字体为12px
值 bold,bolder,lighter,100-900定义由细到粗400等于默认，700等于bold
normal默认值/italic定义斜体字
_微软雅黑_
repeat ： 默认值 repeat-x ：只向竖屏方向平铺 repeat-y ：只向垂直方向平铺 no-repeat ：不平铺
默认值：0% 0% left top左上角 left center 左 中 left bottom左下 right top 右上角
right center 右中 right bottom右下 center top 中上 center center中中 center bottom 中下 x% y% 第一个水平位置，第二个垂直位置，左上角是0% 0%，右下角是100% 100%，如果只指定了一个值，其他值默认50%。 xpos ypos 单位是像素
设置图片的宽度和高度，第一个宽度值，第二个高度，如果只设置一个，第二个值auto
计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只设置一个，第二个值auto
保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小，切割图片使用率最高。
保持图片纵横比并将图片缩放成完全覆盖背景区域的最大大小 ，不切割图片
text-align： left :文本居左排序，默认值 right:把文本排列到右边 center:把文本排列到中间
text-decoration: underline：定义下划线 overline：定义上划线 line-through：定义删除线
text-transform： captialize：定义每个单词开头大写 uppercase：全部字母大写 lowercase：全部字母小写
text-indent: 参数为：负数到整数px
第一个参数表格线的粗细，第二个参数是线的类型，第三个参数是线的颜色！
设置表格的边框是否被折叠成一个单一的边框隔开。
collapse折叠效果
表格宽度和高度 属性为数字+px
设置水平对齐方式
td{text-align:right}一般给td加left、center、right
垂直对齐方式 top居上 center居中 bott0m居下
可以不用上面的文字对齐方式，非常方便
padding : 15px;
th元素的文本和背景颜色
background-color:#颜色；背景颜色设置 color：#颜色； 设置表格内字体颜色
如果是一个值，那么久上下左右都是那么大 如果是两个值，第一个值是上下，第二个值是左右边框距离
在外边距里面，在内边距外边， 第一个值是边框的粗细，第二个值是边框线的类型，第三个值是颜色 border: 5px solid blue;
还可以用
这种设置，分别设置边距的上下左右。
外边距margin、边框：border、内边距：padding、实际内容：content
主要针对于一个大盒子内的很多小盒子如何摆放 弹性盒子模型由弹性容器和弹性子元素组成。 弹性容器通过设置display属性的值为flex将其定义为弹性容器 弹性容器内包含了一个或多个弹性子元素 默认弹性盒子里的内容是横向摆放 display: flex;//开启弹性盒子
指定弹性子元素在父容器中的位置 row:横向从左到右排列，默认的排列方式 row-reverse：反转横向排列，使用率低 column:纵向排列 column-reverse：反向纵向排列，使用率低
垂直方向上盒子摆放的位置：分为上中下 flex-start:弹性项目向行头紧挨着填充。默认值 flex-end:弹性项目向行尾紧挨着天秤宫。 center：弹性项目居中紧挨着填充。
水平方向上子盒子的摆放对齐方式，也是分为左中右三个，与上面一直 flex-start:默认值 flex-end center
子元素上的属性：
两种写法都可以 根据台女星盒子元素所设置的扩展因子作为比率来分配剩余空间，默认值位0，即如果存在剩余空间，也不放大。 里面填数字，设置这个属性之后，宽度就不再生效了，这个属性优先级大于宽度
标准流会出现的问题：高矮不齐，底边对齐、空格折叠、元素无间隙
使一个元素脱离标准文档流有三种方式 1、浮动、2、绝对定位、3、固定定位
float属性定义元素在哪个方向浮动，任何元素都可以浮动 浮动的原理：
浮动以后使元素脱离了文档流 浮动只有左右非能动，没有上下浮动
float:left/right
浮动副作用：浮动元素会造成父元素高度塌陷 后续元素会受到影响