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

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

卡卷网2年前 (2025-01-10)每日看点275

本套大作业共计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、实时地球网址: https://zoom.earth/ 实时图像每 10 分钟更新一次,提供风暴、天气预报、降水、火警等数据 2、陕…

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

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

为什么有人觉得华为mate60只值2000?

为什么有人觉得华为mate60只值2000?

你以为买Mate60的人真的傻?真的那么爱国? 国庆前,我家那傻子加价800多买了一台Mate60,当时还被我骂他是傻子。 可是他说一回到公司就被老板同事朋友看到,拿去反复查看,都在惊叹他这么快就买到新机。 跟亲戚朋友聚会,别人一看就知道他…

如何进行 Elasticsearch 调优实践?

如何进行 Elasticsearch 调优实践?

面试官心理分析这个问题是肯定要问的,说白了,就是看你有没有实际干过 es,因为啥?其实 es 性能并没有你想象中那么好的。很多时候数据量大了,特别是有几亿条数据的时候,可能你会懵逼的发现,跑个搜索怎么一下 5~10s ,坑爹了。第一次搜索的…

有哪些是你用上了mac才知道的事?

用上了高端的Mac(已退货)才知道:原来文件夹里面的文件,你看到是8个,其实可能有12个。其中3个图标重叠在一起了,另外一个被拖动到屏幕外面了。 用上了高端的Mac(已退货)才知道:原来鼠标灵敏度有问题是因为系统内置了鼠标加速度,只能用控制…

如何看待台积电,三星相继停供大陆7nm及更先进芯片?

在这个事出来之前,我就看到过一个说法,两家Foundry可以在中东建厂,让中东的Fab去干“脏活”。本质上是国内企业搞几个中东的代理人,装作是中东的初创Fabless企业去下单,人家Foundry大概率睁一只眼闭一只眼,只管数钱。然而,紧接…

发表评论

访客

看不清,换一张

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