📖 earlier posts 📖

CSS 盒子模型

2022-04-21
css

<style>
	p {
		background-color: aliceBlue ;
		/*宽*/
		width: 500px;
		/*边框*/
		border: 1px solid salmon;
		/*边距*/
		padding: 100px;
		/*右下移动*/
		margin: 10px;
	}
</style>
<body>
<p style="text-align:left;">Hello,Box model.<br>其实他就是一个盒子，将文字什么的包装到了一起</p>
</body>

盒子模型是CSS中的一个典型的页面不住，其本质就是一个盒子。主要包涵边缘、边界、填充、内容的呢高相关信息。

1.1 边缘（轮廓）

1.2.1 边框样式

1.1 虚线轮廓（dotted）

1
2
3

.p1 {
	outline-style: dotted;
	}

1.1.2 虚线轮廓（dashed）

1
2
3

.p2 {
	outline-style: dashed;
	}

1.2 实线轮廓（solid）

1
2
3

.p3 {
	outline-style: solid;
	}

1.3 双实线轮廓（double）

1
2
3

.p4 {
	outline-style: double;
	}

1.4 凹槽轮廓（groove）

1
2
3

.p5 {
	outline-style: groove;
	}

1.5 奎状轮廓（ridge）

1
2
3

.p6 {
	outline-style: ridge;
	}

1.6 嵌入轮廓（inset）

1
2
3

.p7 {
	outline-style: inset;
	}

1.7 外凸轮廓（outset）

1
2
3

.p8 {
	outline-style: outset;
	}

轮廓颜色

.p1 {
	outline-style: double;
	outline-color: #0000CD;
	}

轮廓大小

.p1 {
	outline-style: solid;
	outline-width: 10px;
	}

ID	DE	FA
dotted	虚线轮廓	outline-style
dashed	虚线轮廓
solid	实线轮廓
double	双实线轮廓
groove	凹槽轮廓
ridge	奎状轮廓
inset	嵌入轮廓
outset	外凸轮廓

	轮廓颜色	outline-color

	轮廓大小	outline-width

1.2 边界（边框）

1.2.1 边框样式

1
2
3

p.p1 {
	border-style: dotted;
	}

1
2
3

p.p2 {
	border-style: dashed;
	}

1
2
3

p.p3 {
	border-style: solid;
	}

1
2
3

p.p4 {
	border-style: double;
	}

1
2
3

p.p5 {
	border-style: groove;
	}

1
2
3

p.p6 {
	border-style: ridge;
	}

1
2
3

p.p7 {
	border-style: inset;
	}

1
2
3

p.p8 {
	border-style: outset;
	}

1
2
3

p.p9 {
	border-style: hidden;
	}

<style>
p.p1 {
	/*上*/
	border-top-style:dotted;
	
	/*右*/
	border-right-style:dashed;
		
	/*下*/
	border-bottom-style:solid;
		
	/*左*/
	border-left-style:double;
	}
</style>
<body>
	<p class="p1">Hello</p>
</body>

<style>
p.p1 {
	border-style: outset;
	border-color: blue;
	}
</style>
<body>
	<p class="p1">Hello</p>
</body>

<style>
p.p1 {
	border: 1px solid blue;
	}
</style>
<body>
	<p class="p1">Hello</p>
</body>

ID	DE	FA
dotted	虚线边框	border-style
dashed	虚线边框
solid	实线边框
double	双实线边框
groove	凹槽边框
ridge	垄状边框
inset	嵌入边框
outset	外凸边框
hidden	无边框

border-top-style	上	边界样式
border-right-style	右
border-bottom-style	下
border-left-style	左

border-color		设置颜色

border		边框大小\格式\颜色

1.5 填充

<style>
p {
	background-color: #AFEEEE;
	}
.p1 {
	/*头部距离填充*/
	padding-top: 120px;
	
	/*底部距离填充*/
	padding-bottom: 100px;
	
	/*左距填充*/
	padding-left: 120px;
	
	/*右距填充*/
	padding-right: 120px;
	}
