美化博客CSS（美化博客footer标签）

25-02-24 12

在本文中，我们将为您详细介绍美化博客CSS的相关知识，并且为您解答关于美化博客footer标签的疑问，此外，我们还会提供一些关于cnblog博客CSS定制、css+html扁平化博客、css中美化网页

在本文中，我们将为您详细介绍美化博客CSS的相关知识，并且为您解答关于美化博客footer标签的疑问，此外，我们还会提供一些关于cnblog博客CSS定制、css+html 扁平化博客、css中美化网页的元素有哪些？css中可以美化网页的元素总结、CSS压缩混淆 / 格式化 / 美化_html/css_WEB-ITnose的有用信息。

本文目录一览：

美化博客CSS（美化博客footer标签）
cnblog博客CSS定制
css+html 扁平化博客
css中美化网页的元素有哪些？css中可以美化网页的元素总结
CSS压缩混淆 / 格式化 / 美化_html/css_WEB-ITnose

美化博客CSS（美化博客footer标签）

title: 美化博客CSS
date: 2019/01/19 14:28:59
---

美化博客CSS

可以去这里看下好看的样式

修改下文档的css，博客园是在页面定制CSS代码，我这里修改了下标题，删除了下广告,这样就有横条的标题了

#ad_t2,#cnblogs_c1,#under_post_news,#cnblogs_c2,#under_post_kb {
    display: none;
}

h2,h3,h4 h2{/*增加标题属性的修改*/
  background: #159957;
  color:#ffffff;
  padding:  0.5em  1em;
  margin-bottom:2em;
}

typora也可以修改下这个标题，在C:\Users\xxx\AppData\Roaming\Typora\themes,其实也可以打开设置> 高级设置中定位到文件夹，修改css.我这里修改了默认的主题，添加了几行.

h1,h2,h4,h5,h6 {
/*add*/
 background: #159957;            
 color:#ffffff;
 padding:  0.5em  1em;
/*end*/    

    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
    line-height: 1.4;
    cursor: text;
}

cnblog博客CSS定制

