zoukankan      html  css  js  c++  java

  • 页面定制源码

    2019/10/24 UPD：修改了标题字体，然后为了和背景配一下，颜色也改了……一个下午再次打水漂，这次我会F12找costom.css了……然后在侧边栏加了个一言

    虽然我很想加个看板娘，但是不知道怎么看板娘一加整个排版都受影响（会莫名其妙标题下移，侧边栏字体变大）

    现在的代码

    #google_ad_c1, #google_ad_c2 {display:none;}
.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, 
.syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, 
.syntaxhighlighter textarea {
font-size: 20px!important;
}
#home {
opacity: 0.9;
margin: 0 auto;
 55%;
min- 950px;
background-color: #fff;
padding: 30px;
margin-top: 30px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}

body {
color: #000;
background: url(https://i.loli.net/2019/10/23/RuXFHe962UdSvkt.jpg
) fixed;
background-size: 100%;
background-repeat: no-repeat;
font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;
min-height: 101%;
}

#main {
     100%;
    text-align: left;
    margin-top: 10px;
}

#blogTitle h1 {
font-size: 30px;
font-weight: bold;
font-family: "Comic Sans MS";
line-height: 1.5em;
margin-top: 20px;
color: #515151;
}

#blogTitle h2 {
    font-weight: normal;
    font-size: 13px;
    font-size: .928571429rem;
    line-height: 1.846153846;
    color: #757575;
    float: left;
}

h1, h2, h3 {
    margin-top: 5px;
    margin-bottom: 15px;
}

#navList a:hover {
color: #4C9ED9;
text-decoration: none;
}
#navList a {
display: block;
 5em;
height: 22px;
float: left;
text-align: center;
padding-top: 18px;
}
#navigator {
font-size: 15px;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
height: 50px;
clear: both;
margin-top: 25px;
}
.catListTitle {
margin-top: 21px;
margin-bottom: 10.5px;
text-align: left;
border-left: 10px solid rgba(82, 168, 236, 0.8);
padding: 10px 0 14px 10px;
background-color: #f5f5f5;
}
#ad_under_post_holder #google_ad_c1,#google_ad_c2{  
display: none !important;
}
background-size: 105%;
background-repeat: no-repeat;
font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;
min-height: 101%;
}

.day .postTitle a {
    padding-left: 10px;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    font-family: cursive;
    color: #49989d;
    transition: all .4s linear 0s;
}

.postTitle {
    border-left: 3px solid #49989d;
    margin-bottom: 10px;
    font-size: 20px;
    float: right;
     100%;
    clear: both;
}

#postTitle h1{
    font-family: "Comic Sans MS";
    color:#49989d
    border-left: 3px solid #49989d;
    font-size: 180%;
    font-weight: bold;
    float: left;
    line-height: 1.3;
     100%;
    padding-left: 10px;
}

#topics .postTitle {
    font-family: "Comic Sans MS";
    color:#49989d;
    border-left: 3px solid #49989d;
    font-size: 180%;
    font-weight: bold;
    float: left;
    line-height: 1.3;
     100%;
    padding-left: 10px;
}

