阅读本文请选择全文阅读.
本CSS为手机简洁版皮肤.
我会给出这套CSS的下载链接.文中的CSS为注解版本,下载链接的为无注解版本,都可以使用.
css.css请将您下载的文件更名为css.css,上传到你的空间根目录,然后在你要使用本CSS的页面的<head></head>里加入
<link href="css.css" rel="stylesheet" type="text/css" />
为了更好的阅读体验,css使用场景已经修改到文章最后,请使用全文阅读模式.
top的用法
<div class="top">
<div class="zuo"><a id="top" href="index.php">爱染柒</a></div>
<div class="you"><a href="reg.php">注册</a> <a href="login.php">登录</a></div>
</div>
显示效果如下:
灰色导航栏的用法
<div class="hui">
<div class="zuo"><a href="index.php">推荐</a> <a href="wen_tag.php?tag=语录">语录</a> <a href="wen_tag.php?tag=哲理">哲理</a> <a href="wen_tag.php?tag=故事">故事</a> <a href="wen_tag.php?tag=励志">励志</a></div>
<div class="you"><a href="">[>>]</a></div>
</div>
加上top的显示效果如下:
底栏的用法
<div class="di">
<div class="zuo">[版本] 简洁版 触屏版 电脑版</div>
<div class="you"><a href="#top">顶部</a></div>
</div>
显示效果如下:
蓝色编辑框的用法
<input type="text" class="kuang" name="username" placeholder="设置用户名(显示名、登录名)"/>
<input type="password" class="kuang" name="password" placeholder="设置你的密码"/>
<br>
<br>
我意味着你同意<a href="contract.php">服务条款</a>及<a href="legal.php">隐私政策</a>.
<input type="submit" class="anniu" value="注 册 帐 号"/>
注意,按键按钮可以使用kuang 也可以使用anniu ,这里的按钮使用的是kuang.
显示效果如下:
CSS使用场景
body,form,p,h1,h2,h3,ul {
padding:0;
margin:0;
color:#999; /*网页默认字体颜色*/
}
a:link {
color:#369; /*链接颜色*/
text-decoration:none; /*无下划线*/
}
a:visited {
color:#669; /*访问过的链接颜色*/
text-decoration:none;
}
a:hover {
color:#fff; /*焦点的链接颜色*/
text-decoration:none;
background:#039;
}
a:active {
color:#fff; /*点击时的链接颜色*/
text-decoration:none;
background:#f93;
}
.title {
background-color:#F3F3F3;
color:#636363;
padding-left:10px; /*左缩进10像素*/
padding-right:10px; /*右缩进10像素*/
padding-top:4px; /*上缩进4像素*/
padding-bottom:4px; /*下缩进4像素*/
border-top-style:solid; /*上边框*/
border-top-width:2px; /*上边框宽度为2px*/
border-color:#70C0EE; /*上边框颜色*/
}
.di {
/*用作底部的,有一条4像素的底线*/
background-color:#F3F3F3;
color:#636363;
padding-left:10px;
padding-right:10px;
padding-top:4px;
padding-bottom:4px;
border-bottom-style:solid;
border-bottom-width:4px;
border-color:#70C0EE;
}
.top {
/*这是一般用作最上方标题栏*/
background-color:#70C0EE;
color:#FFF;
padding:10px;
line-height:20px;
font-size:20px;
}
.top a {
color:#FFF;
}
.hui {
/*这是一般用作标题栏下面的导航栏,灰色的*/
background-color:#F3F3F3;
padding-left:10px;
padding-right:10px;
padding-top:4px;
padding-bottom:4px;
}
.title a {
color:#636363;
}
.di a {
color:#636363;
}
.hui a {
color:#636363;
}
.content {
/*内容显示用的*/
padding:10px;
color:#636363;
border-bottom-style:solid;
border-bottom-width:1px;
border-color:#CCC;
}
.content a {
color:#636363;
}
a {
color:#636363;
}
.comm {
/*评论列表*/
padding-left:15px;
padding-right:15px;
padding-top:5px;
padding-bottom:5px;
color:#000000;
line-height:160%;
font-size:14px;
padding-bottom:4px;
border-bottom-style:dashed;
border-bottom-width:1px;
border-bottom-color:#CCCCCC;
}
.red {
/*字体定义为红色(非纯红)*/
color:#FF8066;
}
.red a {
color:#FF8066;
}
.zuo {
text-align:left;
float:left;
}
.you {
text-align:right;
}
.anniu {
/*蓝色按钮*/
background:#F3F3F3;
font-size:16px;
border:1px solid #70C0EE;
width:100%;
color:#70C0EE;
}
.kuang {
/*蓝色的编辑框*/
background:#FFF;
font-size:16px;
border:1px solid #70C0EE;
width:100%;
color:#70C0EE;
}
.xiao {
/*小字体*/
font-size:14px;
color:#999;
padding-top:10px;
}
.url {
/*更小的字体*/
font-size:10px;
color:#999;
padding-top:10px;
}
