zoukankan      html  css  js  c++  java
  • csdn blog css自定义设置介绍

    可以在博客的配置页面的自定义css栏中填入css样式代码来自定也blog的风格

    csdn blog的页面架构基本是由div实现的,整个页面主要由三个div组成,它们的id分别是:
    csdnblog_header, csdnblog_sidebar, csdnblog_content。
    所以,定义它们的主体样式可以这样:

    #csdnblog_header
    {
    //头部的风格
    }
    #csdnblog_sidebar
    {
    //侧边栏的风格
    }
    #csdnblog_content
    {
    //主体内容的风格
    }

    这三个div又被两个div包裹起来了,它们的id分别是csdnblog_allwrap, csdnblog_midwrap
    这两个还可以定义整个页面的整体样式

    #csdnblog_allwrap
    {
    //你想要的风格
    }
    #csdnblog_midwrap
    {
    //你想要的风格
    }

    页面的头部由以下几部分组成
    1、h1,显示blog的用户自定义标题

    #csdnblog_header h1
    {
    //标题风格设置
    }

    2、h2,显示用户自定义的blog描述

    #csdnblog_header h2
    {
    //blog描述风格设置
    }

    3、ul, id为personalnav, 个人导航列表

    #csdnblog_header ul#personalnav
    {
    //blog个人导航栏风格设置
    }

    4、ul,id为blogsearchsty,搜索栏

    #csdnblog_header ul#blogsearchsty
    {
    //blog搜索框风格设置
    //如果不想显示,可以使用:
    //display:none
    }

    5、ul,id为menu,菜单栏

    #csdnblog_header ul#menu
    {
    //blog菜单风格设置
    //如果不想显示,可以使用:
    //display:none
    }

    自定义侧边栏的CSS
    侧边栏主div的id为csdnblog_sidebar,中间被一层class为gutter的div包裹,最里面一层div的的class为aboutauthor。里面剩下的就是一个个的dl了
    修改起风格可以这样:

    #csdnblog_sidebar div.gutter div.aboutauthor
    {
    }

    更进一步的话,可以:

    #csdnblog_sidebar div.gutter div.aboutauthor dl
    {
    }
    #csdnblog_sidebar div.gutter div.aboutauthor dl dt
    {
    }
    #csdnblog_sidebar div.gutter div.aboutauthor dl dd
    {
    }

    自定义文章的CSS
    每一篇文章都是一个div,其class为default_contents, 这个div包含两个子元素
    1、h6, class为pubtime, 用来显示文章发表的时间。
    修改其css的方法为

    .default_contents h6.pubtime
    {
    //你想要的样式
    }

    2、div,class为user_article,显示文章内容,又包括三部分
    2.1、 h1,class为title_txt,显示文章标题
    2.2、p, 显示文章内容
    2.3、p, class为articalinfo,显示文章信息
    想修改整篇文章区域的总体样式可以这样:

    .default_contents div.user_article
    {
    //你想要的样式
    }

    修改文章标题css样式的方法为

    .default_contents div.user_article h1.title_txt
    {
    //你想要的样式
    }

    其实,直接

    .title_txt
    {
    //你想要的样式
    }

    也可以修改

    修改文章信息的方法为

    .default_contents div.user_article p.articalinfo
    {
    //你想要的样式
    }

    其实,直接

    .articalinfo
    {
    //你想要的样式
    }

    转自 :http://www.ej38.com/showinfo/css-162013.html

  • 相关阅读:
    jQuery遍历节点方法汇总
    python_30期自动化【艺龙酒店】
    python_30期【条件判断语句】
    python_30期【os模块 path处理路径】
    python_30期自动化【类的封装】
    python_30期【函数里面的位置参数/默认参数】
    python_30期【while循环】
    python_30期【http_requsts】
    python_30期【类方法之间的调用 return】
    python_30期【实例函数 类里面的函数】
  • 原文地址:https://www.cnblogs.com/navigator/p/2917700.html
Copyright © 2011-2022 走看看