</style>
<body>
<p>新闻:</p>
<p class="p1">作为全球领先的水晶制造商之一，施华洛世奇目前旗下主要分为Swarovski Crystal Business（施华洛世奇水晶）、Tyrolit（泰利莱固结磨具）、Swarovski Optik（光学仪器）三大业务线。2019年，施华洛世奇集团年销售额为35亿欧元，其中水晶业务的年销售额为27亿欧元。</p>
</body>

ID	DE	FA
top	头部距离填充	padding
bottom	底部距离填充
left	左距填充

1.4 布局

<style>
.p1 {
	/*头部距离*/
	margin-top: 20px;
	
	/*底部距离*/
	margin-bottom: 1px;
	
	/*左距*/
	margin-left: 20px;
	}
</style>
<body>
<p>新闻:</p>
<p class="p1">作为全球领先的水晶制造商之一，施华洛世奇目前旗下主要分为Swarovski Crystal Business（施华洛世奇水晶）、Tyrolit（泰利莱固结磨具）、Swarovski Optik（光学仪器）三大业务线。2019年，施华洛世奇集团年销售额为35亿欧元，其中水晶业务的年销售额为27亿欧元。</p>
</body>

ID	DE	FA
top	头部距离	margin
bottom	底部距离
left	左距

CSS 链接与表格

2022-04-21
css

<style>
	/*未访问时*/
	a:link {
		color: #000000;
	}
	/*正常*/
	a:visited {
		color: #FF0000;
	}
	/*鼠标接触*/
	a:hover {
		color: #00FF00;
	}
	/*单击时*/
	a:active {
		color: #0000FF;
	}
</style>
<body>
	<a href="http://zsdk.org.cn/"  style="text-decoration:none" target="_blank">首页</a>
</body>

<style>
	/*未访问时*/
	a:link {
		background-color: #000000;
	}
	/*正常*/
	a:visited {
		background-color: #FF0000;
	}
	/*触点*/
	a:hover {
		background-color: #00FF00;
	}
	/*单击*/
	a:active {
		background-color: #0000FF;
	}
</style>
<body>
	<a href="http://jiangxue.org.cn/" style="text-decoration:none" target="_blank">访问首页</a>
</body>

<style>
	ul {
		/*列表样式类型*/
		list-style-type: none;
		
		/*向东南移动*/
		padding: 100px;
		
		/*向东南移动*/
		margin: 130px;
	}
	ul li {
		background-image: url(http://cdn.hktd32t.10.10.8.132.scdn.td98.com/jiangxue.org.cn/picture/ui.png);
		
		/*背景是否重复*/
		background-repeat: no-repeat;
		
		/*背景位置*/
		background-position: 0px 5px;
		
		/*左填充*/
		padding-left: 30px;
	}
</style>
<body>
<ul>
	<li>你好世界</li>
	<li>Hello,world</li>
</ul>
</body>

ID	DE	FA
link	未访问时	<a>
visited	正常
hover	鼠标接触
active	单击时
text-decoration:none	去除链接下划线

list-style-type	列表样式类型（none)	ul
padding	向东南移动
margin	向东南移动

repeat	背景是否重复（no-repeat）	background
position	背景位置

left	左填充	padding

CSS 文本及格式

2022-04-21
css

<style>
	b {
		color: #008080;
	}
</style>
<body>
	<b>Hello,world!</b>
</body>

1.2 对齐方式

<style>
/*设置字体*/
p {
	font-family: "黑体";
	}
	
/*标题*/
h1 {
	text-align: center;
	}
	
/*副白标题*/
h4 {
	text-decoration: overline;
	text-align: center;
	}

/*删除字*/
h6 {
	text-decoration: line-through;
	}
	
/*下划线*/
b {
	text-decoration : underline;
	}

/*右侧*/
p.right {
	text-align: right;
	}
	
/*整齐*/
p.neat {
	text-align: justify;
	/*缩进*/
	text-indent: 20px;
	}
