建设银行的网站进不去怎么办,商业网站怎么建设,青岛网站建设 青岛博采网络,媒体邀约Python微信订餐小程序课程视频
https://edu.csdn.net/course/detail/36074
Python实战量化交易理财系统
https://edu.csdn.net/course/detail/35475
CSS层叠样式表
三大特性
层叠性#xff1a;相同的样式会覆盖
继承性#xff1a;属性可向下继承
优先级#xff1a;范…Python微信订餐小程序课程视频
https://edu.csdn.net/course/detail/36074
Python实战量化交易理财系统
https://edu.csdn.net/course/detail/35475
CSS层叠样式表
三大特性
层叠性相同的样式会覆盖
继承性属性可向下继承
优先级范围越小权重越高
选择器
基础选择器
标签选择器
1 body {
2 color:#fff;
3 }
类选择器
1 .people‐first {
2 color:green;
3 }
id选择器
1 #laowang {2 color:yello;
3 }
通配符选择器
* {
2 margin: 0 ;
3 padding: 0 ;
4 }
高级选择器
后代选择器
1 ul li {
2 list‐style;none;
3 }
子选择器
1 h3a {
2 line‐height:36px;
3 }
并集选择器
1 div,
2 p {
3 font‐size:14px;
4 }
伪类选择器
1 a::hover {
2 background‐color:springgreen;
3 }
a::link
a::visited
a::hover
a::active
input::focus
相邻兄弟选择器
h1 p {margin-top:50px
}
font属性
1 font‐style:italic;
2 font‐weight: 400 ;
3 font‐size:16px;
4 font‐family:Microsoft Yahei;
5 font:italic 400 16px Microsoft Yahei;
字体图标的下载与使用
text属性
1 color:pink;
2 text‐align:center;
3 text‐decoration:none;
4 text‐indent:2em;
5 line‐height:26px;
块元素
例如h p div ul li
独占一行宽 高 内外边距 可控宽度默认继承主要作为容器
行内元素
例如 a strong b em
一行可以是多个宽高无法设定默认宽度为自身宽度很内元素只能容纳文本或其他行内元素 注连接标签里不能放链接 注链接里可放块级元素但最好把a转换成块级元素安全 行内块元素
例如 img input td
可以一行多个有缝隙可以设置宽高宽度为默认元素显示模式转换
1 display:block;
2 display:inline;
3 display:inline‐block;
background背景
1 background‐color:transparent;
2 background‐img:url(./xx);
3 background‐repeat:repeat | no‐repeat | repeat‐x | repeat‐y;
4 background‐position:center center;
5 background‐attachment:scroll | fixed;
6 background:pink url(./) no‐repeat fixed center top;
1 background‐size:500px 200px;//cover等比完全覆盖contain等比宽高覆盖
精灵图的具体操作与使用
盒子模型 border or margin
1 border‐width:5px;
2 border‐style:solid; // dashed(虚线) dotted(点线)
3 border‐color:black;
4
5 border:5px solid black;
1 margin:0 auto;//可使盒子水平居中
2 margin‐left:‐1px;//用于消除紧挨着的边框
border-collapseborder-collapse: collapse;border collapse 属性设置表格的边框是否被合并为一个单一的边框还是象在标准的
HTML 中那样分开显示。
圆角边框
1 border‐radius:10px;
2 border‐radius:1px 2px 3px 4px;//右上角开始
3 border‐top‐left‐radius:...;
盒子阴影
1 box‐shadow: 10px 10px 5px ‐5px rgba(0,0,0,.3);
2 水平阴影 垂直阴影 [模糊 尺寸 颜色 外部或内部]
文字阴影
1 text‐shadow:10px 10px 5px rgba(0,0,0,.3);
float浮动
1 float:left;
浮动特性
脱离标准流一行显示顶部对齐具备行内块的特性
清除浮动
1 . 额外标签法
1 div
2 div盒子div
3 div classclearfixdiv
4 div
1 .clearfix {
2 clear: both;
3 }
2 . 父级添加overflow
1 div classclearfix
2 div盒子div
3 div
1 .clearfix {
2 overflow:hidden;
3 }
3 . :after伪元素
1 div classclearfix
2 div盒子div
3 div
1 .clearfix::after {
2 content: ;
3 display: block;
4 height: 0 ;
5 clear: both;
6 visibility: hidden;
7 }
8
9 .clearfix {
10 *zoom: 1 ;
11 }
4 . 双伪元素清楚浮动
1 div classclearfix
2 div盒子div
3 div
1 .clearfix:before,
2 .clearfix::after {
3 content: ;
4 display: table;
5 }
6
7 .clearfix::after {
8 clear: both;
9 }
10
11 .clearfix {
12 *zoom: 1 ;
13 }
定位
静态定位了解
1 position:static;
相对定位
1 position:relative;
绝对定位
1 position:absolute;
固定定位
1 position:fixed;
粘性定位了解
1 position:stycky;
边偏移
top
bottom
left
right
优先级
1 z‐index:2;
元素显示与隐藏
显示模式
1 display:block | inline | none ;
2 块级 行内 无
可视能力
1 visibility:inherit | visible | hidden;
2 继承 可视 隐藏
溢出部分
1 overflow:visible | hidden | scroll | auto;
2 不剪切,不加滚动条 隐藏 滚动条 自动
用户界面样式
鼠标样式 1 cursor:default; 1 cursor:pointer; 1 cursor:move; 1 cursor:text; 1 cursor:not‐allowed;
表单样式
1 input {
2 outline:none;
3 }
文本域样式
1 textarea {
2 resize:none;
3 }
对齐方式
1 vertical‐align:baseline | top | bottom | middle;
2 基线对齐 顶线 底线 中线
图片采用基线对齐后底部有白色缝隙
文字省略
单行文本溢出显示省略号必须满足三个条件
1 white‐space:nowrap;
2 overflow:hidden;
3 text‐overflow:ellipis;
CSS3新增特性
选择器
属性选择器
选择具有value的input
1 input[value]{}
选择valuetext的input
1 input[valuetext]{}
选择icon开头的div
1 div[class^icon]{}
选择data结尾的div
1 div[class$data]{}
选择含有iii的div
1 div[class*iii]{}
结构伪类选择器
1 :first‐child{}
2 :last‐child{}
3 :nth‐child(n){}//n可为数字 1 2 3 关键字even 偶数odd奇数
1 :first‐of‐type
2 :last‐of‐type
3 :nth‐of‐type(on)
伪元素选择器
1 div::before{
2 content;
3 }
4 div::after{
5 content;
6 }
C3盒子模型
1 box‐sizing:conten‐box;//传统盒子模型
2 box‐sizing:border‐box;//边框不占用大小而是挤压内容
滤镜
1 filter:blur(5px);//进行布尔模糊
其他
1 width:calc(100%‐800px);
过渡
1 transition:all 1s;//所选属性 花费时间 运动曲线 何时开始
转换
1 transform:translate(100px,‐50px);//纯移动保留源
2 transform:rotate(45deg);//顺时针旋转45°
3 transform:scale(2,2);//长和宽变为原来的 2 倍
4
5 transform:translate() rotate() scale();//简写
3D转换
1 transform‐style:flat | preserve;//开启3D空间默认不开启
2 prespective:500px;//开启透视 设置透视高度
3
4 transform:translate3d(x,y,x);//3d移动
动画
1 animation‐name:动画名称;
2 animation‐duration:3s;//动画时间
3 animation‐timing‐function:ease;//运动曲线
4 animation‐delay:5s;//五秒之后开始
5 animation‐iteration‐count:ifinite;//重复次数 无限
6 animation‐direction:alternate;//逆向
7 animation‐fill‐mode:forwards;//保持
8
9 animation:动画名称 动画时间 [速度曲线 何时开始 播放次数 是否反向 结束状态];
标准viewport视口设置
1 2 contentwidthdevice‐width,
3 initial‐scale1.0,
4 user‐scalableno,
5 maximum‐scale1.0,
6 minimum‐scale1.0
流式布局百分
宽度为百分比
flex布局
1 display:flex;
设置主轴方向
1 flex‐direction: row;
2 row‐reverse//右到左
3 column//上到下
4 column‐reverse//下到上
设置主轴的子元素排列方式
1 justify‐content:flex‐start;// 左对齐默认
2 flex‐end 右对齐
3 center 居中
4 space‐around 平均分配
5 space‐between 先两侧贴边然后平均分
设置子元素是否换行
1 flex‐wrap:nowrap;//不换行默认
2 wrap;//换行
设置侧轴上的子元素排列方式单行
1 align‐items:flex‐start;// 左对齐
2 flex‐end 右对齐
3 center 居中
4 stretch 拉伸默认值
设置侧轴上的子元素排列方式多行
1 align‐content:flex‐start;// 左对齐
2 flex‐end 右对齐
3 center 居中
4 space‐around 平均分配
5 space‐between 先两侧贴边然后平均分
6 stretch 拉伸默认值
flex子属性
1 flex:50%;
2 align‐self:flex‐start;子项在侧轴的排列方式了解
rem适配布局
em 父级字体大小
rem HTML字体大小
媒体查询
1 media screen and (min‐width:500px){ //如果屏幕大于等于500px
2 html{
3 font‐size:14px;
4 }
5 }
less
1 color1: skyblue;
2 font14: 14px;
3 body{
4 background‐color:color1;
5 font‐size:font14;
6 a{
7 text‐decration:none;
8 :hover{
9 background‐color:color1;
10 font‐size:14px16;
11 }
12 }
13 }
14 importcommon//多个less合并在一起共同生成一份css文件
响应式布局
Bootstrap框架
