NoteOnMe博客平台搭建
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

499 lines
9.3 KiB

3 years ago
  1. a,
  2. a:hover,
  3. a:focus {
  4. text-decoration: none;
  5. }
  6. a:focus {
  7. outline: none;
  8. }
  9. body{
  10. margin:0;
  11. padding:0;
  12. background-image:url(../images/back.jpg);
  13. background-repeat:no-repeat;
  14. background-size:100% 100%;
  15. font-family: 'Open Sans', sans-serif;
  16. font-size: 16px;
  17. font-weight:300;
  18. min-height:70em;
  19. }
  20. .mytitle{
  21. text-decoration:none;
  22. color:#fff;
  23. font-size: 20px;
  24. font-weight: 300;
  25. }
  26. .row {
  27. margin-right: 0px;
  28. margin-left: 0px;
  29. }
  30. p {
  31. margin: 0 0 20px;
  32. }
  33. .tm-image {
  34. width: 100%;
  35. height: 100%;
  36. }
  37. .fixed-header{
  38. width:100%;
  39. float:left;
  40. /*background-color:#023D69;*/
  41. position:fixed;
  42. top:0;
  43. z-index:111;
  44. transition:all 0.4s;
  45. -webkit-transition:all 0.4s;
  46. padding: 5px 0px;
  47. padding-top:30px;
  48. }
  49. .navbar-toggle {
  50. position: absolute;
  51. top: 8px;
  52. right: 17px;
  53. margin: 0;
  54. z-index: 99999999;
  55. color: #fff;
  56. padding: 10px 10px;
  57. background-color: #006699;
  58. border: none;
  59. font-weight: bold;
  60. display:none;
  61. }
  62. .navbar-brand {
  63. color: #fff;
  64. font-weight:300;
  65. font-size: 38px;
  66. }
  67. .navbar-brand:hover,
  68. .navbar-brand:focus {
  69. color: #93FAFF;
  70. }
  71. .fixed-header ul{
  72. padding:0;
  73. float:right;
  74. margin:0;
  75. }
  76. .fixed-header ul li{
  77. display:inline-block;
  78. padding: 15px 0px;
  79. }
  80. .fixed-header ul li a{
  81. text-decoration:none;
  82. color:#fff;
  83. font-size: 20px;
  84. font-weight: 300;
  85. padding: 10px 30px 0;
  86. }
  87. .fixed-header ul li a:hover,
  88. .fixed-header ul li .current{
  89. color: #93FAFF;
  90. border-top:2px solid #93FAFF;
  91. }
  92. .fixed-header {
  93. background: transparent;
  94. }
  95. .fixed-header.scroll {
  96. background: rgba(2, 61, 105, 0.80);
  97. padding: 0;
  98. }
  99. .fixed-header.scroll .navbar-brand {
  100. font-size: 30px;
  101. }
  102. #home {
  103. padding-top: 8em;
  104. }
  105. .top{
  106. padding-top:9em;
  107. }
  108. .content {
  109. padding-right: 0px;
  110. padding-left: 0px;
  111. }
  112. .content-item {
  113. padding-right: 0px;
  114. padding-left: 0px;
  115. min-height:570px !important;
  116. }
  117. .content-item p:last-child {
  118. margin-bottom: 0;
  119. }
  120. .background.content-item-1 {
  121. padding: 60px 65px;
  122. }
  123. .background.content-item-2 {
  124. padding: 0px 0px;
  125. }
  126. .last {
  127. padding-right: 0px;
  128. padding-left: 0px;
  129. min-height:284px !important;
  130. }
  131. .background {
  132. background-color: #fff;
  133. padding: 55px 45px;
  134. }
  135. .about-text-container {
  136. font-style: italic;
  137. display: -webkit-flex;
  138. display: -ms-flexbox;
  139. display: flex;
  140. -webkit-flex-direction: column;
  141. -ms-flex-direction: column;
  142. flex-direction: column;
  143. -webkit-justify-content: center;
  144. -ms-flex-pack: center;
  145. justify-content: center;
  146. }
  147. .about-text {
  148. margin-bottom: 0;
  149. line-height: 1.6;
  150. }
  151. .main-title {
  152. font-weight: 300;
  153. font-size: 34px;
  154. line-height: 1.4;
  155. margin-top: 70px;
  156. margin-bottom: 5px;
  157. }
  158. .section-title {
  159. font-size: 1.5em;
  160. margin-top: 0;
  161. margin-bottom: 25px;
  162. }
  163. .dark-blue-text {
  164. color: #006699;
  165. }
  166. .light-blue-text {
  167. color: #2FACFF;
  168. }
  169. .dark-blue-bordered-btn:hover,
  170. .dark-blue-bordered-btn:focus,
  171. .dark-blue-btn {
  172. background: #006699;
  173. color: white;
  174. }
  175. .dark-blue-btn:hover,
  176. .dark-blue-btn:focus,
  177. .dark-blue-bordered-btn {
  178. background: none;
  179. border: 1px solid #006699;
  180. color: #006699;
  181. }
  182. .section-text {
  183. line-height: 1.6;
  184. font-size: 1em;
  185. margin-bottom: 15px;
  186. }
  187. .background ul {
  188. margin-bottom:20px;
  189. }
  190. .background li {
  191. list-style: none;
  192. font-size: 16px;
  193. line-height: 27px;
  194. }
  195. .btn {
  196. border-radius:0px;
  197. padding: 10px 25px;
  198. margin-top: 20px;
  199. font-size: 20px;
  200. font-weight: 300;
  201. margin-right: 15px;
  202. transition:all 0.3s;
  203. -webkit-transition:all 0.3s;
  204. }
  205. .btn:last-child {
  206. margin-right: 0;
  207. }
  208. .dark-blue-btn2:hover,
  209. .dark-blue-btn2:focus,
  210. .dark-blue-btn3 {
  211. background: none;
  212. border: 1px solid #fff;
  213. color: #fff;
  214. }
  215. .btn2 {
  216. background:#006699;
  217. color: #fff;
  218. border-style: none;
  219. padding: 10px 25px;
  220. font-size: 20px;
  221. font-weight: 300;
  222. margin-right: 15px;
  223. transition:all 0.3s;
  224. -webkit-transition:all 0.3s;
  225. white-space: nowrap;
  226. }
  227. .btn-big {
  228. padding: 10px 40px;
  229. min-width: 176px;
  230. }
  231. .btn-contact {
  232. font-size: 17px;
  233. padding: 10px 35px;
  234. color: #807D7D;
  235. font-weight: 300;
  236. margin-top: 0;
  237. transition: all 0.3s ease;
  238. }
  239. .btn-contact:hover,
  240. .btn-contact:focus {
  241. color: white;
  242. background-color: rgba(47,47,47,0.5);
  243. }
  244. .no-bg {
  245. background: none;
  246. border: 1px solid #aaa;
  247. }
  248. .yellow-btn {
  249. background:#ACA633;
  250. border:1px solid #ACA633;
  251. color:#fff;
  252. }
  253. .yellow-btn:hover,
  254. .yellow-btn:focus {
  255. background: none;
  256. color: #ACA633;
  257. }
  258. .green-btn {
  259. background:#168887;
  260. border:1px solid #168887;
  261. color:#fff;
  262. }
  263. .green-btn:hover,
  264. .green-btn:focus {
  265. background: none;
  266. color: #168887;
  267. }
  268. .normal-btn {
  269. font-size: 16px;
  270. font-weight: 300;
  271. min-width: 145px;
  272. }
  273. .form-control {
  274. box-shadow: none;
  275. font-size: 16px;
  276. height: auto;
  277. padding: 8px 12px;
  278. }
  279. .form-group {
  280. margin-bottom: 18px;
  281. }
  282. .contact-form {
  283. overflow: hidden;
  284. margin-left: -15px;
  285. margin-right: -15px;
  286. }
  287. .content-item input, .content-item textarea {
  288. border-radius:0px;
  289. }
  290. .contact-field {
  291. padding-left: 0;
  292. padding-right: 0;
  293. }
  294. .footer {
  295. color:#fff;
  296. font-size: 14px;
  297. font-weight: 400;
  298. padding:48px 0;
  299. }
  300. .footer a {
  301. color: #FF6;
  302. }
  303. .margin-b-0 {
  304. margin-bottom: 0;
  305. }
  306. .flexbox {
  307. display: -webkit-flex;
  308. display: -ms-flexbox;
  309. display: flex;
  310. -webkit-flex-direction: column;
  311. -ms-flex-direction: column;
  312. flex-direction: column;
  313. -webkit-justify-content: center;
  314. -ms-flex-pack: center;
  315. justify-content: center;
  316. }
  317. .pad-l-3 {
  318. padding-left: 3px;
  319. }
  320. .margin-b-25 {
  321. margin-bottom: 25px;
  322. }
  323. @media screen and (max-width:1199px){
  324. .content-item {
  325. min-height: 470px !important;
  326. }
  327. .content-item img {
  328. min-height: 470px !important;
  329. }
  330. .background p {
  331. line-height: 22px;
  332. }
  333. .background p,
  334. .background li {
  335. font-size: 13px;
  336. }
  337. .background h2 {
  338. margin-bottom: 15px !important;
  339. }
  340. p {
  341. margin: 0 0 10px;
  342. }
  343. .btn {
  344. margin-top: 15px;
  345. }
  346. .background {
  347. background-color: #fff;
  348. }
  349. .last {
  350. min-height: 235px !important;
  351. }
  352. textarea#message {
  353. height: 125px;
  354. }
  355. }
  356. @media screen and (max-width: 1199px) and (min-width: 992px) {
  357. .background {
  358. padding: 25px;
  359. }
  360. .background.content-item-1 {
  361. padding: 0 40px;
  362. }
  363. .btn {
  364. margin-top: 10px;
  365. }
  366. .btn-contact {
  367. margin-top: 0;
  368. }
  369. .form-control {
  370. font-size: 0.9em;
  371. }
  372. }
  373. @media screen and (max-width:991px){
  374. .content-item {
  375. min-height: inherit !important;
  376. }
  377. .content-item img {
  378. min-height: inherit !important;
  379. }
  380. .fixed-header ul li a {
  381. padding: 0px 15px;
  382. }
  383. .background p {
  384. line-height: 27px;
  385. }
  386. .background p,
  387. .background li {
  388. font-size: 16px;
  389. }
  390. .background h2 {
  391. margin-bottom: 20px;
  392. }
  393. p {
  394. margin: 0 0 20px;
  395. }
  396. .btn {
  397. margin-top: 20px;
  398. }
  399. .last {
  400. min-height: 284px !important;
  401. }
  402. textarea#message {
  403. height: inherit;
  404. }
  405. }
  406. @media screen and (max-width:767px){
  407. .last {
  408. min-height: inherit !important;
  409. }
  410. .fixed-header.scroll .navbar-brand {
  411. padding: 12px 15px 0;
  412. }
  413. .navbar-toggle {
  414. display:block;
  415. top: 15px;
  416. background-color: white;
  417. }
  418. .fixed-header.scroll .navbar-toggle {
  419. top: 8px;
  420. }
  421. .navbar-toggle .icon-bar {
  422. background-color: #006699;
  423. }
  424. .fixed-header ul li a:hover,
  425. .fixed-header ul li .current {
  426. border-top: none;
  427. }
  428. .fixed-header {
  429. padding: 5px 0;
  430. }
  431. .fixed-header ul li a {
  432. font-size: 1em;
  433. }
  434. .main-menu ul {
  435. width: 100%;
  436. background-color: #023D69;
  437. }
  438. .main-menu {
  439. max-height: 0;
  440. transition: max-height 0.3s;
  441. overflow: hidden;
  442. }
  443. /* http://css3.bradshawenterprises.com/animating_height/ */
  444. .main-menu.show {
  445. max-height: 250px;
  446. overflow: auto;
  447. }
  448. .main-menu ul li {
  449. display: block;
  450. padding: 10px 0px;
  451. width: 100%;
  452. float:left;
  453. }
  454. .main-menu ul li a {
  455. padding: 0px 0px;
  456. width: 100%;
  457. float: left;
  458. }
  459. #home {
  460. padding-top: 62px;
  461. }
  462. .pad-l-3 {
  463. padding-left: 15px;
  464. }
  465. }
  466. @media screen and (max-width:500px) {
  467. .btn {
  468. margin-top: 10px;
  469. }
  470. }
  471. @media screen and (max-width: 480px) {
  472. .background.content-item-1 {
  473. padding: 40px 45px;
  474. }
  475. }
  476. @media screen and (max-width: 420px) {
  477. .background {
  478. padding: 40px 35px;
  479. }
  480. .background.content-item-1 {
  481. padding: 20px 25px;
  482. }
  483. }