web实验2

 

 

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>耿晴 -- 个人首页</title> 
</head>
<style type="text/css">
    
    * {
    box-sizing: border-box;
}
 
/* body 样式 */
body {
    font-family: Arial;
    margin: 0;
}
 
/* 标题 */
.header {
    padding: 80px;
    text-align: center;
    background:url(https://images.cnblogs.com/cnblogs_com/blogs/690905/galleries/2128405/o_220320050614_%E5%A4%A7%E6%B5%B7.jpg);
    background-size:cover;
    color: white;
}
 
/* 标题字体加大 */
.header h1 {
    font-size: 40px;
}
 
/* 导航 */
.navbar {
    overflow: hidden;
    background-color: #66CCCC;
}
 
/* 导航栏样式 */
.navbar a {
    border-radius:30px;
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;

}
    .zuo{
        width: 280px;
        height: 1000px;
        border-radius:30px;
        border:10px solid #d2dcf9;
         background:url(https://images.cnblogs.com/cnblogs_com/blogs/690905/galleries/2128405/o_220320050654_%E9%A3%8E%E6%99%AF3.jpg);
           background-size:cover;
        display: inline-block;
         float: left;
          position: relative;
    }
    .you{
        position:relative
        width: 1000px;
        height: 1000px;
        border-radius:30px;
        border:10px solid #d2dcf9;
        background:url(https://images.cnblogs.com/cnblogs_com/blogs/690905/galleries/2128405/o_220320050723_%E6%A0%91%E4%B8%8B.jpg);
          background-size:cover;
        display: inline-block;
        margin-left:10px;
    }

   .limian{
           text-align:center;/*文本居中*/
           position: absolute;
            left: 0;
            right: 0;
            top: 0;
            margin: auto;
             width:200px;
             height:400px;
             border-radius:15px;
        border:14px solid #008080;
          color: #008080;
          div img{ 'height='180px' width=180px''};
   }

    </style>
<body>

<div class="header">
  <h1>耿牛牛的院子</h1>
  <p>Welcome to my world!</p>
  <p>泰兰德的夏天永不停歇，我爱的少年永远热恋</p>
</div>
 
<div class="navbar">
   <a href="file:///E:\实验一 信2005-1 耿晴20204010\实验一 PHP 信2005-1 耿晴20204010.html"><span>主页</span></a>
          <a href="https://www.cnblogs.com/gnn40036/"><span>博客园</span></a>
           <a href="https://www.cnblogs.com/gnn40036/gallery/2128405.html"><span>小世界</span></a>
            <a href="https://msg.cnblogs.com/send/%E6%B8%85%E6%A2%A6%E9%9F%B6%E5%8D%8E"><span>留言板</span></a>
</div>
 
<div class="zuo">
    <div class="limian">
        <a href="https://www.cnblogs.com/gnn40036/"><span>博客园</span></a>
          <ul1>
      <li>姓名： 耿晴</li>
     <li>班级：信2005-1</li>
     <li>性别：女</li>
      <li>专业：软件工程</li>
      <li>学院：信息技术与科学学院</li>
      
           </ul>
          
    </div>
    
    </div>
    <div class="you">
      
    <div class="dayTitle"style="width: 900px;
        height: 50px;" >
        <a href="https://www.cnblogs.com/gnn40036/archive/2022/03/19.html">2022年3月19日</a>
    </div>
    <div class="postTitle" role="heading" aria-level="2" style="width: 900px;
        height: 30px;">
            

<a class="postTitle2 vertical-middle" href="https://www.cnblogs.com/gnn40036/p/15991193.html">
    <span>
        CSS
    </span>
    



</a>

        </div>
        <div style="width: 900px; height: 50px;">

    <div style="width: 900px; height: 50px;">
摘要：            
如何使用CSS CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的. CSS 可以通过以下方式添加到HTML中: 内联样式- 在HTML元素中使用&quot;style&quot;&#160;属性 内部样式表 -在HTML文档头部 &lt;head&gt; 区域使用&lt;style&gt;&#160;元素&#160;来包含CSS 外部引用 -        
<a href="https://www.cnblogs.com/gnn40036/p/15991193.html" class="c_b_p_desc_readmore">阅读全文</a>
    </div>
</div>
        <div  style="width: 900px;height: 10px;"></div>
        <div  style="width: 900px;height: 50px;" >posted @ 2022-03-19 20:41
清梦韶华
<span data-post-id="15991193" class="post-view-count">阅读(5)</span> 
<span data-post-id="15991193" class="post-comment-count">评论(0)</span> 
<span data-post-id="15991193" class="post-digg-count">推荐(0)</span> 
<a href="https://i.cnblogs.com/EditPosts.aspx?postid=15991193" rel="nofollow">
    编辑
</a>
</div>
        <div style="width: 900px;height: 50px;"><a href="https://www.cnblogs.com/gnn40036/" >查看更多</a></div>
</div>

        


    </div>

 
</body>
</html>

 

posted @ 2022-03-28 23:06  清梦韶华  阅读(33)  评论(0)    收藏  举报
//雪花飘落效果