</style>
<body>
	<h1>Hello,world!</h1>
	<h4>1972年</h4>
	<p class="right">《C语言程序设计》</p>
	<p class="neat">作为所有编程语言的起始阶段，HELLO WORLD占据着无可比拟的地位。在所有中/英/法/德/美……版本的编程教材中，HELLO WORLD总是作为第一个TEST记录于书本之中，所有编程者学习编程的第一步就在于此了！经典中的经典！HELLO WORLD！这个例程是从Kernighan & Ritchie 合著的《The C Programme Language》开始有的，因为它的简洁，实用，并包含了一个程序所应具有的一切，因此为后来的些类书的作者提供了范例，一直待续到今。</p>
	<b>涉嫌引战删除</b>
	<h6>C语言是世界上最好的语言</h6>
</body>

1.3 大小写格式

<style>
	/*全部大写*/
	p.capital {
		text-transform: uppercase;
	}
	/*全部小写*/ 
	p.initialcapital {
		text-transform: lowercase;
	}
	/*首字母大写*/
	p.lowercase {
		text-transform: capitalize;
	}
</style>
<body>
	<p class="capital">hello,world!</p>
	<p class="initialcapital">hello,world!</p>
	<p class="lowercase">Hello,world!</p>
</body>

1.4 文本格式

<style>
p.italic {
	font-style: italic;
	}
</style>
<body>
	<p class="italic">Hello,world!</p>
</body>

1.5 文字大小

1.5.1 px

<style>
h1 {
	font-size:10px;
	}
</style>
<body>
	<h1>Hello,world!</h1>
</body>

1.5.2 em

<style>
h1 {
	font-size:0.625em;
	}
</style>
<body>
	<h1>Hello,world!</h1>
</body>

关于em的数值可通过“ 10px ÷ 16 = 0.525” 最终得出“0.625em”可被font-size所读取。

ID	DE	FA
color	文本颜色
family	设置字体	font
italic	斜体	font-style
size	字体大小

align	文本格式( center = 居中, right = 居右, left = 居左)	text
indent	缩进
overline	顶部横线	text-decoration
line-through	删除字
underline	下划线
		text-transform
uppercase	全部大写
lowercase	全部小写
capitalize	首字母大写

CSS 背景

2022-04-21
css

<style>
body {
    background-color: #FF0000; 
}
</style>
<body>
<h4>红色</h4>
</body>

在计算机视觉之中，颜色值通常分为三种，主要分别为十六进制、RGB、颜色名称 三大类，在本文主要使用的是十六进制模式。

<style>
body {
    background-image: url('http://zsdk.org.cn/img/Home_ZhongShan/Background_Safety.png');
}
</style>
<body>
<h4>背景</h4>
</body>

水平平铺

<style>
	body {
		background-image: url('http://cdn.hktd32t.10.10.8.132.scdn.td98.com/jiangxue.org.cn/picture/ui.png');
	}
</style>
<body>
	<h4>背景</h4>
</body>

1.3 位置与大小

<style>
	body {
		background-image: url('http://cdn.hktd32t.10.10.8.132.scdn.td98.com/jiangxue.org.cn/picture/ui.png');
		/*背景不重复*/
		background-repeat: no-repeat;
		
		/*背景位置*/
		background-position: left top;
		
		/* 文字（覆盖）大小/ */
		margin-right: 330px;
	}
</style>
<body>
	<br>
	<h4>背景</h4>
	<p>通过no-repeat;来设置背景不重复</p>
	<p>之后使用position: right top;来设置图片的位置</p>
	<p>之后使用right来设置文字的覆盖大小</p>
</body>

1.3.1 简写

<style>
body {
	background: url('http://cdn.hktd32t.10.10.8.132.scdn.td98.com/jiangxue.org.cn/picture/ui.png') no-repeat right top;
	margin-right: 100px;
	}
