Att göra en hemsida om dig med Visual Studio (HTML, CSS, JQUERY) (6 / 8 steg)
Steg 6: Lägga till sociala medier knappar
Vi kommer att lägga till några sociala medier knappar så de kan också kontakta dig via sociala medier. Det finns två stilar du kan välja mellan (se bilderna). Jag har lagt till GIF: s så du kan se dem hur de skiljer sig från varandra. Sväva din mus över till se vilken stil det är. Jag gillar den första stilen mest, men andra är också vackra.
Så kan de läggas till. För båda versionerna måste du lägga till samma HTML-kod
Så lägga till denna kod under input-tagg med ett type 'submit':
< br >< div id = "sociala" >
< en klass = "facebookBtn smGlobalBtn" href = "#" >
< en klass = "twitterBtn smGlobalBtn" href = "#" >
< en klass = "googleplusBtn smGlobalBtn" href = "#" >
< en klass = "linkedinBtn smGlobalBtn" href = "#" >
< en klass = "pinterestBtn smGlobalBtn" href = "#" >
< en klass = "tumblrBtn smGlobalBtn" href = "#" >
< en klass = "rssBtn smGlobalBtn" href = "#" >
< / div >
Ersätt "#" med egen url.
Nu måste vi ta en annan css-fil (ett teckensnitt för sociala medier ikoner) gör vi detta genom att lägga till följande rad i huvudet taggen:
< länka rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" >
I style-tagg måste vi lägga till följande kod:
#social {
marginal: 20px 10px;
text-align: center;
}
.smGlobalBtn {/ * global button-klassen * /
Visa: inline-block;
position: släkting;
markör: pekaren;
bredd: 50px;
höjd: 50px;
gränsen: 2px fasta #ddd; / * lägga till kant på knapparna * /
Box-shadow: 0 3px 3px #999;
padding: 0px;
text-decoration: none;
text-align: center;
färg: #fff;
font-size: 25px;
font-weight: normala;
line-height: 2em;
border-radius: 27px;
-moz-border-radius: 27px;
-webkit-border-radius: 27px;
} / * facebook knappen klass * /
.facebookBtn {
bakgrund: #4060A5;
} .facebookBtn: före {/ * använda: innan du lägger till de relevanta ikonerna * /
font-family: "FontAwesome";
innehåll: "\f09a"; / * lägga till facebook-ikonen * /
} .facebookBtn:hover {
färg: #4060A5;
bakgrund: #fff;
Border-color: #4060A5; / * ändra Kantfärg på mus hover * /
} / * twitter knappen klass * /
.twitterBtn {
bakgrund: #00ABE3;
} .twitterBtn: före {
font-family: "FontAwesome";
innehåll: "\f099"; / * lägga till twitter-ikonen * /
} .twitterBtn:hover {
färg: #00ABE3;
bakgrund: #fff;
Border-color: #00ABE3;
} / * google plus -knappen klass * /
.googleplusBtn {
bakgrund: #e64522;
} .googleplusBtn: före {
font-family: "FontAwesome";
innehåll: "\f0d5"; / * lägga till googleplus-ikonen * /
} .googleplusBtn:hover {
färg: #e64522;
bakgrund: #fff;
Border-color: #e64522;
} / * linkedin knappen klass * /
.linkedinBtn {
bakgrund: #0094BC;
} .linkedinBtn: före {
font-family: "FontAwesome";
innehåll: "\f0e1"; / * Lägg linkedin ikonen * /
} .linkedinBtn:hover {
färg: #0094BC;
bakgrund: #fff;
Border-color: #0094BC;
} / * pinterest knappen klass * /
.pinterestBtn {
bakgrund: #cb2027;
} .pinterestBtn: före {
font-family: "FontAwesome";
innehåll: "\f0d2"; / * lägga till pinterest ikon * /
} .pinterestBtn:hover {
färg: #cb2027;
bakgrund: #fff;
Border-color: #cb2027;
} / * tumblr knappen klass * /
.tumblrBtn {
bakgrund: #3a5876;
} .tumblrBtn: före {
font-family: "FontAwesome";
innehåll: "\f173"; / * lägga till tumblr ikonen * /
} .tumblrBtn:hover {
färg: #3a5876;
bakgrund: #fff;
Border-color: #3a5876;
} / * rss knapp klass * /
.rssBtn {
bakgrund: #e88845;
} .rssBtn: före {
font-family: "FontAwesome";
innehåll: "\f09e"; / * lägga till RSS-ikonen * /
} .rssBtn:hover {
färg: #e88845;
bakgrund: #fff;
Border-color: #e88845;
}
Nu testa din webbplats webbplats och du bör se dem bara under indataformulären. Den ": hover" när en container innebär att när du håller muspekaren över den har att använda det kod behållaren.