HTML5+CSS3 制作简单图文广告

超链接+列表的简单运用

1.今日份的h5课堂作业

效果图片：

代码如下：

<!doctype html>
<html>
<head><meta charset="UTF-8"><title>家居网</title>
</head>
<style>*{margin: 0;}#box1{height:50px;background-color: #404042;text-indent: 5em;}.liebiao li{display: inline-block;font-size: 20px;padding-top: 12px;}.liebiao li a{text-decoration: none;color:white;padding: 15px 20px 15px 20px;/*内边距撑开超链接的盒子*/}.a2{background-color:#ff5151;}.a1:hover{background-color:#ff5151;}.liebiao2 li{display: inline-block;border-width:1px 0 1px 1px;border-color: #cecece;border-style: solid;padding: 30px 10px 20px 15px;}#special{border-right: #cecece 1px solid;/*最右边的那一个边框*/}#box2,.liebiao2{margin: 0;}#box2{text-align: center;}.text{vertical-align: 12px;display: inline-block;text-align: left;/*黑色字和灰色字开头对齐*/margin-left: 8px;font-size: 20px;}.img{height:60px;}.p1{font-size: 14px;color:gray;/*灰色小字的属性*/}
</style>
<body><div id="box1"><ul class="liebiao"><li><a class="a2" href="#">首页</a></li><li><a class="a1" href="#">设计案例</a></li><li><a class="a1" href="#">装饰图库</a></li><li><a class="a1" href="#">有问必答</a></li><li><a class="a1" href="#">逛商品</a></li></ul></div><img src="data:images/images4/banner.jpg" alt="banner"><div id="box2"><ul class="liebiao2"><li><img class="img" src="data:images/images4/pic01.jpg" alt="01"><span class="text">浏览真实设计案例<br><span class="p1">设计师原创作品</span></span></li><li><img class="img" src="data:images/images4/pic02.jpg" alt="02"><span class="text">找到满意设计师<br><span class="p1">设计师云集于此</span></span></li><li><img class="img" src="data:images/images4/pic03.jpg" alt="03"><span class="text">装修疑问<br><span class="p1">每秒钟都有设计师在线</span></span></li><li id="special"><img class="img" src="data:images/images4/pic04.jpg" alt="04"><span class="text">在线担保交易<br><span class="p1">资金托管,满意担保</span></span></li></ul></div>
</body>
</html>

个人总结：理解行内块级元素及vertical-align，学会超链接及列表的简单运用。

HTML5+CSS3 制作简单图文广告相关推荐

HTML绘制七巧板,如何使用HTML5 CSS3制作简单七巧板
今天来分享一个制作简单七巧板的方法(图片如图): 代码如下: 首先在body中间写四个div,在对其设置样式如下: 这是对body中的div的样式设置 #box1{ width: 0px; heigh ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT编程
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTY ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的不规则斑点边框半径动画的动画效果~~适合初学者~超简单~ |前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的不规则斑点边框半径动画的动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCT ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的电脑桌面+昼夜变化动画效果~~适合初学者~超简单~ |前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的电脑桌面+昼夜变化动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYPE ...
【web前端特效源码】使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYPE ...
用html和css制作钟表,使用HTML5和CSS3制作简单的钟表
利用html5,css实现钟摆效果 ,在项目中经常会遇到,今天小编把基于HTML5+CSS3实现简单的时钟效果的实现代码分享到脚本之家平台,需要的额朋友参考下吧目的: 利用html5,css实现钟摆 ...
html人物动画效果图,9款用HTML5/CSS3制作的动物、人物动画
原标题:9款用HTML5/CSS3制作的动物.人物动画今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. ...
html 动物特效,分享9款用HTML5/CSS3制作的动物人物动画，
分享9款用HTML5/CSS3制作的动物人物动画, 1.纯CSS3绘制可爱的蚱蜢还有眨眼动画今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示源码下载 2.HTML5 Canv ...
9款用HTML5/CSS3制作的动物、人物动画
今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. 1.纯CSS3绘制可爱的蚱蜢还有眨眼动画今天我们要分 ...

HTML5+CSS3 制作简单图文广告

超链接+列表的简单运用

HTML5+CSS3 制作简单图文广告相关推荐

最新文章

热门文章