03 css 补充
css 补充
1. 解决浮动带来的影响
- 浮动会照成父标签塌陷问题
- 如下代码
show code
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d1 {
border: 3px solid black;
}
#d2 {
height: 100px;
width: 100px;
background-color: red;
float: left;
}
#d3 {
height: 100px;
width: 100px;
background-color: greenyellow;
float: left;
}
</style>
</head>
<body>
<div id="d1" class="clearfix">
<div id="d2"></div>
<div id="d3"></div>
<!-- <div id="d4"></div>-->
</div>
</body>
</html>
注意： 因为div内部的全部都浮动起来了，里面没有标签，相当于口袋瘪了
- 解决方案
解决浮动带来的影响 推导步骤
1.自己加一个div设置高度
2.利用clear属性
#d4 {
clear: left; /*该标签的左边(地面和空中)不能有浮动的元素*/
}
3.通用的解决浮动带来的影响方法
在写html页面之前 先提前写好处理浮动带来的影响的 css代码
.clearfix:after {
content: '';
display: block;
clear:both;
}
之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
上述的解决方式是通用的 到哪都一样 并且名字就叫clearfix
show code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
#d1 {
border: 3px solid black;
}
#d2 {
height: 100px;
width: 100px;
background-color: red;
float: left;
}
#d3 {
height: 100px;
width: 100px;
background-color: greenyellow;
float: left;
}
#d4 {
/*height: 100px;*/ /*第一种*/
clear: left; /*该标签的左边(地面和空中)不能有浮动的元素*/ /*第二种*/
}
/*第三种*/
.clearfix:after {
content: '';
display: block;
clear:both;
}
</style>
</head>
<body>
<div id="d1" class="clearfix">
<div id="d2"></div>
<div id="d3"></div>
<!-- <div id="d4"></div>-->
</div>
</body>
</html>
2. 溢出属性
- 溢出属性如下：
show code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
height: 100px;
width: 50px;
border: 3px solid red;
}
</style>
</head>
<body>
<p>lalalalallalalalalalalallalalalalalalallalalalalalalallalalalalalalallalalalalalalallalalalalalalallalalalalalalallalalalalalalallalala</p>
</body>
</html>
- 解决方案：
show code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
height: 100px;
width: 50px;
border: 3px solid red;
/*overflow: visible; 默认就是可见 溢出还是展示*/ 默认值
/*overflow: hidden; 溢出部分直接隐藏*/ 第一种
/*overflow: scroll; 设置成上下滚动条的形式*/ 第二种
overflow: auto; 自动 第三种
}
</style>
</head>
<body>
<p>上下滚动条的形式上下滚动条的形式上下滚动条的形式上下滚动条的形式上下滚动条的形式上下滚动条的形式上下滚动条的形式上下滚动条的形式</p>
</body>
</html>
- 举例
show code
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
background-color: #4e4e4e;
}
#d1 {
height: 120px;
width: 120px;
border-radius: 50%;
border: 5px solid white;
margin: 100px auto;
overflow: hidden;
}
#d1>img {
max-width: 100%;
/*width: 100%;*/
/*占标签100%比例*/
}
</style>
</head>
<body>
<div id="d1">
<img src="111.jpg" alt="">
</div>
</body>
</html>
注意： 默认情况下图片时超出的，需要设置overflow: hidden;和max-width: 100%;属性
3. 定位
- 静态：所有的标签默认都是静态的static，无法改变位置
- 相对定位（了解）：相对于标签原来的位置做移动relative
- 绝对定位（常用）：相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)
- 固定定位（常用：相对于浏览器窗口固定在某个位置
3.1 相对定位+绝对定位
注意：相对定位是对于标签原来的位置做移动，设置position: relative;之后，哪怕位置没有改变但是性质也已经改变了，绝对定位position: absolute;是相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)，要能看懂例子
show code
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d1 {
height: 100px;
width: 100px;
background-color: red;
left: 50px; /*从左往右 如果是负数 方向则相反*/
top: 50px; /*从上往下 如果是负数 方向则相反*/
/*position: static; !*默认是static无法修改位置*!*/
position: relative;
/*相对定位
标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签
虽然你哪怕没有动 但是你的性质也已经改变了
*/
}
#d2 {
height: 100px;
width: 400px;
background-color: red;
position: relative; /*已经定位过了*/
}
#d3 {
height: 200px;
width: 400px;
background-color: yellowgreen;
position: absolute;
left: 200px;
top: 100px;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2">
<div id="d3"></div>
</div>
</body>
</html>
3.2 固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
#d4 {
position: fixed; /*写了fixed之后 定位就是依据浏览器窗口*/
bottom: 10px;
right: 20px;
height: 50px;
width: 100px;
background-color: white;
border: 3px solid black;
}
</style>
</head>
<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: greenyellow"></div>
<div style="height: 500px;background-color: blue"></div>
<div id="d4">回到顶部</div>
</body>
</html>
3.3 检验定位是否脱离文档流
# 不脱离文档流
1.相对定位
# 脱离文档流
1.浮动
2.绝对定位
3.固定定位
4. z-index模态框
show code
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.cover {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 99;
}
.modal {
background-color: white;
height: 200px;
width: 400px;
position: fixed;
left: 50%;
top: 50%;
z-index: 100;
margin-left: -200px;
margin-top: -100px;
}
</style>
</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
<h1>登陆页面</h1>
<p>username:<input type="text"></p>
<p>password:<input type="text"></p>
<button>点我点我~</button>
</div>
</body>
</html>
5.透明度 opacity
# 它不单单可以修改颜色的透明度还同时修改字体的透明度
rgba只能影响颜色
而opacity可以修改颜色和字体
opacity: 0.5;
5.1 例子
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
background-color: rgba(0,0,0,0.5);
}
#d2 {
/*background-color: rgb(0,0,0);*/
opacity: 0.5;
color: blue;
}
</style>
</head>
<body>
<p id="d1">111</p>
<p id="d2">22asdasdasd2</p>
</body>
</html>
6.首页搭建
6.1 html代码
show code
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>博客园</title>
<link rel="stylesheet" href="blog.css">
</head>
<body>
<div class="blog-left">
<div class="blog-avatar">
<img src="111.jpg" alt="">
</div>
<div class="blog-title">
<p>xxx的博客</p>
</div>
<div class="blog-info">
<p>它什么都没有留下!</p>
</div>
<div class="blog-link">
<ul>
<li><a href="">关于我</a></li>
<li><a href="">微博</a></li>
<li><a href="">微信公众号</a></li>
</ul>
</div>
<div class="blog-tag">
<ul>
<li><a href="">#Python</a></li>
<li><a href="">#Java</a></li>
<li><a href="">#js</a></li>
</ul>
</div>
</div>
<div class="blog-right">
<div class="article">
<div class="article-title">
<span class="title">python</span>
<span class="date">2021/4/5</span>
</div>
<div class="article-body">
<p>简单</p>
</div>
<hr>
<div class="article-bottom">
<span>#Python </span>
<span>#JavaScript</span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">python</span>
<span class="date">2021/4/5</span>
</div>
<div class="article-body">
<p>简单</p>
</div>
<hr>
<div class="article-bottom">
<span>#Python </span>
<span>#JavaScript</span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">python</span>
<span class="date">2021/4/5</span>
</div>
<div class="article-body">
<p>简单</p>
</div>
<hr>
<div class="article-bottom">
<span>#Python </span>
<span>#JavaScript</span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">python</span>
<span class="date">2021/4/5</span>
</div>
<div class="article-body">
<p>简单</p>
</div>
<hr>
<div class="article-bottom">
<span>#Python </span>
<span>#JavaScript</span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">python</span>
<span class="date">2021/4/5</span>
</div>
<div class="article-body">
<p>简单</p>
</div>
<hr>
<div class="article-bottom">
<span>#Python </span>
<span>#JavaScript</span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">python</span>
<span class="date">2021/4/5</span>
</div>
<div class="article-body">
<p>简单</p>
</div>
<hr>
<div class="article-bottom">
<span>#Python </span>
<span>#JavaScript</span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">python</span>
<span class="date">2021/4/5</span>
</div>
<div class="article-body">
<p>简单</p>
</div>
<hr>
<div class="article-bottom">
<span>#Python </span>
<span>#JavaScript</span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">python</span>
<span class="date">2021/4/5</span>
</div>
<div class="article-body">
<p>简单</p>
</div>
<hr>
<div class="article-bottom">
<span>#Python </span>
<span>#JavaScript</span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">python</span>
<span class="date">2021/4/5</span>
</div>
<div class="article-body">
<p>简单</p>
</div>
<hr>
<div class="article-bottom">
<span>#Python </span>
<span>#JavaScript</span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">python</span>
<span class="date">2021/4/5</span>
</div>
<div class="article-body">
<p>简单</p>
</div>
<hr>
<div class="article-bottom">
<span>#Python </span>
<span>#JavaScript</span>
</div>
</div>
</div>
</body>
</html>
6.2 css code
show code
/*这是博客园首页的样式文件*/
/*通用样式*/
body {
margin: 0;
background-color: #eeeeee;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
padding-left: 0;
}
/*左侧样式*/
.blog-left {
float: left;
width: 20%;
height: 100%;
position: fixed;
background-color: #4e4e4e;
}
.blog-avatar {
height: 200px;
width: 200px;
border-radius: 50%;
border: 5px solid white;
margin: 20px auto;
overflow: hidden;
}
.blog-avatar img {
max-width: 100%;
}
.blog-title,.blog-info {
color: darkgray;
font-size: 18px;
text-align: center;
}
.blog-link,.blog-tag {
font-size: 24px;
}
.blog-link a,.blog-tag a {
color: darkgray;
}
.blog-link a:hover,.blog-tag a:hover {
color: white;
}
.blog-link ul,.blog-tag ul {
text-align: center;
margin-top: 100px;
}
/*右侧样式*/
.blog-right {
float: right;
width: 80%;
height: 1000px;
}
.article {
background-color: white;
margin: 20px 40px 10px 10px;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
.title {
font-size: 36px;
}
.date {
float: right;
margin: 20px 20px;
font-weight: bolder;
}
.article-title {
border-left: 8px solid red;
text-indent: 16px;
}
.article-body {
font-size: 18px;
text-indent: 30px;
/*border-bottom: 1px solid black;*/
}
.article-bottom {
padding-left: 30px;
padding-bottom: 10px;
}
再坚持一下下，会越来越优秀
浙公网安备 33010602011771号