html 我的名片
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 我的名片相关的知识，希望对你有一定的参考价值。
/** {
border: 1px dashed black;
}*/
body {
font-family: Consolas, 'sans-serif';
font-size: 62.5%;
background-color: #D92626;
}
/* ======= Document ======= */
.wrapper {
height: 220px;
width: 540px;
position: absolute;
left: 50%;
top: 50%;
margin: -110px 0 0 -270px;
background-color: green;
border-radius: 8px;
box-shadow: 0px 0px 100px black;
-moz-box-shadow: 0px 0px 100px black;
-webkit-box-shadow: 0px 0px 100px black;
background: rgba(0, 128, 0, 0.9);
}
.wrapper h1 {
text-align: center;
font-size: 1.5rem;
}
.wrapper span {
color: white;
}
/* ========== inner page ========== */
.inner {
width: 500px;
height: 90px;
font-size: .8rem;
padding-bottom: 35px;
margin: auto;
border: 3px groove black;
border-radius: 5px;
border-left-style: dotted;
border-right-style: dotted;
}
.avatar {
height: 90px;
width: 90px;
margin: 18px;
float: left;
box-shadow: 0px 0px 10px black;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: rgba(0, 128, 0, 1.0);
}
.inner p {
padding-top: 16px;
margin-right: 16px;
}
.inner ul {
padding-top: 25px;
margin-right: 15px;
}
/* =========== Jobs page ========== */
.about {
display: inline;
padding: auto;
margin: auto;
}
/* =========== Jobs page ========== */
.jobs {
display: none;
}
.jobs a {
color: black;
}
/* ======= Social Media page ====== */
.social {
display: none;
margin: auto;
text-align: center;
}
.social ul li {
list-style: none;
display: inline;
}
.social ul li a {
color: white;
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
transition: .3s;
text-decoration: none;
padding: 22px;
}
.social ul li a:hover {
color: black;
}
.linkedin {
/*background-color: #0177B5;*/
border: none;
background: rgba(0, 128, 0, 1.0);
}
.facebook {
/*background-color: #43609C;*/
border: none;
background: rgba(0, 128, 0, 1.0);
}
.twitter {
/*background-color: #659FCB;*/
border: none;
background: rgba(0, 128, 0, 1.0);
}
/* =========== Menu list ========== */
.optionMenu {
list-style: none;
text-align: center;
padding: 5px 0px;
margin: auto;
}
.optionMenu li {
display: inline;
}
.optionMenu li a {
text-decoration: none;
font-size: 1rem;
color: white;
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
transition: .3s;
}
.optionMenu li a:hover {
color: black;
}
.optionMenu li + li::before {
content: " | ";
}<script src="https://codepen.io/BitsPls/pen/dYvgNj"></script>
/* bottom links */
var aboutlink = document.getElementById("aboutlink");
var jobslink = document.getElementById("jobslink");
var sociallink = document.getElementById("sociallink");
/* content divs */
var aboutcontent = document.getElementById("aboutcontent");
var jobscontent = document.getElementById("jobscontent");
var socialcontent = document.getElementById("socialcontent");
/* header breadcrumb */
var breadcrumb = document.getElementById('currentcontent');
aboutlink.onclick = function(event) {
aboutcontent.style.display = 'inline';
jobscontent.style.display = 'none';
socialcontent.style.display = 'none';
breadcrumb.innerHTML = 'About me';
aboutlink.style.color('black');
jobslink.style.color('white');
sociallink.style.color('white');
};
jobslink.onclick = function(event) {
aboutcontent.style.display = 'none';
jobscontent.style.display = 'inline';
socialcontent.style.display = 'none';
breadcrumb.innerHTML = 'My Jobs';
aboutlink.style.color('white');
jobslink.style.color('black');
sociallink.style.color('white');
};
sociallink.onclick = function(event) {
aboutcontent.style.display = 'none';
jobscontent.style.display = 'none';
socialcontent.style.display = 'inline';
breadcrumb.innerHTML = 'Social Media';
aboutlink.style.color('white');
jobslink.style.color('white');
sociallink.style.color('black');
};
/* Experimental */
function doMove(){
foo.style.left = (foo.style.left+10)+'px';
setTimeout(doMove, 15);
}My Business Card
----------------
I made a business card for the DevWars.tv challenge. Hope you like it :)
A [Pen](https://codepen.io/harunpehlivan/pen/mXgavo) by [HARUN PEHLİVAN](https://codepen.io/harunpehlivan) on [CodePen](https://codepen.io).
[License](https://codepen.io/harunpehlivan/pen/mXgavo/license).<html lang="en">
<head>
<title>My Business Card</title>
<meta name="viewport" content="width=device-width, height=devide-height, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<h1>HARUN PEHLİVAN > <span id="currentcontent">About me</span></h1>
<!--<hr color="black">-->
<div class="inner">
<img class='avatar' src="http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_630.jpg?t=1518990802">
<div class="about" id="aboutcontent">
<p>
<a href="http://harunpehlivantebimtebitagem.business.site/" target="_blank"> HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP</a>
</p>
</div>
<div class="jobs" id="jobscontent">
<p>
<a href="https://harunpehlivantebimtebitagem.carrd.co" target="_blank"> FOUNDER,CEO BLOGGER</a>
</p>
</div>
<div class="social" id="socialcontent">
<ul>
<li><a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252" target="_blank"><img class="linkedin" height="50px" width="60px" src="https://joanbang.files.wordpress.com/2011/08/linkedin-icon.png"></a></li>
<li><a href="https://facebook.com/profile.php?id=100008152065270" target="_blank"><img class="facebook" height="50px" width="50px" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-512.png"></a></li>
<li><a href="https://www.twitter.com/HTERCUMANP" target="_blank"><img class="twitter" height="50px" width="50px" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-twitter-512.png"></a></li>
</ul>
</div>
</div>
<!--<hr color="black">-->
<ul class="optionMenu">
<li><a id="aboutlink" href="#">About</a></li>
<li><a id="jobslink" href="#">My Jobs</a></li>
<li><a id="sociallink" href="#">Social Media</a></li>
</ul>
</body>
</html>以上是关于html 我的名片的主要内容，如果未能解决你的问题，请参考以下文章