
HTML5网页基础设计——课程介绍专栏
案例:
图片: 参考代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>动手实践</title> <style> *{ margin: 0; padding: 0; font-size:14px; } dd{ width: 461px; height: 145px; margin: -4px; padding: 0; background: url("../素材/bg.png"); } .one,.three{ padding-top:43px; width:120px; height:80px; display: inline-block; text-align: right; } .two{ color: white; padding-top:39px; width:90px; height:80px; display: inline-block; text-align: right; } a:hover{ color: #ce4d52; background:url("../素材/bg1.png"); } a{ color: white; display: block; width: 461px; height: 145px; text-decoration: none; } </style> </head> <body> <dl> <dt><img src="../素材/head.png" width="457" height="95" alt=""/></dt> <dd><a href=""> <span class="one">印刷流程<br>广告设计<br>企业形象设计</span> <span class="two"> <br>1<br> </span> <span class="three"><br> 平面设计<br> </span></a> </dd> <dd><a href="" > <span class="one">页面设计<br>HTML+CSS<br>JS和JQ交互特效</span> <span class="two"> <br>2<br> </span> <span class="three"> <br>网页设计<br> </span></a> </dd> <dd><a href="" > <span class="one">视觉创意设计<br>人机交互原则<br>UI设计规范</span> <span class="two"> <br>3<br> </span> <span class="three"> <br>网页设计<br> </span></a> </dd> </dl> </body> </html>👁️ 阅读量:0
© 版权声明:本文《HTML5网页基础设计——课程介绍专栏》内容均为本站精心整理或网友自愿分享,如需转载请注明原文出处:https://www.zastudy.cn/wen/1686937535a398435.html。