栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

使用html编写一个(pc端)静态页面

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

使用html编写一个(pc端)静态页面

html代码
编写的是喜马拉雅的页面





    
    
    Document
    
    
    



    
    


发现 频道
  • 小说
  • 儿童
  • 相声小品
  • 评书
  • 娱乐
  • 悬疑
  • 头条
  • 音乐
  • 历史
  • 情感
  • 理财投资
  • 个人提升
  • 影视
  • 商业管理
  • 英语
  • 少儿素养
  • 科技
  • 教育考试
电台


  • 上传



  • 创作中心



  • 有声出版



  • 客户端





  • 分类



  • 频道



  • 排行

| 猜你喜欢
选择这个可以不用链接后端但是需要自行改一下代码
| 有声书
  • 斗破苍穹 |
  • 盗墓笔记 |
  • 一剑独尊 |
  • 三体 |
  • 大魏读书人 |
  • 免费听全版小说
  • 完本 她是天才特工,第一次任务却惨遭失败穿越掉落龙床,打断暴君的动作片。身中迷药的她,却把暴君当做 了鸭,吃干抹净就走,还留下小费?这个女人欺人太甚!然而暴君是用来虐的,钱是随便花的,武功是欺负弱小的 ,美貌嘛嘿嘿自然是拿来挑逗帅哥的……

    骤雨惊弦
  • 完本 打断暴君的动作片。身中迷药的她,却把暴君当做 了鸭,吃干抹净就走,还留下小费?这个女人欺人太甚!然而暴君是用来虐的,钱是随便花的,武功是欺负弱小的 ,美貌嘛嘿嘿自然是拿来挑逗帅哥的……

    有声的紫襟
  • 完本 打断暴君的动作片。身中迷药的她,却把暴君当做 了鸭,吃干抹净就走,还留下小费?这个女人欺人太甚!然而暴君是用来虐的,钱是随便花的,武功是欺负弱小的 ,美貌嘛嘿嘿自然是拿来挑逗帅哥的……

    王明军演播
  • 完本 打断暴君的动作片。身中迷药的她,却把暴君当做 了鸭,吃干抹净就走,还留下小费?这个女人欺人太甚!然而暴君是用来虐的,钱是随便花的,武功是欺负弱小的 ,美貌嘛嘿嘿自然是拿来挑逗帅哥的……

    有声的紫襟
  • 完本 打断暴君的动作片。身中迷药的她,却把暴君当做 了鸭,吃干抹净就走,还留下小费?这个女人欺人太甚!然而暴君是用来虐的,钱是随便花的,武功是欺负弱小的 ,美貌嘛嘿嘿自然是拿来挑逗帅哥的……

    喜马拉雅
  • 完本 打断暴君的动作片。身中迷药的她,却把暴君当做 了鸭,吃干抹净就走,还留下小费?这个女人欺人太甚!然而暴君是用来虐的,钱是随便花的,武功是欺负弱小的 ,美貌嘛嘿嘿自然是拿来挑逗帅哥的……

    君言讲故事
  • 完本 打断暴君的动作片。身中迷药的她,却把暴君当做 了鸭,吃干抹净就走,还留下小费?这个女人欺人太甚!然而暴君是用来虐的,钱是随便花的,武功是欺负弱小的 ,美貌嘛嘿嘿自然是拿来挑逗帅哥的……

    有声的紫襟
  • 完本 打断暴君的动作片。身中迷药的她,却把暴君当做 了鸭,吃干抹净就走,还留下小费?这个女人欺人太甚!然而暴君是用来虐的,钱是随便花的,武功是欺负弱小的 ,美貌嘛嘿嘿自然是拿来挑逗帅哥的……

    王明军演播
  • 完本 打断暴君的动作片。身中迷药的她,却把暴君当做 了鸭,吃干抹净就走,还留下小费?这个女人欺人太甚!然而暴君是用来虐的,钱是随便花的,武功是欺负弱小的 ,美貌嘛嘿嘿自然是拿来挑逗帅哥的……

    有声的紫襟
  • 完本 打断暴君的动作片。身中迷药的她,却把暴君当做 了鸭,吃干抹净就走,还留下小费?这个女人欺人太甚!然而暴君是用来虐的,钱是随便花的,武功是欺负弱小的 ,美貌嘛嘿嘿自然是拿来挑逗帅哥的……

    喜马拉雅
