My page custom CSS code

目录

  • My page custom CSS code

My page custom CSS code

My page customize CSS code for SimpleGamboge blog skin.

Adjustment:

  • 1.The picture on the left is replaced by a head image.
  • 2.Expand the width of the left column and reduce the width of the right main column width.
  • 3.expand the width of the comment area of the content page, and keep the tool icon to the left.
  • 4.go to the advertisement...
  • 5.Under tension, the left column is fixed width and the right column is suitable (by grace).
  • 6.two level Title Format: blue background
/*左上头像*/
#lnkBlogLogo {
float: right;
display: block;
width: 180px; /*调整*/
height: 180px; /*调整*/
background-image: url(http://pic.cnitblog.com/avatar/694556/20141120153630.png); /*调整*/
}

/*左侧栏*/
#header {
width: 180px; /*调整*/
min-width:180px;
color: #000;
background: #FFF;
}
@media screen and (max-width: 1000px){
#header, #sideBar {
display:block;
}}

#sideBar {
width: 180px; /*调整*/
min-width: 180px; /*调整*/
min-height: 200px;
float: left;
text-align: right;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
.input_my_zzk {
width: 100px; /*调整input text*/
}

/*右侧主栏*/
#mainContent .forFlow {
position: absolute;
top: 0;
left:200px;
right: 0;
float: right;
width: initial;
min-height: 1000px;
min-width: 800px;
background: #F6E497;
}

/*评论区*/
div.commentform textarea {
width: 100%; /*调整*/
height: 300px;
font-size: 13px;
}
.commentbox_title_right {
float: left; /*调整*/
height: 22px;
}

/*下广告*/
#site_nav_under {
margin-top: 5px;
line-height: 1.8;
display: none; /*调整*/
}
.c_ad_block {
margin-top: 10px;
line-height: 1.5;
display: none; /*调整*/
}

/*二级标题蓝色背景*/
#cnblogs_post_body h2 {
background: gray !important;
background: #406CA4 !important;
border-radius: 4px 4px 4px 4px !important;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-family: "微软雅黑", "宋体", "黑体", Arial;
font-size: 17px;
font-weight: bold;
margin: 15px 0 !important;
padding: 5px 0 5px 20px;
}

原文地址:https://www.cnblogs.com/hugeng007/p/9382675.html

时间: 2024-10-11 23:49:51

My page custom CSS code的相关文章

fanfan page/html && css

file:index.html <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>Kris Wu </title> </head> <body bgcolor="#99CCFF"> &

CSS: iPhone Custom CSS

1. [代码][CSS]代码 <style type="text/css" media="screen"> /* iPhone 4@media only screen and (-webkit-min-device-pixel-ratio:2){#innerWrap{ width: 650px; }#container{ width: inherit; }} @media all and (max-device-width: 480px){#innerW

CSS code snip enjoy.

<!-- information-total得是动态获取吧. --> <div class="information-mod"> <div class="am-container"> <p id="numRun" class="information-totle">20,000,000,000+</p> <!--<P class = 'informatio

[Angular 9] Custom CSS Variables binding

Html: <input type="range" value="0" [style.--thumb-rotate]="720 * $any(input.value)/100 + 'deg'" #input (input)="0"> CSS: input[type="range"]::-webkit-slider-thumb:active { background-position: 100%

ASP.NET Web API Help Pages using Swagger

Understanding the various methods of an API can be a challenge for a developer when building a consuming application. Generating good documentation and help pages as a part of your Web API using Swagger with the .NET Core implementation Swashbuckle i

Web前端优化最佳实践及工具集锦

前端的性能对于一个Web应用来说非常重要,如果一个Web应用的页面加载速度非常快.对于用户的操作可以及时响应,那么产品的用户体验将会极大地提升.下图显示了页面加载速度对于用户体验的影响. 你的Web页面的速度是否已经足够快了?其实可能还有很多可以提升的地方.Google和雅虎也提出了一些Web应用的前端优化建议,并发布了一些工具,你可以逐一检验你的Web应用,以便达到更高的性能. 这些优化不仅仅可以给用户提供更好的体验,从开发者角度来说,进行优化还可以减少页面的请求数.降低请求所占的带宽.减少资

Web前端优化

前端的性能对于一个Web应用来说非常重要,如果一个Web应用的页面加载速度非常快.对于用户的操作可以及时响应,那么产品的用户体验将会极大地提升.下图显示了页面加载速度对于用户体验的影响. 你的Web页面的速度是否已经足够快了?其实可能还有很多可以提升的地方.Google和雅虎也提出了一些Web应用的前端优化建议,并发布了一些工具,你可以逐一检验你的Web应用,以便达到更高的性能. 这些优化不仅仅可以给用户提供更好的体验,从开发者角度来说,进行优化还可以减少页面的请求数.降低请求所占的带宽.减少资

how to add Javascript and CSS in page layout with sharepoint 2013

how to add Javascript and CSS in page layout with sharepoint 2013 Sometimes, we need create a custom page layout, at the time, if we want to add some javascript and css code, how to do it? we cannot add the code in page layout file directly, the syet

CSS制作水平垂直居中对齐 多种方式各有千秋

作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀,要正确的选择也是一件不容易的事情.我会将这几种方法一一介绍给大家,以供大家参考.或许对 于我这样的初学者有一定的帮助. 用CSS来实现元素的垂直居中效果是件苦差事,虽然说实现方法有多种,但有很多方式在某些浏览器下可能无法正常的工作.接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足