啃豆小书院

 找回密码
 立即注册
搜索
热搜: mobi kindle azw3
查看: 92|回复: 0

一个比较规范的电子书CSS代码,这样做出来版式基本不会差

[复制链接]

946

主题

1025

帖子

6337

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6337
QQ
发表于 2018-12-10 15:05:35 | 显示全部楼层 |阅读模式
  1. /*---------标题------------*/
  2. /*文前版权信息*/
  3. h1.front1{
  4. color:#F3BD3D;
  5. font-size:1.3em;
  6. text-align: left;
  7. text-indent:1em;
  8. font-weight:bold;
  9. margin-top:1.5em;
  10. margin-bottom:1.5em;
  11. }
  12. /*文前标题*/
  13. h1.front{
  14. color:#a23234;
  15. 
 font-size:1.62rem;
  16. text-align:center;
  17. text-indent:0em;
  18. font-weight:bold;
  19. margin:1.5em auto 2.5em auto;
  20. padding-bottom:0.5em;
  21. margin-top:1.5em;
  22. margin-bottom:1.5em;
  23. }
  24. /*一级标题*/
  25. h1.zw-text1{
  26. text-align:center;
  27. color:#ffffff;
  28. font-size:1.5em;
  29. text-align: center;
  30. margin:1em auto 1.5em auto;
  31. background-color: #a23234;
  32. border:1px solid #a23234;
  33. font-weight:bold;
  34. }
  35. h1{
  36. text-align:center;
  37. font-size:1.3em;
  38. }
  39. /*二级标题*/
  40. h2{
  41. text-align: left;
  42. color: #a23234;
  43. font-size: 1.2em;
  44. margin-top: 1em;
  45. margin-bottom: 2em;
  46. border-left: 5px solid #a23234;
  47. border-bottom: 1px solid #a23234;
  48. padding-left:0.5em;
  49. padding-bottom:0.2em;
  50. }
  51. /*三级标题*/
  52. h3{
  53. text-align:center;
  54. color: #a23234;
  55. font-weight:bold;
  56. font-size:1em;
  57. margin-top:1.5em;
  58. margin-bottom:1em;
  59. }
  60. /*四级标题*/
  61. h4{
  62. text-align:left;
  63. font-weight:bold;
  64. font-size:1rem;
  65. margin-top:1.5em;
  66. margin-bottom:1em;
  67. }
  68. /*五级标题*/
  69. h5{
  70. text-align:left;
  71. font-weight:bold;
  72. font-size:0.88rem;
  73. margin-top:0.8em;
  74. margin-bottom:0.5em;
  75. }
  76. /*文后标题*/
  77. h1.back{
  78. color:#a23234;
  79. 
 font-size:1.75rem;
  80. text-align:center;
  81. text-indent:0em;
  82. margin:1.5em auto 2.5em auto;
  83. padding-bottom:0.5em;
  84. margin-left:auto;
  85. margin-right:auto;
  86. font-weight:bold;
  87. }

  88. /*---------图片------------*/
  89. /*居中插图*/
  90. div.body-imagediv-alone{
  91. margin:0.2em auto 1.2em auto;
  92. text-align:center;
  93. width:80%;
  94. text-indent:0em;
  95. }
  96. img.body-image-alone{
  97. font-size:1rem;
  98. width:80%;
  99. margin-bottom:0.2em;
  100. }
  101. /*图说*/
  102. .img{
  103. font-size:0.85em;
  104. text-align:center;
  105. text-indent:0em;
  106. margin-top:0.5em;
  107. margin-bottom:2em;
  108. }
  109. /*图片居右文字环绕*/
  110. div.image-right {
  111. float: right;
  112. font-size: 1rem;
  113. margin: 0em 0em 0.2em 1em;
  114. width: 40%;
  115. }
  116. /*图片居左文字环绕*/
  117. div.image-left{
  118. float: left;
  119. font-size: 1rem;
  120. margin: 2em 1em 1em 0em;
  121. width: 50%;
  122. }
  123. /*段内补字*/
  124. .inline{
  125. height:1.0em;
  126. margin-bottom:-0.1em;
  127. }
  128. /*段内其他*/
  129. .inline1{
  130. height:2.0em;
  131. margin-bottom:-0.1em;
  132. }
  133. /*---------段落字号颜色变化------------*/
  134. /*局部引文颜色*/
  135. .part-textc{
  136. color:#F89363;
  137. 
}
  138. /*局部引文字号*/
  139. .part-textf{
  140. font-size:0.75em;
  141. 
}
  142. /*首字突出*/
  143. span.dyfirstLetter{
  144. float:left;
  145. font-size:280%;
  146. font-weight:bold;
  147. color:#008B8B;
  148. text-transform:uppercase;
  149. line-height:1em;
  150. }
  151. /*---------段落样式变化------------*/
  152. /*段落居中*/
  153. .center{
  154. text-align:center;
  155. text-indent:0em;
  156. margin-left:0%;
  157. margin-right:0%;
  158. }
  159. /*段落居左*/
  160. .left{
  161. text-indent:0em;
  162. margin-left:0%;
  163. margin-right:0%;
  164. }
  165. /*段落居右*/
  166. .right{
  167. text-align:right;
  168. margin-left:0%;
  169. margin-right:0%;
  170. }
  171. /*引文左侧加|*/
  172. .block{
  173. margin-left: 2em;
  174.     margin-right: 2em;
  175.     margin-top: 2em;
  176.     margin-bottom: 2em;
  177.     line-height: 150%;
  178.     border-left: 2px solid;
  179.     font-size: 0.9em;
  180.     padding-left: 0.5em;
  181.     text-align: justify;
  182. }
  183. /*引文0.9号字*/
  184. .block4
  185. {
  186. margin-left: 2em;
  187.     margin-right: 2em;
  188.     margin-top: 2em;
  189.     margin-bottom: 2em;
  190.     line-height: 150%;
  191.     font-size: 0.9em;
  192.     padding-left: 0.5em;
  193.     text-align: justify;
  194.     font-family:Kaiti;
  195. }
  196. /*引文居右*/
  197. .block1
  198. {
  199. font-size:0.9em;
  200. text-align:right;
  201. margin-right:0%;
  202. margin-left:0%;
  203.     font-family:Kaiti;
  204. }
  205. /*引文居中*/
  206. .block2
  207. {
  208. font-size:0.9em;
  209. text-indent:0em;
  210. text-align:center;
  211. margin-left:0%;
  212. margin-right:0%;
  213.     font-family:Kaiti;
  214. }
  215. /*引文居左*/
  216. .block3
  217. {
  218. font-size:0.9em;
  219. text-align:left;
  220. text-indent:0em;
  221. margin-left:0%;
  222. margin-right:0%;
  223.     font-family:KaiTi;
  224. }
  225. /*---------注解样式------------*/
  226. /*注解*/
  227. .note{
  228. font-size:0.75em;
  229. }
  230. /*y注解图片*/
  231. img.yiwen-footnote{
  232. width:0.7em;
  233. }
  234. /*---------装饰样式变化------------*/
  235. /*◇渐变*/
  236. .bg1{
  237. font-size:1em;
  238. color:#a23234;
  239. margin-top:20%;
  240. margin-bottom:5%;
  241. text-align:center;
  242. text-indent:0em;
  243. }
  244. .bg2{
  245. color:#b55456;
  246. }
  247. .bg3{
  248. color:#c37d7e;
  249. }
  250. .bg4{
  251. color:#d19e9f;
  252. }
  253. /*边框*/
  254. .fieldset{
  255.     border: 1px dotted black;
  256.     border-radius: 5px;
  257. font-size:0.9em;/*16px;*/
  258. margin-top:1em;
  259. margin-bottom:1em;
  260. padding: 1em 0.5em 1em 1em;
  261. }
  262. /*背景*/
  263. .beijing{
  264. color:#FFFFFF;
  265. 
 font-size:1.2em;
  266. margin:1.5em 0em 1em 0em;
  267. background-color:#FF0033;
  268. border:1px solid #BDB20A;
  269. border-radius:0.5em 0.5em 0.5em 0.5em;
  270. font-weight:bold;
  271. padding: 1em 0.5em 1em 1em;
  272. }
  273. /*下划线*/
  274. .u{
  275. text-decoration:underline;
  276. }
  277. /*---------版权信息------------*/
  278. /*列表*/
  279. ul.list{
  280. font-size: 1em;
  281. list-style-type: none;
  282. text-indent: 2em;
  283. margin-left:1.5em;
  284. }
  285. /*列项*/
  286. li.i{
  287. margin-top:0.5em;
  288. font-weight:normal;
  289. }
  290. /*链接*/
  291. a{
  292. text-decoration: none;
  293.     color:#000000;
  294. }
  295. /*斜体 用于英文书名*/
  296. i{
  297.     font-family:Georgia, serif;
  298. }
  299. /*---------公共配置------------*/
  300. p{
  301. margin-top:0px;
  302. margin-bottom:0px;
  303. text-indent:2em;
  304. line-height:200%;
  305.     text-align: justify;
  306.     }
  307. .cover{

  308.     height: 700;
  309. padding:50px;
  310. }

  311. .yuliu{
  312. }
  313. body{
  314.     margin-top:100px;
  315. margin-left:60px;
  316.     margin-right:60px;
  317.     font-family:Microsoft YaHei;
  318.    
  319. }
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|小黑屋|啃豆小书院

GMT+8, 2019-11-20 01:53 , Processed in 1.049402 second(s), 22 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表