css 层叠样式表
作用：
- 颜色
- 位置
注释 /* 这是注释 */
形式
- 内嵌样式 标签style
- 内联样式 head style
- 外联样式 单独文件
选择器
- id选择器 #
- class选择器 .
- 标签选择器
- 层级选择器 空格隔开父-子
- 组合选择器 逗号隔开同级元素
- 属性选择器 [] 里边写属性=值
优先级：
style由上至下
边框 border 宽度 样式 颜色
height高度 width宽度 像素，百分比
text-align:center水平位置，
line-height行高 垂直方向居中
color字体颜色
font-size字体大小
font-weight字体加粗
float 标签漂浮，块级标签堆叠
老子管不住：clear：both
display
- inline 行内显示 无法设置高度，宽度，边距
- block 块级显示 可以设置高度，宽度，边距
- none 不显示
- inline-block 双重属性
padding 内边距
margin 外边距
代码重用
两个样式相同的部分可以单独提出来
自适应media
布局变形解决办法：最外层用绝对宽度，内部可以使用百分比
img标签，默认有1像素的边框，border:0;
position
- fixed 固定
- relative+absolute 相对定位+绝对定位
z-index: 层级顺序，立体堆叠，值越大越靠前
opacity：模糊度0-1
overflow：auto hidden
hover
background-image: url("img/icon.png"); 默认重复
background-repeat: no-repeat;
background-position-x:0; 相当于扣了一个小洞
background-position-y:0;
Title
.pg-head{
height: 38px;
background-color: darkgray;
}
.pg-head-left{
float: left;
}
.pg-head-right{
float: right;
}
.pg-body{
width: 900px;
height:400px;
border: 1px solid red;
}
.pg-element{
width: 150px;
height:200px;
border: 1px solid green;
float: left;
}
左边的内容
右边的内容
内部元素
内部元素
内部元素
内部元素
内部元素
内部元素
效果
Title
body{
margin: 0 auto;
}
.pg-head{
background-color: black;
color:white;
position: fixed;
width: 100%;
height: 48px;
top:0;
text-align: center;
line-height: 48px;
}
.pg-body{
height: 5000px;
background-color: #dddddd;
margin-top: 48px;
color:green;
text-align: center;
font-size:50px;
}
#pg-goto-top{
width: 80px;
height: 50px;
background-color: black;
position: fixed;
right: 10px;
bottom:10px;
color:white;
text-align: center;
line-height: 50px;
}
顶部内容
主体内容
返回顶部
function gotoTop() {
document.body.scrollTop=0;
}
Title
.icon{
width: 18px;
height: 18px;
background-image: url("img/icon.png");
background-repeat: no-repeat;
background-position-x:0;
/*border: 1px solid green;*/
float: left;
margin-right:10px ;
}
.icon-1{background-position-y:0;}
.icon-2{background-position-y:-20px;}
.icon-3{background-position-y:-40px;}
.icon-4{background-position-y:-60px;}
.icon-5{background-position-y:-100px;}
.icon-6{background-position-y:-120px;}
.icon-7{background-position-y:-140px;}
.icon-8{background-position-y:-160px;}
.icon-9{background-position-y:-180px;}
原图：
背景图：
icon.png
效果
Title
body{
margin: 0 auto;
height: 5000px;
}
.pg-head{
background-color: #2459a2;
height:48px;
position: fixed;
top:0;
left:0;
right:0;
color:white;
line-height: 48px;
}
.w{
width:960px;
margin: 0 auto;
}
.pg-body{
margin-top: 50px;
}
.pg-head .menu{
display: inline-block;
padding: 0 20px;
}
/*鼠标经过生效*/
.pg-head .menu:hover{
background-color: #0d3ea2;
}
logo
主页
段子
图片
1024
这里是主体内容
效果
Title
.login{
width: 300px;
height:35px;
position: relative;
display: inline-block;
}
.icon{
height: 35px;
width: 35px;
background-image: url("img/pwd-icons-new.png");
background-repeat: no-repeat;
background-position-x: 0;
background-position-y: -48px;
position: absolute;
top:3px;
right:-15px;
}
input{
width: 275px;
height:35px;
font-size:20px;
padding-right:40px; /*右边内边距增加*/
}
label{
height:35px;
}
登陆：
pwd-icons-new.png (来自京东商城登陆页面)
显示效果
Title
.pg-margin{
border:1px solid red;
width:200px;
height:200px
}
.pg-margin-box{
border:1px solid green;
width:180px;
height:180px;
background-color: green;
margin:10px;
}
.pg-padding{
border:1px solid red;
width:180px;
height:180px;
padding: 10px
}
.pg-padding-box{
border:1px solid green;
width:180px;
height:180px;
background-color: green
}
外边距margin
内边距padding
显示效果
Title
图片：
显示效果：
Title
div{
border: 1px solid red; /* 边框 */
width: 200px; /* 宽 */
height: 200px; /* 高 */
text-align: center; /* 水平居中 */
line-height: 200px; /* 垂直居中 */
color: green; /* 字体颜色 */
font-size: 20px; /* 字体大小 */
font-weight: bold; /* 字体加粗 */
}
简单的div测试
显示效果
Title
/*标签选择器*/
p{
background-color:green;
}
/*id选择器*/
#i1{
background-color:yellow;
}
/*类选择器*/
.c1{
background-color:blue;
}
/*层级选择器*/
div p{
background-color:red;
}
/*组合选择器*/
#i2, .c2{
background-color:orange;
}
/*属性选择器*/
p[color="pink"]{
background-color:pink;
}
标签选择器 green
id选择器 yellow
类选择器 blue
层级选择器 red
组合选择器 orange
组合选择器 orange
属性选择器 pink
显示效果
Title
body{
margin: 0 auto;
}
.pg-body{
height: 5000px;
background-color: #dddddd;
color:green;
}
.pg-background{
z-index:9;
background-color: orange;
position: fixed;
top:0;bottom:0;
left:0;
right:0;
opacity:0.5;
/*display:none*/
}
.pg-box{
z-index:10;
background-color: white;
width:500px;
height:400px;
position:fixed;
top:50%;
left:50%;
margin-top:-200px;
margin-left: -250px;
/*display:none;*/
}
注册
显示效果
Title
.pg-body-left-li{
height:60px;
line-height: 60px;
background-color: coral;
text-align: center;
font-weight: bold;
border:1px solid lawngreen;
}
.pg-body-right-div{
width:150px;
height:220px;
background-color: #dddddd;
padding: 10px;
float:left;
margin-right: 10px;
margin-bottom: 10px;
}
收藏本站
登陆
|
注册
购物车
全部分类
首页
|
天猫超市
研究院
|
论坛
南方水果
南方水果
南方水果
南方水果
南方水果
南方水果
商品信息
商品信息
商品信息
商品信息
商品信息
商品信息
商品信息
商品信息
显示效果