| 相声评书
  • 隋唐演义 |
  • 相声 |
  • 杨家将 |
  • 听相声学成语 |
  • 相声大全 |
  • 岳飞传
  • 完本 打断暴君的动作片。身中迷药的她,却把暴君当做 了鸭,吃干抹净就走,还留下小费?这个女人欺人太甚!然而暴君是用来虐的,钱是随便花的,武功是欺负弱小的 ,美貌嘛嘿嘿自然是拿来挑逗帅哥的……

    君言讲故事
  • 完本 打断暴君的动作片。身中迷药的她,却把暴君当做 了鸭,吃干抹净就走,还留下小费?这个女人欺人太甚!然而暴君是用来虐的,钱是随便花的,武功是欺负弱小的 ,美貌嘛嘿嘿自然是拿来挑逗帅哥的……

    有声的紫襟
  • 完本 打断暴君的动作片。身中迷药的她,却把暴君当做 了鸭,吃干抹净就走,还留下小费?这个女人欺人太甚!然而暴君是用来虐的,钱是随便花的,武功是欺负弱小的 ,美貌嘛嘿嘿自然是拿来挑逗帅哥的……

    王明军演播
  • 完本 打断暴君的动作片。身中迷药的她,却把暴君当做 了鸭,吃干抹净就走,还留下小费?这个女人欺人太甚!然而暴君是用来虐的,钱是随便花的,武功是欺负弱小的 ,美貌嘛嘿嘿自然是拿来挑逗帅哥的……

    有声的紫襟
  • 完本 打断暴君的动作片。身中迷药的她,却把暴君当做 了鸭,吃干抹净就走,还留下小费?这个女人欺人太甚!然而暴君是用来虐的,钱是随便花的,武功是欺负弱小的 ,美貌嘛嘿嘿自然是拿来挑逗帅哥的……

    喜马拉雅
  • 完本 打断暴君的动作片。身中迷药的她,却把暴君当做 了鸭,吃干抹净就走,还留下小费?这个女人欺人太甚!然而暴君是用来虐的,钱是随便花的,武功是欺负弱小的 ,美貌嘛嘿嘿自然是拿来挑逗帅哥的……

    君言讲故事
  • 完本 打断暴君的动作片。身中迷药的她,却把暴君当做 了鸭,吃干抹净就走,还留下小费?这个女人欺人太甚!然而暴君是用来虐的,钱是随便花的,武功是欺负弱小的 ,美貌嘛嘿嘿自然是拿来挑逗帅哥的……

    有声的紫襟
  • 完本 打断暴君的动作片。身中迷药的她,却把暴君当做 了鸭,吃干抹净就走,还留下小费?这个女人欺人太甚!然而暴君是用来虐的,钱是随便花的,武功是欺负弱小的 ,美貌嘛嘿嘿自然是拿来挑逗帅哥的……

    王明军演播
  • 完本 打断暴君的动作片。身中迷药的她,却把暴君当做 了鸭,吃干抹净就走,还留下小费?这个女人欺人太甚!然而暴君是用来虐的,钱是随便花的,武功是欺负弱小的 ,美貌嘛嘿嘿自然是拿来挑逗帅哥的……

    有声的紫襟
  • 完本 打断暴君的动作片。身中迷药的她,却把暴君当做 了鸭,吃干抹净就走,还留下小费?这个女人欺人太甚!然而暴君是用来虐的,钱是随便花的,武功是欺负弱小的 ,美貌嘛嘿嘿自然是拿来挑逗帅哥的……

    喜马拉雅