</style>
<body>
	<b>退出</b>
	<p>拼音：tuì chū</p>
	<p>释义：指在某活动中 离开；或者在 上网时离开 登陆。</p>
	<p>英文： quit</p>
	<p>反义词：进入。</p>
</body>

ID	DE	FA
color	背景颜色	background
image	背景图像
repeat	水平平铺
repeat	背景不重复
position	背景位置( center = 居中, right = 居右, left = 居左,top = 头部，bottom = 底部)

right	文字规定大小范围	margin

CSS 引入与使用

2022-04-21
css

全局引入CSS文件

1
2
3

<head>
	<link rel="stylesheet" type="text/css" href="title.css">
</head>

<style>
p {
	color: red;    
}
</style>
<body>
	<p>Hello,world!</p>
</body>

自此在<body>部分中使用<p>的文本内容将会默认使用<style>中的“p”内的相关语法将会被自动引用

Hello,world!

1	<p style="color: red;">Hello,world!</p>

多重样式

<p>Hello,world!</p>

<style>
p {
    color: red;
}
p {
    font-size: 100px;
}
</style>
<body>
	<p>Hello,world!</p>
</body>

CSS 滚动栏

2022-04-21
css

/*滚动条*/
body {
    overflow-y: scroll;
    overflow-x: visible;
}   

/*滚动条整体部分*/
::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}
 
::-webkit-scrollbar-track,

 /*滑块*/
::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 5px solid transparent;
}

/*外层轨道*/
::-webkit-scrollbar-track {
    box-shadow: 0px 0px 0px rgba(0,0,0,.2) inset;
}

/*滑块*/
::-webkit-scrollbar-thumb {
    min-height: 20px;
    background-clip: content-box;
    box-shadow: 0 0 0 5px #f0f0f0 inset;
}

/*边角*/
::-webkit-scrollbar-corner {
    background: transparent;
}

ID	DA	FA
scrollbar	滚动条整体部分	webkit
resizer	右下拖动快

button	两端的按钮	webkit-scrollbar
thumb	滑块
corner	边角

track	外层轨道	webkit-scrollbar-track
piece	内层轨道

CSS 表单

2022-04-21
css

渲染表单

<style>
    input[type=text] , select {
		/*宽度*/
        width: 100px;
		
		/*边距*/
        margin: 10px 0;
		
		/*显示*/
        display: inline-block;
		
		/*边框*/
        border: 2px solid whitesmoke;
		/*半径*/
        border-radius: 1px;
		/*框尺寸*/
        box-sizing: border-box;
    }
    input[type=submit] {
        width: 100%;
        background-color: blue;
        color: white;
        padding: 20px 20px;
        margin: 10px 0;
        border: none;
        border-radius: 10px;
        cursor: pointer;
    }
    input[type=submit]:hover {
        background-color: #00008B;
    }
    div {
        border-radius: 10px;
        background-color: cadetblue;
        padding: 10px;
    }
</style>
<body>
    <form action="http://zsdk.org.cn/">
        <label for="name">Name</label>
        <input type="text" id="name" name="inputname" placeholder="name...">

        <label for="describe">Describe</label>
        <input type="text" id="describe" name="inputdescribe" placeholder="Describe">

        <input type="submit" value="Submit">
    </form>
</body>

下划线表单渲染

<style>
    input[type=text] {
        outline:medium;
        width: 100%;
        padding: 10px 0px;
        margin: 10px 0;
        box-sizing: border-box;
        border: none;
        border-bottom: 1px solid blue;
    }
</style>
<body>
    <form>
        <label for="name">你的用户名称</label>
        <input type="text" id="name" name="id">
        
    </form>
</body>

聚焦后的表单颜色

<style>
    input[type=text] {
        outline:medium;
        width: 100%;
        padding: 12px 0px;
        margin: 10px 0;
        box-sizing: border-box;
        border: 1px solid blue;
    }
    input[type=text]:focus {
        background-color: cornflowerblue;
    }
</style>
<body>
    <form>
        <label for="name">请输入您的名称</label>
        <input type="text" id="name" name="id" value="id">
    </form>
