HTML网页制作代码大全——中华传统文化设计题材网站(html+css)

这篇具有很好参考价值的文章主要介绍了HTML网页制作代码大全——中华传统文化设计题材网站(html+css)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业: 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】



二、📚网站介绍

📔网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。

📘网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。

📒网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

📙网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)📜html文件包含:其中index.html是首页、其他html为二级页面;
(2)📑 css文件包含:css全部页面样式,文字滚动, 图片放大等;
(3)📄 js文件包含:js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。


三、🔗网站效果

▶️1.视频演示

N52JP-唐代诗人-6页

🧩 2.图片演示

HTML网页制作代码大全——中华传统文化设计题材网站(html+css)
HTML网页制作代码大全——中华传统文化设计题材网站(html+css)
HTML网页制作代码大全——中华传统文化设计题材网站(html+css)
HTML网页制作代码大全——中华传统文化设计题材网站(html+css)
HTML网页制作代码大全——中华传统文化设计题材网站(html+css)
HTML网页制作代码大全——中华传统文化设计题材网站(html+css)


四、💒 网站代码

🧱HTML结构代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet"  media="all" type="text/css" />
<title>唐代诗人</title>
</head>
<body>
<header class="head">
  <div class="main"><span class="fl"><img src="images/logo.png" width="100"/></span>
    <p class="clear"></p>
  </div>
</header>
<nav class="menu">
  <div class="main">
    <ul class="center">
      <li><a href="index.html">网站首页</a></li>
      <li><a href="shiren.html">主要诗人</a></li>
      <li><a href="shici.html">诗词大全</a></li>
      <li><a href="shipin.html">视频介绍</a></li>
    </ul>
  </div>
</nav>
<div class="main">
  <div class="banner "> <img src="images/banner1.jpg" width="100%" /> </div>
  <div class="content">
    <div class="about"> <img src="images/tu.jpg" width="300" class="fr" style="margin-left:11px" />
      <p>唐朝最令人瞩目的文学成就可谓是唐诗,唐朝著名的诗人层出不穷。他们的诗作风格各异,既有对神话世界的丰富想象,又有对现实生活的生动描写,既有激昂雄浑的边塞诗,亦有沉郁厚重的“诗史”,还有清新脱俗的田园诗。这些诗作共同构成了中国古代文学的杰出代表,使得唐诗成为了中国古诗不可逾越的巅峰。 <br>
        唐代是我国文化繁荣的朝代之一,比较闻名的诗人有李白、杜甫、白居易、张九龄、王维、孟浩然、王昌龄、杜牧、岑参、韩愈、柳宗元等等。比较著名的诗有《春晓》《望庐山瀑布》《登高》《使至塞上》《长恨歌》等。 </p>
    </div>
    <div class="clear"></div>
    <div class="bar">
      <h3>主要诗人</h3>
    </div>
    <div class="scrollleft">
      <ul>
        <li> <a href="shiren.html"><img src="images/0.jpg" width="100%" height="240"/> </a>
          <h3>李白</h3>
        </li>
        <li> <a href="shiren.html"><img src="images/1.jpg" width="100%" height="240"/></a>
          <h3>陆游</h3>
        </li>
        <li> <a href="shiren.html"><img src="images/2.jpg" width="100%" height="240"/></a>
          <h3>李清照</h3>
        </li>
        <li> <a href="shiren.html"><img src="images/3.jpg" width="100%" height="240"/> </a>
          <h3>杜甫</h3>
        </li>
        <li> <a href="shiren.html"><img src="images/4.jpg" width="100%" height="240"/> </a>
          <h3>白居易</h3>
        </li>
      </ul>
    </div>
    <div class="clear"></div>
  </div>
</div>
<footer class="end">
  <p>唐代诗人 </p>
</footer>
</body>
</html>





🏠CSS样式代码



