视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
css小技巧-我_爱编程
2020-11-27 16:42:11 责编:小采
文档

网页字体:

font-size: 16px;font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; 网络常用来显高大上的名言警句字体 
font: 12px "宋体", Arial, Helvetica, sans-serif; 普通内容字体
color: #4745; 内容小标题 以及内容
line-height: 20px 内容行高
  1. font-weight: bold; 字体加粗
  • color: #838383;
  • background: #f6f6f6; 颜色较浅的地方
  •  

    选择器:

    .texts p:nth-child(2){} :取texts 类下的第二个p
    :hover {}:当鼠标移到

    动画控制:

     /* -webkit-transition: all 1s; */
     -moz-transition: all 1s; 
     -o-transition: all 1s;
     transition: all 1s;        /*动画共1秒
     /* -webkit-transform: translate(60px); */
     -moz-transform: translate(60px); /*沿x轴向右移60px*/
     -o-transform: translate(60px);
     -ms-transform: translate(60px);
     /* transform: translate(60px); */
    -moz-transform: scale(1.1) 图片放大

    整体效果调整:

    letter-spacing: 2px; 字与字间隔2px
    text-shadow:0px 1px rgba(255,255,255,0.3) 字阴影
     box-shadow: #999 4px 5px 1px; 块区域阴影
    overflow: hidden; 多余部分隐藏
    border-radius: 100%;overflow: hidden; 变成圆形后 ,需设置内容隐藏
    border-radius: 0 20px 20px 0; 右半圆
    box-shadow: -2px -1px 5px #666;

     

    扩展知识:

    line-height: 28px; 为达效果,当高度不能更改时,可以试着用行高
    display: block 如果未达效果,试着设置
    border-bottom: #4745 2px solid; 画一条线
    margin: 0 20px 20px 20px 上 右 下 左
    margin: 20px auto 上下 左右
    margin: 20px 20px 20px 上 左右 下
    阅读全文>> <<号
    伪元素:给部分整体前添加 元素 并控制
    .blogs::before { content: ""; width: 10px; height: 10px; border-radius: 50%; position: absolute; background: #cac1c1; border: 2px solid #fff; left: -27px; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; }
    .blogs:hover::before { background: #4745 }
    .dateview { position: absolute; left: -125px; top: 0px; z-index: 1; color: #F5F5F5; }
    .blogs::after { content: ""; width: 121px; height: 29px; position: absolute; left: -148px; top: -9px; z-index: 0; background: #4745 url(../images/ti.png) no-repeat; opacity: 0; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; }
    .blogs:hover::after { opacity: 1 }
    或者:
    a:before
    { content: " (" attr(href) ")";}

    a伪元素

    选择未访问、已访问、悬浮和活动链接,并设置它们的样式:
    a:link {color:blue;}
    a:visited {color:blue;}
    a:hover {color:red;}
    a:active {color:yellow;}

    结尾:给自己的的页面设置分享按钮 例如:分享到QQ 、新浪 、人人、微信 等等

    分享按钮-百度分享

    它会告诉你

    下载本文
    显示全文
    专题