孙振超's Show

 爱情在线 V2020 现用CSS样式表，学习CSS样式表的可以互相交流一下。当然你也可以直接拿去调用。

/* 爱情在线 aqzx.com 专用样式表，由孙振超编辑 */

:root {
  --base-font-size: 14px;
}

BODY {
/* 整体样式设计 */
background-color: #f0f0f0;
margin-left:0px; 
margin-top:0px;
word-break:break-all;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size:var(--base-font-size);
color:#666666;
}

/* 常规链接文字样式 */
A{
color: #000000;
padding:5px;
border: none;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 2px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
font-size:var(--base-font-size);
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
} 

A:hover{
background-color: #000000;
color:#FFFFFF;
padding:5px;
border: none;
text-align: center;
text-decoration: none;
display: inline-block;
font-size:calc(var(--base-font-size) * 0.857);
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 2px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
border-radius: 6px;
}

/* 自定义链接文字样式 */
A.dh{
color: #CF2A26;
padding:5px;
border: none;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
font-size:var(--base-font-size);
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
} 

A.dh:hover{
background-color: #CF2A26;
color:#FFFFFF;
padding:5px;
border: none;
text-align: center;
text-decoration: none;
display: inline-block;
font-size:calc(var(--base-font-size) * 0.857);
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
border-radius: 6px;
}

/* 常规单元格样式 */
td{
FONT-FAMILY: sans-serif, Verdana, Georgia; 
font-size:var(--base-font-size); 
color:#666666; 
}

/* 自提行间距定义 */
.hangjianju18 {line-height: 18px;}
.hangjianju21 {line-height: 21px;}
.hangjianju25 {line-height: 25px;}

/* 页面极小文字 */
.xiaozi{ 
font-size:8px; 
color:#F0F0F0; 
font-family: Geneva, Arial, Helvetica, sans-serif; 
}

/* 页面大字体标题样式 */
.dazi{
FONT-SIZE: calc(var(--base-font-size) * 1.143); 
font-weight: bold; 
font-family: "微软雅黑", "黑体",Verdana, Georgia; 
COLOR: #333333; 
}


/* 表单类样式 */
input{
font-family: sans-serif, Verdana, Georgia; 
color: #FFFFFF; 
background-color: #CF2A26; 
border: 1px #CF2A26 solid;
}/* 这是点击按钮样式 */ 
.input2{
font-family: sans-serif, Verdana, Georgia; 
color: #666666; 
background-color: #f0f0f0; 
border: 1px #DDDDDD solid; 
}/* 这是单行输入框样式 */
textarea {
font-family: sans-serif, Verdana, Georgia; 
color: #666666; 
background-color: #f0f0f0; 
border: 1px #DDDDDD solid;
} /* 这是多行输入框样式 */
select{
font-family: sans-serif, Verdana, Georgia; 
color: #666666; 
background-color: #f0f0f0; 
border: 1px #f0f0f0 solid; 
}/* 这是下拉菜单样式 */


/* 边框投影效果 */
.bkty{
background-color:#FFFFFF; 
padding:5px; 
border-radius: 6px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}


/* 页面其他不重要文字样式 */
.bzywz{color:#CCCCCC;}
.bzywz2{color:#999999;}

此样式表主要是针对table标签和链接做的美化。导航菜单，页内链接效果，照片和表格投影效果等……都在这个文档里。
参考效果请访问我的网站查看：
http://www.aqzx.com