191121CSS
一、CSS
1、css选择器
- css选择器的使用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div class="c1">内容</div>
<div class="c1">内容2</div>
</body>
</html>
- id选择器：#1
- class选择器：.c1
- 标签选择器：div
- 层级选择器：.c1 .c2
- 组合选择器：.c1,.c2
- 属性选择器：.c1[type='text']
2、引入css文件
<link rel="stylesheet" href="commons.css">
3、基本样式
- border: 1px solid red;边框
- height: 48px;width: 200px;高和宽
- font-size: 18px;字体大小
- line-height:垂直居中
- text-align:ceter:水平居中
- font-weight:加粗
- color:字体颜色
4、float
块级标签漂起来堆叠
<div style="width: 20%;background-color: red;float: left">左侧</div>
<div style="width: 60%;background-color: yellow;float: right">右侧</div>
5、display
- display: inline;将div转换为span
- display: block;将span转换为div
- display: inline-block;
- display: none; 让标签消失
6、padding margin 内边距和外边距
- margin-top: 10px;外边距
- padding-top: 10px;内边距
7、position属性
<div style="width: 50px;
height: 50px;
background-color: black;
color: white;
position: fixed;bottom: 20px;right: 20px;">返回顶部</div>
<div style="height: 5000px;background-color: #dddddd;"></div>
- 顶部标题栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 48px;
background-color: black;
color: #dddddd;
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>
</html>
- relative+absolute 实现相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<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;background-color: black;"></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;background-color: black;"></div>
</div>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;right: 0;top: 0;width: 50px;height: 50px;background-color: black;"></div>
</div>
</body>
</html>
- 三层
- z-index: 10;数值最大的在上层
- opacity: 0.5;透明度50%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="position: fixed;
background-color: white;
height: 400px;
width: 500px;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -200px;
z-index: 10;
"></div>
<div style="position: fixed;background-color: black;
top: 0;
bottom: 0;
right: 0;
left: 0;
opacity: 0.5;
z-index: 9;
"></div>
<div style="height: 5000px;background-color: green;">内容</div>
</body>
</html>
8、图片的显示
<div style="height: 200px;width: 300px;overflow: hidden"> #混动条
<img src="win.jpg">
</div>
9、鼠标移动到字体变颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
right: 0;
left: 0;
top: 0;
height: 44px;
background-color: #2459a2;
line-height: 44px;
}
.pg-body{
margin-top: 50px;
}
.w{
width: 980px;
margin: 0 auto;
}
.menu{
display: inline-block;
padding: 0 10px 0 10px;
color: white;
}
/*当鼠标移动到当前标签上时，以下css属性才生效*/
.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">段子</a>
<a class="menu">1024</a>
<a class="menu">小视频</a>
</div>
</div>
<div class="pg-body">
<div class="w">正文</div>
</div>
</body>
</html>
10、背景图片以及图标
- 全写
<div style="background-image: url(icon_18_118.png);background-repeat: no-repeat;height: 20px;border: 1px solid red;width: 20px;
background-position-x: 0;
background-position-y: 2px; /*y轴移动图片*/
"></div>
- 简写
<div style="background: url(icon_18_118.png) 0 -79px no-repeat;height: 20px;border: 1px solid red;width: 20px;"></div>
11、带图标的登录框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 400px;height: 35px;position: relative;">
<input type="text" style="width: 370px;height: 35px;padding-right: 30px;"/>
<span style="background: url(icon_18_118.png) 0 -139px no-repeat;width: 20px;height: 20px;display: inline-block;position: absolute;right: 0;top: 10px;"></span>
</div>
</body>
</html>
191121CSS的更多相关文章
随机推荐
- Nginx(高并发)
Nginx(engine x)高性能和反向代理的web服务器反向代理:保护客户资源,只要是http协议都可以Web服务器:IIS 阿帕奇 NginxNginx可以作为负载均衡(NLB只支持Http)我 ...
- iview表单验证之正则验证、函数验证
iview表单验证之正则 正则验证: 代码: loginRules: { stringLength: [ { required: true, message: '该字段不能为空', trigger: ...
- 记一些使用mpvue时遇到的问题
一.在mpvue中使用vuex(和在vue中使用不同) 1.vue中使用vuex,在main.js中: import store from './store' new Vue({ store }) ...
- hive元数据库理解
在hive2.1.1 里面一共有59张表 表1 VERSION ; version表存hive的版本信息,该表中数据只有一条,如果存在多条,会造成hive启动不起来. 表2 DBS select * ...
- 使用pt-table-checksum检查主从一致性
使用 percona 工具检查主从不一致 可以使用 pt-table-checksum 工具检查主从数据的一致性,检查完之后默认会生成一个 percona 库以及一个 checksums 表,记录了 ...
- layer单选框 radio的问题总结
放官方文档: 位置 页面元素-表单:内置模块-表单属性title可自定义文本属性disabled开启禁用设置value="xxx"可自定义值,否则选中时返回的就是默认的onradi ...
- poj 1007 DNA sorting (qsort）
DNA Sorting Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 95209 Accepted: 38311 Des ...
- 2019 年百度之星·程序设计大赛 - 初赛一 C. HDU 6670 Mindis 离散化+dijkstra
题目链接 :http://acm.hdu.edu.cn/showproblem.php?pid=6670 Mindis Time Limit: 4000/2000 MS (Java/Others) M ...
- TP5 中的redis 队列
首先我们看一下自己的TP5的框架中的 TP5\vendor\topthink ,这个文件中有没有think-queue这个文件夹,如果没有请安装, 安装这个是要用到Composer的如果没有安装co ...
- 第二章 Vue快速入门-- 25 过滤器-定义格式化时间的全局过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...