文章标题动态页面实现

最新推荐文章于 2023-11-09 14:49:01 发布

原创最新推荐文章于 2023-11-09 14:49:01 发布 · 325 阅读

0 ·

CC 4.0 BY-SA版权

网页设计专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个使用HTML5和CSS实现的响应式商业登录页面案例。页面包含旋转标题、文字描述、小图及手机图标等元素，并通过CSS样式实现了各种交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页

Blue App Template

   <div class="xuanzhuanx">
       <p class="xuanzhuan"> <h2>One page Responsive HTML5 parallax business landing page</h2></p>
   </div>

   <div class="wenben">

       <p  class="small"> Lorem ipsum dolor sit amet,
           consectetur adipisicing elit. Similique autem,
           atque in voluptatibus repellat nostrum iusto
           architecto vel placeat numquam omnis assumenda.

   </div>
   <div class="samalltu">
      <img src="images/oxx.png">

       </div>

   <div class="phone">
       <img src="images/phone.png">

   </div>



   </div>

</body>
</html>
js------
*{
margin: 0;
padding: 0;

}
.beijingtu{
opacity: 0.4;
}
.biaoti{
font-size: 50px;
margin-top: 100px;
margin-left: 50px;
width: 800px ;

}
.wenben{
font-size: 15px;
margin-top: 20px;
margin-left: 50px;
width: 600px;

}
.small{
margin-top: 40px;

}
.samalltu{
margin-top: 100px;
margin-left: 50px;
width: 600px;
}
.phone{
float: right;
width: 400px;
margin-top: 30px;
}
body{
background-image: url(“../images/bg.jpg”);
}
.biaoti:hover{
font-size: 70px;
color: darkred;
}
.xuanzhuanx:hover{
transform: rotate(350deg);
}
.xuanzhuanx{
margin-left: 50px;
margin-top: 20px;
width: 600px;
}
.samalltu:hover{
opacity: 0.5;
}
.phone:hover{
transform: rotate(25deg);
}