当前位置:首页 » 技术教程 » 实用教程 » 详情

最常使用css代码

不解析html直接输出代码

  1. <xmp>
  2. html代码
  3. </xmp>

css优先级

  1. !important
  2. //使用方式
  3. float: right!important;

CSS动画样式

  1. transition: all .2s;
  2. -webkit-transition: all .2s;

css 超过宽度的文字显示点点

  1. text-overflow : ellipsis; white-space : nowrap; overflow : hidden;
  2. text-align: center; white-space:nowrap;overflow:hidden; text-overflow : ellipsis;

框架居中

  1. margin: 0 auto;

框架靠右

  1. float: right;

框架靠左

  1. float: left;

防止撑破框架

  1. <style>
  2. .clearfix:after {
  3. content: "";
  4. display: table;
  5. clear: both;
  6. }
  7. </style>
  8. <div class="clearfix"></div>

HTML <div> 标签的 align 属性居中

  1. <div align="center">
  2. This is some text!
  3. </div>

将图像宽度和高度分别设置为 200 像素:

  1. <img src="/i/mouse.jpg" height="200" width="200" />

html+css

  1. style=""

在html加载css

  1. <style type="text/css">
  2. </style>

在html加载js

  1. <script>
  2. </script>

响应式代码

  1. /*浏览器宽度小于于800px*/
  2. @media screen and (max-width: 800px) {
  3. }
  4. /*浏览器宽度大于800px*/
  5. @media only screen and (min-width:800px){
  6. }

CSS层级如何让一个层永远在最上面显示

  1. position:relative;
  2. z-index:9999;
  3. 或者
  4. position:absolute;
  5. z-index:9999;

display:none; 使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;
visibility:hidden; 使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。
隐藏代码css

  1. .yc {display:none;}

CSS边框

  1. border: 1px solid #9e4848;

左侧边框带宽度,颜色为蓝色

  1. <div style="background-color: #ddffff!important;padding: 14px;border-left: 6px solid #ccc!important;border-color: #2196F3!important;">
  2. <p>
  3. 左侧边框带宽度,颜色为蓝色
  4. </p>
  5. </div>

css边距

  1. margin-top:10px;/*上*/
  2. margin-bottom:10px;/*下*/
  3. margin-right:50px;/*右*/
  4. margin-left:50px;/*左*/
  5. padding:29px;

css发光

  1. box-shadow: 0 0 10px #f00;

css背景

  1. background-color: yellow
  2. background-color: #00ff00
  3. background-color: transparent
  4. background-color: rgb(250,0,255)
  5. background-image: url(/i/eg_bg_04.gif);

CSS设置背景图片,图片宽度固定,高度随内容拉长

  1. background-size:100% 100%;background-position:center;

