留下美好瞬间,欣赏大千世界----- 摄影图片分享网站

2024-04-29 21:58

本文主要是介绍留下美好瞬间,欣赏大千世界----- 摄影图片分享网站,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

随着人们的收入水平也越来越高,物质水平也相应的提升,大家都有更多的时间和收入去做一些自己喜欢的事情,摄影作为一门艺术受到了很多人的喜爱,照片也成为了人们分享生活,保存美好的一种方式 。

一、项目前提--知识掌握点

  1. 掌握HTML语义化标签;
  2. 掌握css基本语法;
  3. 掌握css选择器的使用;
  4. 掌握css盒子模型;
  5. 掌握css浮动;

二、网站简介

本网站开发包含首页、风景篇、美食篇、人物篇、联系我们等5大页面组成。每个页面都包含了导航栏、主要界面及底部联系信息。   

每个人页面基本上都有导航栏和底部联系信息, 所以  今日主要分享一下导航栏、底部联系信息和首页里的一个分享栏。

    1、导航栏

 包含logo、搜索框、搜索按钮、以及导航列表。当用户点击导航列表时可以跳转到对应页面。当向下滑动网页时,导航栏会跟着一起向下滑动。当鼠标放置到对应的标题上是,会展示出对应的二级菜单。

技术点:列表标签,图片标签,表单元素,浮动。

 HTML代码如下:

<body><div  ><!-- 导航栏 --><div class="nav"><img src="images/img/logo.png"><ul class="nav_text"><li class="search-li"><input class="search" value="请输入搜索内容"  ><button  class="seaech_btn">搜索</button><!-- <input type="submit" value="搜索" class="seaech_btn"> --></li><li><a href="index.html">首页</a></li><li><a href="scenery.html">风景篇</a><ul class="nav_list"><li><a href="tibetan.html">藏区</a></li><li><a href="sea.html">大海</a></li><li><a href="mountain.html">高山</a></li><li><a href="snow.html">雪地</a></li></ul></li><li><a href="food.html">美食篇</a><ul class="nav_list"><li><a href="#">川菜</a></li><li><a href="#">粤菜</a></li><li><a href="#">徽菜</a></li><li><a href="#">浙菜</a></li></ul></li><li><a href="perple.html">人物篇</a><ul class="nav_list"><li><a href="#">球星</a></li><li><a href="#">歌星</a></li><li><a href="#">演员</a></li><li><a href="#">名人</a></li></ul></li><li><a href="content.html">联系我们</a></li></ul></div>

css样式界面:

* {padding: 0px;margin: 0px;
}body {/* width: 1200px; */font-family: "微软雅黑";margin: 20px auto;/* background-color:rgba(255, 250, 205,0.5) ; */
}.nav {position: sticky;width: 100%;height: 100px;/* position: sticky; */top: 0;z-index:9999;background-color:rgba(255,255,255,0.8);
}.nav img {height: 90px;margin-left: 150px;float: left;}
.nav .nav_text {margin-right: 45px;float: right;margin-top: 30px;
}.nav .nav_text li {list-style: none;float: left;padding:0px 20px;position: relative;
}
.nav_text>li:hover .nav_list{/* display: block; */opacity: 0.8;}
.nav_list a:hover{color: skyblue;
}
.nav a {text-decoration: none;color: black;font-size: 20px;
}
.nav_text>li>a:hover{color: red;
}
.nav_list{border-radius: 5px;width: 90px;position: absolute;top: 30px;background-color: tomato;z-index: 9999;margin-left: -10px;opacity: 0;/* 设置一个div元素的透明度级别: *//* display: none; */
}
.nav_list li{float: left;margin: 10px 0;/* padding: 2px 10px; */text-align: center;
}
.search-li{margin-right: 40px;
}.search{height: 35px;width: 320px;border: 1px solid grey;
}
.seaech_btn{width: 45px;height: 35px;
}

2、分享栏

包含微博、微信、支付宝、QQ分享。位于首页的右侧,垂直排列。当向下滑动网页时,导航栏会跟着一起向下滑动。

