[英]Align h3 words to the right bottom
我希望h3“廣告客戶”在“MYNAME”字樣下方右對齊
這是小提琴的例子: http : //jsfiddle.net/Uvv9M/2/
css:
#first_section {
margin: 0 auto;
margin-top: 200px;
width: 100%;
height: 776px;
font-family: 'Raleway', sans-serif;
}
#square {
width:865px;
height:3px;
background-color: black;
margin:0 auto;
}
#first_section_txt {
width:100%;
margin:0 auto;
text-align:center;
font-size:2em;
word-wrap:word-break;
font-family:'Source Code Pro', sans-serif;
}
#first_section img {
margin-left: 25%;
margin-top: -90px;
clear: both;
}
.clear_both {
clear: both;
}
h1 { font-family: 'Source Code Pro', sans-serif;
font-weight: 500;
font-size: 111px;
display: inline;
color: #4a4949;
}
h2 { font-family: 'Source Code Pro', sans-serif;
font-weight: 400;
font-size: 111px;
display: inline;
color: #c0c0c0;
}
h3 { font-family: 'Source Code Pro', sans-serif;
font-weight: 200;
font-size: 25px;
display: inline;
color: #a7a7a7;
float: right;
}
看看這個小提琴
CSS:
#first_section {
margin: 0 auto;
margin-top: 200px;
width: 100%;
height: 776px;
font-family: 'Raleway', sans-serif;
}
#first_section_txt {
width:850px;
margin:0 auto;
text-align:center;
font-size:2em;
word-wrap:word-break;
font-family:'Source Code Pro', sans-serif;
}
#first_section img {
margin-left: 25%;
margin-top: -90px;
clear: both;
}
h1 { font-family: 'Source Code Pro', sans-serif;
font-weight: 500;
font-size: 111px;
display: inline;
color: #4a4949;
}
h2 { font-family: 'Source Code Pro', sans-serif;
font-weight: 400;
font-size: 111px;
display: inline;
color: #c0c0c0;
}
h3 { font-family: 'Source Code Pro', sans-serif;
font-weight: 200;
font-size: 25px;
margin-top:0px;
display: block;
color: #a7a7a7;
text-align: right;
border-top:3px solid #000;
}
HTML:
<div id="first_section">
<div id="first_section_txt">
<h1>THIS</h1><h2>MYNAME</h2>
<h3>Graphic Designer and web Advertiser</h3>
</div>
<img src="images/me.png" />
</div>
糟糕的SEO的一個很好的例子:
<h1>THIS</h1><h2>MYNAME</h2>
應該:
<h1>THIS<span>MYNAME</span></h1>
現在不是做一行(#square ...刪除它),而是可以為h1
添加邊框底部
比你的內部#first_section_txt
, width: 960px
#first_section {
margin: 0 auto;
margin-top: 200px;
width: 100%;
height: 776px;
font-family: 'Raleway', sans-serif;
}
#first_section_txt {
position:relative;
width:960px;
margin:0 auto;
font-family:'Source Code Pro', sans-serif;
}
#first_section img {
margin-left: 25%;
margin-top: -90px;
clear: both;
}
h1 {
text-align:right;
font-weight: 500;
font-size: 111px;
border-bottom:2px solid #4A4949;
color: #4a4949;
margin:0px;
padding-bottom:10px
}
h1 > span{
color: #c0c0c0;
}
#first_section_txt > h3 {
font-weight: 200;
font-size: 25px;
color: #a7a7a7;
text-align:right;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.