尝试从0开始写一个网页
本篇文章用于记录自己的代码实践操作经历
第一次先写一个普通的个人主页网站
本次编译网页使用的编译器为Visual Studio Code,编译语言随进度增加
首先，用 ！+ enter 创建一个welcome.html模板，将标题改成 D.D.Dero的主页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D.D.Dero主页</title>
</head>
<body>
</body>
</html>
然后设置主页背景
<body background="bgbox/bgphoto.png">
<div id="title">
<div id="home" class="home">
<li><a href="welcome.html">Home</a></li>
</div>
<div id="myself" class="myself">
<li><a href="main.html">个人主页</a></li>
</div>
<div id="feedback" class="feedback">
<li><a href="feedback.html">网页反馈</a></li>
</div>
<div id="wait" class="wait">
<li><a href="wait.html">暂时待定</a></li>
</div>
</div>
使用css对html进行排版：
<style type="text/css">
#title{
width: 860px;
height:50px;
background-image:url(bgbox/title.png);
margin-left: 500px;
margin-top: -10px;;
}
#home{
width: 200px;
height: 50px;
margin-top: 10px;
margin-left: 50px;
float: left;
}
#myself{
width: 200px;
height: 50px;
float: left;
margin-top: 10px;
}
#feedback{
width: 200px;
height: 50px;
float: left;
margin-top: 10px;
}
#wait{
width: 200px;
height: 50px;
float: left;
margin-top: 10px;
}
li{
display:inline;
}
</style>
展示： 然后对右边进行填充：
<div id="body">
<div id="top">
<h1>网站主页</h1>
<h3>这是一个初步开发的静态页面，用于记录个人的知识水平和实践操作</h3>
</div>
<div id="Dividing">———————————————————————————————————————</div>
<div id="bottom">
<h1>首页新闻</h1>
<h3>暂时没什么消息，未来可能会进一步改善页面</h3>
</div>
</div>
同样使用css进行美化：
#body{
width:700px;
height:800px;
float: right;
margin-right: 100px;
margin-top: 50px;
background-image:url(bgbox/display.png);
}
#top{
width:700px;
height:345px;
margin-top: 20px;
margin-left: 30px;
}
#bottom{
width:700px;
height:395px;
margin-top: 20px;
margin-left: 30px;
}
#Dividing{
width:700px;
height: 10px;
margin-left: 10px;
}
展示： 左边有点太空了，加点东西进去：
<div id="star">
<img src="bgbox/star.png" style="width: 400px;height: 400px;margin-top: -100px;">
</div>
调整一下star的大小
#star{
width: 100px;
height:100px;
}
展示：