博客个人页面设计CSS
Posted lucky1024
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了博客个人页面设计CSS相关的知识,希望对你有一定的参考价值。
#blogTitle h1
font-size: 150%;
font-weight: bold;
line-height: 1.5em;
margin-left: 1em;
margin-top: 10px;
width: 50%;
float: left;
display: none;
letter-spacing: 1px;
#myBtn
display: none;
position: fixed;
bottom: 50px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background:url("https://www.cnblogs.com/images/cnblogs_com/lucky1024/1475118/o_btp.png");
background-size:100% 100%;
background-repeat:no_repeat;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 50%;
width:60px;
height:60px;
#sidebar_search h3
display:none;
.mySearch .input_my_zzk
height: 1.4em;
width: 140px;
border-radius: 8px;
float: left;
padding-right:5px;
background-color:#cccccc59;
border:1px solid #ccc;
input[type=button]
-webkit-appearance: button;
border-radius: 10px;
background-color: rgba(0,0,0,.3);
color: #9ebbff;
/* font-style: normal; */
font-weight: bold;
border-width: 1px;
#blog-news
margin-left: 8px;
.c_b_p_desc_readmore
text-decoration: none;
padding-left: 10px;
font-size: 16px;
#cnblogs_post_body
word-break: break-word;
font-size: 16px;
margin-left: 10px;
margin-right: 10px;
margin-top: 20px;
body
color: #000;
background: linear-gradient(#2c2331, #2d2d71,#2c2331);
background-size:cover;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
min-height: 100%;
#home
margin: 0 auto;
width: 1300px;
#mainContent
min-height: 200px;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
float: left;
width: 1000px;
background: #fff;
margin-left:2em;
margin-bottom:2em;
padding-top:10px;
border-radius:15px;
#navigator
background-color:#cccccc59;
height: 60px;
clear: both;
margin-top: 20px;
padding-bottom:20px;
position: relative;
border-radius: 25px 25px 0px 0px;
#navList a
margin: 18px 10px 0 0;
padding: 0 30px;
padding-left:10px;
font-size: 24px;
display: block;
font-weight:bold;
margin-top: 25px;
#navList a:link
color: #fff;
text-shadow: 3px 3px 3px #000;
text-decoration:none;
#navList a:hover
color:#fff;
text-shadow: 6px 6px 6px #286075;
#profile_block
margin-top: 0px;
line-height: 1.5;
text-align: left;
font-size: 14px;
margin-bottom: 8px;
.newsItem .catListTitle
text-align: left;
color:#fff;
padding: 5px 10px;
border: 0px solid #ccc;
background: #cccccc59;
.newsItem
padding: 0 0 5px 0;
background-color:#cccccc59;
border-radius:15px;
box-shadow: 5px 5px 5px #222;
.catListEssay
background-color:#cccccc59;
border-radius:15px;
margin-bottom:20px;
box-shadow: 5px 5px 5px #222;
#sidebar_postcategory
background-color:#cccccc59;
border-radius:15px;
margin-bottom:20px;
box-shadow: 5px 5px 5px #222;
#sidebar_postarchive
background-color:#cccccc59;
border-radius:15px;
margin-bottom:20px;
box-shadow: 5px 5px 5px #222;
#sidebar_links1477400
background-color:#cccccc59;
border-radius:15px;
margin-bottom:20px;
box-shadow: 5px 5px 5px #222;
#sidebar_topviewedposts
background-color:#cccccc59;
border-radius:15px;
margin-bottom:20px;
box-shadow: 5px 5px 5px #222;
.catListEssay h3, .catListLink h3, .catListNoteBook h3, .catListTag h3, .catListPostCategory h3, .catListPostArchive h3, .catListArticleArchive h3, .catListImageCategory h3, .mySearch h3, .catListComment h3, .catListView h3, .catListFeedback h3, #blog-sidecolumn .catListTitle
text-align: left;
color:#fff;
padding: 5px 10px;
background: #cccccc59;
border-bottom: none;
border: 0px solid #ccc;
/*background:url("https://www.cnblogs.com/images/cnblogs_com/lucky1024/1475118/o_eww.jpg");*/
/*background-repeat:no-repeat;*/
/*background-size:300% 500%;*/
.catListEssay ul, .catListLink ul, .catListNoteBook ul, .catListTag ul, .catListPostCategory ul, .catListPostArchive ul, .catListArticleArchive ul, .catListImageCategory ul, .mySearch ul, .catListComment ul, .catListView ul, .catListFeedback ul
padding-left: 2em;
padding-bottom: 1em;
font-size: 14px;
padding-right: 2em;
#blog-sidecolumn .catList ul, #blog-sidecolumn .catListBlogRank ul, #blog-sidecolumn .catListArticleCategory ul
margin-left: 15px;
padding-bottom: 1em;
padding-left: 1em;
font-size: 14px;
.catListTitle
font-weight: bold;
line-height: 1.5em;
font-size: 150%;
margin-top: 0px;
margin-bottom: 20px;
border-bottom: 1px solid #000;
text-align: center;
border-radius:15px 15px 0px 0px;
/**/
#sideBarMain
margin-top: 0px;
margin-left: 2em;
margin-right:2em;
#blogTitle
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: 100% 50%;
font-size: 30px;
height: 160px;
clear: both;
background-color:#cccccc59;
border-radius: 25px;
/*background:url("https://www.cnblogs.com/images/cnblogs_com/lucky1024/1475118/o_eww.jpg");
background-repeat:no-repeat;
background-size:100% 150%;
background-origin:content-box;*/
/* background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
background: -moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
background: -o-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
background: -ms-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
background: linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);*/
.Header1_HeaderTitle a:link , .Header1_HeaderTitle a:hover,.Header1_HeaderTitle a:active
text-decoration:none;
#blogTitle h2
font-weight: normal;
font-size: 20px;
line-height: 1.8;
color: #FFFFFF;
font-weight: bold;
text-align: right;
float: right;
margin-top:0px;
margin-right:20px;
display:none;
.postTitle
font-size: 18px;
font-weight: bold;
padding: 6px 100px 6px 20px;
border-bottom: 2px solid #03d0f1;
border-left: 5px solid #03d0f1;
line-height: 1.5em;
clear: both;
.postCon
float: right;
line-height: 1.5em;
width: 95%;
clear: both;
padding: 10px 0;
font-size: 14px;
.postTitle a:link, .postTitle a:visited, .postTitle a:active
color:#0693c3;
.postTitle a:hover
text-shadow: 4px 3px 4px #000;
font-size:18px;
/*隐藏建档日期*/
.dayTitle
/*display:none; */
#main
min-width: 980px;
text-align: left;
clear: both;
background: #cccccc59;
border-radius: 0px 0px 25px 25px;
}
#mainContent .forFlow
float: none;
width: auto;
margin-top: 20px;
margin-left: 20px;
margin-right: 30px;
margin-bottom: 30px;
以上是关于博客个人页面设计CSS的主要内容,如果未能解决你的问题,请参考以下文章
学生HTML个人网页作业作品 使用HTML+CSS+JavaScript个人介绍博客网站 web前端课程设计 web前端课程设计代码 web课程设计
HTML5期末大作业:餐饮美食网站设计——咖啡(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 咖啡网页设计 美食餐饮网页设计...(代码片段