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元素中使用"style" 属性 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含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>