#comment_form_container .comment_textarea {
     550px;
    height: 200px;
    font-size: 13px;
    padding: 8px;
    margin-bottom: 10px;
    color: #555;
    border: 1px solid #ddd;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

    一言

    <meta charset="utf-8"/>
     
            <h2><B>一言（ヒトコト）</B></h2>
            <div class="daily a pome">
              <div class="daily pome" id="qwq"></div>
              <script>
                  var st=[                      "<center>如果是你的话，一定可以做到！<br>  ——魔卡少女樱 <br>",                          "<center>这世上没有什么偶然，有的只是必然。<br><center>     ——xxxHOLiC<br>",                           "<center>摩可拿最喜欢摩可拿了！<br><center>     ——TSUBASA 翼<br>",                           "<center>想哭的时候能哭出来，也是一种坚强吧。<br><center>     ——法伊<br>",                           "<center>为了让两个未来都不消失，这家店就是为了那一天而存在的。<br><center>     ——壹原侑子<br>",                           "<center>你一定能找到自己最喜欢的人，你最喜欢的人也一定最喜欢你。<br><center>     ——魔卡少女樱<br>",                           "<center>已经结下的缘是不会消失的<br><center>——壹原侑子<br>",                           "<center>一切皆因人愿…<br><center>      ——壹原侑子<br>",                           "<center>能够改变一个人的，只有相遇这件事。<br><center>     ——壹原侑子",                          "<center>语言并不只是束缚自己而已，也会束缚别人。<br><center>     ——壹原侑子<br>",                          "<center>需要代价哦。<br><center>     ——壹原侑子<br>",                          "<center>但她最挂念的，还是你啊。<br><center>     ——百目鬼静<br>",                          "<center>因为你寂寞的话……我也会……寂寞……<br><center>     ——四月一日君寻<br>",                          "<center>最喜欢小葵了。<br><center>嗯，我也最喜欢四月一日了。<br><center>",                          "<center>我竟然没有拍到小樱的英姿！<br><center>     ——大道寺知世<br>",                "<center>我会一直在这里，等着侑子小姐回来。<br><center>  ——四月一日君寻<br>",            "<center>早安，黑钢。<br>——法伊",            "<center>我不是你的小樱。<br> ——小樱"];
                  var num;
                  num=Math.floor((Math.random()*18));
                  document.write(st[num]);
                  var cli;
                  
              </script>
              <div style="font-size: 1em; text-align: center; line-height: 1.5em; display: none; " id="qwq"></div>
              <div style="text-align: right;  margin-top: 15px; font-size: 0.9em; color: #666; display: none; " id="qwq"></div>
            </div>

    2019/10/23 UPD：由于最近有一张比较喜欢的图片所以就加了个背景……可惜这张图片像素不是很高……
    v2-cf8518d6c4a42def827ab46997e0f0a9_r.jpg

    2019/10/2 UPD：进行了一番魔改。。怎么都不满意。。最后选择返璞归真。。。
    被续了大半个下午。。。感觉唯一的收获就是对HTML有了一点点理解。。。然而。。真的只是一点点。。。

    不懂CSS，大概就是到处贺贺的吧。。反正就记录一下。。。

    页面定制：

    #Snow{
    position: fixed;
    top: 0;
    left: 0;
     100%;
    height: 100%;
    z-index: 99999;
    background: rgba(0,0,0,0);
    pointer-events: none;
}

#google_ad_c1, #google_ad_c2 {display:none;}
.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, 
.syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, 
.syntaxhighlighter textarea {
font-size: 14px!important;
}
#home {
    opacity: 0.8;
    margin: 0 auto;
     65%;
    min- 950px;
       background-color: #fff;
    padding: 30px;
    margin-top: 30px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
#blogTitle h1 {
    font-size: 30px;
    font-weight: bold;
    font-family: "Comic Sans MS";
    line-height: 1.5em;
    margin-top: 20px;
    color: #515151;
}

#blogTitle h2 {
    font-weight: normal;
    font-size: 13px;
    font-size: .928571429rem;
    line-height: 1.846153846;
    color: #757575;
    float: left;
}

h1, h2, h3 {
    margin-top: 0px;
    margin-bottom: 15px;
}

#navList a:hover {
color: #4C9ED9;
text-decoration: none;
}
#navList a {
display: block;
 5em;
height: 22px;
float: left;
text-align: center;
padding-top: 18px;
}
#navigator {
font-size: 15px;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
height: 50px;
clear: both;
margin-top: 25px;
}
.catListTitle {
margin-top: 21px;
margin-bottom: 10.5px;
text-align: left;
border-left: 10px solid rgba(82, 168, 236, 0.8);
padding: 10px 0 14px 10px;
background-color: #f5f5f5;
}
#ad_under_post_holder #google_ad_c1,#google_ad_c2{  
display: none !important;
}
body {
color: #000;
background: url(https://ymzqwq.files.wordpress.com/2019/07/2ff9090f0cf3d7ca4c99c14cfc1fbe096a63a9fe.jpg
) fixed;
background-size: 105%;
background-repeat: no-repeat;
font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;
min-height: 101%;
}

