改变传统的网页浏览格式,让网页更加个性化。
需结合stylus插件配合使用,直接导入即可。
- 样式一
效果:
代码:
.c-container {
border: 1px solid #F5F5F5;
border-radius: 1px;
padding: 25px;
transition: all 450ms cubic-bezier(0.01, 0.48, 0.47, 0.99) 0ms;
box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.05);
}
.c-container:hover {
border: 1px solid #B9D5FF;
box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.10);
}
/*未选中方框,边框,阴影*/
.c-container {
border: 1px solid #fdfdfd00;
background:#fdfdfd26;
border-radius: 1px;
padding: 25px;
transition: all 450ms cubic-bezier(0.01, 0.48, 0.47, 0.99) 0ms;
box-shadow: 5px 5px 10px 0 rgba(157, 155, 155, 0);
}
/*选中方框*/
.c-container:hover {
border: 1px solid #e8e8e8ed;
background:#fffefe8a;
box-shadow: 5px 5px 10px 0 rgba(28, 28, 28, .85);
}
/*多栏*/
.container_l, .op-img-star-divide-low > a {
width: auto !important;
}
#content_left {
width: 93%!important;
padding-left: 3.5%!important;
}
#content_left > .c-container, #content_left > [class^="result"] {
display: block !important;
width: 31% !important;
min-width: 568px !important;
min-height: 116px !important;
float: left !important;
margin: 0.4% !important;
padding: 8px 5px 3px 5px !important;
table-layout: fixed !important;
border-collapse: separate !important;
overflow: hidden !important;
}
.s_tab, .nums, .search_tool_conter, #rs, .to_tieba, .to_zhidao_bottom {
margin: 0 auto!important;
}
#page, #s_tab {
padding-left: 0px !important;
text-align: center!important;
}
body[link='#0000cc'] .s_form {
width:793px!important;
margin:0 auto !important;
transform:translatex(-260px);
}
#content_right, .c-recommend, body > div[class="result-op xpath-log"], #content_left > * {
display: none !important;
}
/* 搜索标题 */
.t a,p a,#rs a,#rs_top_new a,.hint_toprq_tips_items div a,.c-title a{
color:#040404de!important;
text-decoration:none;
}
/* 新闻搜索 标题 */
.c-title{
font-size:18px;
font-weight:normal;
}
.t a em,.c-title a em{
/* color:#4E4E4E!important; */
text-decoration:none;
}
.t a:hover,p a:hover,#rs a:hover,.res-gap-right16:hover,.c-abstract a:hover,.hint_toprq_tips_items div a:hover,.c-title a:hover{
color:#b90006!important;
text-decoration:none;
}
.op-mapcity-btm a:hover{
color:white!important;
}
.t a:hover em,.c-title a:hover em{
color:#aa0101!important;
}
/* 介绍字体及颜色 */
.c-abstract,.c-abstract a,.op_offical_weibo_name,.op_offical_weibo_detail,.op_offical_weibo_pz a,.op_offical_weibo_other a,.c-row,.c-more_link,.op_tour_aim_tip span a,.op-koubei2-comt,.op-koubei2-more a,.op_weather4_twoicon_aa,.op_weather4_twoicon_close, .op_weather4_twoicon_open,.op_sp_realtime_bigpic5_list_info a,.op_sp_realtime_bigpic5_subTitle_con a,.op_sp_realtime_bigpic5_first_abs a{
color:#2b1400b5!important;
font-size: 12px;
text-decoration:none;
}
/* 搜索结果标红 */
em,.c-row em,.c-abstract em,.c-offset a em,.result-op table tr td a em,.c-offset td a em,.op-tieba-general-lookmore a em,.c-gap-top-small a:hover,.opr-recommends-merge-more-btn:hover,.op_sp_realtime_bigpic5_first_abs a:hover{
color:#b3011b!important;
}
.c-gap-left{
margin-left:0px;
}
.c-offset{
padding-left:0px;
}
/*分类标签*/
.c-tabs-nav {
background-color: #EEEEEE;
}
.c-tabs-nav-selected {
border-bottom: #F44336 2px solid !important;
background-color: #2196F3 !important;
color: #fff !important;
}
a {
color: #4879BD;
}
h3 a:hover {
border-bottom: #4879BD 1.2px solid;
}
.c-showurl {
color: #532c029e;
}
.op-se-listen-recommend:hover {
border-bottom: #4879BD 1.2px solid;
}
.c-gap-bottom-small a:hover {
border-bottom: #4879BD 1.2px solid;
}
.c-row a:hover {
border-bottom: #4879BD 1.2px solid;
}
#rs a:hover {
border-bottom: #4879BD 1.2px solid;
}
.hint_toprq_tips_items a:hover {
border-bottom: #4879BD 1.2px solid;
}
.c:hover {
border-bottom: #4879BD 1.2px solid;
}
em {
color: #EA4335;
}
/*页面背景*/
body {
background-color: #eee0;
}
/*页码*/
#page a{
background: #fff;
color: #42424282;
}
#page a:hover{
background-color: #e0e0e0 !important;
}
#page a .pc:hover {
background-color: #e0e0e0;
}
#page strong {
background-color: #4285F4 !important;
color: #fff;
}
#page strong .pc {
background-color: #4285F4 !important;
}
.pc:hover {
background-color: #e0e0e0;
}
#s_tab b {
border-bottom: 3px #4879BD solid;
color: #4879BD;
}
#s_tab {
border-bottom: #e0e0e0 1px solid;
}
.bdpfmenu a:hover {
background-color: #4879BD !important;
}
.setpref:hover {
background-color: #4879BD !important;
}
#u .lb {
background-color: #4879BD;
}
#u .lb:hover {
background-color: #618CC7;
}
#u .lb:active {
background-color: #7DA0D0;
}
#bg {
background-color: #FFF !important;
background: #FFF;
}
#u1 a.lb {
background-color: #4879BD;
}
#u1 a.lb:hover {
background-color: #618CC7;
}
#u1 a.lb:active {
background-color: #7DA0D0;
}
#u_sp .s_bri {
background-color: #F44336;
}
#s_username_top {
background-color: #e0e0e0;
}
.s-user-set-menu a:hover {
background-color: #4879BD !important;
}
#user {
background-color: #fff0;
}
.msg-setting-btn {
background-color: #4879BD !important;
}
.no-use {
background-color: #E5E5E5 !important;
}
.pass-text-input {
border-bottom: #e0e0e0 2px solid !important;
border-left: #fff 0px solid !important;
border-right: #fff 0px solid !important;
border-top: #fff 0px solid !important;
}
.pass-text-input-focus {
border-bottom: #4879BD 2px solid !important;
border-left: #fff 0px solid !important;
border-right: #fff 0px solid !important;
border-top: #fff 0px solid !important;
}
.tang-pass-pop-login-color-blue .pass-button {
background-color: #4879BD;
}
.tang-pass-pop-login-color-blue .pass-button:hover {
background-color: #618CC7;
}
/****可以加一些自己的背景图片,替换引号内的内容为可外链的图片即可****/
body{
background-repeat: repeat-y;
background-size: 100%;
background-attachment:fixed;
background-image:
url('https://s1.ax1x.com/2020/08/08/a4gxRH.jpg');}
/*****窗口背景的透明虚化效果*****/
body>#wrapper,body>.wrap,body>#main,body #appbar,body #hdtbSum{
background: rgba(225, 225, 225, 0);}
body #head,body>#page{
background: rgba(225, 225, 225, .21);}
/*头部*/
body #head{
background: #e8e6e6a1;
}
/*颈部*/
body #s_tab {
background: #d50101;
}
body #color{
color: #fb0303;
background: #d50101
}