摄影圈子 hqmana.com

学生个人网页设计作品:基于HTML+CSS+JavaScript实现摄影艺术网站 DIV布局简单的摄影主题网站



网页题目

茶文化网站、️‍中华传统文化题材、京剧文化水墨风书画、xx民间年画文化艺术网站 、等网站的设计与制作。


️网页描述

️ 这个首页代码运用了DIV盒子的使用方法,如盒子的嵌套、浮动、margin、border、background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大学学习的前端知识点和布局方式都有运用,CSS的代码量也很足、很细致,使用hover来完成过渡效果、鼠标滑过效果等,使用表格、表单补充模块,为方便新手学习, 个别源码页面中没有使用js有需要的可以自行添加。


网页效果


️ 代码实现

🧱HTML结构代码



<html>
<head>
<meta charset="utf-8">
<meta name="author">
<meta name="keywords" content="个人网站,个人作品集">
<link type="text/css" rel="stylesheet" href="css/css.css">
<title>艺臻创意摄影工作室</title>
</head>

<body class="index_bg">
  <img id="zz" style="position: absolute; z-index: -1; width: 100%;height: 100%;" src="picture/tuan.jpg" alt="">
  
  <div class="wrapin">
  <div class="ind_tit">艺臻创意摄影工作室<br>
  <p style="font-size:17px">Yizhen creative photography studio</p>
  </div>
  <a href="exhibition.html" class="nav nav1">Photography Exhibition</a> 
  <a href="contact.html" class="nav nav2">Contact</a> 
  <a href="Introduction.html" class="nav nav3">Introduction </a> 
  <a href="infomation.html" class="nav nav4">Infomation</a>
  <div class="ind_text">
    <p class="te1">Anything, for whatever reason</p>
    <p class="te2">that excites me,I shoot it.</p>
    <p class="te3"> I'm not looking for unusual subjects, but to turn them into unusual works.</p>
  </div>
</div>
</body>
</html>




更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “点赞” “️评论” “收藏” 一键三连哦!

2.【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!

3.

以上内容技术相关问题欢迎一起交流学习

版权声明
本文为[灬IT狂奔的老牛]所创,转载请带上原文链接,感谢
https://zekun.blog.csdn.net/article/details/126832142

Scroll to Top