| |
| |
| text-align: center; |
| |
| font-size: 40px; |
| |
| |
| |
| color: grey; |
| font-size: 18px; |
| |
| |
| |
| |
| |
| |
| <link rel="stylesheet" href="step2/CSS/style.css"> |
| |
| |
| |
| |
| |
| <h1 style="color:cornflowerblue" >O Captain! My Captain!</h1> |
| |
| |
| |
| |
| |
| <p><small style="font-size:10px; color:lightslategray" >© Walt Whitman</small></p> |
| |
| |
| |
| |
| |
| html { |
| background-color:#F0F0F0; |
| } |
| |
| header{ |
| padding:40px; |
| background-color:white; |
| } |
| |
| footer { |
| margin-top: 20px; |
| font-size:0.6em; |
| color:grey; |
| } |
| |
| |
| /* ********** BEGIN ********** */ |
| .newsSection{ |
| margin-top:20px; |
| padding:20px; |
| background-color:white; |
| } |
| |
| |
| /* ********** END ********** */ |
| |
| <div class="newsSection" > |
| |
| /* ********** BEIGN ********** */ |
| #chosen{ |
| color:red; |
| } |
| #news{ |
| color:blue; |
| } |
| #finance{ |
| color:olive; |
| } |
| #think{ |
| color:green; |
| } |
| #life{ |
| color:orange; |
| } |
| |
| |
| |
| |
| /*选择menu元素下的li子元素*/ |
| #menu li { |
| float: left; |
| width: 70px; |
| font-size: 1.2em; |
| font-weight: lighter; |
| } |
| /*选择menu元素下的li子元素和li下得a子元素*/ |
| #menu li, li a { |
| list-style: none; |
| text-decoration: none; |
| } |
| /* ********** END ********** */ |
| |
| <header id="menu" > |
| |
| body { |
| |
| background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB); |
| |
| background: -o-linear-gradient(right, #7ECABA, #E2FCCB); |
| |
| background: -moz-linear-gradient(right, #7ECABA, #E2FCCB); |
| |
| background: linear-gradient(to right, #7ECABA, #E2FCCB); |
| |
| font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; |
| |
| width: 45em; |
| margin: 0 auto; |
| } |
| |
| h1, |
| h2 { |
| |
| font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; |
| |
| |
| } |
| |
| h1 { |
| |
| font-size: 2.1875em; |
| |
| |
| } |
| |
| h2 { |
| background-color: #eaebef; |
| |
| font-size: 1.75em; |
| color: #7d717c; |
| |
| } |
| |
| h3 { |
| background-color: white; |
| |
| font-size: 1.25em; |
| color: green; |
| |
| padding-left: 10px; |
| } |
| |
| hr { |
| height: 1px; |
| border: none; |
| border-top: 2px dashed #88b2d2; |
| } |
| |
| footer { |
| margin: 10px auto; |
| } |
| |
| |
| |
| |
| .architect { |
| background-color: #fff; |
| padding: 1.5em 1.75em; |
| } |
| |
| |
| |
| .intro { |
| background-color: #888888; |
| |
| color: #fefefe; |
| |
| padding: 1px 1.875em .7em; |
| } |
| |
| .intro .subhead { |
| |
| font-size: 1.125em; |
| |
| } |
| |
| .intro p { |
| font-size: 1.0625em; |
| } |
| |
| |
| |
| .chapter p { |
| font-size: .9375em; |
| } |
| |
| img { |
| border-radius: 8px; |
| } |
| |
| |
| |
| a:link { |
| color: #e10000; |
| } |
| |
| a:visited { |
| color: #b44f4f; |
| } |
| |
| a:hover { |
| color: #f00; |
| } |
| |
| .intro a { |
| color: #fdb09d; |
| } |
| |
| .intro a:hover { |
| color: #fec4b6; |
| } |
| body { |
| |
| background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB); |
| |
| background: -o-linear-gradient(right, #7ECABA, #E2FCCB); |
| |
| background: -moz-linear-gradient(right, #7ECABA, #E2FCCB); |
| |
| background: linear-gradient(to right, #7ECABA, #E2FCCB); |
| |
| font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; |
| |
| width: 45em; |
| margin: 0 auto; |
| } |
| |
| h1, |
| h2 { |
| |
| font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; |
| |
| font-weight: normal; |
| |
| } |
| |
| h1 { |
| |
| font-size: 2.1875em; |
| |
| } |
| |
| h2 { |
| background-color: #eaebef; |
| |
| color: #7d717c; |
| |
| font-size: 1.75em; |
| |
| } |
| |
| h3 { |
| background-color: white; |
| |
| font-size: 1.25em; |
| |
| color: green; |
| padding-left: 10px; |
| } |
| |
| hr { |
| height: 1px; |
| border: none; |
| border-top: 2px dashed #88b2d2; |
| } |
| |
| |
| |
| em, |
| a:link, |
| .intro .subhead { |
| font-weight: bold; |
| } |
| |
| footer { |
| |
| font-style: italic; |
| font-weight: light; |
| |
| margin: 10px auto; |
| } |
| |
| footer a { |
| font-style: normal; |
| } |
| |
| |
| |
| |
| .architect { |
| background-color: #fff; |
| padding: 1.5em 1.75em; |
| } |
| |
| |
| |
| .intro { |
| background-color: #888888; |
| |
| color: #fefefe; |
| padding: 1px 1.875em .7em; |
| } |
| |
| .intro .subhead { |
| |
| font-size: 1.125em; |
| } |
| |
| .intro p { |
| font-size: 1.0625em; |
| } |
| |
| |
| |
| .chapter p { |
| font-size: .9375em; |
| } |
| |
| img { |
| border-radius: 8px; |
| } |
| |
| |
| |
| a:link { |
| |
| color: #e10000; |
| } |
| |
| a:visited { |
| color: #b44f4f; |
| } |
| |
| a:hover { |
| color: #f00; |
| } |
| |
| .intro a { |
| color: #fdb09d; |
| } |
| |
| .intro a:hover { |
| color: #fec4b6; |
| } |
| body { |
| |
| background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB); |
| |
| background: -o-linear-gradient(right, #7ECABA, #E2FCCB); |
| |
| background: -moz-linear-gradient(right, #7ECABA, #E2FCCB); |
| |
| background: linear-gradient(to right, #7ECABA, #E2FCCB); |
| |
| font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; |
| |
| width: 45em; |
| margin: 0 auto; |
| } |
| |
| h1, |
| h2 { |
| font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; |
| font-weight: normal; |
| |
| text-align: center; |
| |
| } |
| |
| h1 { |
| |
| font-size: 2.1875em; |
| |
| } |
| |
| h2 { |
| background-color: #eaebef; |
| |
| color: #7d717c; |
| |
| font-size: 1.75em; |
| |
| } |
| |
| h3 { |
| background-color: white; |
| |
| font-size: 1.25em; |
| |
| color: green; |
| padding-left: 10px; |
| |
| text-align: left; |
| |
| } |
| |
| p { |
| text-align: justify; |
| } |
| |
| hr { |
| height: 1px; |
| border: none; |
| border-top: 2px dashed #88b2d2; |
| } |
| |
| |
| |
| em, |
| a:link, |
| .intro .subhead { |
| font-weight: bold; |
| } |
| |
| footer { |
| font-weight: light; |
| font-style: italic; |
| |
| text-align: center; |
| |
| margin: 10px auto; |
| } |
| |
| footer a { |
| font-style: normal; |
| } |
| |
| |
| |
| |
| .architect { |
| background-color: #fff; |
| padding: 1.5em 1.75em; |
| } |
| |
| |
| |
| .intro { |
| background-color: #888888; |
| |
| color: #fefefe; |
| padding: 1px 1.875em .7em; |
| } |
| |
| .intro .subhead { |
| |
| font-size: 1.125em; |
| text-align: center; |
| } |
| |
| .intro p { |
| font-size: 1.0625em; |
| } |
| |
| |
| |
| .chapter p { |
| font-size: .9375em; |
| } |
| |
| .photos { |
| |
| text-align: center; |
| |
| } |
| |
| img { |
| border-radius: 8px; |
| } |
| |
| |
| |
| |
| |
| a:link { |
| color: #e10000; |
| |
| text-decoration: none; |
| |
| } |
| |
| a:visited { |
| color: #b44f4f; |
| } |
| |
| |
| |
| a:hover { |
| color: #f00; |
| |
| text-decoration: underline; |
| |
| } |
| |
| .intro a { |
| color: #fdb09d; |
| } |
| |
| .intro a:hover { |
| color: #fec4b6; |
| } |