</body>

收到焦点后的动画效果

<!DOCTYPE html>
<html>
<head>
<mata chearset="utf-8">
<title>Hello,world</title>
<style>
  input[type=text] {
    width: 100%;
    padding: 20px 20px;
    margin: 10px 0;
    box-sizing: border-box;
    border: 5px solid aqua;
    -webkit-transition: 1s;
    transition: 1s;
    outline: none;
  }
  input[type=text]:focus {
    border: 5px solid blue;
  }
</style>
<body>
  <form>
    <input type="text" id="fname" name="name" value="name">
  </form>
</body>
</html>

设置表单内图片与焦点动画

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Hello,world</title>
<style> 
input[type=text] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid aquamarine;
  border-radius: 10px;
  font-size: 10px;
  background-color: white;
  background-image: url('img/so.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding: 22px 20px 22px 70px;
  -webkit-transition: 1s;
  transition: 1s;
  outline:medium;
}
input[type=text]:focus {
  border: 2px solid blue;
}
</style>
<body>
  <from>
    <input type="text" name="search" placeholder="请输入搜索">
  </from>
</body>

表单触发效果与动画

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Hello,world</title>
<style> 
input[type=text] {
  width: 200px;
  box-sizing: border-box;
  border: 1px solid aquamarine;
  border-radius: 10px;
  font-size: 10px;
  background-color: white;
  background-image: url('img/so.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding: 22px 20px 22px 70px;
  -webkit-transition: 1s;
  transition: 1s;
  outline:medium;
}
input[type=text]:focus {
  border: 2px solid blue;
  width: 100%;
}
</style>
<body>
  <from>
    <input type="text" name="search" placeholder="请输入搜索">
  </from>
</body>

<style>
    select {
        width: 100px;
        padding: 16px 20px;
        border: none;
        border-radius: 3px;
        background-color: cornsilk;
    }
</style>
<body>
    <form>
        <select id="language" name="language">
        <option value="cn">China</option>
        <option value="us">English</option>
		</select>
    </form>
</body>

去除表单触点边框（outline:medium;）

1	outline:medium;

CSS 布局

2022-04-21
css

头部布局

<style>
  /*头部*/
  .header {
    background-color: aliceblue;
    padding: 80px;
    text-align: center;
  }

  /*布局*/
  .layout {
    float: left;
    width: 40%;
  }
</style>
<body>
<div class="header">
  <div class="layout">
    <h1>No.1</h1>
    <p>冬天常常驶过一个农庄马丶冷落的铅丝网树丶干涸的河床今早，我忽然觉得有一些异样嫩柳在丝丝飘忽牡马在频频昂仰马丶树和我之间互传着什么消息？    </p>
  </div>

  <div class="layout">
    <h1>No.2</h1>
    <p>冬天常常驶过一个农庄马丶冷落的铅丝网树丶干涸的河床今早，我忽然觉得有一些异样嫩柳在丝丝飘忽牡马在频频昂仰马丶树和我之间互传着什么消息？    </p>
  </div>

  <div class="layout">
    <h1>No.3</h1>
    <p>两月中原消息断，不应京国亦无闻。庙堂如未弃黎庶，日日诏书清垢氛。</p>
  </div>
	</div>
</body>

文字布局

<style>
  /*布局*/
  .layout {
    float: left;
    width: 40%;
  }
</style>
<body>
  <div class="layout">
    <h1>No.1</h1>
    <p>冬天常常驶过一个农庄马丶冷落的铅丝网树丶干涸的河床今早，我忽然觉得有一些异样嫩柳在丝丝飘忽牡马在频频昂仰马丶树和我之间互传着什么消息？    </p>
  </div>

  <div class="layout">
    <h1>No.2</h1>
    <p>冬天常常驶过一个农庄马丶冷落的铅丝网树丶干涸的河床今早，我忽然觉得有一些异样嫩柳在丝丝飘忽牡马在频频昂仰马丶树和我之间互传着什么消息？    </p>
  </div>

  <div class="layout">
    <h1>No.3</h1>
    <p>两月中原消息断，不应京国亦无闻。庙堂如未弃黎庶，日日诏书清垢氛。</p>
  </div>
</body>

底部布局

1	<p style="position:absolute;bottom:0">Hello,world!</p>

ID	DE	FA
padding	填充大小	padding

color	背景颜色	background

align	居中	text

left	文字居左	float

width	宽度	width

absolute	绝对位置	position

bottom	底部位置	bottom

CSS 导航栏

2022-04-21
css

<!DOCTYPE html>
<html>
    <head>
        <mata charset="UTF-8">
        <title>Hello,world!</title>
    </head>
    <body>
        <ui>
            <li><a href="#">首页</a></li>
            <li><a href="#">文章</a></li>
            <li><a href="#">归档</a></li>
            <li><a href="#">关于</a></li>
        </ui>
    </body>
</html>

<style>
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        text-decoration: none;
        display: inline-table;
    }