#topics .postTitle {
    border: 0;
    font-size: 130%;
    font-weight: bold;
    float: left;
    line-height: 1.5;
     100%;
    padding-left: 5px;
}

div.commentform p{
margin-bottom:10px;
}
.comment_btn {
padding: 5px 10px;
height: 35px;
 90px;
border: 0 none;
border-radius: 5px;
background: #ddd;
color: #999;
cursor:pointer;
font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
text-shadow: 0 0 1px #fff;
display: inline !important;
}
.comment_btn:hover{
padding: 5px 10px;
height: 35px;
 90px;
border: 0 none;
border-radius: 5px;
background: #258fb8;
color: white;
cursor:pointer;
font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
text-shadow: 0 0 1px #fff;
display: inline !important;
}
#commentform_title {
background-image:none;
background-repeat:no-repeat;
margin-bottom:10px;
padding:0;
font-size:24px;
}
#commentbox_opt,#commentbox_opt + p {
text-align:center;
}
.commentbox_title {
 100%;
}
#tbCommentBody {
font-family:'Microsoft Yahei', Microsoft Yahei, 宋体, sans-serif;
margin-top:10px;
max-100%;
min-100%;
background:white;
color:#333;
border:2px solid #fff;
box-shadow:inset 0 0 8px #aaa;
// padding:10px;
height:250px;
font-size:14px;
min-height:120px;
}
.feedbackItem {
font-size:14px;
line-height:24px;
margin:10px 0;
padding:20px;
background:#F2F2F2;
box-shadow:0 0 5px #aaa;
}
.feedbackListSubtitle {
font-weight:normal;
}

#blog-comments-placeholder, #comment_form {
padding: none;
background: #fff;
-webkit-box-shadow: 1px 2px 3px #ddd;
box-shadow: 1px 2px 3px #ddd;
}
.feedback_area_title {
margin-bottom: 15px;
font-size: 1.8em;
}
.feedbackItem {
border-bottom: 1px solid #CCC;
margin-bottom: 10px;
padding: 5px;
background: rgb(248, 248, 248);
}
.color_shine {background: rgb(226, 242, 255);}
.feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;}
#comment_form .title {
font-weight: normal;
margin-bottom: 15px;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="css/demo.css" rel="stylesheet" />
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/demo.js"></script>
</head>
<body>

</body>
</html>

    侧边栏公告：

    <div class="Snow">
    <canvas id="Snow"></canvas>
</div>
<script src="https://files.cnblogs.com/files/yjlblog/xue.js"></script>

<div className="sidebarMouse"><object type="application/x-shockwave-flash" style="outline:none;"          data="https://files.cnblogs.com/files/jingmoxukong/mouse.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2F&amp;up_tailColor=E6DEBE&amp;"          width="240" height="160"><param name="movie"           value="https://files.cnblogs.com/files/jingmoxukong/mouse.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2E&amp;up_tailColor=E6DEBE&amp;"><param name="AllowScriptAccess" value="always"><param name="wmode" value="opaque"></object></div>

<embed wmode="transparent" src="https://files.cnblogs.com/files/jingmoxukong/honehone_clock_tr.swf" quality="high" bgcolor="#FDF6E3" width="240" height="110" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">

<embed src="//music.163.com/style/swf/widget.swf?sid=590521&type=2&auto=0&width=320&height=66" width="340" height="86" allowNetworking="all"></embed>

大家好qwq<br>
坐标hzxjhs <br>
BIG JURUO <br>
little vegetable chicken <br>
天天被吊打 鏼鏼发抖 <br>
自己选择的路，跪着也要走完。 <br>
QQ:1984234044 <br>
最好备注省份学校ID什么的防误删 <br>
Email:ymzqwq@qq.com <br>
<a href="https://blog.csdn.net/ymzqwq">其实我在CSDN也有号</a> <br>
<a href="https://ymzqwq.wordpress.com/">并不OI向的wordpress博客（大概是生活向？或者反动向？）</a> <br>
校内的题放在那篇XX题里，密码是机房门牌号，格式混乱无比，连Markdown都基本懒得用，因为是随便写的（暴露本性）<br>
还有一些乱七八糟东西也有锁 <br>
想要尝试的可以滑动解锁（雾） <br>
滑动解锁不了的就可以放弃了