| 儿童
  • 莫西西魔法日记 |
  • 闹闹别闹上学计 |
  • 装在口袋里的爸 |
  • 十万个为什么 |
  • 成语故事 |
  • 猫爪怪探团
  • 每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。 在他们求知欲强、记忆力强的最美好的童年时光,用各种优秀、美妙的故事浸润心灵,必将对其成长产生深远的影响,并决定孩子的一生是否会感到幸福和满足。

    君言讲故事
  • 完本 每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。 在他们求知欲强、记忆力强的最美好的童年时光,用各种优秀、美妙的故事浸润心灵,必将对其成长产生深远的影响,并决定孩子的一生是否会感到幸福和满足。…

    有声的紫襟
  • 每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。 在他们求知欲强、记忆力强的最美好的童年时光,用各种优秀、美妙的故事浸润心灵,必将对其成长产生深远的影响,并决定孩子的一生是否会感到幸福和满足。…

    王明军演播
  • 完本 每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。 在他们求知欲强、记忆力强的最美好的童年时光,用各种优秀、美妙的故事浸润心灵,必将对其成长产生深远的影响,并决定孩子的一生是否会感到幸福和满足。

    有声的紫襟
  • 每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。 在他们求知欲强、记忆力强的最美好的童年时光,用各种优秀、美妙的故事浸润心灵,必将对其成长产生深远的影响,并决定孩子的一生是否会感到幸福和满足。

    喜马拉雅
  • 完本 每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。 在他们求知欲强、记忆力强的最美好的童年时光,用各种优秀、美妙的故事浸润心灵,必将对其成长产生深远的影响,并决定孩子的一生是否会感到幸福和满足。

    君言讲故事
  • 完本 每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。 在他们求知欲强、记忆力强的最美好的童年时光,用各种优秀、美妙的故事浸润心灵,必将对其成长产生深远的影响,并决定孩子的一生是否会感到幸福和满足。

    有声的紫襟
  • 每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。 在他们求知欲强、记忆力强的最美好的童年时光,用各种优秀、美妙的故事浸润心灵,必将对其成长产生深远的影响,并决定孩子的一生是否会感到幸福和满足。

    王明军演播
  • 完本 每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。 在他们求知欲强、记忆力强的最美好的童年时光,用各种优秀、美妙的故事浸润心灵,必将对其成长产生深远的影响,并决 定孩子的一生是否会感到幸福和满足。

    有声的紫襟
  • 完本 每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。 在他们求知欲强、记忆力强的最美好的童年时光,用各种优秀、美妙的故事浸润心灵,必将对其成长产生深远的影 响,并决定孩子的一生是否会感到幸福和满足。

    喜马拉雅
