前端基础——做相册、诗词
2024-05-12 10:03:53
多列布局
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多列布局</title><style>.box1 {width: 400px;height: 800px;float: left;background-color: gray;text-align: center;}.box2 {width: 1100px;height: 800px;float: right;}.box3 {width: 1100px;height: 400px;float: left;}.box4 {width: 1100px;height: 400px;float: left;}.box5 {font-weight: bold;font-size: 20px;line-height: 60px;}.text {position: relative;left: 10px;line-height: 30px;}</style>
</head><body><div class="box1"><span style="color: white;font-size: 100px;font-weight: bold;">logo</span><p style="color: white;">某某摄影专辑</p><div class="box5"><p> </p><p>网站首页</p><p>咨询中心</p><p>产品展示</p><p>关于我们</p><p>联系我们</p></div></div></div><div class="box2"><div class="box3"><img src="F:\vs code\images\banner.jpg" height="350px" width="1100px"><p style="font-size: larger;">当前位置：首页 > 关于我们</p></div><div class="box4"><hr /><img src="F:\vs code\images\01.jpg" style="float: left; height: 200px;width: 350px;"><p class="text">水墨（风格）摄影和传统的水墨画一样，现市面上出现的水墨摄影作品，按题材，可以分为风景和花鸟，对应国画中的山水画和花鸟画；按手法和意境，可以分为抽象和具象，对应国画中的写意和工笔。 水墨风格的摄影照片虽然免不了使用Photoshop等软件的后期加工，但是这并不意味着可以任意扭曲原照片。全息摄影是指一种记录被摄物体反射波的振幅和位相等全部信息的新型摄影技术。普通摄影是记录物体面上的光强分布，它不能记录物体反射光的位相信息，因而失去了立体感。全息摄影采用激光作为照明光源，并将光源发出的光分为两束，一束直接射向感光片，另一束经被摄物的反射后再射向感光片。人眼直接去看这种感光的底片，只能看到像指纹一样的干涉条纹，但如果用激光去照射它，人眼透过底片就能看到原来被拍摄物体完全相同的三维立体像。一张全息摄影图片即使只剩下一小部分，依然可以重现全部景物。全息摄影可应用于工业上进行无损探伤，超声全息，全息显微镜，息摄影存储器,全息电影和电视等许多方面。</p></div></div></body></html>诗词
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.box {font-size: 25pt;font-weight: bolder;}.box1 {font-size: 10pt;color: deepskyblue;}.box2 {color: rgb(22, 120, 247);font-size: 18pt;}.box3 {font-size: 10pt;color: rgb(50, 247, 11);}.box4 {font-size: 18pt;color: rgb(255, 87, 87);}.box5 {font-size: 15pt;color: rgb(218, 205, 205);}.box6 {font-size: 21pt;color: rgb(50, 247, 11);}.box7 {color: rgb(255, 87, 87);font-size: 25pt;}
</style><body><div align="center"><p class="box">沁园春·长沙<text class="box1">[毛泽东]</text></p><p class="box2">独立寒秋<text class="box3">湘江北去</text> 橘子洲头。</p><p class="box4">看万山红遍，层林尽染；<text class="box5">漫江碧透，</text> 百舸争流。</p><p class="box2">鹰击长空，<text class="box1">鱼翔浅底，</text>万类霜天竞自由。</p></p><p class="box4">怅寥廓，<text class="box6">问苍茫大地，谁主沉浮？</text></p><p class="box2">携来百侣曾游，忆往昔峥嵘岁月稠。</p><p class="box6">恰同学少年，风华正茂；书生意气，挥斥方遒。</p><p class="box2">指点江山，激扬文字，粪土当年万户侯。</p><p class="box4">曾记否，到中流击水，<text class="box4">浪遏</text><text class="box7">飞 舟 ？</text></p></div>
</body></html>相册
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人相册</title><style>.box1 {width: 700px;float: left;text-align: center;border: 5px solid white;}.box2 {width: 1500px;float: left;text-align: center;border: 5px solid white;}.box3 {background-color: gray;color: white;width: 100px;float: left;border: 5px solid white;}.box4 {width: 490px;height: 200px;float: left;border: 5px solid white;}.box5 {width: 490px;border: 5px solid white;background-color: whitesmoke;float: left;}</style>
</head><body><div class="box1"><div class="box3">艺术摄影</div><div class="box3">婚纱摄影</div><div class="box3">纪实摄影</div><div class="box3">儿童摄影</div><div class="box3">摄影器材</div><div class="box3">创意摄影</div></div><div class="box2"><img src="F:\vs code\images\objpic07.jpg" alt="" class="box4"><img src="F:\vs code\images\objpic02.jpg" alt="" class="box4"><img src="F:\vs code\images\objpic03.jpg" alt="" class="box4"><div class="box5">摄影艺术</div><div class="box5">摄影艺术</div><div class="box5">摄影艺术</div><img src="F:\vs code\images\objpic04.jpg" alt="" class="box4"><img src="F:\vs code\images\objpic05.jpg" alt="" class="box4"><img src="F:\vs code\images\objpic06.jpg" alt="" class="box4"><div class="box5">摄影艺术</div><div class="box5">摄影艺术</div><div class="box5">摄影艺术</div><img src="F:\vs code\images\objpic01.jpg" alt="" class="box4"><img src="F:\vs code\images\objpic08.jpg" alt="" class="box4"><img src="F:\vs code\images\objpic09.jpg" alt="" class="box4"><div class="box5">摄影艺术</div><div class="box5">摄影艺术</div><div class="box5">摄影艺术</div></div>
</body></html>前端基础——做相册、诗词相关推荐
- 前端基础：通过表单元素实践《健康体检单》
前端基础:通过表单元素实践<健康体检单> HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互. 一.项目说明 该项目是进行表格布局表 ...
- 前端基础：通过HTML表格标签布局《餐饮菜谱》
前端基础:通过HTML表格标签布局<餐饮菜谱> 布局,是前端工作的第一步,也是前端页面能够得到展示的技术手段.对于表格式布局是简单的页面布局的基础,它是无法解决浏览器兼容性问题,因此这种布 ...
- html表格联动,html前端基础：table和select操作
html前端基础:table和select操作 发布时间:2020-05-13 09:58:10 来源:亿速云 阅读:196 作者:Leah 这篇文章主要为大家详细介绍html前端基础中有关table ...
- element ui 图片控件 排序_JAVA全栈面试前端基础之四 Vue+Element框架快速开发
本文主要包括以下4个内容 什么是ElementUI Vue 中引入ElementUI Vue+elementUI构建后台管理系统 开源项目推荐 1.什么是ElementUI 官网:https://el ...
- boost log 能不能循环覆盖_前端基础进阶（十四）：深入核心，详解事件循环机制...
Event Loop JavaScript的学习零散而庞杂,很多时候我们学到了一些东西,但是却没办法感受到进步!甚至过了不久,就把学到的东西给忘了.为了解决自己的这个困扰,在学习的过程中,我一直在试图 ...
- gif透明背景动画_前端基础系列之bmp、jpg、png、gif、svg常用图片格式浅谈（二）...
IT客栈 作者:大腰子 bmp.jpg.png.gif.svg常用图片格式 之前为大家介绍了几种WEB前端常用的图片格式,对比了它们的特点,参见<前端基础系列之bmp.jpg.png.gif.s ...
- 前端基础知识整理汇总（中）
前端基础知识整理汇总(中) Call, bind, apply实现 // call Function.prototype.myCall = function (context) {context = ...
- 前端基础知识整理汇总（上）
前端基础知识整理汇总(上) HTML页面的生命周期 HTML页面的生命周期有以下三个重要事件: 1.DOMContentLoaded -- 浏览器已经完全加载了 HTML,DOM 树已经构建完毕,但是 ...
- jquery function_前端基础进阶（十三）详细图解jQuery扩展jQuery插件
UI 鉴赏 早几年学习前端,大家都非常热衷于研究jQuery源码. 我至今还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,"原来JavaScript居然可以 ...
最新文章
- Linux下stat + 文件名后, Access，Modify，Change的含义
- JSP生成验证码源程序
- VTK：图片之ImageTransparency
- 看你知道不知道之－制作数据字典
- 【渝粤题库】陕西师范大学400010 当代西方社会思潮评析 作业（专升本）
- python学到哪知道baseline_Python NLTK学习6（创建词性标注器）
- 20162309《程序设计与数据结构》第二学期课程总结
- linux从a自增10_C语言程序前后自增(++a、a++)在Linux下的实现机制
- DEV、SIT、UAT、PRD的意思
- 【我的Android进阶之旅】APK反编译教程和工具下载
- Python语言为何如此流行？
- 各双拼输入方案之间有明显的优劣之分吗？
- python泰坦尼克号数据预测_泰坦尼克号幸存者预测 python 详解
- 关于产品的一些思考——豌豆荚之应用下载
- eclipse快捷键以及使用技巧大全
- 【NAS】神经架构搜索概述
- html无序列表透明圆点,html无序列表的类型type
- 美国国防高级研究计划局（DARPA）组织管理运行机制分析
- 如何打破微信不能群发群消息的局限
- vPython窗口-原文完整翻译
热门文章
- linux写日历脚本,shell脚本实现日历的屏幕控制
- 鳄鱼战大象--疯狂之战
- excel表格内容拆分_3个动图，教你学会如何让excel表格自动拆分，学会它，小白变大神...
- h5手机页面注册处理(短信验证)
- Swift iOS macOS 如何 Localize StoryBoard，StoryBoard 本地化，添加多语言支持，基于 String
- 无需下载软件，有手就能做的线上个人简历
- 知名爆料者：新款MacBook Air采用类似iMac的多彩设计
- R语言数据可视化-箱线图
- python mysql_config not found_解决问题：OSError: mysql_config not found
- 网络技术| 说说计算机网络及IP地址 -- 网络基础 跳线制作 IP地址配置