首页
留言反馈
网站导航
推荐
毒鸡汤
Search
1
非插件为typecho 文章生成微海报分享
18,938 阅读
2
主题移动端,样式下添加二级分类
15,461 阅读
3
主题 添加author page
14,770 阅读
4
主题添加移动端下边栏
12,779 阅读
5
EMlog添加评论者邮箱等级
9,122 阅读
typecho
dynamic
SuiYu
Emlog
xiuno
登录
/
注册
Search
标签搜索
代码
xiuno
php
css
typecho
评论
模板
say
js
修改教程
标签
珍惜
努力
recommend
善良
样式
调用
微笑
颜色
插件
Vincent
累计撰写
151
篇文章
累计收到
184
条评论
首页
栏目
typecho
dynamic
SuiYu
Emlog
xiuno
页面
留言反馈
网站导航
推荐
毒鸡汤
搜索到
51
篇与
的结果
2020-08-08
模板设置数据备份与恢复
打开模板的functions.php文件(没有的可以自行建立一个可以参考 typecho 的默认模板),然后在 themeConfig($form) 函数里添加以下整理好的代码:[hide] echo('<p style="margin-bottom:14px;font-size:13px;text-align:center;">感谢您使用laoyao主题 1.0版本!此版本首发日期:2020-04-17(<a href="http://2025ly.cn/" target="_blank">检查更新</a>) <br />如果您发现主题存在bug,请<a href="http://2025ly.cn/message.html" target="_blank">留言反馈</a>给我,我将尽力提供修复建议。使用本主题请保留底部链接,您的支持是我最大的动力! </p>'); echo _t('修改后记得<font style="color:red;">备份数据</font>'); $db = Typecho_Db::get(); $sjdq=$db->fetchRow($db->select()->from ('table.options')->where ('name = ?', 'theme:laoyao')); $ysj = $sjdq['value']; if(isset($_POST['type'])) { if($_POST["type"]=="备份模板数据"){ if($db->fetchRow($db->select()->from ('table.options')->where ('name = ?', 'theme:laoyaobf'))){ $update = $db->update('table.options')->rows(array('value'=>$ysj))->where('name = ?', 'theme:laoyaobf'); $updateRows= $db->query($update); echo '<div class="tongzhi">备份已更新,请等待自动刷新!如果等不到请点击'; ?> <a href="<?php Helper::options()->adminUrl('options-theme.php'); ?>">这里</a></div> <script language="JavaScript">window.setTimeout("location=\'<?php Helper::options()->adminUrl('options-theme.php'); ?>\'", 2500);</script> <?php }else{ if($ysj){ $insert = $db->insert('table.options') ->rows(array('name' => 'theme:laoyaobf','user' => '0','value' => $ysj)); $insertId = $db->query($insert); echo '<div class="tongzhi">备份完成,请等待自动刷新!如果等不到请点击'; ?> <a href="<?php Helper::options()->adminUrl('options-theme.php'); ?>">这里</a></div> <script language="JavaScript">window.setTimeout("location=\'<?php Helper::options()->adminUrl('options-theme.php'); ?>\'", 2500);</script> <?php } } } if($_POST["type"]=="还原模板数据"){ if($db->fetchRow($db->select()->from ('table.options')->where ('name = ?', 'theme:laoyaobf'))){ $sjdub=$db->fetchRow($db->select()->from ('table.options')->where ('name = ?', 'theme:laoyaobf')); $bsj = $sjdub['value']; $update = $db->update('table.options')->rows(array('value'=>$bsj))->where('name = ?', 'theme:laoyao'); $updateRows= $db->query($update); echo '<div class="tongzhi">检测到模板备份数据,恢复完成,请等待自动刷新!如果等不到请点击'; ?> <a href="<?php Helper::options()->adminUrl('options-theme.php'); ?>">这里</a></div> <script language="JavaScript">window.setTimeout("location=\'<?php Helper::options()->adminUrl('options-theme.php'); ?>\'", 2000);</script> <?php }else{ echo '<div class="tongzhi">没有模板备份数据,恢复不了哦!</div>'; } } if($_POST["type"]=="删除备份数据"){ if($db->fetchRow($db->select()->from ('table.options')->where ('name = ?', 'theme:laoyaobf'))){ $delete = $db->delete('table.options')->where ('name = ?', 'theme:laoyaobf'); $deletedRows = $db->query($delete); echo '<div class="tongzhi">删除成功,请等待自动刷新,如果等不到请点击'; ?> <a href="<?php Helper::options()->adminUrl('options-theme.php'); ?>">这里</a></div> <script language="JavaScript">window.setTimeout("location=\'<?php Helper::options()->adminUrl('options-theme.php'); ?>\'", 2500);</script> <?php }else{ echo '<div class="tongzhi">不用删了!备份不存在!!!</div>'; } } } echo '<form class="protected" action="?laoyaobf" method="post"> <input type="submit" name="type" class="btn btn-s" value="备份模板数据" /> <input type="submit" name="type" class="btn btn-s" value="还原模板数据" /> <input type="submit" name="type" class="btn btn-s" value="删除备份数据" /></form>'; [/hide]然后将里面出现的所有“laoyao”改成你的模板目录的名字,如果拿不准就去数据库里看看模板的值名字。
2020年08月08日
3,457 阅读
3 评论
1 点赞
2020-08-06
修改Typecho评论调用QQ头像
方法:修改Typecho目录下的var/Typecho/common.php,在大约986行,关于获取Gravatar图像的代码找到以下代码:public static function gravatarUrl($mail, $size, $rating, $default, $isSecure = false) { if (defined('__TYPECHO_GRAVATAR_PREFIX__')) { $url = __TYPECHO_GRAVATAR_PREFIX__; } else { $url = $isSecure ? 'https://secure.gravatar.com' : 'http://www.gravatar.com'; $url .= '/avatar/'; } if (!empty($mail)) { $url .= md5(strtolower(trim($mail))); } $url .= '?s=' . $size; $url .= '&r=' . $rating; $url .= '&d=' . $default; return $url; }替换成:public static function gravatarUrl($mail, $size, $rating, $default, $isSecure = false) { $reg = "/^\d{5,11}@[qQ][Qq]\.(com)$/"; if (preg_match($reg, $mail)) { $img = explode("@", $mail); $url = "//q2.qlogo.cn/headimg_dl?dst_uin={$img[0]}&spec=100"; } else { if (defined('__TYPECHO_GRAVATAR_PREFIX__')) { $url = __TYPECHO_GRAVATAR_PREFIX__; } else { $url = $isSecure ? 'https://secure.gravatar.com' : 'http://www.gravatar.com'; $url .= '/avatar/'; } if (!empty($mail)) { $url .= md5(strtolower(trim($mail))); } $url .= '?s=' . $size; $url .= '&r=' . $rating; $url .= '&d=' . $default; } return $url; }实现的效果:输入QQ邮箱,调用QQ头像;输入普通邮箱,调用Gravatar头像。Gravatar头像另外修改了几个系统文件,以后升级typecho(如果还要那么一天)可能还要重新改。\var\Typecho\Common.phpLine1004行 修改 $url .= '&d=' . $default;为$url .= '&d=retro';“d”参数代表default,用于Gravatar默认头像类型选择,有以下几个可选值,[hide]留空显示gravatar官方图形404直接返回404错误状态mm神秘人(一个灰白头像)identicon抽象几何图形monsterid小怪物wavatar用不同面孔和背景组合生成的头像retro八位像素复古头像[/hide]
2020年08月06日
2,175 阅读
1 评论
2 点赞
2020-08-06
Typecho评论者UA&OS获取
创建自定义函数/** * 浏览器及操作系统判断 * * @param string $agent 系统数据库中访者数据 */ /** 获取浏览器信息 */ function getBrowser($agent) { if (preg_match('/MSIE\s([^\s|;]+)/i', $agent, $regs)) { $outputer = 'Internet Explorer' . ' ' . $regs[1]; } else if (preg_match('/FireFox\/([^\s]+)/i', $agent, $regs)) { $outputer = 'Mozilla FireFox' . ' ' . $regs[1]; } else if (preg_match('/Maxthon([\d]*)\/([^\s]+)/i', $agent, $regs)) { $outputer = 'Maxthon' . ' ' . $regs[2]; } else if (preg_match('/Chrome([\d]*)\/([^\s]+)/i', $agent, $regs)) { $outputer = 'Google Chrome' . ' ' . $regs[2]; } else if (preg_match('/QQBrowser\/([^\s]+)/i', $agent, $regs)) { $regg = explode("/",$regs[1]); $outputer = 'QQ浏览器' . ' ' . $regg[0]; } else if (preg_match('/UC/i', $agent)) { $outputer = 'UCWeb' . ' ' . '8.11112510'; } else if (preg_match('/safari\/([^\s]+)/i', $agent, $regs)) { $outputer = 'Apple Safari' . ' ' . $regs[1]; } else if (preg_match('/Opera[\s|\/]([^\s]+)/i', $agent, $regs)) { $outputer = 'Opera' . ' ' . $regs[1]; } else { $outputer = '其它浏览器'; } echo $outputer; } /** 获取操作系统信息 */ function getOs($agent) { $os = false; if (preg_match('/win/i', $agent)) { if (preg_match('/nt 6.0/i', $agent)) { $os = 'Windows Vista'; } else if (preg_match('/nt 6.1/i', $agent)) { $os = 'Windows 7'; } else if (preg_match('/nt 5.1/i', $agent)) { $os = 'Windows XP'; } else if (preg_match('/nt 5/i', $agent)) { $os = 'Windows 2000'; } else { $os = 'Windows'; } } else if (preg_match('/android/i', $agent)) { $os = 'Android'; } else if (preg_match('/ubuntu/i', $agent)) { $os = 'Ubuntu'; } else if (preg_match('/linux/i', $agent)) { $os = 'Linux'; } else if (preg_match('/mac/i', $agent)) { $os = 'Mac OS X'; } else if (preg_match('/unix/i', $agent)) { $os = 'Unix'; } else if (preg_match('/symbian/i', $agent)) { $os = 'Nokia SymbianOS'; } else { $os = '其它操作系统'; } echo $os; }然后在comments适当的地方调用[hide]<?php getBrowser($comments->agent); ?> @ <?php getOs($comments->agent); ?>[/hide]
2020年08月06日
1,399 阅读
0 评论
3 点赞
2020-08-02
Typecho网站底部展示网站运行时间标签
第一、代码脚本部分// 网站运行时间 date_default_timezone_set('Asia/Shanghai'); function getBuildTime(){ // 在下面按格式输入本站创建的时间 $site_create_time = strtotime('2010-09-10 00:00:00'); $time = time() - $site_create_time; if(is_numeric($time)){ $value = array( "years" => 0, "days" => 0, "hours" => 0, "minutes" => 0, "seconds" => 0, ); if($time >= 31556926){ $value["years"] = floor($time/31556926); $time = ($time%31556926); } if($time >= 86400){ $value["days"] = floor($time/86400); $time = ($time%86400); } if($time >= 3600){ $value["hours"] = floor($time/3600); $time = ($time%3600); } if($time >= 60){ $value["minutes"] = floor($time/60); $time = ($time%60); } $value["seconds"] = floor($time); echo '<span class="btime">'.$value['years'].'年'.$value['days'].'天'.$value['hours'].'小时'.$value['minutes'].'分</span>'; }else{ echo ''; } }代码丢到当前Typecho Functions.php文件中第二、调出方法<?php getBuildTime(); ?>将代码丢到我们模板需要展示的位置,有些是侧边,有些是底部,然后根据实际需要调整样式。本文出处:老蒋部落
2020年08月02日
1,641 阅读
0 评论
3 点赞
2020-08-01
ly记录备份
复制版权提醒代码把以下代码加入到footer.php <script> document.body.addEventListener('copy', function (e) { if (window.getSelection().toString() && window.getSelection().toString().length > 42) { setClipboardText(e); alert('商业转载请联系作者获得授权,非商业转载请注明出处,谢谢合作。'); } }); function setClipboardText(event) { var clipboardData = event.clipboardData || window.clipboardData; if (clipboardData) { event.preventDefault(); var htmlData = '' + '著作权归作者所有。<br>' + '商业转载请联系作者获得授权,非商业转载请注明出处。<br>' + '作者:<?php $this->author() ?><br>' + '链接:' + window.location.href + '<br>' + '来源:<?php $this->options->siteUrl(); ?><br><br>' + window.getSelection().toString(); var textData = '' + '著作权归作者所有。\n' + '商业转载请联系作者获得授权,非商业转载请注明出处。\n' + '作者:<?php $this->author() ?>\n' + '链接:' + window.location.href + '\n' + '来源:<?php $this->options->siteUrl(); ?>\n\n' + window.getSelection().toString(); clipboardData.setData('text/html', htmlData); clipboardData.setData('text/plain',textData); } } </script>网站不同时间问候语<div class="sidebar"> <div class="widget widget_ui_textads widget_twitter"><a class="style01"><strong>温馨提示:</strong> <br><br><font size="2" color="#999"> <script language="JavaScript"> day = new Date( ) nge_Hour = day.getHours( ) var nge_warmprompt = ""; if (nge_Hour == 0) nge_warmprompt = "现在已经过凌晨了,身体是无价的资本喔,小伙伴早点休息吧! --Laoyao" if (nge_Hour == 1) nge_warmprompt = "凌晨1点多了,工作是永远都做不完的,小伙伴别熬坏身子! --Laoyao" if (nge_Hour == 2) nge_warmprompt = "亲爱的小伙伴该休息了,身体可是革命的本钱啊! --Laoyao" if (nge_Hour == 3) nge_warmprompt = "夜深了,熬夜很容易导致身体内分泌失调,长痘痘的! --Laoyao" if (nge_Hour == 4) nge_warmprompt = "四点过了额(⊙o⊙)…,你明天不学习工作吗??? --Laoyao" if (nge_Hour == 5) nge_warmprompt = "你知道吗,此时是国内网络速度最快的时候! --Laoyao" if (nge_Hour == 6) nge_warmprompt = "清晨好,这么早就来网站啦,谢谢小伙伴的关注哦,昨晚做的梦好吗? --Laoyao " if (nge_Hour == 7) nge_warmprompt = "新的一天又开始了,祝你过得快乐! --Laoyao" if (nge_Hour == 8) nge_warmprompt = "小伙伴早上好哦,一天之际在于晨,又是美好的一天! --Laoyao" if ((nge_Hour == 9) || (nge_Hour ==10)) nge_warmprompt = "上午好!今天你看上去好精神哦! --Laoyao" if (( nge_Hour == 11) || (nge_Hour == 12)) nge_warmprompt = "小伙伴啊!该吃午饭啦!有什么好吃的?您有中午休息的好习惯吗? --Laoyao" if (( nge_Hour >= 13) && (nge_Hour <= 17)) nge_warmprompt = "下午好!外面的天气好吗?记得朵朵白云曾捎来朋友殷殷的祝福。 --Laoyao" if (( nge_Hour >= 17) && (nge_Hour <= 18)) nge_warmprompt = "太阳落山了!快看看夕阳吧!如果外面下雨,就不必了 ^_^ --Laoyao" if (( nge_Hour >= 18) && (nge_Hour <= 19)) nge_warmprompt = "晚上好,小伙伴今天的心情怎么样?去留言板诉说一下吧! --Laoyao" if (( nge_Hour >= 19) && (nge_Hour <= 21)) nge_warmprompt = "忙碌了一天,累了吧?去看看最新的新闻资讯醒醒脑吧! --Laoyao" if (( nge_Hour >= 22) && (nge_Hour <= 23)) nge_warmprompt = "这么晚了,小伙伴还在上网?早点洗洗睡吧,睡前记得洗洗脸喔!明天一天都会萌萌哒! --Laoyao" document.write("<div><i class='fa fa-beer'></i> ") document.write(nge_warmprompt) document.write("</div>") </script> </font><br> </a> </div> </div> </div>博客加对联<SCRIPT language="JavaScript"> lastScrollY = 0; function heartBeat(){ var diffY; if (document.documentElement && document.documentElement.scrollTop) diffY = document.documentElement.scrollTop; else if (document.body) diffY = document.body.scrollTop else {/*Netscape stuff*/} //alert(diffY); percent=.1*(diffY-lastScrollY); if(percent>0)percent=Math.ceil(percent); else percent=Math.floor(percent); document.getElementById("leftDiv").style.top = parseInt(document.getElementById("leftDiv").style.top)+percent+"px"; document.getElementById("rightDiv").style.top = parseInt(document.getElementById("rightDiv").style.top)+percent+"px"; lastScrollY=lastScrollY+percent; //alert(lastScrollY); } //下面这段删除后,对联将不跟随屏幕而移动。 window.setInterval("heartBeat()",1); //--> //关闭按钮 function close_left2(){ left2.style.visibility='hidden'; } function close_right2(){ right2.style.visibility='hidden'; } //显示样式 document.writeln("<style type=\"text\/css\">"); document.writeln("#leftDiv,#rightDiv{position:absolute;}"); document.writeln(".itemFloat{width:100px;height:auto;line-height:5px}"); document.writeln("<\/style>"); //以下为主要内容 document.writeln("<div id=\"leftDiv\" style=\"top:112px;left:50px\">"); //------左侧各块开始 //---L2 document.writeln("<div id=\"left2\" class=\"itemFloat\">"); document.writeln("<a href="//www.mantouxia.com/usr/uploads/img/duilianzuo.png" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})"><img border=0 src=//www.mantouxia.com/usr/uploads/img/duilianzuo.png></a>"); document.writeln("<br><a href=\"javascript:close_left2();\" title=\"关闭上面的广告\">×<\/a>"); document.writeln("<\/div>"); //------左侧各块结束 document.writeln("<\/div>"); document.writeln("<div id=\"rightDiv\" style=\"top:112px;right:50px\">"); //------右侧各块结束 //---R2 document.writeln("<div id=\"right2\" class=\"itemFloat\">"); document.writeln("<a href="//www.mantouxia.com/usr/uploads/img/duilianyou.png" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})"><img border=0 src=//www.mantouxia.com/usr/uploads/img/duilianyou.png></a>"); document.writeln("<br><a href=\"javascript:close_right2();\" title=\"关闭上面的广告\">×<\/a>"); document.writeln("<\/div>"); //------右侧各块结束 document.writeln("<\/div>"); </SCRIPT>首页文章列表悬停上浮/*首页文章列表悬停上浮*/ .blog-post .panel:not(article) { transition: all 0.3s; } .blog-post .panel:not(article):hover { transform: translateY(-10px); box-shadow: 0 8px 10px rgb(88,0,0); }头像呼吸光环和鼠标悬停旋转放大/*头像呼吸光环和鼠标悬停旋转放大*/ .img-full { border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s; } .img-full:hover { transform: scale(1.15) rotate(720deg); } @keyframes light { 0% { box-shadow: 0 0 4px #f00; } 25% { box-shadow: 0 0 16px #0f0; } 50% { box-shadow: 0 0 4px #00f; } 75% { box-shadow: 0 0 16px #0f0; } 100% { box-shadow: 0 0 4px #f00; } }修改 Typecho 主题时,需要判断当前用户角色,对于管理员角色,显示内容,可使用如下:<?php $currGroup = get_object_vars($this->user) ['row']['group'];if ($currGroup == "administrator"): ?> 若为管理员,显示此区域内容 <?php else: ?>//else可去 非管理员,显示此区域内容 <?php endif;?>
2020年08月01日
1,400 阅读
0 评论
3 点赞
2020-07-26
人性化评论时间
评论时间显示多少秒,多少天,多少时发帖代码<?php function timesince($older_date,$comment_date = false) { $chunks = array( array(86400 , '天'), array(3600 , '小时'), array(60 , '分'), array(1 , '秒'), ); $newer_date = time(); $since = abs($newer_date - $older_date); if($since < 2592000){ for ($i = 0, $j = count($chunks); $i < $j; $i++){ $seconds = $chunks$i; $name = $chunks$i; if (($count = floor($since / $seconds)) != 0) break; } $output = $count.$name.' 前'; }else{ $output = !$comment_date ? (date('Y-m-j G:i', $older_date)) : (date('Y-m-j', $older_date)); } return $output; } ?>调用代码:<?php echo timesince($comments->created);?>
2020年07月26日
1,282 阅读
0 评论
2 点赞
2020-07-26
Typecho完美实现回复可见功能
将post.php中的<?php $this->content(); ?>换成<?php $db = Typecho_Db::get(); $sql = $db->select()->from('table.comments') ->where('cid = ?',$this->cid) ->where('mail = ?', $this->remember('mail',true)) ->limit(1); $result = $db->fetchAll($sql); if($this->user->hasLogin() || $result) { $content = preg_replace("/\[hide\](.*?)\[\/hide\]/sm",'<div class="reply2view">$1</div>',$this->content); } else{ $content = preg_replace("/\[hide\](.*?)\[\/hide\]/sm",'<div class="reply2view">此处内容需要评论回复后方可阅读。</div>',$this->content); } echo $content ?>解决缩略内容和feed暴露问题。在functions.php中加入如下代码即可Typecho_Plugin::factory('Widget_Abstract_Contents')->excerptEx = array('myyodux','one'); Typecho_Plugin::factory('Widget_Abstract_Contents')->contentEx = array('myyodux','one'); class myyodux { public static function one($con,$obj,$text) { $text = empty($text)?$con:$text; if(!$obj->is('single')){ $text = preg_replace("/\[hide\](.*?)\[\/hide\]/sm",'',$text); } return $text; } }就是用插件接口,在缩略内容输出之前,隐藏掉或者替换掉回复可见内容,同时使用if判断,来针对非single页面进行隐藏。使用方法:在写文章需要隐藏部分内容时用以下写法(去掉@)[@hide]要隐藏的内容[/hide]CSS参考样式.reply2view { background:#f8f8f8; padding:10px 10px 10px 40px; position:relative }结语这个新方法实现评论回复可见,来自泽泽博客
2020年07月26日
2,043 阅读
1 评论
2 点赞
2020-07-22
Typecho免插件实现角色认证
[hide]<?php $me = md5(strtolower('6565834@qq.com')); //这里填入自己的邮箱 $boy = md5(strtolower('6565834@qq.com')); //这里填入好友的邮箱 $rz = md5(strtolower($comments->mail)); //用于判断邮箱 //博主样式 $str = '<span class="commentapprove" style="color: #FFF;padding: .1rem .25rem;font-size: .7rem;border-radius: .25rem;background-color:#1ECD97;" >博主</span>'; //好友样式 $str2 = '<span class="commentapprove" style="color: #FFF;padding: .1rem .25rem;font-size: .7rem;border-radius: .25rem;background-color:#1ECD97;" >好友</span>'; //开始判断 if($me==$rz){ echo $str; //如果条件成立则输出'博主'样式 }if($boy==$rz){ echo $str2; //如果条件成立则输出'好友'样式 } ?>[/hide]将以上代码自行调整后复制到comments.php的<?php echo $author; ?>的后面即可
2020年07月22日
2,641 阅读
4 评论
5 点赞
2020-07-19
css样式大全(整理版)
字体属性:(font)大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)行高 {line-height: normal;}(正常) 单位:PX、PD、EM粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)常用字体: (font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana背景属性: (background)色彩 {background-color: #FFFFFF;}图片 {background-image: url();}重复 {background-repeat: no-repeat;}滚动 {background-attachment: fixed;}(固定) scroll;(滚动)位置 {background-position: left;}(水平) top(垂直);简写方法 {background:#000 url(..) repeat fixed left top;} /简写·这个在阅读代码中经常出现,要认真的研究/区块属性: (Block) /这个属性第一次认识,要多多研究/字间距 {letter-spacing: normal;} 数值 /这个属性似乎有用,多实践下/对齐 {text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)缩进 {text-indent: 数值px;}垂直对齐 {vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;词间距word-spacing: normal; 数值空格white-space: pre;(保留) nowrap;(不换行)显示 {display:block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) /display 属性的了解很模糊/方框属性: (Box)width:; height:; float:; clear:both; margin:; padding:; 顺序:上右下左边框属性: (Border)border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;border-width:; 边框宽度border-color:#;简写方法border:width style color; /简写/列表属性: (List-style)类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside;(外) inside;图像list-style-image: url(..);定位属性: (Position)Position: absolute; relative; static;visibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto;clip: rect(12px,auto,12px,auto) (裁切)css属性代码大全一 CSS文字属性:color : #999999; /文字颜色/font-family : 宋体,sans-serif; /文字字体/font-size : 9pt; /文字大小/font-style:itelic; /文字斜体/font-variant:small-caps; /小字体/letter-spacing : 1pt; /字间距离/line-height : 200%; /设置行高/font-weight:bold; /文字粗体/vertical-align:sub; /下标字/vertical-align:super; /上标字/text-decoration:line-through; /加删除线/text-decoration: overline; /加顶线/text-decoration:underline; /加下划线/text-decoration:none; /删除链接下划线/text-transform : capitalize; /首字大写/text-transform : uppercase; /英文大写/text-transform : lowercase; /英文小写/text-align:right; /文字右对齐/text-align:left; /文字左对齐/text-align:center; /文字居中对齐/text-align:justify; /文字分散对齐/vertical-align属性vertical-align:top; /垂直向上对齐/vertical-align:bottom; /垂直向下对齐/vertical-align:middle; /垂直居中对齐/vertical-align:text-top; /文字垂直向上对齐/vertical-align:text-bottom; /文字垂直向下对齐/二、CSS边框空白padding-top:10px; /上边框留空白/padding-right:10px; /右边框留空白/padding-bottom:10px; /下边框留空白/padding-left:10px; /*左边框留空白三、CSS符号属性:list-style-type:none; /不编号/list-style-type:decimal; /阿拉伯数字/list-style-type:lower-roman; /小写罗马数字/list-style-type:upper-roman; /大写罗马数字/list-style-type:lower-alpha; /小写英文字母/list-style-type:upper-alpha; /大写英文字母/list-style-type:disc; /实心圆形符号/list-style-type:circle; /空心圆形符号/list-style-type:square; /实心方形符号/list-style-image:url(/dot.gif); /图片式符号/list-style-position: outside; /凸排/list-style-position:inside; /缩进/四、CSS背景样式:background-color:#F5E2EC; /背景颜色/background:transparent; /透视背景/background-image : url(/image/bg.gif); /背景图片/background-attachment : fixed; /浮水印固定背景/background-repeat : repeat; /重复排列-网页默认/background-repeat : no-repeat; /不重复排列/background-repeat : repeat-x; /在x轴重复排列/background-repeat : repeat-y; /在y轴重复排列/指定背景位置background-position : 90% 90%; /背景图片x与y轴的位置/background-position : top; /向上对齐/background-position : buttom; /向下对齐/background-position : left; /向左对齐/background-position : right; /向右对齐/background-position : center; /居中对齐/五、CSS连接属性:a /所有超链接/a:link /超链接文字格式/a:visited /浏览过的链接文字格式/a:active /按下链接的格式/a:hover /鼠标转到链接/鼠标光标样式:链接手指 CURSOR: hand十字体 cursor:crosshair箭头朝下 cursor:s-resize十字箭头 cursor:move箭头朝右 cursor:move加一问号 cursor:help箭头朝左 cursor:w-resize箭头朝上 cursor:n-resize箭头朝右上 cursor:ne-resize箭头朝左上 cursor:nw-resize文字I型 cursor:text箭头斜右下 cursor:se-resize箭头斜左下 cursor:sw-resize漏斗 cursor:wait光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}六、CSS框线一览表:border-top : 1px solid #6699cc; /上框线/border-bottom : 1px solid #6699cc; /下框线/border-left : 1px solid #6699cc; /左框线/border-right : 1px solid #6699cc; /右框线/以上是建议书写方式,但也可以使用常规的方式 如下:border-top-color : #369 /设置上框线top颜色/border-top-width :1px /设置上框线top宽度/border-top-style : solid/设置上框线top样式/其他框线样式solid /实线框/dotted /虚线框/double /双线框/groove /立体内凸框/ridge /立体浮雕框/inset /凹框/outset /凸框/七、CSS表单运用:文字方块按钮复选框选择钮多行文字方块下拉式菜单 选项1选项2八、CSS边界样式:margin-top:10px; /上边界/margin-right:10px; /右边界值/margin-bottom:10px; /下边界值/margin-left:10px; /左边界值/CSS 属性: 字体样式(Font Style)序号 中文说明 标记语法1 字体样式 {font:font-style font-variant font-weight font-size font-family}2 字体类型 {font-family:"字体1","字体2","字体3",...}3 字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}4 字体风格 {font-style:inherit|italic|normal|oblique}5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}6 字体颜色 {color:数值;}7 阴影颜色 {text-shadow:16位色值}8 字体行高 {line-height:数值|inherit|normal;}9 字 间 距 {letter-spacing:数值|inherit|normal}10 单词间距 {word-spacing:数值|inherit|normal}11 字体变形 {font-variant:inherit|normal|small-cps }12 英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}13 字体变形 {font-size-adjust:inherit|none}14 字体 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}文本样式(Text Style)序号 中文说明 标记语法1 行 间 距 {line-height:数值|inherit|normal;}2 文本修饰 {text-decoration:inherit|none|underline|overline|line-through|blink}3 段首空格 {text-indent:数值|inherit}4 水平对齐 {text-align:left|right|center|justify}5 垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}6 书写方式 {writing-mode:lr-tb|tb-rl}背景样式序号 中文说明 标记语法1 背景颜色 {background-color:数值}2 背景图片 {background-image: url(URL)|none}3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4 背景固定 {background-attachment:fixed|scroll}5 背景定位 {background-position:数值|top|bottom|left|right|center}6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}框架样式(Box Style)序号 中文说明 标记语法1 边界留白 {margin:margin-top margin-right margin-bottom margin-left}2 补 白 {padding:padding-top padding-right padding-bottom padding-left}3 边框宽度 {border-width:border-top-width border-right-width border-bottom-width border-left-width} 宽度值: thin|medium|thick|数值4 边框颜色 {border-color:数值 数值 数值 数值} 数值:分别代表top、right、bottom、left颜色值5 边框风格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}6 边 框 {border:border-width border-style color}上 边 框 {border-top:border-top-width border-style color}右 边 框 {border-right:border-right-width border-style color}下 边 框 {border-bottom:border-bottom-width border-style color}左 边 框 {border-left:border-left-width border-style color}7 宽 度 {width:长度|百分比| auto}8 高 度 {height:数值|auto}9 漂 浮 {float:left|right|none}10 清 除 {clear:none|left|right|both}分类列表序号 中文说明 标记语法1 控制显示 {display:none|block|inline|list-item}2 控制空白 {white-space:normal|pre|nowarp}3 符号列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}4 图形列表 {list-style-image:URL}5 位置列表 {list-style-position:inside|outside}6 目录列表 {list-style:目录样式类型|目录样式位置|url}7 鼠标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
2020年07月19日
1,405 阅读
0 评论
4 点赞
1
...
4
5
6