技术点:图片标签,表单元素,定位,浮动。

                                                                                  

 HTML代码如下:

  <!-- 分享 --><div class="share"><img src="images/img/share1.png" alt=""><p>分享</p><img src="images/img/share2.png" alt=""><p>分享</p><img src="images/img/share3.png" alt=""><p>分享</p><img src="images/img/share4.png" alt=""><p>分享</p></div>

css样式界面:

 .share {height: 500px;width: 60px;position: fixed;left: 100%;margin-left: -50px;bottom: 0px;z-index: 100;}.share img {width: 40px;height: 40px;}.share p {font-size: 10px;padding-left: 5px;}

3、底部信息联系:

       包括联系信息、二维码、以及留言板

技术点:标题标签,文字标签,表单及表单元素

<div class="footer"><!-- 使用 <hr> 标签进行分隔: --><hr class="hr1"><div class="footer-left"><h1>联系我们</h1><hr class="hr2" style=><p>摄影是指使用某种专门设备进行影像记录的过程,一般我们使用机械照相机或者数码照相机进行摄影。有时摄影也会被称为照相,也就是通过物体所发射或反射的光线使感光介质曝光的过程。</p><p>地址:重庆市合川区学府路09号</p><p>电话:18225353790</p><p>邮箱:yanghongling@wedutech.com</p><div class="lx"><div class="ewm"><p>关注我们:</p><img src="images/img/ewm.png"></div><div class="wx"><p>微信联系:</p><img src="images/img/wx.jpg"></div></div></div><div class="footer-right"><h3>在线留言</h3><div><ul><li><span>您的称呼</span><div class="div_input"><input type="text" name="name" id="name" placeholder="您的称呼"></div><!--  placeholder带有占位符文本的文本区域:写内容 --></li><li><span>您的电话</span><div class="div_input"><input type="text" name="tel" id="tel" value="您的电话"></div></li><li class="li_last"><span>需求和建议</span><div class="div_input"><textarea name="content" placeholder="请写下你的需求和建议"></textarea></div></li></ul><div class="btn"><input type="submit" value="提交" id="tj"></div></div></div><div class="copy"><p>Copyright © 2020.Company name All rights reserved.</p></div></div>

css样式界面:

.footer{clear: both;width: 90%;margin: 80px 65px;margin-bottom: 0px;position: relative;color:#353535;
}
.hr1{margin: 35px 30px;width: 90%;border: none;height:1px;background-color: pink;
}
.footer-left{width: 40%;padding-left: 40px;
}
.footer-left h1{font-size: 30px;
}
.hr2{width: 115px;border: solid 2px;margin-top: 15px;
}
.footer-left p{margin-top: 40px;}
.footer-left>p:nth-of-type(1){line-height: 35px;
}
.lx{position: relative;width: 400px;height: 200px;
}
.lx img{width: 150px;height: 150px;
}
.wx{position: absolute;left:200px;bottom: 30px;
}
.footer-right{width: 377px;height: 513px;padding: 0px 25px;border: 1px solid  rgba(0, 0, 0, 0.1);position: absolute;left:713px;top:80px ;
}
.footer-right h3{text-align: center;font-size: 1.25rem;margin: 50px 0px;
}
ul {list-style: none;
}
.footer li{margin: 10px 1rem;width: 156px;height: 86px;float: left;}
.footer-right span{display: block;width:156px;margin-bottom: 10px;
}
#name,#tel{width: 140px;height: 46px;padding: 0px 15px;
}
.li_last{width: 530px;height: 228px;
}
.div_input input,.div_input textarea{border: 1px solid  rgba(0, 0, 0, 0.2);
}
.div_input textarea{width: 364px;height: 188px;
}
.btn,#tj{display: inline-block;width: 110px;line-height: 34px;background: tomato;color: #fff;text-align: center;border: 0;position: absolute;top: 230px;left: 75px;margin-top: 5px;
}
.copy{clear: both;background-color: rgba(192, 192, 192, 0.6);border-top: 2px dotted #fff;text-align: center;padding: 20px 0px;text-align: center;
}

