一个简单的网站首页制作
源代码
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>主页面</title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
#container{
margin: 0 auto;
width:1350px;
height: 620px;
background-color: #fff;
}
#header{
width:100%;
height: 100px;
background-color: #0ff;
/*font-size: 30px;
font-family: 楷体;*/
/*text-align: center;
line-height: 100px;*/
}
#main{
width:100%;
height: 400px;
background-color: black;
}
#footer{
width:100%;
height: 100px;
background-color: #ff0;
}
.nav{
width: 100%;
height: 10px;
}
#left{
width: 670px;
height: 400px;
background-color: red;
float:left;
}
#right{
width: 670px;
height: 400px;
background-color: #f0f;
float: right;
}
#vertical_nav{
width: 10px;
height: 400px;
background-color: #fff;
float: left;
}
.right_article{
width: 100%;
height: 85px;
background-color: #ccc;
line-height: 85px;
text-align: center;
font-size: 30px;
/*text-decoration: none;*/
}
.right_article a{
text-decoration: none;
}
.article_nav{
width: 100%;
height: 20px;
background-color: #fff;
}
#footer ul{
margin: 0px;
padding: 0px;
list-style-type: none;
font-family: 幼圆;
line-height: 100px;
}
#footer ul li{
float: left;
margin-left: 200px;
font-size: 20px
}
#header #title{
float:left;
width: 1200px;
height: 100%;
font-size: 30px;
font-family: 楷体;
line-height: 100px; /* 不能用100%*/
text-align: center;
}
#header #login_or_register{
float: left;
margin-top: 20px;
/*background-color: red;*/
width: 100px;
height: 40px;
font-size: 17px;
font-family: 楷体;
/*border: 3px solid #f00;*/
}
#header #login_or_register a{
text-decoration: none;
}
/* #header login_or_register .op
{
float:left;
margin-top: 10px;
}*/
/*#header ul li{
float: left;
}*/
/*#header #login_or_register{
float: left;
}*/
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="title"><span>我的个人网站</sapn></div>
<div id="login_or_register">
<a href="">登录</a> | <a href="">注册</a>
</div>
</div>
<div class="nav"></div>
<div id="main">
<div id="left">
</div>
<div id="vertical_nav"></div>
<div id="right">
<div id="article_one" class="right_article">
<span><a href="http://www.baidu.com" target="_blank">第一篇文章</a></span>
</div>
<div class="article_nav"></div>
<div id="article_two" class="right_article">
<span><a href="">第二篇文章</a></span>
</div>
<div class="article_nav"></div>
<div id="article_three" class="right_article">
<span><a href="">第三篇文章</a></span>
</div>
<div class="article_nav"></div>
<div id="article_four"class="right_article">
<span><a href="">第四篇文章</a></span>
</div>
</div>
</div>
<div class="nav"></div>
<div id="footer">
<ul>
<li>网站首页</li>
<li>关于我们</li>
<li>联系方式</li>
<li>公司简介</li>
</ul>
</div>
</div>
</body>
</html>
</body>
</html>
<div></div>
</body>
</html>
</body>
</html>
运行结果如下:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
· 程序员转型AI:行业分析