| 娱乐
  • 莫西西魔法日记 |
  • 闹闹别闹上学计 |
  • 装在口袋里的爸 |
  • 十万个为什么 |
  • 成语故事 |
  • 猫爪怪探团
  • 每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。 在他们求知欲强、记忆力强的最美好的童年时光,用各种优秀、美妙的故事浸润心灵,必将对其成长产生深远的影响,并决定孩子的一生是否会感到幸福和满足。

    君言讲故事
  • 完本 每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。 在他们求知欲强、记忆力强的最美好的童年时光,用各种优秀、美妙的故事浸润心灵,必将对其成长产生深远的影响,并决定孩子的一生是否会感到幸福和满足。…

    有声的紫襟
  • 每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。 在他们求知欲强、记忆力强的最美好的童年时光,用各种优秀、美妙的故事浸润心灵,必将对其成长产生深远的影响,并决定孩子的一生是否会感到幸福和满足。…

    王明军演播
  • 完本 每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。 在他们求知欲强、记忆力强的最美好的童年时光,用各种优秀、美妙的故事浸润心灵,必将对其成长产生深远的影响,并决定孩子的一生是否会感到幸福和满足。

    有声的紫襟
  • 每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。 在他们求知欲强、记忆力强的最美好的童年时光,用各种优秀、美妙的故事浸润心灵,必将对其成长产生深远的影响,并决定孩子的一生是否会感到幸福和满足。

    喜马拉雅
  • 完本 每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。 在他们求知欲强、记忆力强的最美好的童年时光,用各种优秀、美妙的故事浸润心灵,必将对其成长产生深远的影响,并决定孩子的一生是否会感到幸福和满足。

    君言讲故事
  • 完本 每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。 在他们求知欲强、记忆力强的最美好的童年时光,用各种优秀、美妙的故事浸润心灵,必将对其成长产生深远的影响,并决定孩子的一生是否会感到幸福和满足。

    有声的紫襟
  • 每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。 在他们求知欲强、记忆力强的最美好的童年时光,用各种优秀、美妙的故事浸润心灵,必将对其成长产生深远的影响,并决定孩子的一生是否会感到幸福和满足。

    王明军演播
  • 完本 每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。 在他们求知欲强、记忆力强的最美好的童年时光,用各种优秀、美妙的故事浸润心灵,必将对其成长产生深远的影响,并决 定孩子的一生是否会感到幸福和满足。

    有声的紫襟
  • 完本 每个家长都期盼自己的孩子能在将来成长为一位优秀的人才,而热爱阅读的孩子恰恰是最具发展前途的。 在他们求知欲强、记忆力强的最美好的童年时光,用各种优秀、美妙的故事浸润心灵,必将对其成长产生深远的影 响,并决定孩子的一生是否会感到幸福和满足。

    喜马拉雅

热播榜

  1. 郭德纲21年相声精选

    德云社郭德纲相声vip

  2. 大奉打更人

    头陀渊讲故事

  3. 米小圈上学记

    米小圈

  4. 4 重生八零,媳妇有点辣 | 免费多人有声剧
  5. 5 先快报
  6. 6 雪中悍刀行 无删减版免费听|大斌
  7. 7 一剑独尊(叶玄叶灵 | 有声的紫襟 | 男女双播)
  8. 8 白眉大侠 | 单田芳(400回完)
  9. 9 德云社相声精选集(365天高清伴睡版)
  10. 10 晚安妈妈睡前故事






css的代码

header .title {
  width: 100%;
  height: 60px;
  border-bottom: 2px solid silver;
}

header .pindao .select {
  position: absolute;
  z-index: 10;
  display: none;
  width: 600px;
  height: 200px;
}

header .pindao .select li {
  list-style: none;
  display: inline-block;
  width: 80px;
  height: 20px;
  background-color: silver;
  border-radius: 20px;
  margin-top: 40px;
}

header .pindao .select li:hover {
  background-color: red;
}

header .pindao:hover .select {
  display: block;
}

header img {
  width: 290px;
  height: 60px;
  display: flex;
}

header span {
  display: inline-block;
  height: 60px;
  width: 32px;
  margin-left: 70px;
}

header a:hover span {
  color: red;
}

header input {
  width: 298px;
  height: 40px;
  border-radius: 30px;
  border: 1px solid red;
  margin-left: 300px;
  margin-top: 20px;
  margin-bottom: 20px;
}

header ul {
  float: right;
}

header ul li {
  list-style: none;
  display: inline-block;
  margin-top: 10px;
  margin-right: 5px;
  text-align: center;
}

header ul li img {
  width: 44px;
  height: 32px;
  text-align: center;
}

header ul li p:hover {
  color: red;
}

header ul li img.irl {
  width: 50px;
  height: 50px;
}

section.picture {
  width: 100vw;
  overflow: hidden;
  margin-top: 20px;
}

section.picture .picture-img {
  width: 500vw;
  height: 280px;
  display: flex;
  justify-content: space-around;
  animation: mylunbo 8s infinite;
}

section.picture img {
  width: 60vw;
  height: 280px;
  border-radius: 10px;
}

