phpcms 手机网站模板,网站建设功能介绍,网站建设程序结构,三五互联网站建设一、元素选择器
元素选择器#xff1a;利用标签名称。p,h1-h6......
行内样式#xff08;内联样式#xff09;#xff1a;例如p stylecolor:red;font-size:50px
id选择器#xff1a;针对某一个特定的标签来使用。以#定义。
class#xff08;类利用标签名称。p,h1-h6......
行内样式内联样式例如p stylecolor:red;font-size:50px
id选择器针对某一个特定的标签来使用。以#定义。
class类选择器可以被多种标签使用同一个标签可以使用多个类选择器用空格隔开。
合并选择器选择器1,选择器2,.....{}
选择器优先级内联样式id选择器类选择器元素选择器
同优先级多次定义会执行覆盖最后定义的为最终效果
①后代选择器 A B{ }
例如 style ul li{ color: blue; } /style /head body ul li后面的后代标签都会生效/li li1/li div ol li也会生效/li /ol /div /ul /body ②子代选择器 AB{ }
例如上面的选择器则只有第一个包括的li起效后面div包括的是孙代会失效。
③相邻选择器 AB{ }
只有相邻的第一个元素生效只能是往下选择。
④通用选择器 A~B{ }
向下的所有元素都起效。
伪元素和伪类
伪元素和伪类的根据区别就是前者是创建出了一个新元素而后者是一个已存在但你不能直接看到的元素。
伪元素
伪元素本身不存在在DOM文档中它需要人为的去创建它。且就算你创建了伪元素它也只是逻辑上存在实际上也并不存在DOM文档中也就是说你无法使用JS去获取改变它。 伪类
伪类它存在于DOM文档中但如果你没有特别的去声明它你就看不到它。 二、属性 1、字体属性
(1)color颜色
四种形式
①color:red
②color:#ff0000 //十六进制形式(常用)
③color:rgb((255,0,0)
④color:rgba(255,0,0,.5) //第四个参数0透明 1不透明 0.5半透明
(2)font-weight 字体粗细
①bold 粗体字符
②bolder 更粗的字符
③lighter 更细的字符
④400-900 细到粗 400为默认 700等同bolder
(3)font-style 字体样式
①normal 默认值
②italic 斜体字
(4)font-family 字体效果
例如h3 stylefont-family: 黑体;黑体SimHei/h3
h3 stylefont-family: 微软雅黑体;Microsoft YaHei/h3默认 2、背景属性 (1) background-color 背景颜色
2background-image 背景图像
图像不够大会垂直和水平平铺
background-image:url();
3background-repeat 背景内容平铺方式
①repeat 默认
②repeat-x 水平方向平铺
③repeat-y 垂直方向平铺
④no-repeat 不平铺
默认情况例如 4background-size 背景图像大小
①background-size:200px 300px;
②background-size:100% 100%; //百分比方式
③background-size:cover;//完全覆盖容器放大裁剪
④background-size:contain;//缩放到对于容器合适即可自适应
5background-position 背景图像位置
①自行匹配left right top bottom center
例如 background-position:left top;//左上角
②百分比和像素方式
3、文本属性
1text-decoration 文本属性
①下划线underline
②上划线overline
③删除线line-through
(2)text-transform 文本大小写
①首字母大写captialize
②全部大写uppercase
③全部小写lowercase
(3)text-indent 首行文本缩进
text-indentpx
4、表格属性
1边框
①border属性 table,td{ border:1px solid black;//边框大小 边框线样式实线 边框线的颜色 } 添加collapse属性 折叠边框为单边框 table{ border-collapse:collapse; }ver 2表格大小width height
3表格文字对齐
水平对齐text-align(left or right or center)
垂直对齐vertical-align(top bottom center)
(4)表格填充 td{ padding:10px: }//控制边框与文本的距离 5、盒子属性
盒子模型阴影
属性设置 :
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow水平阴影的位置。可以使用负值表示阴影在元素左侧正值表示阴影在元素右侧0 表示没有水平阴影。
v-shadow垂直阴影的位置。可以使用负值表示阴影在元素上方正值表示阴影在元素下方0 表示没有垂直阴影。
blur模糊半径。可选值表示阴影的模糊程度。值越大阴影越模糊0 表示没有模糊。
spread阴影的扩展半径。可选值表示阴影的大小扩展。正值表示阴影扩展负值表示阴影收缩。
color阴影的颜色。可选值表示阴影的颜色可以是 CSS 颜色值
inset可选值用于设置是否为内阴影。如果存在 inset则表示是内阴影否则为外阴影。内阴影会出现在元素内部外阴影则出现在元素外部。
只有 前两个阴影 , 水平阴影 和 垂直阴影 必须写 , 后面的四个值可以省略 ;
三、CSS盒子模型
盒子模型的组成content内容、padding内边距、border边框、margin外边距
content(内容)
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 100px;height: 100px;background-color: cornflowerblue;padding: 50px;border: 20px solid burlywood;margin: 20px;}/style
/head
body
div classtestcontent
/div
效果 盒子模型又有两类标准盒模型和怪异盒模型两个盒模型可以通过box-sizing属性切换。
/* 标准盒模型 */
box-sizing: content-box;
/* 怪异盒模型 */
box-sizing: border-box;
① 标准盒模型
在标准盒模型中为盒子设置的width、height属性为content内容的宽度和高度因此盒子模型的总宽度和总高度为
总宽度 width 2 * padding 2 * border 2 * margin 总高度 height 2 * padding 2 * border 2 * margin ② 怪异盒模型 在怪异盒模型中盒子的width、height属性为content内容padding内边距border边框的宽度和高度因此盒子模型的总宽度和总高度为
总宽度 width 2*margin 总高度 height 2*margin
四、布局
1flex布局
display:flex 使用弹性盒子子元素默认水平排列
容器属性
1、flex-direction 指定子元素的位置
row横向从左到右也是默认方式
row-reverse反转横向排列靠右对齐最后一项排列在前面
column:纵向排列
column-reverse:反转纵向排列 style.test{width: 500px;height: 500px;background-color: bisque;}.box1{width: 100px;height: 100px;background-color: aquamarine;}.box2{width: 100px;height: 100px;background-color:blueviolet}.box3{width: 100px;height: 100px;background-color:yellowgreen}/style
/head
body
div classtestdiv classbox1/divdiv classbox2/divdiv classbox3/div
/div
/body
正常效果 使用弹性盒子 .test{ width: 500px; height: 500px; background-color: bisque; display: flex; } 其他效果感兴趣可以自行尝试
2、flex - wrap 子元素在主轴方向上超出容器空间时是否换行。
nowrap默认值不换行子元素可能会被压缩以适应容器。 wrap换行子元素在超出容器宽度主轴为水平方向时或高度主轴为垂直方向时时会换行排列。 wrap - reverse换行但新行的添加方向与 wrap 相反。
3、两种对齐方式
justify-content(垂直方向) align-items(水平方向),在父级元素上定义
①justify-content: 子元素沿X轴排列
justify-content: flex-star; 子元素从左向右排
justify-content: flex-end; 子元素水平靠右排列
justify-content: center; 子元素水平居中排列
justify-content: space-between; 子元素水平居中散开排列
justify-content: space-around; 第一个子元素靠左第二个子元素居中第三个子元素靠右排列
②.align-items: 子元素沿y轴排列
align-items: flex-start; 子元素垂直于父级盒子顶部排列
align-items: flex-end; 子元素垂直于父级盒子底部排列
align-items: center; 子元素垂直居中排列
align-items: baseline; 子元素以第一行文字为基准线进行排列
align-items: strech; 当某个子元素没有设置高度时会自动撑满子元素所在的那一列
4、设置子元素权重flex style.test{width: 500px;height: 500px;background-color: bisque;display: flex;}.box1{width: 100px;height: 100px;background-color: aquamarine;flex: 3}.box2{width: 100px;height: 100px;background-color:blueviolet;flex:2}.box3{width: 100px;height: 100px;background-color:yellowgreen;flex:1}/style 左侧固定宽度右侧自适应 bodydiv classbigdiv classsmall1/divdiv classsmall2/div/div
/body
style.big {width: 200px;height: 200px;background-color: blue;display: flex;}.small1 {width: 50px;background-color: rgb(237, 2, 45);}.small2 {background-color: rgb(2, 237, 131);flex: 1;}
/style 项目属性
1.order 设置子元素前后顺序
order默认值是0数值越小越靠前可以给负数。
2.flex-grow 设置子元素的放大比例
默认值为0
flex-grow属性定义项目的放大比例默认为0即如果存在剩余空间也不放大。
如果所有项目的flex-grow属性都为1则它们将等分剩余空间如果有的话。如果一个项目的flex-grow属性为2其他项目都为1则前者占据的剩余空间将比其他项多一倍。
3.flex-shrink 设置子元素的缩小比例 默认值为1。
flex-shrink属性定义了项目的缩小比例默认为1即如果空间不足该项目将缩小。适合移动端溢出出滚动条的效果前提是利用弹性布局写
如果所有项目的flex-shrink属性都为1当空间不足时都将等比例缩小。如果一个项目的flex-shrink属性为0其他项目都为1则空间不足时前者不缩小。
2position定位布局
常用三种值
relative:相对定位,相对于当前元素的当前位置进行定位。元素会在原本文档流的位置进行定位
absolute:绝对定位相对于最近已经定位的祖先元素进行定位如果不存在已经定位的祖先元素则相对于初始包含块进行定位。
fixed:固定定位相对于浏览器窗口进行定位元素会随着页面滚动而保持固定位置。
三种方式都用到四个偏移量top bottom left right
position:absolute .box1{ background-color: aqua; width: 800px; height: 400px; position: relative; left: 200px; } .box2{ background-color: rgb(255, 0, 251); width: 700px; height: 300px; } .box3{ width: 200px; height: 200px; background-color: blue; position: absolute; bottom: 10px; } 可以看出box3不是根据父元素box2进行定位而是相对于最近已经定位的祖先元素进行定位。
position:fixed .box1{ background-color: aqua; width: 800px; height: 400px; position: relative; left: 200px; } .box2{ width: 200px; height: 200px; background-color: blue; position: fixed; bottom: 10px; } 可以看出fiexd定位是根据body判定而不是根据父元素box1 并且进行缩放后始终是相对于浏览器窗口的。
3Grid布局
div classtesdiv classbox1/divdiv classbox2/divdiv classbox3/div
/div
/template
style langscss
.tes{width: 100%;height: 100vh;display: grid;grid-template-columns: 1fr 2fr 1fr;//列的宽度自定义为父元素的1:2:1.box1{height: 100px;background-color: aqua;}.box2{height: 100px;background-color: rgb(255, 196, 230);}.box3{height: 100px;background-color: rgb(210, 196, 255);}
}
/style 六、CSS3新属性
1.boder_radius属性 元素圆角
2.box-shadow属性边框阴影
box-shadowX轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 值描述
X轴偏移量必需。水平阴影的位置允许负值。 Y轴偏移量必需。垂直阴影的位置允许负值。 阴影模糊半径可选。模糊距离其值只能是正值如果值为0表示阴影没有模糊效果。 阴影扩展半径可选。阴影的尺寸。 阴影颜色可选。阴影的颜色。省略默认会黑色。 投影方式可选。设置为inset时为内部阴影方式若省略为外阴影方式。
九、字体图标
注册阿里巴巴字体库下载图标代码后放到你的项目目录下使用 网页内有使用说明 推荐使用symbol方式 居中方式大全经典三种
1
1、
style.big {width: 200px;height: 200px;background-color: blue;display: flex;justify-content: center;align-items: center;}.small {width: 100px;height: 100px;background-color: rgb(237, 2, 45);}
/style
2、
style.big {width: 200px;height: 200px;background-color: blue;display: flex;}.small {width: 100px;height: 100px;background-color: rgb(237, 2, 45);margin: auto;}
/style
3、
style.big {width: 200px;height: 200px;background-color: blue;position: relative;}.small {width: 100px;height: 100px;background-color: rgb(237, 2, 45);position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
/style
