当前位置:首页 > 每日看点 > 正文内容

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

卡卷网12个月前 (01-10)每日看点183

本套大作业共计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

分享给朋友:

相关文章

什么软件可以看电视直播?

什么软件可以看电视直播?

2024年9月6日最新更新:本文列举的所有看电视直播、或流媒体影视资源点播的软件,我这两天又重新梳理成最新版本,最大程度保证可用性。获取方式见文末图片,或见评论。后续我也将持续更新,文章是旧的软件也会是新的,保证都是最新可用版本。作为一个急...

感觉手机配置都差不多,为什么有的手机能卖2k-3k,而有的手机却能卖到6k-8k?

感觉手机配置都差不多,为什么有的手机能卖2k-3k,而有的手机却能卖到6k-8k?

与所有的商品一样,手机的价格,也是由它的成本所决定的。虽然看起来3000元的手机和6000的手机配置差不多,甚至处理器都可能是同一个,但在很多大家容易忽略的地方,决定了两者价格的不同:例如手机的外观,塑料的机身,与素皮机身和玻璃机身就完全不...

用红米手机会很丢人吗?

前些日子遇到了一位快递小哥,京东的,签收小哥年纪不算大,目测二十多岁他的手机上全是一道道极严重的划痕,有点卡,他开热点了,热点名就是手机型号,红米9a,我父母的同款现在他那边操作了一会,然后又是我这边操作了一会小哥看着我手机刷刷的,颇有些好...

鸿蒙系统到底是不是安卓系统?

你好,是的。接下来我给不懂技术的人简单的说一下哄蒙系统的来龙去脉。首先你要知道什么是开源。‌‌开源(Open Source)全称为开放源代码‌,意味着任何人都可以获取和使用软件的源代码,并在遵守版权协议的前提下进行修改和再发布。‌12开源软...

被网络诈骗了,钱还能追得回来吗?

我刷单被骗,当时不知道怎么办在百度上找个律师说他们能追回,还说不用报警,我傻的就信了,支付了费用签合同,我还是不信他们,报警了,报警没几天警官就连系我追回一笔钱让我注意银行卡到账通知,又过几天我第二笔钱到账了,律师说是他们追回的,要我支付后...

你怎么看待软件测试这个工作的?

你怎么看待软件测试这个工作的?

先说一个插曲:上个月我有同学在深圳被裁员了,和我一样都是软件测试,不过他是平安外包,所以整个组都撤了,他工资和我差不多都是14K。现在IT互联网已经比较寒冬,特别是软件测试,裁员先裁测试,这几乎都是定律。我最近看了某音很多应届生以及去年毕业...

发表评论

访客

看不清,换一张

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