</style>
<body>
    <ul>
        <li><a href="#" style="text-decoration: none;">首页</a></li>
        <li><a href="#" style="text-decoration: none;">文章</a></li>
        <li><a href="#">归档</a></li>
        <li><a href="#">关于</a></li>
    </ul>
</body>

完善的导航栏

垂直导航栏

<style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        background-color: darkgrey;
    }
    li a {
        display: block;
        color: blue;
        padding: 10px 20px;
    }
    li a:hover {
        background-color: teal;
        color: white;
    }
</style>
<body>
    <ul>
        <li><a href="#" style="text-decoration: none;">首页</a></li>
        <li><a href="#" style="text-decoration: none;">文章</a></li>
        <li><a href="#" style="text-decoration: none;">归档</a></li>
        <li><a href="#" style="text-decoration: none;">关于</a></li>
    </ul>
</body>

水平导航栏

<style>
    ul {
        list-style-type: none;
        overflow: hidden;
        background-color: blue;
    }
    li {
        float: left;
    }
    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 20px 20px;
        text-decoration: none;
    }
    li a:hover {
        background-color: cornflowerblue;
    }
</style>
<body>
    <ul>
        <li><a href="#" style="text-decoration: none;">首页</a></li>
        <li><a href="#" style="text-decoration: none;">文章</a></li>
        <li><a href="#" style="text-decoration: none;">归档</a></li>
        <li><a href="#" style="text-decoration: none;">关于</a></li>
    </ul>
</body>

激活导航栏

<style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        background-color: darkgrey;
    }
    li a {
        display: block;
        color: blue;
        padding: 10px 20px;
    }
    .active {
        background-color: blue;
        color: white
    }
    li a:hover {
        background-color: teal;
        color: white;
    }
</style>
<body>
    <ul>
        <li><a href="#" class="active" style="text-decoration: none;">首页</a></li>
        <li><a href="#" style="text-decoration: none;">文章</a></li>
        <li><a href="#" style="text-decoration: none;">归档</a></li>
        <li><a href="#" style="text-decoration: none;">关于</a></li>
    </ul>
</body>

导航栏与文字位置

文字居右

<style>
    ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        background-color: blue;
    }
    li {
        float: left;
    }
    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 20px 20px;
        text-decoration: none;
    }
    li a:hover {
        background-color: cornflowerblue;
    }
</style>
<body>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">归档</a></li>
        <li><a href="#">关于</a></li>
        <li style="float: right;"><a href="#">EN</a></li>
    </ul>
</body>

固定头部

<style>
    ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        background-color: blue;
		position: fixed;
   		top: 0px;
    	width: 100%;
    }
    li {
        float: left;
    }
    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 20px 20px;
        text-decoration: none;
    }
    li a:hover {
        background-color: cornflowerblue;
    }
</style>
<body>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">归档</a></li>
        <li><a href="#">关于</a></li>
        <li style="float: right;"><a href="#">EN</a></li>
    </ul>
		<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>

	<p>
