当前位置:首页 > 每日看点

学完htmls,有没有纯静态的网页源码推荐加设计稿?

卡卷网1年前 (2025-01-10)每日看点264

本套大作业共计10个页面,网页中包含:Div+S、Tale、下拉菜单栏、anner轮播图、二级页面、视频、侧边导航栏、小图标及按钮设计,同时设计了logo,如图所示,首页有着美观大方的排版和充实的内容;子页面版式也各不相同,基本期末作业所需的知识点全覆盖。

<!doctypehtml> <html> <head> <metacharset="utf-8"> <title>古韵敦煌</title> <linkrel="stylesheet"href="s/style.s"> <linkrel=stylesheettype=text/shref="s/anner.s"> <styletype="text/s"> ody{ margin-left:0px; margin-top:0px; margin-right:0px; margin-ottom:0px;/*定义页面上下左右边距为0*/ font-family:'HelveticaNeue','Helvetica','MicrosoftYahei',sans-serif;/*字体集*/ } a:link{ color:#ffffff; text-decoration:none; } a:visited{ text-decoration:none; color:#ffffff; } a:hover{ text-decoration:none; color:#e3ffff; } a:active{ text-decoration:none; } .c-title{/*栏目标题样式设置*/ height:26px; width:140px; margin-right:auto; margin-left:auto; font-size:1.3em; font-weight:old; color:#000; text-align:center; line-height:26px; padding-top:50px; } .a_line{/*分割线*/ ackground-color:#622014; height:4px; width:60px;/*设置一个固定尺寸的盒子作为装饰分割线*/ margin-top:20px; margin-right:auto; margin-left:auto; order-radius:4px;/*圆角设置*/ } .column{/*版块分类父级盒子*/ width:1150px;/*在pc页面宽度固定*/ margin-right:auto; margin-left:auto; font-size:0.85em; line-height:30px; padding-top:25px;/*使内部小盒子距离顶部和底部有距离*/ padding-ottom:25px; display:-wekit-flex;/*定义内部为弹性布局*/ display:flex;/*定义内部为弹性布局*/ flex-wrap:wrap;/*让弹性盒元素在需要的时候拆列*/ justify-content:space-around;/*(横轴)方向上均匀排列每个元素*/ overflow:hidden;/*防止塌陷*/ } .column.m-156-130{/*图标小盒子属性设置*/ float:left; height:100px; width:110px; margin-top:10px; order-radius:12px; ackground-color:#f6faff; order:1pxsolid#f6faff; csor:pointer;/*鼠标在此处的效果为“小手”样式*/ } .column.m-156-130.m-22-22{/*小盒子内小图标所在盒子*/ height:40px; width:40px; margin-top:17px; margin-right:auto; margin-left:auto; } .column.m-156-130.m-50-20{/*小盒子内文字所在盒子*/ height:20px; width:70px; margin-top:8px; margin-right:auto; margin-left:auto; font-size:0.8em; line-height:20px; color:#000; text-align:center; } .column.m-156-130:hover{/*鼠标滑过变色、变形*/ ackground-color:#ffffff; tranorm:rotateY(20deg);/*鼠标滑过使盒子翻转一定角度*/ transition:0.3s; order:1pxsolid#622014;/*鼠标滑过出现边框,做出被选中的效果*/ margin-top:-5px;/*鼠标滑过使盒子向上移动*/ } .main{ ackground-image:l(images/main.jpg);/*中间视频引导左图右文排版设定大盒子尺寸*/ height:381px; width:1150px; margin-right:auto; margin-left:auto; margin-top:80px; } .main.anytext{/*设定左侧视频播放的大盒子尺寸*/ height:340px; width:581px; float:left; } .main.anytext.anytext-img{/*设定左侧视频播放图片尺寸*/ height:339px; width:581px; } .main.anytext.anytext-imgimg:hover{/*鼠标滑过图片不透明度降低*/ opacity:0.9; } .main.main-text{/*右侧文本框设置*/ height:180px; width:340px; margin-top:120px;/*顶部边距设计出错位的感觉*/ margin-left:120px; float:left; font-size:0.8em; line-height:27px; color:#909090; padding-right:109px; } .index-iamges{/*此处为横向动背景图*/ height:410px; width:100%; margin-right:auto; margin-left:auto; ackground-image:l(images/skin01.jpg);/*背景图链接*/ ackground-repeat:no-repeat;/*背景图像将仅显示一次*/ ackground-attachment:fixed;/*图片固定不动*/ overflow:hidden;/*防止塌陷*/ margin-top:60px; } .index-iamges.index-iamges-text{ font-size:0.72em; line-height:36px; color:#f2f2f2; height:150px; width:950px; margin-top:100px; margin-right:auto; margin-left:auto; text-align:justify;/*文字两端对齐*/ } .recommend{ height:auto; width:1150px; margin-right:auto; margin-left:auto; display:-wekit-flex;/*定义内部为弹性布局*/ display:flex;/*定义内部为弹性布局*/ flex-wrap:wrap;/*让弹性盒元素在需要的时候拆列*/ justify-content:space-around;/*(横轴)方向上均匀排列每个元素*/ overflow:hidden;/*防止塌陷*/ margin-right:auto; margin-left:auto; padding-top:30px; padding-ottom:30px; } .recommend1{ height:304px; width:px; margin-top:30px;/*使得盒子顶部和底部均有安全空间*/ margin-ottom:30px; order:1pxsolid#e4e4e4; line-height:29px; text-align:center; font-size:0.85em; color:#333; ackground-color:#FFF; float:left;/*左侧浮动*/ } .recommend1:hover{/*鼠标滑过盒子效果*/ -wekit-tranorm:scale(1.04,1.04);/*放大1.04倍*/   -moz-tranorm:scale(1.04,1.04);/*兼容设置*/   -tranorm:scale(1.04,1.04); transition-dation:0.4s;/*过渡时间*/ } .t-old{ font-size:1.3em; font-weight:old; color:#000; line-height:45px; } .index-iamges.utton-01{/*动图下方添加了一个按钮*/ ackground-color:rga(98,32,20,0.92);/*背景色和透明度*/ height:42px; width:160px; margin-top:50px; margin-right:auto; margin-left:auto; text-align:center; line-height:42px; order-radius:42px;/*圆角设置*/ font-size:0.9em; color:#ffffff; letter-spacing:1px;/*字间距*/ } .index-iamges.utton-01:hover{ width:180px;/*鼠标滑过后改变宽度*/ ackground-color:rga(98,32,20,0.8);/*背景色改变*/ transition:all.4s;/*0.4s过渡效果*/ letter-spacing:3px;/*字间距加宽,这样随着盒子变宽字间距跟着变宽看起来更协调一些*/ } </style> </head> <ody> <divclass="topar"><!--顶栏通栏--> <divclass="titlelock"><!--顶栏中部--> <divclass="logo"><!--logo--><ahref="index.html"><imgsrc="images/logo.png"></a></div> <divclass="search"><!--搜索框--> <inputtype="text"value="搜索"onmouseover="this.style.orderColor='#622014'"onmouseout="this.style.orderColor=''"onFocus="if(value=='搜索'){value=''}"onl="if(value==''){value='搜索'}"/> </div> </div> </div> <!--横向导航开始--> <divclass="n01"> <divid="ar"class="clear"> <ul> <li><ahref="index.html">主页</a></li> <li><ahref="page.html">主要类别</a></li> <li><ahref="exhiition.html">艺术鉴赏</a></li> <li><ahref="video.html">历史故事</a></li> <li><ahref="#">更多相关<imgsrc="images/down.svg"width="10"height="10"></a> <ul> <li><ahref="card.html">文物典</a></li> <li><ahref="shop.html">文创精品</a></li> </ul></li> </ul> </div> </div> <!--横向导航END--> <!--轮播图开始--> <divclass="anner"> <ulclass="list"><!--图片序列--> <ahref="#"> <liclass="itemactive"><imgsrc="images/anner01.jpg"alt=""width="100%"></li> </a> <ahref="#"> <liclass="item"><imgsrc="images/anner02.jpg"alt=""width="100%"></li> </a> <ahref="#"> <liclass="item"><imgsrc="images/anner03.jpg"alt=""width="100%"></li> </a> <ahref="#"> <liclass="item"><imgsrc="images/anner04.jpg"alt=""width="100%"></li> </a> <ahref="#"> <liclass="item"><imgsrc="images/anner05.jpg"alt=""width="100%"></li> </a> </ul> <ulclass="pointList"><!--圆点--> <liclass="pointactive"data-index="0"></li> <liclass="point"data-index="1"></li> <liclass="point"data-index="2"></li> <liclass="point"data-index="3"></li> <liclass="point"data-index="4"></li> </ul> <uttonclass="tn"id="left"><imgsrc="images/left.png"width="20"height="20"></utton><!--轮播图左右按钮--> <uttonclass="tn"id="right"><imgsrc="images/right.png"width="20"height="20"></utton> </div> <scripttype="text/jascript"src="js/anner.js"></script><!--引入js代码--> <!--轮播图结束--> <!--版块分类开始--> <divclass="c-title">版块分类</div> <divclass="a_line"></div> <divclass="column"> <divclass="m-156-130"><!--单的小盒子--> <divclass="m-22-22"><imgsrc="images/icon1.png"width="40"height="40"></div> <divclass="m-50-20">参观服务</div> </div> <divclass="m-156-130"> <divclass="m-22-22"><imgsrc="images/icon2.png"width="40"height="40"></div> <divclass="m-50-20">导航</div> </div> <divclass="m-156-130"> <divclass="m-22-22"><imgsrc="images/icon3.png"width="40"height="40"></div> <divclass="m-50-20">教育</div> </div> <divclass="m-156-130"> <divclass="m-22-22"><imgsrc="images/icon4.png"wclassth="40"height="40"></div> <divclass="m-50-20">文化遗产</div> </div> <divclass="m-156-130"> <divclass="m-22-22"><imgsrc="images/icon5.png"width="40"height="40"></div> <divclass="m-50-20">学术研究</div></div> <divclass="m-156-130"> <divclass="m-22-22"><imgsrc="images/icon6.png"width="40"height="40"></div> <divclass="m-50-20">展览推荐</div> </div> </div><!--版块分类结束--> <!--中间内容引导开始--> <divclass="main"> <divclass="main-text"> <spanclass="t-old">古韵敦煌</span><r> 中国敦煌石窟内壁的绘画艺术作品,属于世界文化遗产。敦煌壁画总面积5万多平方米,包括敦煌莫高窟、西千佛洞、安西榆林窟等522个石窟历代壁画,规模巨大,技艺精湛,内容丰富,题材广泛。敦煌壁画描绘了神的形象、神的活动、神与神的关系、神与人的关系,寄托良愿,安抚心灵...</div> <divclass="anytext"> <divclass="anytext-img"><ahref="list.html"><imgsrc="images/main01.jpg"alt=""width="100%"></a></div> </div> </div> <!--中间内容版块结束--> <!--图片动部分开始--> <divclass="index-iamges"> <divclass="index-iamges-text">敦煌壁画中有神灵形象(佛、菩萨等)和俗人形象(供作人和故事画中的人物)之分。这两类形象都来源于现实生活,但又各具不同性质。从造型上说.俗人形象富于生活气息,时代特点也表现得更鲜明;而神灵形象则变化较少,想象和夸张成分较多。从衣冠服饰上说,俗人多为中原汉装,神灵则多保持异国衣冠;晕染法也不一样,画俗人多采用中原晕染法,神灵则多为西域凹凸法。所有这些又都随着时代的不同而不断变化与造型密切相关的问题之一是变形。敦煌壁画继承了传绘画的变形手法,巧妙地塑造了各种各样的人物、动物和植物形象。时代不同,审美观点不同,变形的程度和方法也不一样。早期变形程度较大,较多浪漫成分,形象的特征鲜明突出;隋唐以后,变形较少,立体感较强,写实性益浓厚...</div> <ahref="card.html"><divclass="utton-01">了解更多</div></a> </div> <!--图片动部分结束--> <!--下方三图并列开始--> <divclass="c-title">壁画欣赏</div> <divclass="a_line"></div> <divclass="recommend"> <divclass="recommend1"><talewidth="100%"order="0"> <tr> <tdheight="220"><ahref="page.html"><imgsrc="images/index01.jpg"width="245"height="245"></a></td> </tr> <tr> <tdheight="42"align="center"valign="top">狩猎图</td> </tr> </tale> </div> <divclass="recommend1"><talewidth="100%"order="0"> <tr> <tdheight="220"><ahref="page.html"><imgsrc="images/index02.jpg"width="245"height="245"></a></td> </tr> <tr> <tdheight="42"align="center"valign="top">四飞天</td> </tr> </tale></div> <divclass="recommend1"><talewidth="100%"order="0"> <tr> <tdheight="220"><ahref="page.html"><imgsrc="images/index03.jpg"width="245"height="245"></a></td> </tr> <tr> <tdheight="42"align="center"valign="top">五百强盗成佛故事图</td> </tr> </tale></div> </div> <!--下方三图并列end--> <!--footer栏开始--> <footerclass="down"> <divclass="down_center"> <divclass="down_c_side"> <divclass="logo1"><ahref="index.html"><imgsrc="images/Logo_01.png"></a></div> <divclass="f_gotop"><talewidth="100%"order="0"> <tr> <tdwidth="18"height="37"valign="middle"><imgsrc="images/up.png"width="12"height="12"></td> <tdwidth="119"><ahref="#top">返回顶部</a></td> </tr> </tale> </div> </div> <divclass="down_c_center">ICP备000000000000-1</div> <divclass="down_c_side"><ahref="#"><imgsrc="images/icon_1.svg"alt=""width="31"height="31"></a>&nsp;&nsp;&nsp;<ahref="#"><imgsrc="images/icon_2.svg"alt=""width="31"height="31"></a>&nsp;&nsp;&nsp;<ahref="#"><imgsrc="images/icon_3.svg"alt=""width="31"height="31"></a>&nsp;&nsp;&nsp;<ahref="#"><imgsrc="images/icon_4.svg"alt=""width="31"height="31"></a></div> </div> </footer> <divclass="anquan"><ahref="://psdhtml/index.php?c=thread&fid=18?wx01sy"target="_lank"><imgsrc="images/wx_lxidw7.svg"width="1000"height="36"></a></div> <!--此源码由://psdhtml/大设计师论坛家编写,禁止转售--> </ody> </html>

扫描二维码推送至手机访问。

版权声明:本文由卡卷网发布,如需转载请注明出处。

本文链接:https://www.kajuan.net/ttnews/2025/01/8361.html

分享给朋友:

相关文章

你捡过最大的漏是什么?

你捡过最大的漏是什么?

买了套二手房,软磨硬泡便宜了1个w 结果就是一屋子狼藉 原业主说反正你们要重新装修 就不收拾了 等完了你们一起收拾掉吧 落了很多柜子 电器是啥的 今天打开卧室柜子一看… 现在是去存钱的路上 有朋友知道这样存钱银行会给发大米跟油吗…

你为什么讨厌抖音?

我就被抖音毁了。 现在被我媳妇从抖音里拯救出来了。 我为什么会这样说? 我媳妇硕士在读,我文化程度相对就比较低了。 大多数人看抖音其实就是为了一图一乐呵 刚开始我也是这样的,我是2017年在朋友的推荐下注册了抖音,刚开始那时候对抖音不太上瘾…

闲鱼上为什么会有人问都不问直接下单?

我去年卖一个荣耀90,挂的2200,最终成交2137.5元。 对方是一个高高壮壮的西北口音,要求的自取。 大概我吃过午饭,约了旁边的商场,那里有荣耀售后。 见了面,先看了手机,试了好一会儿,各种测试,没问题。 然后去了商场二楼的荣耀售后,让…

都是前端框架,为什么用 React 的人会有优越感?

都是前端框架,为什么用 React 的人会有优越感?

上家公司一直搞react,最近第一次写个vue3项目。 老板朋友来了看了下页面说:这用vue写的吧。 我:是... 老板朋友:一看就知道是vue做的。 这tm你看一眼页面就知道用的啥框架? 这感觉就是,我一直用苹果,偶尔用了下华为打电话,有…

MacOS真的比Windows流畅吗?

我现在公司配的机器,配置是绝对的大古董了 惠普z230sff薄塔 cpu只是个4770,没错不是4790k,4770全核睿频只有3.8g 显卡更是古董,k600,已经结束驱动更新支持了,显存仅1g,跑分跑不过13代uhd核显 内存是加到16…

为什么这次 Mac mini 的 M4 版本价格这么低?

为什么这次 Mac mini 的 M4 版本价格这么低?

扫了一眼这里的回答,目测没几个人真买过 Macbook、Mac mini且真正当主力工作机用过。 这个初始(丐版)版本的机器实际谈不上多便宜,备受热捧有几个原因。 它这代产品整体做了重新设计,大幅缩减了尺寸,真正称得上 Mini 了。…

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。