HTML+CSS+JS网页设计与制作摄影类个人网页
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">能够</span><span style="color: black;">运用</span>网页三剑客html+css+js实现网页设计与制作,页面排版布局高端大气。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">运用</span>HTML+CSS页面布局设计,HTML+CSS+JS网页设计与制作摄影类个人网页,这是一个<span style="color: black;">优秀</span>的个人网页制作。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">凭借简约的设计风格、精湛的制作工艺,突破与创新的理念。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">个人网站、个人博客、个人介绍、摄影作品、<span style="color: black;">照片</span>画廊展示等个人网站的设计与制作。</span></p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-axegupay5k/136b50102507431aa0d882db2bd6faf2~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722663834&x-signature=Ma8mQBUWfUe0YtBaWJfBk1kVTd4%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/fddaa93e4ed342f8994ef0685b99a74e~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722663834&x-signature=gQBiIE%2B1FWUw9uKPFHddb2f4nE8%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/61bd5705995c48c5b488e164ef780335~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722663834&x-signature=12QtOeY7qo1F3Ym4Yo832aAWgaY%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/8c0b6c9679f6424b99687aacc87220a5~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722663834&x-signature=SjjtMhLzD%2FOms9MZX7Oy7ajU9zo%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/d5616bd3ac524dce8309d531011c0301~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722663834&x-signature=0j%2FORMZbDhhOmStlrJx29vWiXg4%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">网站介绍</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">1、网站程序:<span style="color: black;">重点</span><span style="color: black;">运用</span>网页三剑客html+css+javaScript实现网页设计与制作,完成网站的功能设计。制作适用于任何浏览器或设备的精美网站。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">2、网站布局:<span style="color: black;">重点</span>采用浮动布局。兼容各大主流浏览器、<span style="color: black;">表示</span>效果稳定。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">3、网站文件:网站系统文件种类<span style="color: black;">包括</span>html网页结构文件、css网页样式文件、js网页特效文件、images网页<span style="color: black;">照片</span>文件等。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">4、网站素材:搜集或制作适合网页风格和尺寸的<span style="color: black;">照片</span>,追求<span style="color: black;">优秀</span>视觉体验。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">5、网页编辑:网页作品代码简单,可<span style="color: black;">运用</span>任意HTML编辑软件(如:Dreamweaver、HBuilder、Sublime 、Vscode 、Notepad++ 、Webstorm、Text 等任意编辑软件进行编辑修改等操作)。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">6、网页效果预览:双击html文件<span style="color: black;">或</span>拖拽html文件到浏览器打开,<span style="color: black;">就可</span>预览当前网页效果。</span></p>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">网站亮点</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">1、视觉设计:排版布局极简设计,<span style="color: black;">优秀</span>的视觉体验等。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">2、动效交互:幻灯效果、入场动画、按钮点击、视差功能、锚点功能、<span style="color: black;">照片</span>画廊功能、英文断行等。</span></p>
<div style="color: black; text-align: left; margin-bottom: 10px;">
重播
<div style="color: black; text-align: left; margin-bottom: 10px;">播放</div>
<span style="color: black;">00:00</span>
<span style="color: black;">/</span>
<span style="color: black;">00:00</span>
<span style="color: black;">直播</span>
<div style="color: black; text-align: left; margin-bottom: 10px;">
<div style="color: black; text-align: left; margin-bottom: 10px;">00:00</div>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;">进入全屏</div>
<div style="color: black; text-align: left; margin-bottom: 10px;">50</div>
<div style="color: black; text-align: left; margin-bottom: 10px;">点击按住可拖动视频</div>
</div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">网站文件目录</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">(1)index.html:首页html;</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">(2)style:静态资源目录,存放css网页样式文件、js网页特效文件、images网页<span style="color: black;">照片</span>文件等;</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">其中:</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">(1)css文件夹:存放网页所有css样式表文件文件;</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">(2)images文件夹:存放网页所有<span style="color: black;">照片</span>资源文件;</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">(3)js文件夹:存放网页所有网页特效文件;</span></p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/703684f7d499464a93a7ed9cbffe0017~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722663834&x-signature=pIMUV%2B7mo4Svwu9IUMgEoAml60Q%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/aab9533d55e64f988cb452e7620233b8~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722663834&x-signature=Dmq3v9ZpDi0UK3CqPQNu%2FeHuUs0%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/40448ec4d4df4ca294213916c783cb9a~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722663834&x-signature=23sn9HRHZFp5igjkBf626RuSfLs%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">网站源码</h1><span style="color: black;"><<span style="color: black;">head</span>></span>
<span style="color: black;"><<span style="color: black;">meta</span> <span style="color: black;">charset</span>=<span style="color: black;">"UTF-8"</span> /></span>
<span style="color: black;"><<span style="color: black;">meta</span> <span style="color: black;">name</span>=<span style="color: black;">"viewport"</span> <span style="color: black;">content</span>=<span style="color: black;">"width=device-width, initial-scale=1.0"</span> /></span>
<span style="color: black;"><<span style="color: black;">meta</span> <span style="color: black;">http-equiv</span>=<span style="color: black;">"X-UA-Compatible"</span> <span style="color: black;">content</span>=<span style="color: black;">"ie=edge"</span> /></span>
<span style="color: black;"><<span style="color: black;">title</span>></span>木番薯科技(公众号)<span style="color: black;"></<span style="color: black;">title</span>></span>
<span style="color: black;"><<span style="color: black;">meta</span> <span style="color: black;">name</span>=<span style="color: black;">"keywords"</span> <span style="color: black;">content</span>=<span style="color: black;">"木番薯科技,公众号,极速建站,木番薯科技(公众号)极速建站,企业快速建站"</span>></span>
<span style="color: black;"><<span style="color: black;">meta</span> <span style="color: black;">name</span>=<span style="color: black;">"description"</span> <span style="color: black;">content</span>=<span style="color: black;">"木番薯科技(公众号)极速建站,<span style="color: black;">持有</span>5年中外知名企业建站经验"</span>></span>
<span style="color: black;"><<span style="color: black;">link</span> <span style="color: black;">type</span>=<span style="color: black;">"text/css"</span> <span style="color: black;">href</span>=<span style="color: black;">"style/css/vender.css"</span> <span style="color: black;">rel</span>=<span style="color: black;">"stylesheet"</span>/></span>
<span style="color: black;"><<span style="color: black;">link</span> <span style="color: black;">type</span>=<span style="color: black;">"text/css"</span> <span style="color: black;">href</span>=<span style="color: black;">"style/css/app.css"</span> <span style="color: black;">rel</span>=<span style="color: black;">"stylesheet"</span>/></span>
<span style="color: black;"><<span style="color: black;">link</span> <span style="color: black;">type</span>=<span style="color: black;">"text/css"</span> <span style="color: black;">href</span>=<span style="color: black;">"style/css/others.css"</span> <span style="color: black;">rel</span>=<span style="color: black;">"stylesheet"</span>/></span>
<span style="color: black;"><<span style="color: black;">link</span> <span style="color: black;">href</span>=<span style="color: black;">"style/css/font-awesome.min.css"</span> <span style="color: black;">rel</span>=<span style="color: black;">"stylesheet"</span> /></span>
<span style="color: black;"><<span style="color: black;">link</span> <span style="color: black;">href</span>=<span style="color: black;">"style/css/editorPageStyle.css"</span> <span style="color: black;">rel</span>=<span style="color: black;">"stylesheet"</span> /></span>
<span style="color: black;"></<span style="color: black;">head</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">id</span>=<span style="color: black;">"aEUOSHbQ"</span> <span style="color: black;">data-key</span>=<span style="color: black;">""</span> <span style="color: black;">data-window_width</span>=<span style="color: black;">"true"</span> <span style="color: black;">data-limit_width</span>=<span style="color: black;">"true"</span> <span style="color: black;">data-stick-parent</span>=<span style="color: black;">""</span> <span style="color: black;">class</span>=<span style="color: black;">"layout_group"</span> <span style="color: black;">style</span>=<span style="color: black;">"bac<span style="color: black;">公斤</span>round-color: rgb(158, 215, 255);"</span>></span>
<span style="color: black;"><!----></span>
<span style="color: black;"><<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">section</span> <span style="color: black;">data-effect</span>=<span style="color: black;">"fixed"</span> <span style="color: black;">data-size</span>=<span style="color: black;">"contain"</span> <span style="color: black;">data-pos</span>=<span style="color: black;">"cl"</span> <span style="color: black;">class</span>=<span style="color: black;">"layout_bg layout_bg_pc"</span> <span style="color: black;">style</span>=<span style="color: black;">"bac<span style="color: black;">公斤</span>round-image: url(style/images/1660620034353.png);"</span>></span>
<span style="color: black;"><<span style="color: black;">img</span> <span style="color: black;">src</span>=<span style="color: black;">"style/images/1660620034353.png"</span> <span style="color: black;">style</span>=<span style="color: black;">"opacity: 0;"</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"layout_bg-mask"</span> <span style="color: black;">style</span>=<span style="color: black;">"bac<span style="color: black;">公斤</span>round-color: rgba(255, 255, 255, 0);"</span>></span><span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"></<span style="color: black;">section</span>></span>
<span style="color: black;"><<span style="color: black;">section</span> <span style="color: black;">data-effect</span>=<span style="color: black;">"fixed"</span> <span style="color: black;">data-size</span>=<span style="color: black;">"contain"</span> <span style="color: black;">data-pos</span>=<span style="color: black;">"tl"</span> <span style="color: black;">class</span>=<span style="color: black;">"layout_bg layout_bg_mo"</span> <span style="color: black;">style</span>=<span style="color: black;">"bac<span style="color: black;">公斤</span>round-image: url(style/images/1660631523882.png);"</span>></span>
<span style="color: black;"><<span style="color: black;">img</span> <span style="color: black;">src</span>=<span style="color: black;">"style/images/1660631523882.png"</span> <span style="color: black;">style</span>=<span style="color: black;">"opacity: 0;"</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"layout_bg-mask"</span> <span style="color: black;">style</span>=<span style="color: black;">"bac<span style="color: black;">公斤</span>round-color: rgba(255, 255, 255, 0);"</span>></span><span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"></<span style="color: black;">section</span>></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">section</span> <span style="color: black;">class</span>=<span style="color: black;">"layout_limit_wrapper"</span>></span>
<span style="color: black;"><<span style="color: black;">section</span> <span style="color: black;">class</span>=<span style="color: black;">"layout_container"</span>></span>
<span style="color: black;"><<span style="color: black;">section</span> <span style="color: black;">class</span>=<span style="color: black;">"layout_body"</span>></span>
<span style="color: black;"><<span style="color: black;">section</span> <span style="color: black;">id</span>=<span style="color: black;">"PMvyFKDU"</span> <span style="color: black;">data-type-detail</span>=<span style="color: black;">"custom"</span> <span style="color: black;">data-justify_center</span>=<span style="color: black;">"left"</span> <span style="color: black;">data-mo_justify_center</span>=<span style="color: black;">"center"</span> <span style="color: black;">data-align_center</span>=<span style="color: black;">"top"</span> <span style="color: black;">class</span>=<span style="color: black;">"layout"</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"layout-margin_placeholder_top"</span>></span><span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">section</span> <span style="color: black;">data-animate</span>=<span style="color: black;">"0"</span> <span style="color: black;">data-key</span>=<span style="color: black;">""</span> <span style="color: black;">data-col</span>=<span style="color: black;">"100"</span> <span style="color: black;">data-stick-parent</span>=<span style="color: black;">""</span> <span style="color: black;">class</span>=<span style="color: black;">"row"</span>></span>
<span style="color: black;"><<span style="color: black;">section</span> <span style="color: black;">id</span>=<span style="color: black;">"PWAtJZgj"</span> <span style="color: black;">class</span>=<span style="color: black;">"col editor_wrapper col-100 animated"</span> <span style="color: black;">style</span>=<span style="color: black;">"border-radius: 0px; bac<span style="color: black;">公斤</span>round-color: rgba(255, 255, 255, 0); visibility: visible;"</span>></span>
<span style="color: black;"><!----></span>
<span style="color: black;"><<span style="color: black;">section</span> <span style="color: black;">class</span>=<span style="color: black;">"editor ck-content"</span>></span>
<span style="color: black;"><<span style="color: black;">p</span>></span><span style="color: black;"><<span style="color: black;">span</span> <span style="color: black;">class</span>=<span style="color: black;">"text-84 font-family"</span> <span style="color: black;">style</span>=<span style="color: black;">"font-size:84px;color:rgb(255,255,255);font-family:Poppins-Bold;"</span>></span>Fashion<span style="color: black;"></<span style="color: black;">span</span>></span>
<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"><<span style="color: black;">p</span>></span><span style="color: black;"><<span style="color: black;">span</span> <span style="color: black;">class</span>=<span style="color: black;">"text-20 font-family"</span> <span style="color: black;">style</span>=<span style="color: black;">"font-size:20px;color:rgb(255,255,255);font-family:Poppins-Bold;"</span>></span>时尚街拍<span style="color: black;"></<span style="color: black;">span</span>></span>
<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"></<span style="color: black;">section</span>></span>
<span style="color: black;"><!----></span>
<span style="color: black;"><!----></span>
<span style="color: black;"><!----></span>
<span style="color: black;"></<span style="color: black;">section</span>></span>
<span style="color: black;"><!----></span>
<span style="color: black;"><!----></span>
<span style="color: black;"></<span style="color: black;">section</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"layout-margin_placeholder_bottom"</span>></span><span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"></<span style="color: black;">section</span>></span>
<span style="color: black;"><<span style="color: black;">section</span> <span style="color: black;">id</span>=<span style="color: black;">"ewHRQytA"</span> <span style="color: black;">data-type-detail</span>=<span style="color: black;">"custom"</span> <span style="color: black;">data-justify_center</span>=<span style="color: black;">"right"</span> <span style="color: black;">data-mo_justify_center</span>=<span style="color: black;">"center"</span> <span style="color: black;">data-align_center</span>=<span style="color: black;">"top"</span> <span style="color: black;">class</span>=<span style="color: black;">"layout"</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"layout-margin_placeholder_top"</span>></span><span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">section</span> <span style="color: black;">data-animate</span>=<span style="color: black;">"0"</span> <span style="color: black;">data-key</span>=<span style="color: black;">""</span> <span style="color: black;">data-col</span>=<span style="color: black;">"100"</span> <span style="color: black;">data-stick-parent</span>=<span style="color: black;">""</span> <span style="color: black;">class</span>=<span style="color: black;">"row"</span>></span>
<span style="color: black;"><<span style="color: black;">section</span> <span style="color: black;">id</span>=<span style="color: black;">"ptOYCsKM"</span> <span style="color: black;">class</span>=<span style="color: black;">"col editor_wrapper col-100 animated"</span> <span style="color: black;">style</span>=<span style="color: black;">"border-radius: 0px; bac<span style="color: black;">公斤</span>round-color: rgba(255, 255, 255, 0); visibility: visible;"</span>></span>
<span style="color: black;"><!----></span>
<span style="color: black;"><<span style="color: black;">section</span> <span style="color: black;">class</span>=<span style="color: black;">"editor ck-content"</span>></span>
<span style="color: black;"><<span style="color: black;">p</span>></span><span style="color: black;"><<span style="color: black;">span</span> <span style="color: black;">class</span>=<span style="color: black;">"font-family"</span> <span style="color: black;">style</span>=<span style="color: black;">"color:rgb(255,255,255);font-family:Poppins-Regular;"</span>></span>Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Et
molestie habitant enim, dignissim et, consectetur egestas
in. Dignissim viverra lectus cras elementum.<span style="color: black;"></<span style="color: black;">span</span>></span><span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"></<span style="color: black;">section</span>></span>
<span style="color: black;"><!----></span>
<span style="color: black;"><!----></span>
<span style="color: black;"><!----></span>
<span style="color: black;"></<span style="color: black;">section</span>></span>
<span style="color: black;"><!----></span>
<span style="color: black;"><!----></span>
<span style="color: black;"></<span style="color: black;">section</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"layout-margin_placeholder_bottom"</span>></span><span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"></<span style="color: black;">section</span>></span>
<span style="color: black;"></<span style="color: black;">section</span>></span>
<span style="color: black;"></<span style="color: black;">section</span>></span>
<span style="color: black;"></<span style="color: black;">section</span>></span>
<span style="color: black;"><!----></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
网站建设seio论坛http://www.fok120.com/ 论坛的成功是建立在我们诚恳、务实、高效、创新和团结合作基础上,我们要把这种精神传递下去。 你的话语如春风拂面,让我心生暖意。 软文发布平台 http://www.fok120.com/
页:
[1]