</body>

固定底部

<style>
    ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        background-color: blue;
		position: fixed;
   		bottom: 0px;
    	width: 100%;
    }
    li {
        float: left;
    }
    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 20px 20px;
        text-decoration: none;
    }
    li a:hover {
        background-color: cornflowerblue;
    }
</style>
<body>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">归档</a></li>
        <li><a href="#">关于</a></li>
        <li style="float: right;"><a href="#">EN</a></li>
    </ul>
		<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>
	<p>①借助语言、文字、图片、录像等，向公众传播的消息。具有现实性、时间性、公开性和连续性等特点，以及传递信息、宣传鼓动、服务社会、提供知识等功能。从事采集、传播新闻的专门机构有通讯社、报社、广播电台、电视台等。</p>

	<p>
</body>

下拉导航栏

<style>
    /*正常菜单*/
    ul {
        list-style-type: none;
        overflow: hidden;
        background-color: blue;
    }
    li {
        float: left;
    }
    li a, drop-button {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 20px 20px;
        text-decoration: none;
    }
    li a:hover, .drop-down:hover{
        background-color: cornflowerblue;
    }

    /*下拉菜单开始*/
    .dropdown {
        display: inline-block;
    }
    .drop-downcontent {
        display: none;
		color: #008080;
		position: absolute;
        background-color: blue;
		top: 64px;
        min-width: 250px;
        box-shadow: 0px 10px 20px 0px rgba(0,0,0,0,0.1);
    }
    .drop-downcontent a {
        padding: 20px 20px;
        text-decoration: none;
        display: block;
    }
    .drop-downcontent a:hover {
        background-color: cornflowerblue;   
    }
    .dropdown:hover .drop-downcontent {
        display: block;
    }
</style>
<body>
    <ul>
        <li><a href="#" style="text-decoration: none;">首页</a></li>
        <li><a href="#" style="text-decoration: none;">文章</a></li>
        <li><a href="#" style="text-decoration: none;">归档</a></li>
        <div class="dropdown">
			<li><a href="#" class="drop-button">关于</a></li>
                <div class="drop-downcontent">
                    <a href="#" style="color: white;">创始人团队</a>
                    <a href="#" style="color: white">投资者关系</a>
            </div>
        </div>
    </ul>
</body>

CSS 选择器

2022-04-21
css

Div p

<style>
	div p {
		background-color: red;
	}
</style>
<body>
	<div>
		<p>Hello</p>
		<p>World!</p>
	</div>
	<p>Helo,world</p>
</body>

Div>p

<style>
	div>p {
		background-color: red;
	}
</style>
<body>
	<div>
		<p>Hello</p>
		<p>World!</p>
	</div>
	
		<div>
		<p>Hello</p>
		<p>World!</p>
	</div>
	
	<div>
	<p>Helo,world</p>
	</div>
	
	<p>Hello,world</p>
</body>

Div~p

<style>
	div~p {
		background-color: red;
	}
</style>
<body>
	<div>
		<p>1-Hello</p>
		<p>World!</p>
	</div>
	
		<div>
		<p>2-Hello</p>
		<p>World!</p>
	</div>
	
	<div>
	<p>3-Helo,world</p>
	</div>
	<p>4-Hello,world</p>
	<p>Hello,world</p>
	<p>Hello,world</p>
</body>

Div+p

<style>
	div+p {
		background-color: red;
	}
</style>
<body>
	<div>
		<p>1-Hello</p>
		<p>World!</p>
	</div>
	
		<div>
		<p>2-Hello</p>
		<p>World!</p>
	</div>
	
	<div>
	<p>3-Helo,world</p>
	</div>
	<p>4-Hello,world</p>
	<p>Hello,world</p>
	<p>Hello,world</p>
</body>

ID	DE	FA
空格	Div里面的p元素所使用
>	Div+p里面的所有内容所使用
～	Div+p里面以外所使用
+	Div+p里面外第一个内容所使用的

📖 more posts 📖