backgroumd-repeat(repeat-x) 平铺php
background-repeat:no-repeat; 设置不平铺css
background-position 属性改变图像在背景中的位置:html
简写形式css3
backgrond:(#ffffff url() no-repeat right top)web
background-attachment:fixed; 固定背景图像app
------------------------------------------------------------------------------------------------------------------------------布局
text-align:right;文本左对齐字体
当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)。ui
text-decoration:none; 取消下划线url
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" 列中的数字表示哪一个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"。可是请注意,这两种方法会产生不一样的结果。
visibility:hidden能够隐藏某个元素,但隐藏的元素仍需占用与未隐藏以前同样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
display:none能够隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,并且该元素本来占用的空间也会从页面布局中消失。
块元素是一个元素,占用了所有宽度,在先后都是换行符。
块元素的例子:
内联元素只须要必要的宽度,不强制换行。
内联元素的例子:
-----------------------------------------------------------------------------------------------------------------------------------
绝对定位的元素的位置相对于最近的已定位父元素,若是元素没有已定位的父元素,那么它的位置相对于<html>:
相对定位元素的定位是相对其正常位置。
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.php?filename=trycss_image_gallery_responsive
----------------------------------------------------------------------------------------------------------------------------
电影鼠标移入开灯关灯的效果
http://www.runoob.com/try/try.php?filename=trycss_transparency
http://www.runoob.com/try/try.php?filename=trycss_image_transparency
-------------------------------------------------------------------------------------------------------------------------------
css3
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>