学生个人网页设计作品：基于HTML+CSS+JavaScript实现摄影艺术网站 DIV布局简单的摄影主题网站????‍????网页题目✍️网页描述????网页效果⚙️ 代码实现????更多干货

198 阅读 0 评论 131 点赞

我是靠谱客的博主喜悦豆芽，这篇文章主要介绍学生个人网页设计作品：基于HTML+CSS+JavaScript实现摄影艺术网站 DIV布局简单的摄影主题网站????‍????网页题目✍️网页描述????网页效果⚙️ 代码实现????更多干货，现在分享给大家，希望可以做个参考。

????文章目录

????‍????网页题目
✍️网页描述
????网页效果
⚙️ 代码实现
- ????HTML结构代码
????更多干货

????‍????网页题目

????茶文化网站、????️‍????中华传统文化题材、京剧文化????水墨风书画、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>