三、注意事项

  1. 首先弄清楚页面的组成部分,弄清楚每个模块内容,开发过程中请可以参照页面的三大组成部分,头部,身体,底部的思想进行,每一个部分的开发结合盒子模型的思想进行布局。
  2. 在开发过程中应用W3Cshool文档进行查询。

W3Cshool查询链接:https://www.w3school.com.cn/html/index.asp

总结 :

这就是今日的分享,希望今天的分享对你们有所帮助!

这篇关于留下美好瞬间,欣赏大千世界----- 摄影图片分享网站的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/947257

相关文章

Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

《PythonFastAPI+Celery+RabbitMQ实现分布式图片水印处理系统》这篇文章主要为大家详细介绍了PythonFastAPI如何结合Celery以及RabbitMQ实现简单的分布式... 实现思路FastAPI 服务器Celery 任务队列RabbitMQ 作为消息代理定时任务处理完整

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当

详解C#如何提取PDF文档中的图片

《详解C#如何提取PDF文档中的图片》提取图片可以将这些图像资源进行单独保存,方便后续在不同的项目中使用,下面我们就来看看如何使用C#通过代码从PDF文档中提取图片吧... 当 PDF 文件中包含有价值的图片,如艺术画作、设计素材、报告图表等,提取图片可以将这些图像资源进行单独保存,方便后续在不同的项目中使

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件(图片)的预览和下载 @ApiOperation("访问文件") @GetMapping("

基于Python开发批量提取Excel图片的小工具

《基于Python开发批量提取Excel图片的小工具》这篇文章主要为大家详细介绍了如何使用Python中的openpyxl库开发一个小工具,可以实现批量提取Excel图片,有需要的小伙伴可以参考一下... 目前有一个需求,就是批量读取当前目录下所有文件夹里的Excel文件,去获取出Excel文件中的图片,并

Java实现数据库图片上传与存储功能

《Java实现数据库图片上传与存储功能》在现代的Web开发中,上传图片并将其存储在数据库中是常见的需求之一,本文将介绍如何通过Java实现图片上传,存储到数据库的完整过程,希望对大家有所帮助... 目录1. 项目结构2. 数据库表设计3. 实现图片上传功能3.1 文件上传控制器3.2 图片上传服务4. 实现

Python解析器安装指南分享(Mac/Windows/Linux)

《Python解析器安装指南分享(Mac/Windows/Linux)》:本文主要介绍Python解析器安装指南(Mac/Windows/Linux),具有很好的参考价值,希望对大家有所帮助,如有... 目NMNkN录1js. 安装包下载1.1 python 下载官网2.核心安装方式3. MACOS 系统安

Java实现数据库图片上传功能详解

《Java实现数据库图片上传功能详解》这篇文章主要为大家详细介绍了如何使用Java实现数据库图片上传功能,包含从数据库拿图片传递前端渲染,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、前言2、数据库搭建&nbsChina编程p; 3、后端实现将图片存储进数据库4、后端实现从数据库取出图片给前端5、前端拿到

Python使用PIL库将PNG图片转换为ICO图标的示例代码

《Python使用PIL库将PNG图片转换为ICO图标的示例代码》在软件开发和网站设计中,ICO图标是一种常用的图像格式,特别适用于应用程序图标、网页收藏夹图标等场景,本文将介绍如何使用Python的... 目录引言准备工作代码解析实践操作结果展示结语引言在软件开发和网站设计中,ICO图标是一种常用的图像

Java嵌套for循环优化方案分享

《Java嵌套for循环优化方案分享》介绍了Java中嵌套for循环的优化方法,包括减少循环次数、合并循环、使用更高效的数据结构、并行处理、预处理和缓存、算法优化、尽量减少对象创建以及本地变量优化,通... 目录Java 嵌套 for 循环优化方案1. 减少循环次数2. 合并循环3. 使用更高效的数据结构4