用html 和css 写了一个简单的空页面

最新推荐文章于 2023-12-11 01:30:19 发布

原创最新推荐文章于 2023-12-11 01:30:19 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#网页制作

前端学习专栏收录该内容

2 篇文章

订阅专栏

这篇博客展示了如何使用HTML和CSS构建一个简单的网页布局。包括一个带有标题的头部，导航栏，文章区域以及页脚。CSS用于定义各个部分的样式，如颜色、字体大小和定位。

<!DOCTYPE html>
<html>
   <title class="t1">标题</title>
   <link rel="stylesheet" href="css/style.css">
   <header class="header">
      <p>这是我的第一个网页</p>
   </header>
   <nav class="nav">
     <ul>
       <li>首页</li>
       <li>栏目介绍</li>
       <li>联系方式</li>
       <li>截至日期</li>
     </ul>
   </nav>
   <article class="article">
     <div class="left">
         <h1>left</h1>
     </div>
     <div class="right">
        <h2>right</h2>
     </div>
   </article>
   <footer class="footer">
     <a href="#">链接地址</a> 
   </footer>
<html>

body{
   position:relatice;
   margin:0;
}
.t1{
   font-size:4em;
   color:#ccc;
   width:800px;
   align:center;
   height:20px;
   background-color:#00FFFF;
}
.header p{
   font-size:2em;
   color:#999;
   text-align:center;
}
.nav{
   background-color:#FFFF00;
   position:absolute;
   margin-top:20px;
   width:100%;
   height:40px;
   border-radius: 10px;
}
.nav ul li{
   float:left;
   margin-right:25px;
}
.article{
   position:relative;
   height:300px;
   width:100%;
   margin-top:95px;
}
.left{
   position:absolute;
   float:left;  
   background-color:#D9D9D9;
   height:300px;
   width:30%;
   margin-left:30px;
}
.right{
   position:absolute;
   margin-left:280px;
   background-color:#E6E6E6;
   height:300px; 
   width:70%;
}
.footer{
  height:30px;
  margin-top:90px;
  width:100%;
  border-radius:10px;
  background-color:#05D900;
}