@keyframes mylunbo {
  0%,
  25% {
    transform: translateX(0);
  }
  25%,
  50% {
    transform: translateX(-100vw);
  }
  50%,
  75% {
    transform: translateX(-200vw);
  }
  75%,
  99% {
    transform: translateX(-300vw);
  }
  99%,
  100% {
    transform: translateX(-400vw);
  }
}

section.one .title1 li {
  list-style: none;
  display: inline-block;
}

section.one .title1 li img {
  margin-top: 10px;
  width: 40px;
  height: 40px;
  margin-left: 180px;
}

section.one .title1 li p {
  margin-left: 182px;
  margin-bottom: 10px;
}

section.one .title1 li p:hover {
  color: red;
}

section.one .title2 li {
  display: inline-block;
  list-style: none;
  margin-left: 180px;
  margin-top: 10px;
}

section.one .title2 span {
  color: #40404c;
}

section.one .title2 a {
  text-decoration: none;
}

section.one .title2 a:hover span {
  color: red;
}

section.two a {
  text-decoration: none;
}

section.two span {
  display: inline-block;
  margin-left: 180px;
  margin-top: 20px;
  font-size: 35px;
  font-weight: 600;
  color: #40404c;
}

section.two a:hover span {
  color: red;
}

section.three .cnxh {
  width: 1400px;
  height: 250px;
  margin: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

section.three .cnxh div {
  margin: 10px;
}

section.three .cnxh div div {
  width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

section.three .cnxh div:hover {
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.5);
}

section.three .cnxh div:hover img {
  margin-left: 8px;
}

section.three li {
  list-style: none;
  display: inline-block;
  margin-top: 20px;
  margin-left: 130px;
}

section.three li:hover {
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.5);
}

section.three img {
  width: 145px;
  height: 145px;
}

section.three p {
  width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

section.three p:hover {
  color: red;
}

section.three a:hover span {
  color: red;
}

section.four a {
  text-decoration: none;
}

section.four span {
  display: inline-block;
  margin-left: 180px;
  margin-top: 20px;
  font-size: 35px;
  font-weight: 600;
  color: #40404c;
}

section.four a:hover span {
  color: red;
}

section.four ul {
  margin-left: 180px;
}

section.four li {
  list-style: none;
  display: inline-block;
  width: 160px;
}

section.four li:hover {
  color: red;
}

section.five li {
  list-style: none;
  display: inline-block;
  margin-top: 20px;
  margin-left: 130px;
}

section.five li:hover {
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.5);
}

section.five img {
  width: 145px;
  height: 145px;
}

section.five p {
  width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

section.five p span.w {
  background-color: #78c10a;
  color: white;
}

section.five p:hover {
  color: red;
}

section.five a:hover span {
  color: red;
}

section.six {
  margin-left: 120px;
  margin-top: 20px;
  float: left;
  margin-left: 360px;
}

section.six h4 {
  color: #463e31;
  font-size: 22px;
}

section.six .six2 img {
  width: 60px;
  height: 60px;
  margin-top: 10px;
}

section.six .six2 li {
  width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

section.six .six2 li div {
  float: right;
  margin-top: 20px;
  margin-right: 30px;
}

section.six .six2 li .six3 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 14px;
  line-height: 20px;
  max-width: 100%;
  color: #40404c;
}

section.six .six2 li .six4 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 12px;
  max-width: 100%;
  color: #a3a3ac;
  line-height: 20px;
}

section.six .six2 li:hover {
  color: red;
}

.six5 {
  float: right;
  margin-right: 400px;
}

.six5 img {
  height: 400px;
  width: 250px;
}

.six6 {
  float: right;
}

.six6 img {
  height: 400px;
  width: 250px;
}

footer {
  margin-top: 30px;
}

至于图片就自行搞定吧大部分都是有网就行的,少数图片是需要下载的在网上下载就行了
成品展示

猜你喜欢哪里是需要后端渲=渲染才能出现图片的的,或者使用第二种方法

暑期编程PK赛 得CSDN机械键盘等精美礼品!
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/1017481.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号