@charset "utf-8";
/* CSS Document */
ul,li,h1,h2,h3,p{ padding:0; margin:0; list-style:none}
h2{ padding-bottom:15px}
a{ text-decoration:none; color:#000}
html{ background:#cabcb9}
img{ max-width:100%; display:block}
body{  line-height:24px; margin:0}
.main{width:1000px; margin:0 auto;}
.clear{ clear:both}
.menu li{ list-style:none}
.banner{margin-bottom:10px; position:relative; clear:both}
.menu{ width:100%;  text-align:center; background:#998d86; margin-bottom:20px;  position:relative; z-index:55; float:left}
.menu li a{ display:block; padding:10px 0; color:#fff}
.menu li { float:left;font-size:14px; padding:0px 0px ; width:250px}
.menu li a:hover{ background:#996633}
.content{ padding-bottom:20px;font-size:14px; display:inline-block ;  width:100%}
.end{ background:#998d86; color:#fff; clear:both;padding:20px 0; text-align:center;}
.pad{ padding:20px; display:block}

.scrollleft li{ width:190px; text-align:center; margin:5px; float:left}
.bar{ border:#735f53 solid 1px; border-left:#735f53 solid 3px; padding:5px 10px; margin:20px 0}
.fl{ float:left}
.fr{ float:right}
.title{ padding:30px 0}
.head{ color:#efefef; background:#efefef; font-size:36px; padding:20px 0}
.ass{ margin:10px}
.ass li{ width:31.3%; margin:1%; float:left; text-align:center}
.ass li img{ display:inline-block; border:#fff solid 1px; padding:5px} 
.about{ font-size:16px; line-height:24px}

.news li a{ color:#993333}
.news li{ font-size:18px; height:30px; border-bottom:#999966 solid 1px; padding:20px; background:#DED7D1; margin:10px 0;}
.info .r{ font-size:22px; padding-top:50px; line-height:45px; letter-spacing:10px;}




五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦!

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻文章来源地址https://www.toymoban.com/news/detail-466568.html

到了这里,关于HTML网页制作代码大全——中华传统文化设计题材网站(html+css)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【完整代码】用HTML/CSS制作一个美观的个人简介网页

    用HTML/CSS制作一个美观的个人简介网页——学习周记1 HELLO!大家好,由于《用HTML/CSS制作一个美观的个人简介网页》这篇笔记有幸被很多伙伴关注,于是特意去找了之前写的完整代码,久等啦~ 这个页面是在自己刚接触前端代码时使用HBuilder所作,以下是建立的项目及文件↓↓

    2024年01月25日
    浏览(44)
  • 程序员过中秋丨用代码制作一个祝福小网页(html+css)

    大家好,我是陈橘又青,兰经香风满,松窗夜月圆!都说我们程序员过节最没仪式感,再过两周就是中秋节了,今天我们就来制作一个简单的中秋祝福小网页,祝愿看到的所有人好运安康!(附上完整源码,需要的小伙伴自取即可) 目录 写在前面 效果展示 代码展示 HTML cs

    2024年02月02日
    浏览(74)
  • 大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS

    临近期末,大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等,简直让人头大。你还在为网页设计老师的作业要求感到头大?网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题。你想要解决

    2024年02月03日
    浏览(63)
  • 制作一个简单HTML个人网页网页(HTML+CSS)源码

    一个简单的HTML网页,可用于大学html期末作业,照片都是网上找的 看一下成品图: 主页代码,这里的link href=\\\"images/css.css\\\" rel=\\\"stylesheet\\\" type=\\\"text/css\\\" /是引入css样的,images里面装的是css文件(完整源码见文末)  

    2024年02月11日
    浏览(64)
  • HTML基本网页制作

    一、制作工商银行电子表单 二、制作李白诗词页面 三、制作热门电影页面

    2024年02月04日
    浏览(42)
  • HTML+CSS简单的网页制作期末作业——浙江旅游景点介绍网页制作

    家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套、浮动、margin、border、background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大学学习的前端知识点和布局方式都有运用,CSS的代码量也很足、很细致,使用hover来完成

    2024年02月04日
    浏览(48)
  • HTML前端静态网页制作

    在制作网页之前,首先先分析网页是那些部分组成,可以从以下的代码看出,分为头部、导航栏、logo部分、文字部分等等这些组成。多的不说,直接上代码,本次静态网页代码分为html和css部分。  在css部分,每一个小部分都写有注释,可能写得不太好,仅供参考。  效果如

    2024年02月03日
    浏览(56)
  • 一个简单的HTML网页(千与千寻电影) 大二学生网页设计与制作 电影主题网页制作

    HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 1 网页简介 :此作品为学生个人主页网页设计题材

    2024年02月06日
    浏览(51)
  • 七分钟学会 HTML 网页制作

    点击打开视频讲解更加详细 Hyper Text Markup Language(超文本标记语言) 标签控制排版 体积小,方便传输 推荐使用:VS Code 起始行 !DOCTYPE html 告诉浏览器这是一个HTML文档 开始标签 html 结束标签 /html html根标签,标签都是成对出现的,标签中可以嵌套文本或其他标签 head 中定义文

    2024年02月11日
    浏览(103)
  • 电影网页制作HTML+CSS

    网页思路: 在正式编写前,给网页结构大致划分出导航栏(nav)、内容(content)、底部(footer)等div布局 布局好之后,再在CSS文件中,完整详细的补充div盒子的宽、高、背景颜色等样式。由于网页的元素分为内联元素和块状元素,有时候适当的使用display属性转换。 其实不管

    2024年02月05日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包