分享最新活动_最优秀的活动分享随便写什么都可以
  • 网站首页 自学教程 网站相关 正文

    给网站添加短代码

    四十五 2015-05-12 网站相关 3162 ℃ 5 评论
    广告位招租
    广告位招租

          看看下图短代码,网上都是这么叫,我觉得说是样式更适合些。既然别人叫短代码我也叫短代码吧。把下列代码插入网页css中,就可以实现短代码功能。 

                                     

    第一种代码:

    .blue{
    	text-indent: 0em !important;
    	color: #7da33c;
    	background: #ecf2d6 url('images/wpgo_sc_notice.png') -1px -1px no-repeat;
    	border: 1px solid #aac66d;
    	overflow: hidden;
    	margin: 10px 0;
    	padding: 15px 15px 15px 35px;
    } 
    .red{
    	text-indent: 0em !important;
    	color: #c66;
    	background: #ffecea url('images/wpgo_sc_error.png') -1px -1px no-repeat;
    	border: 1px solid #ebb1b1;
    	overflow: hidden;
    	margin: 10px 0;
    	padding: 15px 15px 15px 35px;
    }
    .yellow{
    	text-indent: 0em !important;
    	color: #ad9948;
    	background: #fff4b9 url('images/wpgo_sc_warn.png') -1px -1px no-repeat;
    	border: 1px solid #eac946;
    	overflow: hidden;
    	margin: 10px 0;
    	padding: 15px 15px 15px 35px;
    }
     .gray{
    	text-indent: 0em !important;
    	color: #777;
    	background: #eaeaea url('images/wpgo_sc_tips.png') -1px -1px no-repeat;
    	border: 1px solid #ccc;
    	overflow: hidden;
    	margin: 10px 0;
    	padding: 15px 15px 15px 35px;
    }
    .blue{
    	text-indent: 0em !important;
    	background-color: #169FE6;
    	display: block;
    	height: 5px;
    	left: 0;
    	position: absolute;
    	content: "";
    	width: 100%;
    }
    .ordinary
    
    {
    	text-indent: 0em !important;
    	margin: 10px 0;
    	padding: 10px 15px;
    	background: #FFF;
    	border: 1px solid #E3E3E3;
    	border-left: 3px solid #3DABCE;
    }
    调用方法

    灰色的短代码框,常用来引用资料什么的,调用代码为 <div class="gray">输入文字</div> 

    黄色的短代码框,常用来做提示,引起读者注意。<div class="yellow">输入文字</div> 

    红色的短代码框,用于严重警告什么的。调用代码为 <div class="red">输入文字</div> 

    浅蓝色的短代码框,用于显示一些信息。调用代码为 <div class="blue">输入文字</div> 

    绿色的短代码框,显示一些推荐信息。调用代码为 <div class="green">输入文字</div>

    普通的短代码框,显示一些一般信息。调用代码为 <div class="ordinary">输入文字</div>

    第二种代码:


    .gray {margin:20px 0px;padding:15px 15px 15px 70px;font-size:12px;background:url(images/checklist.png) no-repeat 20px 20px #f6f5f5;border:1px solid #cccccc;color:#555;border-radius:8px} 
    .yellow {margin:20px 0px;padding:15px 15px 15px 70px;font-size:12px;background:url(images/warning.png) no-repeat 20px 20px #
    fff9c6;border:1px solid #fbe951;color:#cba200;border-radius:8px} 
    .green {margin:20px 0px;padding:15px 15px 15px 70px;font-size:12px;background:url(images/yes.png) no-repeat 20px 20px #EBF6E0;border:1px solid #b7ec82;color:#649505;border-radius:8px} 
    .blue {margin:20px 0px;padding:15px 15px 15px 70px;font-size:12px;background:url(images/info.png) no-repeat 20px 20px #c3e5ff;border:1px solid #8accff;color:#0d70bb;border-radius:8px} 
    .red {margin:20px 0px;padding:15px 15px 15px 70px;font-size:12px;background:url(images/noway.png) no-repeat 20px 20px #FFE9E9;border:1px solid #ffacac;color:#bd0000;border-radius:8px} 
    .blockquote {background:#f9f9f9;font-size:12px;border:1px solid #d6d6d6;border-left:4px solid #ccc;padding:0.5em 10px;} 
    .pre{margin:15px auto;padding:0 15px;border:1px solid #d6d6d6;background:#fbfbfb url(images/prebg.png) repeat;white-space:pre-wrap;word-wrap:break-word;letter-spacing:0;font:12px/20px Arial,Microsoft JhengHei;line-height:19px;border-left-width:4px;color:#000} code{background-color:#F7F7F9;border:1px solid #d6d6d6;border-radius:4px;color:#DD1144;padding:2px 4px;font:12px Arial,Microsoft JhengHei;} .post-navigation{clear:both;overflow:hidden;margin-top:20px}
    图片部分这里就不发布了,请到网上自行上搜索喜欢的图吧!此代码理论支持所有程序,wp,em,zb都可以的。



    猜你喜欢

    已有5位网友发表了看法:

    欢迎 发表评论:

    请填写验证码
    最近发表
    网站分类