前端之 css 基础学习
CSS 介绍
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
# 注释
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/
通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...
# css的语法结构
选择器 {
属性1:值1;
属性2:值2;
属性3:值3;
属性4:值4;
}
# css的三种引入方式
1.style标签内部直接书写(为了教学演示方便我们用第一种)
<style>
h1 {
color: burlywood;
}
</style>
2.link标签引入外部css文件(最正规的方式 解耦合)
<link rel="stylesheet" href="mycss.css">
3.行内式(一般不用)
<h1 style="color: green">老板好 要上课吗?</h1>
CSS选择器
基本选择器
# id选择器
# 类选择器
# 元素/标签选择器
# 通用选择器
<style>
/*id选择器*/
/*#d1 { !*找到id是d1的标签 将文本颜色变成绿黄色*!*/
/* color: greenyellow;*/
/*}*/
/*类选择器*/
/*.c1 { !*找到class值里面包含c1的标签*!*/
/* color: red;*/
/*}*/
/*元素(标签)选择器*/
/*span { !*找到所有的span标签*!*/
/* color: red;*/
/*}*/
/*通用选择器*/
/** { !*将html页面上所有的标签全部找到*!*/
/* color: green;*/
/*}*/
</style>
组合选择器
"""
在前端 我们将标签的嵌套用亲戚关系来表述层级
<div>div
<p>div p</p>
<p>div p
<span>div p span</span>
</p>
<span>span</span>
<span>span</span>
</div>
div里面的p span都是div的后代
p是div的儿子
p里面的span是p的儿子 是div的孙子
div是p的父亲
...
"""
# 后代选择器
# 儿子选择器
# 毗邻选择器
# 弟弟选择器
/*后代选择器*/
/*div span {*/
/* color: red;*/
/*}*/
/*儿子选择器*/
/*div>span {*/
/* color: red;*/
/*}*/
/*毗邻选择器*/
/*div+span { !*同级别紧挨着的下面的第一个*!*/
/* color: aqua;*/
/*}*/
/*弟弟选择器*/
div~span { /*同级别下面所有的span*/
color: red;
}
属性选择器
"""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
# 属性选择器是以[]作为标志的
/*[username] { !*将所有含有属性名是username的标签背景色改为红色*!*/
/* background-color: red;*/
/*}*/
/*[username='jason'] { !*找到所有属性名是username并且属性值是jason的标签*!*/
/* background-color: orange;*/
/*}*/
/*input[username='jason'] { !*找到所有属性名是username并且属性值是jason的input标签*!*/
/* background-color: wheat;*/
/*}*/
分组与嵌套
当多个元素的样式相同时，我们没有必要重复的为每个元素设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式
例如：
div,p,span { /*逗号表示并列关系*/
color: yellow;
}
#d1,.c1,span {
color: orange;
}
伪类选择器
<!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 {
background-color: black;
}
/*访问之前的状态*/
a:link {
color: red;
}
/*鼠标移动到连接上时的状态*/
a:hover { /*需要记住*/
color: aqua;
}
/*鼠标点击不松开的状态 激活态*/
a:active {
color: black;
}
/*访问之后的状态*/
a:visited {
color: darkgray;
}
p {
color: darkgray;
font-size: 48px;
}
p:hover {
color: white;
}
/*input框获取焦点(鼠标点了input框)*/
input:focus {
background-color: red;
}
</style>
</head>
<body>
<a href="https://www.jd.com/">小轩在不在?</a>
<p>点我有你好看哦</p>
<input type="text">
</body>
</html>
伪元素选择器
一般用于大段文本操作如：小说
#首字母操作
p:first-letter {
font-size: 48px;
color: orange;
}
#文本开头
p:before { /*在文本开头 同css添加内容*/
content: '你说的对';
color: blue;
}
#文本结尾
p:after {
content: '雨露均沾';
color: orange;
}
ps:before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题
选择器优先级
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。
"""
id选择器
类选择器
标签选择器
行内式
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*
1.选择器相同 书写顺序不同
就近原则:谁离标签更近就听谁的
2.选择器不同 ...
行内 > id选择器 > 类选择器 > 标签选择器
精确度越高越有效
*/
#d1 {
color: aqua;
}
/*.c1 {*/
/* color: orange;*/
/*}*/
/*p {*/
/* color: red;*/
/*}*/
</style>
<!-- <link rel="stylesheet" href="mycss1.css">-->
</head>
<body>
<p id="d1" class="c1" style="color: blue">哈哈哈~</p>
</body>
</html>
ps:!important 强制让标签采用你的样式，不推荐使用
css属性相关
<style>
p {
background-color: red;
height: 200px;
width: 400px;
}
/* 如果没有设置css，块级标签的高度取决于文本的高度，如果没有文本就是0*/
span {
background-color: green;
height: 200px;
width: 400px;
/*行内标签无法设置长宽 就算你写了 也不会生效*/
}
</style>
字体属性
p {
/*font-family: "Arial Black","微软雅黑","..."; !*第一个不生效就用后面的 写多个备用*!*/
/*font-size: 24px; !*字体大小*!*/
/*字重*/
/*font-weight: inherit; !*bolder lighter 100~900 inherit继承父元素的粗细值*!*/
/*color: red; !*直接写颜色英文*!*/
/*color: #ee762e; !*颜色编号*!*/
/*color: rgb(128,23,45); !*三基色 数字 范围0-255*!*/
/*color: rgba(23, 128, 91, 0.9); !*第四个参数是颜色的透明度 范围是0-1*!*/
/*当你想要一些颜色的时候 可以利用现成的工具
1 pycharm提供的取色器
2 qq或者微信截图功能
也可以多软件结合使用
*/
}
文字属性
text-align:属性规定元素中的文本水平对齐方式
text-decoration:属性用来给文字添加特殊效果
p {
/*text-align: center; !*居中*!*/
/*text-align: right;*/
/*text-align: left;*/
/*text-align: justify; !*两端对齐*!*/
定义文本下的一条线
/*text-decoration: underline;*/
定义文本上的一条线
/*text-decoration: overline;*/
定义穿过文本下的一条线
/*text-decoration: line-through;*/
默认，定义标准的文本
/*text-decoration: none;*/ 默认
/*在html中 有很多标签渲染出来的样式效果是一样的*/
font-size: 16px;
#首行缩进
text-indent: 32px; /*缩进32px*/
}
#重点记忆
a {
text-decoration: none; /*主要用于给a标签去掉自带的下划线 需要掌握*/
}
背景图片
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/
使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。
参考链接：https://www.cnblogs.com/Dominic-Ji/p/10474769.html
具体案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#d1 {
height: 500px;
background-color: red;
}
#d2 {
height: 500px;
background-color: green;
}
#d3 {
height: 500px;
background-image: url("222.png"); /*背景图片*/
background-attachment: fixed; /*固定的*/
}
#d4 {
height: 500px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</body>
</html>
border边框
<!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 {
background-color: red;
border-width: 5px;
border-style: solid;
border-color: green;
}
div {
/*border-left-width: 5px;*/
/*border-left-color: red;*/
/*border-left-style: dotted;*/
/*border-right-width: 10px;*/
/*border-right-color: greenyellow;*/
/*border-right-style: solid;*/
/*border-top-width: 15px;*/
/*border-top-color: deeppink;*/
/*border-top-style: dashed;*/
/*border-bottom-width: 10px;*/
/*border-bottom-color: tomato;*/
/*border-bottom-style: solid;*/
/*简写：*/
border: 3px solid red; /*三者位置可以随意写*/
}
/*重点记忆*/
#d1 {
background-color: greenyellow;
height: 400px;
width: 400px;
border-radius: 50%; /*直接写50%即可 长宽一样就是圆 不一样就是椭圆*/
}
</style>
</head>
<body>
<p>穷人 被diss到了 哭泣.png</p>
<div>妈拉个巴子,妈拉个巴子,妈拉个巴子,妈拉个巴子</div>
<div id="d1"></div>
</body>
</html>
display属性
用于控制 html 元素的显示效果
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
display 具体案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*#d1 {*/
/* !*display: none; !*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*!*!*/
/* display: inline; !*将标签设置为行内标签的特点*!*/
/*}*/
/*#d2 {*/
/* display: inline;*/
/*}*/
/*#d1 {*/
/* display: block; !*将标签设置成块儿级标签的特点*!*/
/*}*/
/*#d2 {*/
/* display: block;*/
/*}*/
/*#d1 {*/
/* display: inline-block;*/
/*}*/
/*#d2 {*/
/* display: inline-block; !*将块级标签即可以在一行显示又可以设置长宽*!*/
/*}*/
</style>
</head>
<body>
<div style="display: none">div1</div>
<div>div2</div>
<div style="visibility: hidden">单纯的隐藏 位置还在</div>
<div>div4</div>
<!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>-->
<!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>-->
<!--<span id="d1" style="height: 100px;width: 100px;background-color: red">span</span>-->
<!--<span id="d2" style="height: 100px;width: 100px;background-color: greenyellow">span</span>-->
<!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>-->
<!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>-->
</body>
</html>
盒子模型
- margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
- padding: 用于控制内容与边框之间的距离；
- Border(边框): 围绕在内边距和内容外的边框。
- Content(内容): 盒子的内容，显示文本和图像。
css盒子模型图如下：
<!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; /*上下左右全是0
/*margin: 10px 20px; !* 第一个上下 第二个左右*!*/
/*margin: 10px 20px 30px; !*第一个上 第二个左右 第三个下*!*/
/*margin: 10px 20px 30px 40px; !*上 右 下 左*!*/
}
/*p {*/
/* margin-left: 0;*/
/* margin-top: 0;*/
/* margin-right: 0;*/
/* margin-bottom: 0;*/
/*}*/
#d1 {
margin-bottom: 50px;
}
#d2 {
margin-top: 20px; /*不叠加 只取大的*/
}
#dd {
margin: 0 auto; /*只能做到标签的水平居中*/
}
p {
border: 3px solid red;
/*padding-left: 10px;*/
/*padding-top: 20px;*/
/*padding-right: 20px;*/
/*padding-bottom: 50px;*/
/*padding: 10px;*/
/*padding: 10px 20px;*/
/*padding: 10px 20px 30px;*/
/*padding: 10px 20px 30px 40px;*/ /*规律和margin一模一样*/
}
</style>
</head>
<body>
<!-- <p style="border: 1px solid red;" id="d1">ppp</p>-->
<!-- <p style="border: 1px solid orange;" id="d2">ppp</p>-->
<!--<div style="border: 3px solid red;height: 400px;width: 400px">-->
<!-- <div id='dd' style="border: 1px solid orange;height: 50px;width: 50px;background-color: blue;"></div>-->
<!--</div>-->
<p>ppp</p>
</body>
</html>
顺序：上右下左
补充padding的常用简写方式：
- 提供一个，用于四边；
- 提供两个，第一个用于上－下，第二个用于左－右；
- 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
- 提供四个参数值，将按上－右－下－左的顺序作用于四边；
浮动float
在 css 中，任何元素都可以浮动
浮动元素会生成一个块级框，而不论它本身是何种元素
关于浮动的两个特点：
1）浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
2）由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
三种取值
left：向左浮动
right：向右浮动
none：默认值，不浮动
"""浮动的元素 没有块儿级一说 本身多大浮起来之后就只能占多大"""
注：只要是设计到页面的布局一般都是用浮动来提前规划好
<style>
body {
margin: 0;
}
#d1 {
height: 200px;
width: 200px;
background-color: red;
float: left; /*浮动 浮到空中往左飘*/
}
#d2 {
height: 200px;
width: 200px;
background-color: greenyellow;
float: right; /*浮动 浮到空中往右飘*/
}
</style>
clear
clear属性固定元素的哪一侧不允许其他浮动元素
注：clear属性只会对自身起作用，而不会影响其他元素。
解决浮动带来的影响
# 浮动带来的影响
会造成父标签塌陷的问题
"""
解决浮动带来的影响 推导步骤
1.自己加一个div设置高度
2.利用clear属性
#d4 {
clear: left; /*该标签的左边(地面和空中)不能有浮动的元素*/
}
3.通用的解决浮动带来的影响方法
在写html页面之前 先提前写好处理浮动带来的影响的 css代码
.clearfix:after {
content: '';
display: block;
clear:both;
}
之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
上述的解决方式是通用的 到哪都一样 并且名字就叫clearfix
"""
总结：
清除浮动的副作用(父标签塌陷问题)
主要有三种方式：
固定高度
伪元素清除法
overflow:hidden
具体案例：
<!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 { /*在每个clearfix之后插入内容*/
content: '';
display: block; /*默认沾满整个页面宽度，如果设置了指定宽度，则会用 margin填充剩余部分*/
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>
overflow溢出属性
ps:
overflow:水平和垂直均设置
overflow-x:设置水平方向
Overflow-y:设置垂直方向
p {
height: 100px;
width: 50px;
border: 3px solid red;
/*overflow: visible; !*默认就是可见 溢出还是展示*!*/
/*overflow: hidden; !*溢出部分直接隐藏*!*/
/*overflow: scroll; !*设置成上下滚动条的形式*!*/
/*overflow: auto;*/
}
圆形头像示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>圆形的头像示例</title>
<style>
* {
margin: 0;
padding: 0;
background-color: #eeeeee;
}
.header-img {
width: 150px;
height: 150px;
border: 3px solid white;
border-radius: 50%;
overflow: hidden;
}
.header-img>img {
width: 100%;
}
</style>
</head>
<body>
<div class="header-img">
<img src="https://pic.cnblogs.com/avatar/1342004/20180304191536.png" alt="">
</div>
</body>
</html>
圆形头像示例
position定位
- Static 静态
所有的标签默认都是静态的static，无法改变位置
-
Relative 相对定位(了解)
相对于标签原来的位置做移动relative
-
Abslolute 绝对定位(常用)
相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)
eg:小米网站购物车
当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签左定位
-
Fixed 固定定位(常用)
相对于浏览器窗口固定在某个位置
eg:右侧小广告
<!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 {
height: 100px;
width: 100px;
background-color: red;
left: 50px; /*从左往右 如果是负数 方向则相反*/
top: 50px; /*从上往下 如果是负数 方向则相反*/
/*position: static; !*默认是static无法修改位置*!*/
position: relative;
/*相对定位
标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签
虽然你哪怕没有动 但是你的性质也已经改变了
*/
}
#d2 {
height: 100px;
width: 200px;
background-color: red;
position: relative; /*已经定位过了*/
}
#d3 {
height: 200px;
width: 400px;
background-color: yellowgreen;
position: absolute;
left: 200px;
top: 100px;
}
#d4 {
position: fixed; /*写了fixed之后 定位就是依据浏览器窗口*/
bottom: 10px;
right: 20px;
height: 50px;
width: 100px;
background-color: white;
border: 3px solid black;
}
</style>
</head>
<body>
<!-- <div id="d1"></div>-->
<!--<div id="d2">-->
<!-- <div id="d3"></div>-->
<!--</div>-->
<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>
ps:浏览器是优先展示文本内容的
验证浮动和定位是否脱离文档流(原来的位置是否还保留)
"""
浮动
相对定位
绝对定位
固定定位
"""
# 不脱离文档流
1.相对定位
# 脱离文档流
1.浮动
2.绝对定位
3.固定定位
<!--<div style="height: 100px;width: 200px;background-color: red;position: relative;left: 500px"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: greenyellow"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: red;"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: greenyellow;position: absolute;left: 500px"></div>-->
<!--当没有父标签做到位 就参照与body-->
<!--<div style="height: 100px;width: 200px;background-color: blue;"></div>-->
<div style="height: 100px;width: 200px;background-color: red;"></div>
<div style="height: 100px;width: 200px;background-color: greenyellow;position: fixed;bottom: 10px;right: 20px"></div>
<div style="height: 100px;width: 200px;background-color: blue;"></div>
z-index模态框
模态框主要应用于登录页面，如百度登录页面
设置对象的层叠顺序：
1、z-index 值表示谁压着谁，数值大的压盖住数值小的；
2、只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index；
3、z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素；
4、从父现象：父亲怂了，儿子再牛逼也没用
eg:百度登陆页面 其实是三层结构
1.最底部是正常内容(z=0) 最远的
2.黑色的透明区(z=99) 中间层
3.白色的注册区域(z=100) 离用户最近
<!DOCTYPE html>
<html lang="en">
<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;
}
.model {
background-color: #eeeeee;
height: 200px;
width: 400px;
position: fixed;
z-index: 100;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -100px;
}
h1 {
text-align: center;
}
p {
margin-left: 20px;
}
button {
float: right;
margin-right: 20px;
}
</style>
</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="model">
<h1>登录注册页面</h1>
<p><label for="d1">username:<input type="text" id="d1"></label></p>
<p><label for="d2">password:<input type="text" id="d2"></label></p>
<button>提交</button>
</div>
</body>
</html>
透明度opacity
opacity：用来定义透明效果，取值范围是 0-1，0是完全透明，1 是完全不透明
# 它不单单可以修改颜色的透明度还同时修改字体的透明度
rgba只能影响背景颜色
而opacity可以影响颜色和文本字体
具体案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#d1 {
background-color: rgba(0,0,0,0.5); /*只会影响背景*/
}
#d2 {
background-color: rgba(0,0,0,0.5);
opacity: 0.5; /*背景和文本都会被影响透明度*/
}
</style>
</head>
<body>
<p id="d1">哈哈</p>
<p id="d2">哈哈</p>
</body>
</html>
效果如下图展示：
博客园页面搭建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="博客园样式.css">
</head>
<body>
<div class="blog-left">
<div class="blog-avatar">
<img src="111.jpg" alt="帅哥哥">
</div>
<div class="blog-title">
<p>Tophan的博客</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="">#Golang</a></li>
</ul>
</div>
</div>
<div class="blog-right">
<div class="article">
<div class="article-title">
<span class="title">
论开车的重要性
</span>
<span class="data">
2020-5-14
</span>
</div>
<div class="article-body">
<span class="body">
黄河之水天上来！
黄河之水天上来！
黄河之水天上来！
</span>
</div>
<hr>
<div class="article-keyword">
<span ><b>#Java  </b></span>
<span ><b>#python </b></span>
<span ><b>#Golang </b></span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">
论开车的重要性
</span>
<span class="data">
2020-5-14
</span>
</div>
<div class="article-body">
<span class="body">
黄河之水天上来！
黄河之水天上来！
黄河之水天上来！
</span>
</div>
<hr>
<div class="article-keyword">
<span ><b>#Java  </b></span>
<span ><b>#python </b></span>
<span ><b>#Golang </b></span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">
论开车的重要性
</span>
<span class="data">
2020-5-14
</span>
</div>
<div class="article-body">
<span class="body">
黄河之水天上来！
黄河之水天上来！
黄河之水天上来！
</span>
</div>
<hr>
<div class="article-keyword">
<span ><b>#Java  </b></span>
<span ><b>#python </b></span>
<span ><b>#Golang </b></span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">
论开车的重要性
</span>
<span class="data">
2020-5-14
</span>
</div>
<div class="article-body">
<span class="body">
黄河之水天上来！
黄河之水天上来！
黄河之水天上来！
</span>
</div>
<hr>
<div class="article-keyword">
<span ><b>#Java  </b></span>
<span ><b>#python </b></span>
<span ><b>#Golang </b></span>
</div>
</div>
</div>
</body>
</html>
css 文件：
/*这是博客园首页样式*/
/*通用样式*/
body {
margin: 0;
background-color: #eeeeee; /*乳白色*/
}
ul {
list-style-type: none;
padding-left: 0; /*修改列表标签自带的左边框大小*/
}
a {
color: darkgray;
text-decoration: none; /*去掉下划线*/
}
/*鼠标移动到连接上*/
a:hover {
color: #eeeeee;
}
/*左侧标签样式*/
.blog-left {
height: 100%;
width: 20%;
float: left;
position: fixed; /*对于浏览器，固定不动*/
background-color: #4e4e43;
}
.blog-avatar {
height: 200px;
width:200px;
border-radius: 50%; /*半径为50%就是一个圆*/
border:5px solid white;
margin: 20px auto; /*上下外边距为20px 左右居中*/
overflow: hidden; /*溢出内容被修剪，且不可见*/
}
.blog-avatar img{
max-width: 100%;
}
.blog-title,.blog-info{
color: darkgray;
font-size: 18px;
text-align: center; /*水平对齐：居中对齐*/
}
.blog-link ul,.blog-tag ul{
text-align: center; /*水平对齐：居中对齐*/
margin-top: 50px;
}
.blog-link,.blog-tag{
font-size: 24px;
}
/*右侧标签样式*/
.blog-right {
width: 80%;
float: right;
}
.article {
background-color: white;
margin: 20px 40px 10px 10px;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5); /*阴影*/
}
.title {
font-size: 36px;
}
.data {
font-size: 16px;
float: right;
margin: 20px;
font-weight: bolder; /*字体宽度：粗*/
}
.article-title {
border-left: 8px solid red; /*左边框*/
}
.article-body {
font-size: 18px;
text-indent: 32px; /*首行缩进：2个字符*/
}
.article-keyword {
font-size: 10px;
padding-left: 20px;
padding-bottom: 10px;
}
顶部导航条示例
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>li标签的float示例</title>
<style>
/*清除浏览器默认外边距和内填充*/
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none; /*去除a标签默认的下划线*/
}
.nav {
background-color: black;
height: 40px;
width: 100%;
position: fixed;
top: 0;
}
ul {
list-style-type: none; /*删除列表默认的圆点样式*/
margin: 0; /*删除列表默认的外边距*/
padding: 0; /*删除列表默认的内填充*/
}
/*li元素向左浮动*/
li {
float: left;
}
li > a {
/*display: block; !*让链接标签具有块级标签特点*!*/
padding: 0 30px; /*设置左右各30像素的填充*/
color: #b0b0b0; /*设置字体颜色*/
line-height: 40px; /*设置行高*/
}
/*鼠标移上去颜色变白*/
li > a:hover {
color: #fff;
}
/*清除浮动 解决父级塌陷问题*/
.clearfix:after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<!-- 顶部导航栏 开始 -->
<div class="nav">
<ul class="clearfix">
<li><a href="">玉米商城</a></li>
<li><a href="">MIUI</a></li>
<li><a href="">ioT</a></li>
<li><a href="">云服务</a></li>
<li><a href="">水滴</a></li>
<li><a href="">金融</a></li>
<li><a href="">优品</a></li>
</ul>
</div>
<!-- 顶部导航栏 结束 -->
</body>
</html>
