首页 > 其他分享> 文章详细

HTML5简单个人主页设计

2021-04-12 18:30:01 阅读：204 来源： 互联网

标签：right border top padding 个人主页 HTML5 简单 margin left

类似QQ空间的效果，因为没过多要求就不再美化了，各个图片链接和主页什么的链接需要留言
效果图：
在这里插入图片描述

html文件：

**
<!doctype html>

无标题文档

welcom to my个人主页

wzy的个人主页

	WZY		好友音乐日志个人档更多

<table class="main">
<tr><img src="images/NCU.jpg" class="NCU" height="50px" width="1200px" ></tr><tr><th><a href="personal.html" target="main"><li class="first"><img src="images/personal.png">个人主页</li></a><a href="info.html" target="main"><li><img src="images/per_show.png">个人简介</li></a><a href="example.html" target="main"><li><img src="images/picture.png">我的相册</li></a><a href="info.html" target="main"><li><img src="images/felling.png">心情日志</li></a><a href="contact.html" target="main"><li class="last"><img src="images/phone.png">与我联系</li></a></th></tr>

</div>

CSS文件：

**
@charset “utf-8”;
/* CSS Document */
body{
margin-top:0;
margin-left:0;
margin-right:0;
background-image:url(…/images/backgroundpic.jfif);
background-position:top;
background-repeat:repeat-x;
background-size:cover
}
.top{
width:100%;
height:50px;
background:#1f1f1f;
color:white;
border:none;
-position:absolute;
-padding:0;
-margin:0 auto;
}
li{
list-style:none;
font-size:25px;
font-weight:normal;
-border-left:1px solid black;
-border-right:1px solid black;
//border-width:medium;
-padding-left:100px;
padding-right:100px;
padding-bottom:20px;
padding-top:20px;
background:#fff;
text-decoration:none;
height:50px;
-float:right;
border-top:1px solid #CCC;
width:160px;
}
.first{
border:none;
}
.head{
padding-left:500px;
}
.headshot{
-padding-left:500px;
border:4px solid #dedede;
margin:0 auto;
}
.main{
padding-left:500px;
-background-color:#FFF;
}
a.one{
-padding-bottom:50px;
-padding-top:0px;
text-align:center;
color:#fff;
line-height:20px;
}
.topic{
padding-left:493px;
padding-bottom:50px;
padding-top:50px;
font-weight:900;
font-size:36px;
color:#2961ad;
}
.name{
font-weight:bolder;
font-size:16px;
padding-bottom:130px;
padding-left:25px;
color:#2961ad;
}
.first{
-border-top:1px solid black;
}
.last{
-border-bottom:1px solid black;
}
a{
text-decoration:none;
color:black;
}
.NCU{
padding-left:500px;
}
.rightmain{
float:right;

}
.saysth{
border:0;
outline:none;
width:600px;
height:74px;
margin-top:25px;
margin-right:0;
}
.textfieldbtn{
background-image:url(…/images/textfield.PNG);
width:100px;
height:74px;
margin-top:25px;
margin-right:400px;
border:0;
padding:0;

}
div input{
vertical-align:middle;
}
.my{
-padding-left:200px;
padding-top:125px;
float:right;
width:300px;
height:500px;
-overflow:hidden;
margin-left:-300px;

}
.show{margin-left:301px;
width:600px;
height:100%;
border:none;
background:#FFF;

}
.lable{
-float:right;
-padding-right:1151px;
-padding-bottom:150px;
padding-top:150px;
height:100px;
margin-top:-115px;
margin-bottom:-106px;
margin-left:64px;

}
.lablea{
letter-spacing:3px;
padding-right:30px;
}
#time{
padding-left:500px;
padding-bottom:100px;
text-align:center;
}

JS文件简单的显示时间：

// JavaScript Document
function mytime(){

var a = new Date();

var b = a.toLocaleTimeString();

var c = a.toLocaleDateString();

document.getElementById(“time”).innerHTML = c+"&nbsp"+b;

}

setInterval(function() {mytime()},1000);

标签：right,border,top,padding,个人主页,HTML5,简单,margin,left
来源： https://blog.csdn.net/Root2021/article/details/115633758

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

HTML5简单个人主页设计

html文件：

CSS文件：

JS文件简单的显示时间：