<div style = "display:none;">动态线条</div>
<script>

!function(){

function n(n,e,t){

return n.getAttribute(e)||t

}

function e(n){

return document.getElementsByTagName(n)

}

function t(){

var t=e("script"),o=t.length,i=t[o-1];

return{

l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)

}

}

function o(){

a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,

c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight

}

function i(){

r.clearRect(0,0,a,c);

var n,e,t,o,m,l;

s.forEach(function(i,x){

for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],

null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,

l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),

t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))

}),

x(i)

}

var a,c,u,m=document.createElement("canvas"),

d=t(),l="c_n"+d.l,r=m.getContext("2d"),

x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||

function(n){

window.setTimeout(n,1e3/45)

},

w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,

window.onmousemove=function(n){

n=n||window.event,y.x=n.clientX,y.y=n.clientY

},

window.onmouseout=function(){

y.x=null,y.y=null

};

for(var s=[],f=0;d.n>f;f++){

var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})

}

u=s.concat([y]),

setTimeout(function(){i()},100)

}();

</script>
<div style = "display:none;"> 动态线条end</div>

<script type="text/javascript">
$(document).ready(function(){
var a_index = 0;
$("body").click(function(e){
var a = new Array("如果是你的话，一定可以做到！","你一定能找到自己最喜欢的人，你最喜欢的人也一定最喜欢你。","这世上没有什么偶然，有的只是必然。","已经结下的缘是不会消失的","你已经做出选择了","一切皆因人愿…","能够改变一个人的，只有相遇这件事。","需要代价哦。","能够不付代价、互相给予的，就只有“感情”而已。","语言并不只是束缚自己而已，也会束缚别人。","想哭的时候能哭出来，也是一种坚强吧。","为了让两个未来都不消失，这家店就是为了那一天而存在的。","摩可拿最喜欢摩可拿了！");
var $i = $("<span/>").text(a[a_index]);
a_index = (a_index + 1) % a.length;
var x = e.pageX,y = e.pageY;
$i.css({
"z-index": 99999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": randomColor()
});
$("body").append($i);
$i.animate({"top": y-180,"opacity": 0},1500,function() {
$i.remove();
});

function randomColor(){
let r = Math.floor(Math.random()*256)
let g = Math.floor(Math.random()*256)
let b = Math.floor(Math.random()*256)
return "rgb("+r+','+g+','+b+")"
}


});
});
</script>

    页脚：

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Live2D</title>
     
    <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/ymzqwq/waifu.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/ymzqwq/waifu.css">
    <div class="waifu" id="waifu">
        <div class="waifu-tips" style="opacity: 1;"></div>
        <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
        <div class="waifu-tool">
            <span class="fui-home"></span>
            <span class="fui-chat"></span>
            <span class="fui-eye"></span>
            <span class="fui-user"></span>
            <span class="fui-photo"></span>
            <span class="fui-info-circle"></span>
            <span class="fui-cross"></span>
        </div>
    </div>
    <script src="https://files.cnblogs.com/files/ymzqwq/live2d.js"></script>
    <script src="https://files.cnblogs.com/files/ymzqwq/waifu-tips.js"></script>
    <script type="text/javascript">initModel()</script>
</body>
</html>
<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>
  • 相关阅读:
    sql-字符串拼接单，双引号及$
    SQL-SQLServer数据库查询
    SQL-数据库不能以127.0.0.1登录
    Excel-VBA-ActiveX编译错误：用户定义类型未定义
    Excel-VBA中，取：存储过程时，报：对象关闭时，不允许操作！
    JS
    小程序(Wepy)--生成海报图片
    小程序--时间处理(显示几分钟前,,几小时前,,几天前...)
    小程序--wepy省市区三级联动选择
    对于 wepy 不是内部或外部命令 -- 的解决办法
  • 原文地址：https://www.cnblogs.com/ymzqwq/p/11228219.html
Copyright © 2011-2022 走看看