正文
家谱样式css,家谱图是什么样子的
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
如何使用纯CSS3来生成家谱
/*Now the CSS*/
* {margin: 0; padding: 0;}
.tree ul {
padding-top: 20px; position: relative;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.tree li {
float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
/*We will use ::before and ::after to draw the connectors*/
.tree li::before, .tree li::after{
content: '';
position: absolute; top: 0; right: 50%;
border-top: 1px solid #ccc;
width: 50%; height: 20px;
}
.tree li::after{
right: auto; left: 50%;
border-left: 1px solid #ccc;
}
/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
display: none;
}
/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}
/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
border-right: 1px solid #ccc;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}
/*Time to add downward connectors from parents*/
.tree ul ul::before{
content: '';
position: absolute; top: 0; left: 50%;
border-left: 1px solid #ccc;
width: 0; height: 20px;
}
.tree li a{
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 11px;
display: inline-block;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before{
border-color: #94a0b4;
}
/*Thats all. I hope you enjoyed it.
相关问答
Q1: 家谱如何写才是正确？
各个家谱在书写格式上不完全相同，但概括的基本内容是一致的。新的宗谱在书写格式上应该与旧谱保持一致。修谱中存在最大的问题是在女子挂线上很不统一。认为女子挂线一般为三种情况：
一是无子有女户可挂一女子；
二是子女随母姓可以挂线；
三是未出嫁女可以挂线。另外明确为赘婿的应按祖制以赘婿挂线为宜，特别要强调的是如果女子挂线在书写格式上与男子挂线是相同的，区别在于所生子女一定要说清姓什么。
家谱（或称族谱）一种以表谱形式，记载一个以血缘关系为主体的家族世系繁衍和重要人物事迹的特殊图书体裁。家谱是中国特有的文化遗产，是中华民族的三大文献（国史，地志，族谱）之一，属珍贵的人文资料，对于历史学、民俗学、人口学、社会学。
扩展资料：
重要作用：
家谱记载一个家族的世系繁衍及重要人物事迹的书。皇帝的家谱称玉牒，如新朝玉牒、皇宋玉牒。它以记载父系家族世系、人物为中心，由正史中的帝王本纪及王侯列传、年表等演变而来。
家谱中国五千年文明史中具有平民特色的文献，记载的是同宗共祖血缘集团世系人物和事迹等方面情况的历史图籍。家谱属珍贵的人文资料，对于历史学、民俗学、人口学、社会学和经济学的深入研究，均有其不可替代的独特功能。
参考资料：家谱百度百科
Q2: 在电脑上怎么制作家谱？如何画世系图？
1、可以利用电脑中的Word文档完成家谱制作，首先打开word文档，点击工具栏中的“插入”选项并找到“smartart”图标。
2、然后在打开的“smartart”页面选择“组织结构图”，点击确定。
3、即可将标准的组织结构图插入页面中，点击文本处即可输入文字。
4、点击空白处或者原本的文本框，并选择添加项目的按钮，选择需要添加的项目的位置。
5、根据需要进行添加后即可生成一个家谱世系图的样式，在其中输入对应的姓名及内容即可。