一、页面定制CSS

  1 #home {
  2     margin: 0 auto;
  3     width: 80%;/*原始65*/
  4     min-width: 980px;/*页面顶部的宽度*/
  5     background-color: rgba(245, 245, 245, 0.7);
  6     padding: 30px;
  7     margin-top: 50px;
  8     margin-bottom: 50px;
  9     box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
 10 }
 11 body {
 12     background: rgba(12, 100, 129, 1) url(''http://images.cnblogs.com/cnblogs_com/Penn000/1013849/o_123.jpg'') fixed no-repeat;
 13     background-position: 50% 5%; 
 14     background-size: cover;
 15 }
 16 #blogTitle {
 17     height: 100px;  /*高度*/
 18     clear: both;
 19     background-color: rgba(245, 245, 245, 0);
 20 }
 21 #blogTitle h1 {
 22     font-size: 36px;
 23     font-weight: bold;
 24     line-height: 1.8em;/*原始 1.6em*/
 25     margin-top: 10px;/*原始 15px */
 26     color: #548B54;
 27 }
 28 #blogTitle h2 {
 29     font-weight: normal;
 30     font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/      
 31     line-height: 1.8;
 32     color: #111;
 33     font-weight: bold;
 34     text-align: right;
 35     float: right; 
 36 }
 37 #navigator{
 38     background-color: rgba(33, 160, 139, 0.9);
 39 }
 40 #navList a:link, #navList a:visited, #navList a:active{
 41     color: #eee;
 42     font-size: 18px;
 43     font-weight: bold;
 44 }
 45 .blogStats{
 46     color: #eee;
 47 }
 48 .postTitle {
 49     border-left: 8px solid rgba(33, 160, 139, 0.68);
 50     margin-left: 10px;
 51     margin-bottom: 10px;
 52     font-size: 20px;
 53     float: right;
 54     width: 100%;
 55     clear: both;
 56 }
 57 .postTitle a:link, .postTitle a:visited, .postTitle a:active {
 58     color: #21759b;
 59     transition: all 0.4s linear 0s;
 60 }
 61 .postTitle a:hover {
 62     margin-left: 30px;
 63     color: #0f3647;
 64     text-decoration: none;
 65 }
 66 .postCon {
 67     float: right;
 68     line-height: 1.5em;
 69     width: 100%;
 70     clear: both;
 71     padding: 10px 0;
 72 }
 73 
 74 .day .postTitle a {
 75     padding-left: 10px;
 76 }
 77 .day {
 78     background: rgba(255, 255, 255, 0.5);
 79 }
 80 /*文章附加信息*/
 81 .postDesc {   
 82     background: url(images/posted_time.png) no-repeat 0 1px;
 83     color: #757575;
 84     float: left;
 85     width: 100%;
 86     clear: both;
 87     text-align: left;     
 88     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
 89     font-size: 13px;
 90     padding-right: 20px;/*5px  padding-left: 90px;posted 发表时间左边距离*/
 91     margin-top: 20px;
 92     line-height: 1.8;
 93     padding-bottom: 35px;
 94 }
 95 
 96 .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, 
 97 .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, 
 98 .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
 99 {
100     background: rgba(255, 255, 255, 0.5);
101     margin-bottom: 35px;
102     word-wrap: break-word;
103 }
104 
105 .CalTitle{
106     background: rgba(255, 255, 255, 0);
107 }
108 .catListTitle{
109     background-color: rgba(33, 160, 139, 0.9);
110 }
111 
112 #topics{
113     background: rgba(255, 255, 255, 0.5);
114 }
115 
116 .c_ad_block{
117     display: none;
118 }
119 
120 #tbCommentBody{
121     width: 100%;
122     height: 200px;
123     background: rgba(255, 255, 255, 0.5);
124 }
125 
126 #q{background: rgba(255, 255, 255, 0);}
127 
128 .CalNextPrev{background: rgba(255, 255, 255, 0);}
129 
130 .cnblogs_code{
131     background: rgba(255, 255, 255, 0);    
132 }
133 
134 .cnblogs_code div{
135     background: rgba(255, 255, 255, 0);    
136 }
137 
138 .cnblogs_code_toolbar{
139     background: rgba(255, 255, 255, 0);  
140 }
141 
142 .entrylist{
143     background: rgba(255, 255, 255, 0.5);  
144 }
145 
146 #cnblogs_post_body h2 {
147 background: gray !important;
148 background: #406CA4 !important;
149 border-radius: 4px 4px 4px 4px !important;
150 box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
151 color: #FFFFFF;
152 font-family: "微软雅黑", "宋体", "黑体", Arial;
153 font-size: 17px;
154 font-weight: bold;
155 margin: 15px 0 !important;
156 padding: 5px 0 5px 20px;
157 }
158 
159 .postBody a:link, .postBody a:visited, .postBody a:active {
160     text-decoration: blink;
161     border-bottom: 1px dashed #406ca4;
162 }
163 .postBody li, .postCon li {
164     list-style-type: disc;
165     margin-bottom: 0.2em;
166 }
167 
168 /*生成博客目录的CSS*/
169 #uprightsideBar{
170     font-size:12px;
171     font-family:Arial, Helvetica, sans-serif;
172     text-align:left;
173     position:fixed;/*将div的位置固定到距离top:50px，right:0px的位置，这样div就会处在最右边的位置，距离顶部50px*/
174     top:50px;
175     right:0px;
176     width: auto;
177     height: auto; 
178 }
179 #sideBarTab{
180     float:left;
181     width:30px; 
182     border:1px solid #e5e5e5;
183     border-right:none;
184     text-align:center;
185     background:#ffffff;
186 }
187 
188 #sideBarContents{
189     float:left;
190     overflow:auto; 
191     overflow-x:hidden;!important;
192     width:240px;
193     min-height:108px;
194     max-height:660px;
195     border:1px solid #e5e5e5;
196     border-right:none; 
197     background:#ffffff;
198 }
199 #sideBarContents dl{
200     margin:0;
201     padding:0;
202 }
203 
204 #sideBarContents dt{
205     margin-top:8px;
206     margin-left:5px;
207 }
208 
209 #sideBarContents dd, dt {
210     cursor: pointer;
211 }
212 
213 #sideBarContents dd:hover, dt:hover {
214     color:#A7995A;
215 }
216 #sideBarContents dd{
217     margin-left:20px;
218 }

