Web,Windows
Web

换了个主题

也许是喜新厌旧的心理在作怪,总是觉得旧的主题在width设置方面太窄,想换一个宽一点的。于是就换了这个主题,跟上个主题是同一个作者。

jquery-confirm 使用方法

引用

<link rel="stylesheet" href="http://rcfk.iwonmo.com/css/jquery-confirm.min.css">
<script src="http://rcfk.iwonmo.com/js/jquery-confirm.min.js"></script>

绑定事件

        <ul class="f_ul">
          <li class="example-p-2 fa fa-info-circle"> </li>
      <i class="example-p-1 fa fa-question-circle"></i>

        </ul>

                        <script>
      $(function(){
        $(".example-p-1").click(function(){
         $.alert({
        title: '说明!',
        content: '此系统是一款在线的意见提交系统。<br> <br>请尽量用简短的话语描述问题。 <br> <br> 注:请文明沟通!',
    });
        });

            $(".example-p-2").click(function(){
    window.location.href="index.php"; 
        });
      });
    </script>

typecho 模板的问题

问题

本博客用的模板是源于网络。下载的时候跟效果图没有细对照,用下来感觉不错,就一直沿用至今。可是刚才想换模板的时候才发现问题。对于文章的一些信息显示缺少ICO。于是自己修改了一下。还好原作者没有把资源删掉。

问题源

Style.css

.details-up span.author{
  background-position: left -80px;
}

修改后

.details-up span.author{
  background: url(../images/iititle.gif)  no-repeat left center;
  background-position: left -74px;
  padding-left:21px;  
}
.details-up span.category{
  background: url(../images/iititle.gif)  no-repeat left center;
  background-position: left -32px;
  padding-left:21px;  
}
.details-up span.date{
  background: url(../images/iititle.gif)  no-repeat left center;
  background-position: left -54px;
  padding-left:21px;  
}
.details-up span.comments-top{
  background: url(../images/iititle.gif)  no-repeat left center;
  background-position: left -100px;
  padding-left:21px;  
}

改前效果

111.png

改后效果

22222.png

PHP 表白墙制作 - 首页篇

轮廓如下:

1.png

可以看到主要有以下几个方面:一个幻灯篇、一行功能按钮、然后就是列表项。

然后开始吧:

1、下载bootstrap:http://v3.bootcss.com/getting-started/

引入相关css js。


<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

加入上述代码以后就可以利用bootstrap来进行界面的绘制。

幻灯片

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

为了简洁,把carousel-indicators去掉。

 <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

功能按钮

<a href="index.php"  class="btn btn-danger">首页</a> 
<button  type="button" data-toggle="modal"data-target="#myModal" class="btn btn-danger">我要表白   <span class="badge"></span></button>
<a   href="about.php"  class="btn btn-danger">关于</a> </center>

输出列表

 <div class="panel panel-default" style="  margin-left:10px;margin-right:10px;margin-top:-6px;">';
<div class="panel-heading"><span class="badge" style="background-color:#bbb ;">To:</span> <span class="badge" style="background-color:#bbb;float:right;">缘分指数:</span></div> 
<div class="panel-body"></div><div class="panel-footer"><a  href="http://love.iwonmo.com/p.php?id="></a><span style="float:right;"></span></div>
</div>

Torrent上传程序

界面展示

1.png

说明

vcode

fileupload

bootstrap

fileinput

ystep

jquery-1.9.1

下载

Torrent上传程序.rar

日志

修复fileupload.class.php文件上传类设置成员属性无效现象。