推荐的样式编写顺序:
Positioning: 定位
Box model: 盒子模型, 大小等
Typographic: 文字系列, 排印等
Visual: 可视化, 背景等
Misc: 其它混杂模式
居中
垂直居中, 设置 line-height
水平方向 text-align
flex 弹性盒子
其实就是一个百分比布局, 使用这个的时候, 子元素的宽高会受限制于弹性盒子
复制 <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title > 菜鸟教程 (runoob.com)</title>
- <style>
- .flex-container {
- display: -webkit-flex;/* 谷歌浏览器内核 */
- display: flex;
- width: 500px;
- height: 250px;
- background-color: lightgrey;
- }
- .flex-item {
- background-color: cornflowerblue;
- width: 350px;/* 这里其实是无效的, 具体的宽度得看父布局, 子控件将平分父布局的宽度平分 */
- height: 100px;
- margin: 10px;
- }
- </style>
- </head>
- <body>
- <div class="flex-container">
- <div class="flex-item">flex item 1</div>
- <div class="flex-item">flex item 2</div>
- <div class="flex-item">flex item 3</div>
- </div>
- </body>
- </HTML>
设置背景为图片的一部分
复制 background-image:url() -140px 0px;
计算机中, 左上角为原点, x 正方向是右, y 轴正方向是下
图片偏移设置背景 -140 以 HTML 底部作为参考物, 图片自身向左移动, 所以是负的
鼠标滑过更改样式
:hover 也是属于 CSS 选择器中的一种, 鼠标悬浮在元素上, 元素的样式, 可以使用这个来达到鼠标滑动改变样式的效果
">" 代表着是只选择子代元素, 而空格则代表选中后代元素
- a:link {
- color: #FF0000
- } /* 未访问的链接 */
- a:visited {
- color: #00FF00
- } /* 已访问的链接 */
- a:hover {
- color: #FF00FF
- } /* 鼠标移动到链接上 */
- a:active {
- color: #0000FF
- } /* 选定的链接 */
复制 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <HTML>
- <head>
- <style type="text/css">
- .nav ul{
- display: flex;
- flex-direction: row; /* 盒子内元素的排列方向 */
- padding-left: 100px;
- list-style: none;
- }
- <!-- ">" 代表着是只选择子代元素, 而空格则代表选中后代元素 -->
- .nav ul> li:hover{
- border-left: 1px solid #F27B04;
- border-top: 1px solid #F27B04;
- border-right: 1px solid #F27B04;
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
- cursor: pointer;
- }
- </style>
- </head>
- <body>
- <div class="nav">
- <ul>
- <li > 首页 </li>
- <li > 女人 </li>
- <li > 箱包 </li>
- <li > 美容 </li>
- <li > 男人 </li>
- <li > 运动 </li>
- <li > 数码 </li>
- <li > 热销榜 </li>
- <li > 婚庆 </li>
- <li > 户外 </li>
- <li > 美食 </li>
- </ul>
- </div>
- </body>
- </HTML>
float 浮动与 clear
使用此样式的元素需要设置宽度, 否则, 它们会尽可能地窄.
使用 float 浮动, 会影响到其他的元素, 所以使用 clear 属性
clear 可以 both,left,right
both 两边都不能出现浮动元素, left 是左边不能出现浮动元素, right 是右边不能出现浮动元素
下面的效果链接中的. text_line 如果没有 clear 属性, 文字就会挤在尾部, 宽度不够大的话, 文字还会变成竖排
float 效果链接
例子 1: 竖排三个 div
复制 <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>ff</title>
- </head>
- <body>
- <style type="text/css">
- .left_body{
- width: 200px;
- height: 200px;
- }
- </style>
- <div id="con">
- <div class="left_body" style="background: red;"></div>
- <div class="left_body" style="background: beige;"></div>
- <div class="left_body" style="background: #008000;"></div>
- </div>
- </body>
- </HTML>
例子 2: 使用 float, 水平排列 div
如果宽度不够的话, 会自动换行
复制 <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>ff</title>
- </head>
- <body>
- <style type="text/css">
- .left_body{
- width: 200px;
- height: 200px;
- float: left;
- }
- </style>
- <div id="con">
- <div class="left_body" style="background: red;"></div>
- <div class="left_body" style="background: beige;"></div>
- <div class="left_body" style="background: #008000;"></div>
- </div>
- </body>
- </HTML>
例子 3: 外层 div 包含浮动元素 (使用 clear)
修改外层 div 的位置, 浮动元素的位置也会随之改变
复制 <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>ff</title>
- </head>
- <body>
- <style type="text/css">
- .left_body{
- width: 200px;
- height: 200px;
- float: left;
- }
- #con{
- border: 1px solid #0000FF;
- }
- .clearfix{
- clear: both;
- }
- </style>
- <div id="con">
- <div class="left_body" style="background: red;"></div>
- <!-- 如果在这里加一个下面的注释的 div, 可以达到换行的效果 -->
- <!--<div class="clearfix"></div> -->
- <div class="left_body" style="background: beige;"></div>
- <div class="left_body" style="background: #008000;"></div>
- <div class="clearfix"></div>
- </div>
- </body>
- </HTML>
例子 4: 外层 div 包含浮动元素 (外层 div 也设置为 float)
修改外层 div 的位置, 浮动元素的位置也会随之改变
复制 <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>ff</title>
- </head>
- <body>
- <style type="text/css">
- .left_body{
- width: 200px;
- height: 200px;
- float: left;
- }
- #con{
- border: 1px solid #0000FF;
- float:left;
- }
- </style>
- <div id="con">
- <div class="left_body" style="background: red;"></div>
- <div class="left_body" style="background: beige;"></div>
- <div class="left_body" style="background: #008000;"></div>
- </div>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3204431.html