View Code

二、自动生成目录代码

需要申请JS权限

页首代码

  1 <script type="text/javascript">
  2 /*
  3     功能：生成博客目录的JS工具
  4     测试：IE8，火狐，google测试通过
  5     孤傲苍狼
  6     2014-5-11
  7 */
  8 var BlogDirectory = {
  9     /*
 10         获取元素位置，距浏览器左边界的距离（left）和距浏览器上边界的距离（top）
 11     */
 12     getElementPosition:function (ele) {        
 13         var topPosition = 0;
 14         var leftPosition = 0;
 15         while (ele){              
 16             topPosition += ele.offsetTop;
 17             leftPosition += ele.offsetLeft;        
 18             ele = ele.offsetParent;     
 19         }  
 20         return {top:topPosition, left:leftPosition}; 
 21     },
 22 
 23     /*
 24     获取滚动条当前位置
 25     */
 26     getScrollBarPosition:function () {
 27         var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;
 28         return  scrollBarPosition;
 29     },
 30     
 31     /*
 32     移动滚动条，finalPos 为目的位置，internal 为移动速度
 33     */
 34     moveScrollBar:function(finalpos, interval) {
 35 
 36         //若不支持此方法，则退出
 37         if(!window.scrollTo) {
 38             return false;
 39         }
 40 
 41         //窗体滚动时，禁用鼠标滚轮
 42         window.onmousewheel = function(){
 43             return false;
 44         };
 45           
 46         //清除计时
 47         if (document.body.movement) { 
 48             clearTimeout(document.body.movement); 
 49         } 
 50 
 51         var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置
 52 
 53         var dist = 0; 
 54         if (currentpos == finalpos) {//到达预定位置，则解禁鼠标滚轮，并退出
 55             window.onmousewheel = function(){
 56                 return true;
 57             }
 58             return true; 
 59         } 
 60         if (currentpos < finalpos) {//未到达，则计算下一步所要移动的距离
 61             dist = Math.ceil((finalpos - currentpos)/10); 
 62             currentpos += dist; 
 63         } 
 64         if (currentpos > finalpos) { 
 65             dist = Math.ceil((currentpos - finalpos)/10); 
 66             currentpos -= dist; 
 67         }
 68         
 69         var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置
 70         window.scrollTo(0, currentpos);//移动窗口
 71         if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部，则解禁鼠标滚轮，并退出
 72         {
 73             window.onmousewheel = function(){
 74                 return true;
 75             }
 76             return true;
 77         }
 78         
 79         //进行下一步移动
 80         var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")"; 
 81         document.body.movement = setTimeout(repeat, interval); 
 82     },
 83     
 84     htmlDecode:function (text){
 85         var temp = document.createElement("div");
 86         temp.innerHTML = text;
 87         var output = temp.innerText || temp.textContent;
 88         temp = null;
 89         return output;
 90     },
 91 
 92     /*
 93     创建博客目录，
 94     id表示包含博文正文的 div 容器的 id，
 95     mt 和 st 分别表示主标题和次级标题的标签名称（如 H2、H3，大写或小写都可以！），
 96     interval 表示移动的速度
 97     */
 98     createBlogDirectory:function (id, mt, st, interval){
 99          //获取博文正文div容器
100         var elem = document.getElementById(id);
101         if(!elem) return false;
102         //获取div中所有元素结点
103         var nodes = elem.getElementsByTagName("*");
104         //创建博客目录的div容器
105         var divSideBar = document.createElement(''DIV'');
106         divSideBar.className = ''uprightsideBar'';
107         divSideBar.setAttribute(''id'', ''uprightsideBar'');
108         var divSideBarTab = document.createElement(''DIV'');
109         divSideBarTab.setAttribute(''id'', ''sideBarTab'');
110         divSideBar.appendChild(divSideBarTab);
111         var h2 = document.createElement(''H2'');
112         divSideBarTab.appendChild(h2);
113         var txt = document.createTextNode(''目录导航'');
114         h2.appendChild(txt);
115         var divSideBarContents = document.createElement(''DIV'');
116         divSideBarContents.style.display = ''none'';
117         divSideBarContents.setAttribute(''id'', ''sideBarContents'');
118         divSideBar.appendChild(divSideBarContents);
119         //创建自定义列表
120         var dlist = document.createElement("dl");
121         divSideBarContents.appendChild(dlist);
122         var num = 0;//统计找到的mt和st
123         mt = mt.toUpperCase();//转化成大写
124         st = st.toUpperCase();//转化成大写
125         //遍历所有元素结点
126         for(var i=0; i<nodes.length; i++)
127         {
128             if(nodes[i].nodeName == mt|| nodes[i].nodeName == st)    
129             {
130                 //获取标题文本
131                 var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");//innerHTML里面的内容可能有HTML标签，所以用正则表达式去除HTML的标签
132                 nodetext = nodetext.replace(/ /ig, "");//替换掉所有的 
133                 nodetext = BlogDirectory.htmlDecode(nodetext);
134                 //插入锚        
135                 nodes[i].setAttribute("id", "blogTitle" + num);
136                 var item;
137                 switch(nodes[i].nodeName)
138                 {
139                     case mt:    //若为主标题 
140                         item = document.createElement("dt");
141                         break;
142                     case st:    //若为子标题
143                         item = document.createElement("dd");
144                         break;
145                 }
146                 
147                 //创建锚链接
148                 var itemtext = document.createTextNode(nodetext);
149                 item.appendChild(itemtext);
150                 item.setAttribute("name", num);
151                 item.onclick = function(){        //添加鼠标点击触发函数
152                     var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));
153                     if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false;
154                 };            
155                 
156                 //将自定义表项加入自定义列表中
157                 dlist.appendChild(item);
158                 num++;
159             }
160         }
161         
162         if(num == 0) return false; 
163         /*鼠标进入时的事件处理*/
164         divSideBarTab.onmouseenter = function(){
165             divSideBarContents.style.display = ''block'';
166         }
167         /*鼠标离开时的事件处理*/
168         divSideBar.onmouseleave = function() {
169             divSideBarContents.style.display = ''none'';
170         }
171 
172         document.body.appendChild(divSideBar);
173     }
174     
175 };
176 
177 window.onload=function(){
178     /*页面加载完成之后生成博客目录*/
179     BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",20);
180 }
181 </script>

