CSS（5.12+5.13）

myfirstwebpage.css

太心酸了。。。。。调格式调半天调不好。。。。心都碎了，尤其最后一页的效果太折磨人了。。。。。

body {
  font-family: "Open Sans", sans-serif;
}
.container{
  background-color:bisque;
}
.header{
  margin-top: 0;
  margin-left: 0;
  margin-bottom: 0;
  height: 60px;
  line-height: 60px;
  text-align: middle;
  background-color:dimgray;
}
h1{
  display:inline; 
}
.daohang{
    float right;
    display: inline;
}
.daohang ul{list-style:none;margin:0;padding:0;display:inline;float: right;color: #000;}
.daohang li{margin-right:8px;display:inline;color:bisque;}
.page{
  border:1px solid #cccccc;
  margin: 10px;
  padding: 10px;
  box-shadow: 1px 1px 2px #226
}
.page p{
  text-indent:2em;
}
.page h2,h3,h5{
  font-family: 微软雅黑
}
.page h3{
  color:#666;
}

.page h5{
  color:#999;
}

 #box1{
  position: absolute;
  text-align: center;
  width: 25%;
  padding: 5px;
}
 #box2{
  border:1px solid #ccc;
  position: relative;
  width:200px;
  height:200px;
  padding-top:30px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  margin: 10px;
}
 #box3{
  position: absolute;
  text-align: center;
  width: 25%;
  padding: 5px;
}
 #box4{
  border:1px solid #ccc;
  position: relative;
  width:200px;
  height:200px;
  padding-top:30px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  margin:10px;
}
 #box5{
  position: absolute;
  text-align: center;
  width: 25%;
  padding: 5px;
}
 #box6{
  border:1px solid #ccc;
  position: relative;
  width:200px;
  height:200px;
  padding-top:30px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  margin:10px;
}
ol{
  font-family:微软雅黑;
  font-weight: bold;
}
table{
  border: 0.5px #ccc solid;
  width: 90%;
  margin:auto;
  font-family:微软雅黑;
}
th{
  background-color:#333;
  color: aliceblue;
  padding: 5px;
  text-align: left;
}
tfoot{
  background-color: #ccc;
  font-weight: bold;
  color: white;
}
.pagelast h2{
  border-left: solid #ccc 5px;
  padding-left: 10px;
  text-align: left;
}
.pagelast{
  text-align: center;
}
input{
  width: 150px;
}

.duiqi2{
  color: #666;
  font-size:7px;
  font-family: 微软雅黑;
  display: inline-block;
  margin-top: 0;
  margin-left: 120px;
}
.icon{
  width:800px;
  margin:0;
  background-color: #000099;
  color:aliceblue;
  height: 40px;
  border-radius: 10px;
}
#teshu{
  display: inline-block;
  width:150px;
  text-align: left;
}
#teshu2{
  display: inline-block;
  width:150px;
  text-align: left;
}
.1{
  line-height: 20px;
}
lable{
  display: inline-block;
  width:150px;
  text-align:right; 
}

html相应文件

  
    
    
    
  
  



  
LOGO
  

    

      
 导航链接一
      
 导航链接二
      
 导航链接三
      
 导航链接四
    
  

  

    

    
文章一级标题
    
文章二级标题
    
文章作者 文章发表时间
    
这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了

    
这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了

    
这是一个很长的段落 这是一个很长的段落 这里有一个链接链接到www.baidu.com 这是一个加粗这是一个很长的段落 这是一个很长的段落

    ![](1.jpg)
    
这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了

      
这是一个很长的段落 这是一个很长的段落 这里有个粗体字 这是一个很长的段落 这是一个很长的段落 这里有一个链接链接到www.baidu.com这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了

    

    
另一篇文章一级标题
    
文章二级标题
    
这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了

    
这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了

    
这是一个很长的段落 这是一个很长的段落 这里有一个链接链接到www.baidu.com这是一个很长的段落 这是一个很长的段落

     
    

      
 列表一
      
 列表二
      
 列表三
      
    

      
图片
      

        

          好看的图片
        

          ![](2.jpg)
      
      
      

        好看的图片
        

       
      
      
      

        好看的图片
        

      
      
    
    
    

    
最后一篇文章一级标题
    

      文章二级标题
    
    
      
文章作者 文章发表时间
    
    

      
排名一
      
排名二
      
排名三
    
    

      

        
表头
        
表头
        
表头
      
      

        
表内容单元格
        
表内容单元格
        
 操作
      
      

        
表内容单元格
        
表内容单元格
        
 操作
      
      

        
表内容单元格
        
表内容单元格
        
 操作
      
      

        
表内容单元格
        
表内容单元格
        
 操作
      
    
      

        
总计
        
100
        
      
      

        

          
这里以后是一个侧栏，这是侧栏的标题
        
  
          请输入邮箱地址
          
        

          邮箱地址请按格式要求输入 
 
        
 
          请输入密码
          
        

          请重复输入密码
          
    

      密码请为6-16位英文数字
    
        
 
        性别
        

      女
          男

        
 
        城市
          

      
        北京
        上海
        重庆
        杭州
            

        
 
        爱好
      艺术
      运动
          科学

        
 
        个人描述
          这是一个多行输入框请在这里输入内容

      
    
  

  
  
```
#实现效果展示
查看效果：https://thimble.mozilla.org/zh-CN/user/zhang-boyi-911/955634