HTML5--经典案例：名人名言（学生版）

556Von

于 2024-05-12 22:11:21 发布

阅读量1.6k

点赞数 30

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/2201_75742255/article/details/138769667

版权

实现效果：

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>名人名言</title>
   <style type="text/css">
       *{
           margin: 10px;
       }
       .one{
           margin-left: 50px;
           padding: 0px;
       }
       .two{
           margin-left: 30px;
       }
       table{
           border-collapse: collapse;
           border: solid 1px black;
       }
       td{
           border: solid 1px black;
           padding: 15px;
       }
       .box{
           margin-top: -11px;
           border-top:1px solid grey;
           border-bottom: 1px solid grey;
           height: 850px;
           width:1200px;
       }
       .box01{
           padding: 0px 20px 0px 0px;
           margin-top:50px;
           border: 1px solid grey;
           width:645px;
           line-height: 25px;
       }
       .box02{
           font-size: 15px;
           line-height: 25px;
           width: 665px;
           font-weight: bold;
           padding: 0px;
       }
       .box03{
           width: 665px;
           font-size: 15px;
           margin: 0px 0px 0px 10px;
       }
       .box04{
           padding: 0px 20px 0px 0px;
           margin: 0px 0px 0px 10px;
           border: 1px solid grey;
           width:645px;
       }
       .box07{
           line-height: 30px;
           width: 665px;
           font-weight: bold;
           padding: 0px 0px;
       }
       .box08{
           width: 665px;
           margin: 0px 0px 0px 10px;
       }
       .box09{
           padding: 0px 20px 0px 0px;
           margin-top:0px;
           border: 1px solid grey;
           width:645px;
       }
       .box10{
           float: right;
           border: solid 1px grey;
           margin-top: 50px;
           height: 650px;
           width: 400px;
           padding: 10px;
           color: grey;
           margin-right: ;
       }
   </style>
</head>

<body>
   <div class="one">
   <h1>名人名言</h1>
   <i>分享名人名言，开始一段触动心灵的智慧之旅跳到内容 </i><br>
   <br>
   <table>
       <tr>
           <td>登录</td>
           <td>关于</td>
           <td>名人名言</td>
           <td>英文名言(English)</td>
           <td>心理杂志</td>
           <td>心理书籍</td>
           <td>专题活动</td>
           <td>发表</td>
       </tr>
   </table>
   </div>

   <div class="two">
       <div class="box">
           <div class="box10">
               <p><i>赞助广告</i></p>
               <img src="图片素材/ad.jpg" width="80%">
               <p><i>搜索</i></p>
               <input type="text" value="点击搜索">
               <p><i>标签</i></p>
               <div style="line-height: 25px;font-size: 16.5px;font-style: italic;">60年语录《犯罪心理》世间百态二十四史传统名人体育人物卡斯特罗卡斯特罗名言卡斯特罗语录历史友谊爱情古代格言名人名言名人随语教子立人新闻事件李白爱情语录韩寒语录</div>
           </div>
           <div class="box01">
               <h3>心理学经典名言的智慧</h3>
               <p>洞察人性的美与丑，认识自我的强与弱。一句好的格言能够穿越时间，永不失色、历久弥香，它总是能给人们带来心灵的滋养。</p>
           </div>
           <div class="box02">
           创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。
               Krainir希腊语的意思是“去实现”。所以，创造力不仅仅是一种想象力、一种天赋，
               创造力更是一种将自己的想法付诸实现的能力。
           </div>
           <div class="box03">
               创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。
               Krainir希腊语的意思是“去实现”。所以，创造力不仅仅是一种想象力、一种天赋，
               创造力更是一种将自己的想法付诸实现的能力。<br>发表在未分类 | 标签：《换个脑袋去思考》, 创造力 | 留下评论
           </div>
           <div class="box04">
               <h2>作者简介</h2>
           </div>
           <div class="box07">
               如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。
               这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；
               如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的方式对待你。
               这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一点。
           </div>
           <div class="box08">
               如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。
               这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；
               如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的方式对待你。
               这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一点。<br>
               发表在未分类 | 标签：《怎样出售设计创意》, 温斯顿·丘吉尔 | 留下评论
           </div>
           <div class="box09">
               <p><i>赞助广告</i></p>
               <img src="图片素材/ad_2.jpg" width="95%">
           </div>
       </div>
   </div>
</body>
</html>