View Code

页脚代码

 1 <script language="javascript" type="text/javascript">
 2 
 3 // 生成目录索引列表
 4 // ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
 5 // modified by: zzq
 6 function GenerateContentList()
 7 {
 8     var mainContent = $(''#cnblogs_post_body'');
 9     var h2_list = $(''#cnblogs_post_body h2'');//如果你的章节标题不是h2,只需要将这里的h2换掉即可
10 
11     if(mainContent.length < 1)
12         return;
13  
14     if(h2_list.length>0)
15     {
16         var content = ''<a name="_labelTop"></a>'';
17         content += ''<div id="navCategory">'';
18         content += ''<p><b>目录</b></p>'';
19         content += ''<ul>'';
20         for(var i=0; i<h2_list.length; i++)
21         {
22             var go_to_top = ''<div><a href="#_labelTop">回到顶部</a><a name="_label'' + i + ''"></a></div>'';
23             $(h2_list[i]).before(go_to_top);
24             
25             var h3_list = $(h2_list[i]).nextAll("h3");
26             var li3_content = '''';
27             for(var j=0; j<h3_list.length; j++)
28             {
29                 var tmp = $(h3_list[j]).prevAll(''h2'').first();
30                 if(!tmp.is(h2_list[i]))
31                     break;
32                 var li3_anchor = ''<a name="_label'' + i + ''_'' + j + ''"></a>'';
33                 $(h3_list[j]).before(li3_anchor);
34                 li3_content += ''<li><a href="#_label'' + i + ''_'' + j + ''">'' + $(h3_list[j]).text() + ''</a></li>'';
35             }
36             
37             var li2_content = '''';
38             if(li3_content.length > 0)
39                 li2_content = ''<li><a href="#_label'' + i + ''">'' + $(h2_list[i]).text() + ''</a><ul>'' + li3_content + ''</ul></li>'';
40             else
41                 li2_content = ''<li><a href="#_label'' + i + ''">'' + $(h2_list[i]).text() + ''</a></li>'';
42             content += li2_content;
43         }
44         content += ''</ul>'';
45         content += ''</div><p>&nbsp;</p>'';
46         content += ''<p><b>正文</b></p>'';
47         if($(''#cnblogs_post_body'').length != 0 )
48         {
49             $($(''#cnblogs_post_body'')[0]).prepend(content);
50         }
51     }   
52 
53     var qqinfo =  ''<p>浏览器右上角查看导航按钮>>>></p>'';
54     $(mainContent[0]).prepend(qqinfo);
55 }
56 
57 GenerateContentList();
58 </script>

View Code

css+html 扁平化博客

效果图

图片描述

代码

html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="reset.css" rel="stylesheet">
  <link href="index.css" rel="stylesheet">
  <link href="bootstrap.css" rel="stylesheet">
  <link href="Font-Awesome-master/css/font-awesome.min.css" rel="stylesheet">

  <title>Document</title>
</head>

<body>
  <div>
    <div>
      <!--页头-->
      <nav>
        <div><a href="">Sea的小窝</a></div>
        <ul>
          <li><a href="">首页</a></li>
          <li><a href="">哈哈</a></li>
          <li><a href="">呵呵</a></li>
          <li><a href="">呼呼</a></li>
        </ul>
      </nav>
      <div>
        <div>
          <h1>Sea的小窝</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          <button>了解我</button>
          <div>
            更多</br>
            <i></i>
            </-->
          </div>
        </div>
      </div>
    </div>
    <div>
      <section>
        <div>
          <h2>Do it yourself</h2>
          <div></div>
          <p>Lorem ipsum dolor sit amet, co et dolore ex ea commolla parm.</p>
          <div>
            <span><i></i></span>
            <span><i></i></span>
            <span><i></i></span>
          </div>
        </div>
      </section>
      <section>
        <div>
          <div><img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-535632.jpg"></div>
          <div>
            <h2>Stars Stars Stars !</h2>
            <div>去漠河看星星吧</div>
            <p>Lorem ipsum dolor sit amet, consectetur adiliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea colit esse cillum dolore eu fugirunt mollit anim id est laborum.</p>
          </div>
        </div>

        <div>
          <div>
            <h2>I love 狗子</h2>
            <div>将来要养狗子 带它疯跑</div>
            <p>Lorem ipsum dolor sit amet, consectetur adiliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea colit esse cillum dolore eu fugirunt mollit anim id est laborum.</p>
          </div>
          <div><img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-590314.jpg"></div>
        </div>

        <div>
          <div><img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-597311.jpg"></div>
          <div>
            <h2>I love 肥猫</h2>
            <div>希望我的猫咪稍微安静一会</div>
            <p>Lorem ipsum dolor sit amet, consectetur adiliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea colit esse cillum dolore eu fugirunt mollit anim id est laborum.</p>
          </div>
        </div>
      </section>
      <section>
        <div>
          <div>
            <h2>welcome</h2>
            <div></div>
            <p>Lorem ipsum ut labore et lore magna aliqua. Ut laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolor deserunt mollit anim id est laborum.</p>
          </div>
          <div>
            <div>
              <h2>大吉</h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labori s nisi ut aliquip ex ea commodo consequat. Duis
              aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur si </div>
            <div>
              <h2>大利</h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labori s nisi ut aliquip ex ea commodo consequat. Duis
              aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur si </div>
            <div>
              <h2>今晚</h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labori s nisi ut aliquip ex ea commodo consequat. Duis
              aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur si </div>
            <div>
              <h2>吃鸡</h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labori s nisi ut aliquip ex ea commodo consequat. Duis
              aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur si </div>
          </div>
        </div>
      </section>
    </div>

    <div>
      <ul>
        <li><i></i></li>
        <li><i></i></li>
        <li><i></i></li>
        <li><i></i></li>
      </ul>
      <div><i></i>不扶老太太就服你 - 2017</div>
    </div>
  </div>
</body>

</html>

css

* {
  color: #fff;
  font-size: 14px;
}

p {
  font-size: 18px;
  letter-spacing: 1px;
}

.main-wraper {
  background: url("https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-595281.jpg");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

/*header部分*/

.header {
  background: rgba(0, 0, 0, 0.2); //添加不透明度，使背景暗一些
}

nav, .banner {
  background: transparent;
}

nav {
  height: 50px;
  line-height: 50px;
  /*height=line-height文字垂直居中*/
  background: inherit;
}

nav .logo {
  float: left;
  margin-left: 20px;
}

nav .logo a {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
}

nav ul {
  float: right;
}

nav ul li {
  display: inline-block;
  margin-right: 20px;
}

nav .logo a, nav ul li a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  /* 如果不设置inline-block,a元素的height无法设置*/
  height: 40px;
  /* 设置此属性是为了链接可点击的地方不局限于文字*/
  line-height: 40px;
  /* 在高度为40px垂直居中*/
}

nav .logo a:hover, nav ul li a:hover {
  color: #fff;
  border-bottom: 2px solid #fff;
  text-decoration: none;
}

.banner {
  height: 700px;
}

.banner .wraper {
  max-width: 280px;
  /*max-width,容器*/
  text-align: center;
  position: relative;
  top: 200px;
  margin: 0 auto;
}

.banner h1 {
  padding: 15px;
  margin-bottom: 20px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.sub-header {
  font-size: 18px;
  margin: 20px 0;
  letter-spacing: 1px;
}

.banner .sub-header {
  font-size: 16px;
  line-height: 30px;
  padding: 10px 0;
}

.banner button {
  border: none;
  /*删除默认border边框*/
  background: #1b89d2;
  border-radius: 6px;
  padding: 14px 40px;
}

.banner .more {
  margin-top: 200px;
}

/*header部分结束*/

/*green部分*/

.green-section {
  height: 450px;
  /*高度可以不设置 由子内容撑开高度*/
  background: #2e998f;
  padding: 100px 0;
}

.green-section .wraper {
  max-width: 1080px;
  /*max-width，容器*/
  margin: 0 auto;
  text-align: center;
}

.hr {
  background: #358460f0;
  height: 1px;
  width: 60%;
  margin: 10px auto;
}

.green-section .icon-group .icon {
  width: 60px;
  height: 60px;
  display: inline-block;
  transform: rotate(45deg);
  border: 2px solid #05867a;
  margin: 20px;
  padding: 15px;
}

.green-section .icon-group .icon i {
  transform: rotate(-45deg);
}

/*green部分结束   gray部分开始*/

.gray-section {
  background: #252f34;
}

.pre-view>div {
  /*pre-view下第一层子元素左浮动*/
  float: left;
  font-size: 0;
  /*设置为0 是为了解决出现空隙问题*/
}

.pre-view:after {
  /*清除浮动*/
  clear: both;
  content: '''';
  display: block;
}

.text-section {
  width: 70%;
  /*text+img section宽度=100%=gray-section*/
  padding-left: 40px;
  padding-top: 30px;
  box-sizing: border-box;
}

.text-section>* {
  max-width: 90%;
  /*防止文字溢出*/
}

.img-section {
  width: 30%;
}

.img-section img {
  width: 100%;
  /*可以让图片自适应宽度*/
}

.pre-view:nth-child(odd) {
  background-color: rgba(0, 255, 255, 0.01);
}

/*gary section结束， purple section 开始*/

.purple-section {
  padding: 80px;
  background: #3f3965;
}

.purple-section .wraper {
  width: 60%;
  text-align: center;
  margin: 0 auto;
}

.wraper .head-wraper .hr {
  background: #fff;
}

.head-wraper p {
  margin: 20px 0;
}

.purple-section .card-group .card {
  width: 50%;
  float: left;
  padding: 50px;
  box-sizing: border-box;
}

.card-group .card h2 {
  font-size: 20px;
}

.clear:after {
  content: '''';
  display: block;
  clear: both;
}

.card:first-child {
  background-color: rgba(0, 0, 0, 0.04);
}

.card:nth-child(2) {
  background-color: rgba(0, 0, 0, 0.08);
}

.card:nth-child(3) {
  background-color: rgba(0, 0, 0, 0.12);
}

.card:nth-child(4) {
  background-color: rgba(0, 0, 0, 0.16);
}

/*purple section结束， footer开始*/

.footer {
  background: #333;
  min-height: 200px;
  text-align: center;
}

.footer .icon-group {
  display: block;
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px;
}

.footer .icon-group li {
  display: inline-block;
  padding: 10px;
}

css中美化网页的元素有哪些？css中可以美化网页的元素总结

本篇文章给大家带来的内容是关于css中美化网页的元素有哪些？css中可以美化网页的元素总结，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

1.本章目标

会使用CSS设置字体样式和文本样式

会使用CSS设置超链接样式

会使用CSS设置列表样式

会使用CSS设置背景样式

会使用CSS设置渐变效果

2.标签

标签的作用

能让某几个文字或者某个词语凸显出来

示例：

<p>享受<span>“北大式”</span>教育服务</p>
<p>在php中文网，有一群人默默支持你成就
      <span id="dream">梦想</span></p>
<p>选择<span>php中文网</span>，成就你的梦想</p>

登录后复制

3.字体样式

4.字体类型

font-family属性

p{font-family:Verdana,"楷体";}
body{font-family: Times,"Times New Roman", "楷体";}

登录后复制

5.字体大小

font-size属性

单位： px（像素）、em、rem、cm、mm、pt、pc

6.字体风格

font-style属性

normal、italic(库里自带的)和oblique(自动将字体变斜体)

示例：

7.字体的粗细

font-weight属性

8.字体属性

font属性 family weight size style

字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

p span {font:oblique bold 12px "楷体";}

9.文本样式

文本属性

10.文本颜色

color属性

RGB

十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量

rgb(r,g,b) : 正整数的取值为0～255

RGBA

在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1

示例：

color:#A983D8;
color:#EEFF66;
color:rgb(0,255,255);--------------最深的颜色
color:rgba(0,0,255,0.5);-----------透明度

登录后复制

11.排版文本段落

12.文本修饰和垂直对齐

文本装饰

text-decoration属性

垂直对齐方式

vertical-align属性：middle、top、bottom

13.文本阴影

浏览器兼容性

14.超链接伪类

15.使用CSS设置超链接

立即学习“前端免费学习笔记（深入）”；

16.列表样式2-1

list-style-type

list-style-image

17.列表样式2-2

   list-style:
li {
list-style:none;
}

登录后复制

1、网页背景

R红--G绿--B蓝

背景颜色

background-color

背景图像

background-image

19.设置背景图像2-1

背景图像

background-image属性

background-image:url(图片路径);

背景重复方式

background-repeat属性

repeat：沿水平和垂直两个方向平铺

no-repeat：不平铺，即只显示一次

repeat-x：只沿水平方向平铺

repeat-y：只沿垂直方向平铺

20.设置背景图像2-2

背景定位

background-position属性

21.设置背景

背景属性

background属性

23.背景尺寸

背景尺寸 background-size

24.CSS3渐变

线性渐变

颜色沿着一条直线过渡：从左到右、从右到左、从上到下等

径向渐变

圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

浏览器兼容性

25.CSS3渐变兼容

IE浏览器是Trident内核，加前缀：-ms-

Chrome浏览器是Webkit内核，加前缀：-webkit-

Safari浏览器是Webkit内核，加前缀：-webkit-

Opera浏览器是Blink内核，加前缀：-o-

Firefox浏览器是Mozilla内核，加前缀：-moz-

26.线性渐变

左上向右下方向渐变：linear-gradient( left top ,red, blue)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6 to 15 */
    background: linear-gradient(red,yellow,blue); /* 标准语法 (必须在最后) */
}
</style>
</head>
 
<body>
<h3>线性渐变 - 头部到底部</h3>
<p>从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色:</p>
 
<div id="grad1"></div>
 
<p><strong>注意：</strong> Internet Explorer 9 及更早版本 IE 浏览器不支持渐变。</p>
</body>
</html>

登录后复制

总结