S14 CSS笔记
CSS
____oldboy python s14
0、css是在标签上设置style属性：
background-color: #2459a2;
height: 48px;
...
1、编写css样式：
1. 标签的style属性
2. 写在head里面 style标签中写样式
3. css样式也可以写在单独文件中
<link rel="stylesheet" href="commons.css" />
2、标签选择器
- id选择器
#i1{
background-color: #2459a2;
height: 48px;
}
- class选择器 ******
.名称{
...
}
<标签 class='名称'> </标签>
- 标签选择器
div{
...
}
所有div设置上此样式
- 层级选择器（空格） ******
.c1 .c2 div{
# span .c2 div
}
- 组合选择器（逗号） ******
#c1,.c2,div{
...
}
- 属性选择器 ******
对选择到的标签再通过属性再进行一次筛选
.c1[n='alex']{ width:100px; height:200px; }
PS:
- 优先级，标签上style优先，编写顺序，就近原则
3、注释
/* */
4、边框border
- 宽度，样式，颜色 (border: 4px dotted red;)
- border-left
5、几个常用
height 高度 百分比
width 宽度 像素，百分比 30px 50%
text-align:ceter 水平方向居中
line-height 垂直方向根据标签高度 48px
color 字体颜色
font-size 字体大小
font-weight 字体加粗 bold
6、float
让标签飘起来，块级标签也可以堆叠
老子管不住：加在div最后
<div>
<div style='float:left;'>f</div>
<div style='clear:both;'></div>
</div>
# body style='margin:0 auto'
7、display
display: none; -- 让标签消失
display: inline; -- 变行内
display: block; -- 变块级
display: inline-block;
具有inline,默认自己有多少占多少
具有block，可以设置高度，宽度，padding margin
******
行内标签：无法设置高度，宽度，padding margin
块级标签：可设置高度，宽度，padding margin
8、padding margin(0,auto)
margin：外边距
# margin: 0 auto;
padding：内边距---> 自身发生变化
9、补充
a. 代码重用：设置公用、独有css
<div class='c c1'></div>
<div class='c c2'></div>
b. 改变大小变形
最外层设置绝对宽度：像素；头部、中间、底部。
<div style='width:980px;'></div>
c. 自适应
media属性，待学习。
d. img标签默认有一个1px的边框（IE浏览器）
img{border: 0;}
# style 里面统一设置
# 0px ==> 直接写0
10、购物网站首页（见示例区）
11、position:
a. fiexd => 固定在页面的某个位置
- 返回顶部示例：
<body>
<div onclick='GoTop();' style="width:80px;height: 50px;color:white;
position: fixed;bottom:20px;right: 20px;">返回顶部</div>
<div style="height:5000px;"></div>
</body>
<script>
function GoTop(){
document.body.scrollTop = 0;
}
</script>
- 顶部菜单：
height:48px;
background-color:black;
color:#DDDDDD;
position:fiexd;
top:0;
right:0;
left:0;
margin-top:50px;
b. relative + absolute 父类标签的某个位置
# absolute 绝对定位，单独用处不多。单独relative没有意义。
<div style='position:relative;'>
<div style='position:absolute;top:0;left:0;'></div>
# left等值可以为负值。
</div>
简单示例:
<body>
<div style="position: relative;width:500px;height:200px;border:1px solid red;margin: 0 auto;">
<div style="position:absolute;left:0;bottom:0;width:50px;height: 50px;"></div>
</div>
<div style="position: relative;width:500px;height:200px;border:1px solid red;margin: 0 auto;">
<div style="position:absolute;right:0;bottom:0;width:50px;height: 50px;"></div>
</div>
<div style="position: relative;width:500px;height:200px;border:1px solid red;margin: 0 auto;">
</div>
</body>
-模态对话框示例
12、其他几个：
opcity: 0.5 透明度
z-index: 层级顺序
hover 鼠标移动至标签上时，以下css生效
overflow: hidden,auto #超过范围隐藏，出现滚动条（img太大时）
<div style="height: 300px;width:400px;overflow: auto">
<img src="2019119.png" alt="">
</div>
13、background相关：
background-image:url('image/4.gif'); # 默认，div大，图片重复放
background-repeat: repeat-y; # y轴图片重复
background-position-x: # 背景图片位置
background-position-y:
background-position:10px 10px;
background: 颜色、图片、位置、是否重复。 # 简写
background: #f8f8f8 url() -105px -212px no-repeat;
<div style="background-image: url(icon_18_118.png);background-repeat:no-repeat;
height: 20px;width:20px;border: 1px solid red;
background-position-x:0px;background-position-y:-58px"></div>
13.5、补充：
- 页面布局问题
float,clear:both,margin,padding
position:
left,top,right,bottom
网上模板：
搜索HTML模板，BootStrap
- 背景图片：
整个页面：在body加
14. 页面布局
- 主站布局
<div class='pg-header'>
<div style='width:980px;margin:0 auto;>内容居中</div>
</div>
<div class='pg-content'></div>
<div class='pg-footer'></div>
- 后台管理布局：
position:
fixed: 永远固定在某个位置
relative: 单独无意义
absolute: 第一次定位，可以在指定位置，滚动后不在
- 左侧菜单跟随
- 左侧及上面不动 *****
- 购物网站主页示例；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.pg-header{
height: 38px;
line-height: 38px;
/*字垂直居中*/
}
</style>
</head>
<body style="margin: 0 auto;">
<div class="pg-header">
<div style="width:980px;margin:0 auto">
<!--设置宽度、居中-->
<div style="float:left;">收藏本站</div>
<div style="float:right;">
<a href="">登陆</a>
<a href="">注册</a>
</div>
<div style="clear: both;"></div>
<!--上行必备！！！-->
</div>
</div>
<div>
<div style="width:980px;margin:0 auto;">
<div style="float:left;">logo</div>
<div style="float:right;">
<div style="height: 50px;width:100px;;"></div>
</div>
<div style="clear: both;"></div>
</div>
</div>
<div style="">
<div style="width:980px;margin:0 auto;">
内容
</div>
</div>
<div style="width:300px;border:1px solid red;">
<div style="width:96px;height:30px;border:1px solid green;float:left;";></div>
<div style="width:96px;height:30px;border:1px solid green;float:left;";></div>
<div style="width:96px;height:30px;border:1px solid green;float:left;";></div>
<div style="width:96px;height:30px;border:1px solid green;float:left;";></div>
<div style="clear: both;"></div>
<!--父级无边框的问题-->
</div>
</body>
</html>
- 顶部菜单示例代码：
<head>
<meta charset="UTF-8">
<title></title>
<style>
.pg-header{
height: 48px;
color:white;
position: fixed;
top:0;/*仅设置不够，不占全部行*/
right: 0;left: 0;
}
.pg-body{
background-color:#dddddd;
height: 5000px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="pg-header">头部</div>
<div class="pg-body">内容</div>
</body>
- 模态对话框：未含JS
<body>
<div style="display:none;z-index:10;position:fixed;top:50%;left:50%;
/*此处必须用%占比*/
margin-left:-250px;margin-top:-200px;
height:400px;width:500px;"></div>
<div style="display:none;z-index:9;position: fixed;
top:0;right: 0;bottom:0;left:0;opacity: 0.5;"></div>
<div style="height: 5000px;">test</div>
</body>
- 示例：抽屉顶部
<head>
<meta charset="UTF-8">
<title></title>
<style>
.pg-header{
position: fixed;
right:0;
left:0;
top:0;
height:48px;
background-color: #2459a2;
line-height: 48px;
}
.pg-body{
margin-top:50px;
}
.w{
width:980px;
margin:0 auto;
}
.pg-header .menu{
display: inline-block;
padding:0 10px;
color:white;
}
.pg-header .menu:hover{
background-color: blue;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo">logo</a>
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu">1024</a>
</div>
</div>
<div class="pg-body">
<div class="w">a</div>
</div>
</body>
- 输入框示例
<body>
<div style="height:35px;width:400px;position: relative">
<input type="text" style="height:35px;width:370px;padding-right: 30px"/>
<!--input框跟div一样大：input设置高宽度-->
<!--输入框超过图标，所以设置padding-->
<span style="position:absolute;right:6px;top:10px;background-image:url(2019119.png);
height: 16px;width:16px;display:inline-block"></span>
<!--span为行内标签，设置高宽度无用：display:inline-block-->
</div>
</body>
- 后台管理布局例一：
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
}
/*统一设置float*/
.left{
float:left;
}
.right{
float:right;
}
.pg-header{
height: 48px;color:white;
}
.pg-content .menu{
position:fixed;
top:48px;left:0;bottom:0;width:200px;background-color: #DDDDDD;
}
.pg-content .content{
position: fixed;
top:48px;right:0;bottom:0;left:200px;background-color: aliceblue;
overflow: auto;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">a</div>
<div class="content left">
<p>aaaa</p>
</div>
</div>
<div class="pg-footer"></div>
</body>
- 后台管理布局例二：
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{margin: 0;}
/*统一设置float*/
.left{float:left;}
.right{float:right;}
.pg-header{
height: 48px;background-color: #2459a2;color:white;
}
.pg-content .menu{
position: absolute;
top:48px;left:0;bottom:0;width:200px;background-color: #DDDDDD;
}
.pg-content .content{
position: absolute;
top:48px;right: 0;bottom:0;left:200px;
min-width: 600px;
/*设置最小宽度，出现滚动条，保证内容格式。*/
/*background-color: aliceblue;*/
/*内容不设置背景色，或者内容设置背景色*/
overflow: auto;
/*左侧菜单跟随、左侧及上面不动可通过上行有无切换。*/
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">a</div>
<div class="content left">
<div style="
<!--p标签默认有间距-->
<p style="margin: 0;">aaaa</p>
<p>aaaa</p>
</div>
</div>
</div>
<div class="pg-footer"></div>
</body>
- 后台管理布局示例
知识点：指示时显示菜单
<head>
<meta charset="UTF-8">
<title></title>
<style>
.item{
background-color: #DDDDDD;
}
.item:hover{
color:red;
}
.item:hover .b{
background-color: green;
}
</style>
</head>
<body>
<div class="item">
<div class="a">123</div>
<div class="b">456</div>
</div>
</body>
- 例子：引入了font-awesome
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<style>
body{
margin: 0;
}
/*统一设置float*/
.left{
float:left;
}
.right{
float:right;
}
.pg-header{
height: 48px;background-color: #2459a2;color:white;line-height: 48px;
}
.pg-header .logo{
width:200px;background-color: cadetblue;text-align: center;
}
.pg-header .icons{
padding: 0 20px;
}
.pg-header .icons:hover{
background-color: #204982;
}
.pg-header .user{
color:white;height: 48px;
/*background-color: wheat;width:160px;*/
margin-right: 60px;padding:0 20px;
}
.pg-header .user:hover{
background-color: #204982;
}
.pg-header .user .a img{
height: 40px;width: 40px;margin-top: 4px;border-radius: 50%
}
.pg-header .user .b{
z-index:10;position: absolute;top: 48px;right:50px;background-color: white;color: black;
width: 160px;display: none;
}
.pg-header .user:hover .b{
display: block;
}
.pg-header .user .b a{
display: block;
}
.pg-content .menu{
position: absolute;
top:48px;left:0;bottom:0;width:200px;background-color: #DDDDDD;
}
.pg-content .content{
position: absolute;
top:48px;right: 0;bottom:0;left:200px;
/*min-width: 600px;*/
/*设置最小宽度，出现滚动条，保证内容格式。*/
/*background-color: aliceblue;*/
/*内容不设置背景色，或者内容设置背景色*/
overflow: auto;
/*左侧菜单跟随、左侧及上面不动可通过上行有无切换。*/
z-index:9;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="logo left">
老男孩
</div>
<div class="user right" style="position: relative">
<a class="a" href="#">
<img src="1.png" alt="">
</a>
<div class="b" >
<a href="">我的资料</a>
<a href="">注销</a>
</div>
</div>
<div class="icons right">
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<span>5</span>
</div>
<div class="icons right">
<i class="fa fa-bell-o" aria-hidden="true"></i>
</div>
<div style="clear: both"></div>
</div>
<div class="pg-content">
<div class="menu left">a</div>
<div class="content left">
<div style="
<!--p标签默认有间距-->
<p style="margin: 0;">aaaa</p>
<p>aaaa</p>
</div>
</div>
</div>
<div class="pg-footer"></div>
</body>