css链接文字颜色color:#00ff00;

  1. a:link {color:#FF0000;} /* 未被访问的链接 */
  2. a:visited {color:#00FF00;} /* 已被访问的链接 */
  3. a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
  4. a:active {color:#0000FF;} /* 正在被点击的链接 */

css圆角

  1. border-radius: 50px;
  2. border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角 */

一个定位

  1. #span1{
  2. position: absolute;/*绝对定位*/
  3. width: 100%;
  4. bottom: 240px;/*离底下0像素*/
  5. left: 14px;/*离左边0像素*/
  6. text-align: center;
  7. font-size: 20px;
  8. color: #fff;
  9. }

定位右上角

  1. #fixedLayer {
  2. z-index:999999;
  3. position:fixed;
  4. right: 0px;
  5. top: 0px;

一个滚动

  1. <div style="background-color:#fff;box-shadow: 0px 0px 5px #dedede;padding:5px;margin-top: 10px;margin-bottom:0px">
  2. <a target="_blank" href="/"><h3 style="color: #ff00ff;"><marquee scrollamount="2" font="" style="COLOR: #9d74fc; FONT-SIZE: 15pt; WIDTH: 100%"><b>七牛图www.qiniutu.om</b></marquee></h3>
  3. </a>
  4. </div>

常用css样式属性大全(中文注释)

  1. color : #999999; /*文字颜色*/
  2. font-family : 宋体,sans-serif; /*文字字体*/
  3. font-size : 9pt; /*文字大小*/
  4. font-style:itelic; /*文字斜体*/
  5. font-variant:small-caps; /*小字体*/
  6. letter-spacing : 1pt; /*字间距离*/
  7. line-height : 200%; /*设置行高*/
  8. font-weight:bold; /*文字粗体*/
  9. vertical-align:sub; /*下标字*/
  10. vertical-align:super; /*上标字*/
  11. text-decoration:line-through; /*加删除线*/
  12. text-decoration: overline; /*加顶线*/
  13. text-decoration:underline; /*加下划线*/
  14. text-decoration:none; /*删除链接下划线*/
  15. text-transform : capitalize; /*首字大写*/
  16. text-transform : uppercase; /*英文大写*/
  17. text-transform : lowercase; /*英文小写*/
  18. text-align:right; /*文字右对齐*/
  19. text-align:left; /*文字左对齐*/
  20. text-align:center; /*文字居中对齐*/
  21. text-align:justify; /*文字分散对齐*/
  22. vertical-align属性
  23. vertical-align:top; /*垂直向上对齐*/
  24. vertical-align:bottom; /*垂直向下对齐*/
  25. vertical-align:middle; /*垂直居中对齐*/
  26. vertical-align:text-top; /*文字垂直向上对齐*/
  27. vertical-align:text-bottom; /*文字垂直向下对齐*/

二、CSS边框空白

  1. padding-top:10px; /*上边框留空白*/
  2. padding-right:10px; /*右边框留空白*/
  3. padding-bottom:10px; /*下边框留空白*/
  4. padding-left:10px; /*左边框留空白

三、CSS符号属性

  1. list-style-type:none; /*不编号*/
  2. list-style-type:decimal; /*阿拉伯数字*/
  3. list-style-type:lower-roman; /*小写罗马数字*/
  4. list-style-type:upper-roman; /*大写罗马数字*/
  5. list-style-type:lower-alpha; /*小写英文字母*/
  6. list-style-type:upper-alpha; /*大写英文字母*/
  7. list-style-type:disc; /*实心圆形符号*/
  8. list-style-type:circle; /*空心圆形符号*/
  9. list-style-type:square; /*实心方形符号*/
  10. list-style-image:url(/dot.gif); /*图片式符号*/
  11. list-style-position: outside; /*凸排*/
  12. list-style-position:inside; /*缩进*/

四、CSS背景样式

  1. background-color:#F5E2EC; /*背景颜色*/
  2. background:transparent; /*透视背景*/
  3. background-image : url(/image/bg.gif); /*背景图片*/
  4. background-attachment : fixed; /*浮水印固定背景*/
  5. background-repeat : repeat; /*重复排列-网页默认*/
  6. background-repeat : no-repeat; /*不重复排列*/
  7. background-repeat : repeat-x; /*在x轴重复排列*/
  8. background-repeat : repeat-y; /*在y轴重复排列*/
  9. 指定背景位置
  10. background-position : 90% 90%; /*背景图片x与y轴的位置*/
  11. background-position : top; /*向上对齐*/
  12. background-position : buttom; /*向下对齐*/
  13. background-position : left; /*向左对齐*/
  14. background-position : right; /*向右对齐*/
  15. background-position : center; /*居中对齐*/

五、CSS连接属性

  1. a /*所有超链接*/
  2. a:link /*超链接文字格式*/
  3. a:visited /*浏览过的链接文字格式*/
  4. a:active /*按下链接的格式*/
  5. a:hover /*鼠标转到链接*/
  6. 鼠标光标样式:
  7. 链接手指 cursor:pointer
  8. 十字体 cursor:crosshair
  9. 箭头朝下 cursor:s-resize
  10. 十字箭头 cursor:move
  11. 箭头朝右 cursor:move
  12. 加一问号 cursor:help
  13. 箭头朝左 cursor:w-resize
  14. 箭头朝上 cursor:n-resize
  15. 箭头朝右上 cursor:ne-resize
  16. 箭头朝左上 cursor:nw-resize
  17. 文字I cursor:text
  18. 箭头斜右下 cursor:se-resize
  19. 箭头斜左下 cursor:sw-resize
  20. 漏斗 cursor:wait
  21. 光标图案(IE6) p {cursor:url(“光标文件名.cur”),text;}

六、CSS框线一览表

  1. border-top : 1px solid #6699cc; /*上框线*/
  2. border-bottom : 1px solid #6699cc; /*下框线*/
  3. border-left : 1px solid #6699cc; /*左框线*/
  4. border-right : 1px solid #6699cc; /*右框线*/
  5. 以上是建议书写方式,但也可以使用常规的方式 如下:
  6. border-top-color : #369 /*设置上框线top颜色*/
  7. border-top-width :1px /*设置上框线top宽度*/
  8. border-top-style : solid/*设置上框线top样式*/
  9. 其他框线样式
  10. solid /*实线框*/
  11. dotted /*虚线框*/
  12. double /*双线框*/
  13. groove /*立体内凸框*/
  14. ridge /*立体浮雕框*/
  15. inset /*凹框*/
  16. outset /*凸框*/
打赏站长

打赏方式:

X
  • 支付宝
  • 微信
  • QQ红包

打开支付宝扫一扫
文章作者:站长的小便 日期:2020年06月18日 星期四   分类:实用教程   浏览(24)
本文地址:https://www.laolibab.cn/syjc/14148.html   [百度正在收录]
短网址: [复制短网址]
声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!

相关阅读

留言咨询

自动获取QQ

昵称

邮箱

网址

寻元素 - 专注免抠png素材设计网站

    寻元素 - 专注免抠png素材设计网站

老李云

    老李云

协助本站seo优化,点击百度一下

    百度一下

二维码在线生成

关于我们

    站长导航网提供网站SEO优化、SEM推广营销(百度/360/搜狗收录优化)、企业建站、搜索引擎教学等服务。
    联系我们:给我发QQ消息 加入QQ群

联盟广告

站点统计

  • 收录网址:4111 个
  • 黑名单:66 个
  • 发布文章:7984 条
  • 总访问量:13791153次
  • 评论总数:4984 条
  • 用户总数:239
  • 本站运行:3年6月25天
展开
关闭 提交收录 审核状态 SEO实战 SEO外链 在线工具 资源大全 骗子公布 本站公告