【每日一练】52—写一个简单的静态商品服务网站页面

最新推荐文章于 2023-02-22 15:10:36 发布

web前端开发V

最新推荐文章于 2023-02-22 15:10:36 发布

阅读量238

点赞数

本文链接：https://blog.csdn.net/snsHL9db69ccu1aIKl9r/article/details/126576525

版权

本文作为每日一练，引导读者通过HTML、CSS和JavaScript创建一个静态商品服务网站页面。内容包括页面布局、样式设计及交互实现。由于篇幅限制，仅展示了‘平面设计’菜单的HTML代码，其余菜单代码类似。CSS和JS文件用于完善页面效果和交互。页面中部分链接指向外部网站。提供了一段视频供查看完整效果。

摘要由CSDN通过智能技术生成

写在前面

在前面，我们练习了很多CSS实现的各种效果，后面也练习了一些结合JavaScript实现的网页效果，从今天开始，我们一起来练习一些静态网页的效果，以及一些简单的单页效果，希望这些练习能够对你有所帮助。

我们今天练习的这个效果，就是一个静态页面的单页应用，虽然看起来好像很复杂，其实，把每个部分的代码拆开来以后，都是我们之前练习的一些效果，具体效果如下：

因为这个页面比较长，录制GIF图片的话，文件比较大，因此，我录制了一个简单的视频，大家可以打开视频进行观看页面效果。

具体的代码我还是一样，直接贴在文章里了，大家可以根据需要自取，关于练习里的产品图片，这个是我之前为大学好友设计的个人相片画册以及一些企业宣传画册样稿。

因此，今天练习里的图片素材就不提供了，因为这个图片里有我大学好友的照片，如果你需要这个产品的素材，请自行到网络上找一些合适的产品素材。

下面，我们一起来看一下这个代码。

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>【每日一练】52—写一个简单的静态商品服务网站页面</title>
  <!----字体图标文件引入---->
  <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
  <!----header 开始--->
  <header>
    <a href="http:www.webqdkf.com" class="logo">
      <img src="images/logo.jpg"></a> 
    <div class="bx bx-menu" id="menu-icon">平面设计</div>
    <ul class="navbar">
      <li><a href="#graphic">平面设计</a></li>
      <li><a href="#ui">UI设计</a></li>
      <li><a href="#web">网页设计</a></li>
      <li><a href="#video">视频剪辑</a></li>
      <li><a href="#code">网站开发</a></li>
      <li><a href="http://www.aierweisi.com" target="_blank">建站主机</a></li>
      <li><a href="http://www.webqdkf.com"target="_blank">博客</a></li>
    </ul>
  </header>
<!----平面设计 开始--->
  <!----text 开始--->
  <section class="text" id="graphic">
    <div class="text-content">
      <h2>平面设计</h2>
      <p>企业画册、名片、海报、易拉宝、包装；个人相册、作品集等平面设计服务</p>
    </div>
  </section>
  <!----shop 开始--->
  <section class="shop">
    <div class="container">
      <div class="box">
        <img src="images/photo01.jpg">
        <h4>个人相册设计</h4>
        <h5>￥300.00</h5>
        <div