backgroumd-repeat(repeat-x) 平铺
background-repeat:no-repeat; 设置不平铺
background-position 属性改变图像在背景中的位置:
简写形式
backgrond:（#ffffff url() no-repeat right top）
background-attachment:fixed; 固定背景图像
------------------------------------------------------------------------------------------------------------------------------
text-align:right;文本左对齐
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
text-decoration:none; 取消下划线
text-decoration:overline;上部下划线
text-decoration:line-through; 金额多少钱划去的下划线
text-decoration:underline; 常规的底部下划线
text-transform:uppercase :uppercase;全部大写
text-transform:uppercase :lowercase; 全部小写
text-transform:uppercase :cpittalize; 单词首字母大写
text-indent:50px; 文本缩进
letter-spacing 设置字间距
text-shadow:2px 2px #FF0000; 设置文本阴影
white-space:nowrap;规定段落的文本不进行换行
-------------------------------------------------------------------------------------------------------------------------------font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
font-style:normal; 正常字体
font-style:italic; 右斜
font-style:oblique; 左斜
----------------------------------------------------------------------------------------------------------------------------------
list-style-type:circle; 列表前面显示空白小圆点
list-style-type:none; 列表原本样式
list-style-type:square; 列表前面显示空白正方形
list-style-type:lower-alpha; 列表前面显示 abc
list-style-image:url('sqpurple.gif'); 列表前面的点替换成图片
-------------------------------------------------------------------------------------------------------------------------------
表格
table tr th 头部 tr td 内容 /table
border-collapse: collapse; 属性设置表格的边框是否被折叠成一个单一的边框或隔开：
vertical-align:bottom;垂直对齐属性设置垂直对齐，比如顶部，底部或中间：
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
所有CSS 轮廓（outline）属性
"CSS" 列中的数字表示哪个CSS版本定义了该属性(CSS1 或者CSS2)。
属性 说明 值 CSS
outline 在一个声明中设置所有的轮廓属性 outline-color
outline-style
outline-width
inherit 2
outline-color 设置轮廓的颜色 color-name
hex-number
rgb-number
invert
inherit 2
outline-style 设置轮廓的样式 none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit 2
outline-width 设置轮廓的宽度 thin
medium
thick
length
inherit 2
------------------------------------------------------------------------------------------------------------------------------------
隐藏元素 - display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
CSS Display - 块和内联元素
块元素是一个元素，占用了全部宽度，在前后都是换行符。
块元素的例子：
<h1>
<p>
<div>
内联元素只需要必要的宽度，不强制换行。
内联元素的例子：
<span>
<a>
-----------------------------------------------------------------------------------------------------------------------------------
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
relative 定位
相对定位元素的定位是相对其正常位置。
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。
----------------------------------------------------------------------------------------------------------------------------------
元素浮动
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边：
----------------------------------------------------------------------------------------------------------------------------------
元素居中对齐
要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。
设置到元素的宽度将防止它溢出到容器的边缘。
元素通过指定宽度，并将两边的空外边距平均分配：
图片居中对齐
要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中:
--------------------------------------------------------------------------------------------------------------------------------
伪类元素
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
------------------------------------------------------------------------------------------------------------------------------
在列表栏中
可以根据last-child
选择最下面的一个li然后去掉下面的横线边框
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
border: 1px solid #555;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right:1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
实现导航栏固定到顶部的方法
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
常用的导航栏颜色
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #4CAF50;
}
-------------------------------------------------------------------------------------------------------------------------------
点击打开链接 点击打开链接 点击打开链接
响应式的宽度600 900的导航栏 响应式下拉导航栏
------------------------------------------------------------------------------------------------------------------------------
鼠标移入显示下拉显示隐藏
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<h2>鼠标移动后出现下拉菜单</h2>
<p>将鼠标移动到指定元素上就能看到下拉菜单。</p>
<div class="dropdown">
<span>鼠标移动到我这！</span>
<div class="dropdown-content">
<p>1111</p>
<p>ww.runoob.com</p>
</div>
</div>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 10px 0px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>下拉菜单</h2>
<p>鼠标移动到按钮上打开下拉菜单。</p>
<div class="dropdown">
<button class="dropbtn">下拉菜单</button>
<div class="dropdown-content">
<a href="http://www.runoob.com">菜鸟教程 1</a>
<a href="http://www.runoob.com">菜鸟教程 2</a>
<a href="http://www.runoob.com">菜鸟教程 3</a>
</div>
</div>
左右点击出现导航栏
点击打开链接
http://www.runoob.com/try/try.php?filename=trycss_dropdown_image
淘宝商城图片放大缩小的例子
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: right;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #111;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<div class="dropdown">
<a href="#" class="dropbtn">下拉菜单</a>
<div class="dropdown-content">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</div>
</ul>
<h3>导航栏上的下拉菜单</h3>
<p>鼠标移动到 "下拉菜单" 链接先显示下拉菜单。</p>
---------------------------------------------------------------------------------------------------------------------------------
http://www.runoob.com/css/css-tooltip.html
鼠标移入出现边框 上下左右
----------------------------------------------------------------------------------------------------------------
http://www.runoob.com/try/try.php?filename=trycss_image_gallery
图片下部边框图片廊
-------------------------------------------------------------------------------------------------------------------------
响应式的图片
http://www.runoob.com/try/try.ph ... _gallery_responsive
----------------------------------------------------------------------------------------------------------------------------
电影鼠标移入开灯关灯的效果
http://www.runoob.com/try/try.php?filename=trycss_transparency
http://www.runoob.com/try/try.ph ... _image_transparency
-------------------------------------------------------------------------------------------------------------------------------
css3
border-radius 圆角边框
box-shadow 盒子阴影
border-image
div
{
border:15px solid transparent;
width:250px;
padding:10px 20px;
}
#round
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}
#stretch
{
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch;
}
</style>
</head>
<body>
<div id="round">这里，图像平铺（重复）来填充该区域。</div>
<br>
<div id="stretch">这里，图像被拉伸以填充该区域。</div>
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(/images/paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p> border-radius 属性允许向元素添加圆角。</p>
<p>指定背景颜色元素的圆角:</p>
<p id="rcorners1">圆角</p>
<p>指定边框元素的圆角:</p>
<p id="rcorners2">圆角</p>
<p>指定背景图片元素的圆角:</p>
<p id="rcorners3">圆角</p>
</body>
border-radius 也可以通过 px值来改变它的样式
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
---------------------
【转载，仅作分享，侵删】
作者：前端小99
原文：https://blog.csdn.net/qq_41328247/article/details/80971916
版权声明：本文为博主原创文章，转载请附上博文链接！
|
|
收藏
淘帖
踩
奈斯，感谢分享
