【Web】CSS（No.21）Css经典案例（三）《爱宠知识》

需要素材点击图片联系我或私信、评论

效果图：

源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>爱宠知识</title><style>* {margin:0;padding:0;}.box {margin:20px auto;width:320px;height:420px;background-image:url(img/bg.gif);border:1.5px solid #009900;}.tle {border-left:5px solid #c9e143;color:white;font-size:23px;margin:20px 15px 10px 15px;padding-left:5px;}.news {background-color:white;margin:5px 15px 10px 15px;}.news ul li {list-style:none;border-bottom:1px dashed #a1aeb1;margin:5px 5px 5px 5px;padding-top:5px;padding-bottom:7px;}.news ul li a {font-size:15px;font-color:#0066cc;text-decoration:none;}a:link{color:#0066cc;}a:visited{color:#0066cc;}a:hover{color:red;}a:active{color:grey;}</style></head><body><div class="box"><div class="tle"><h4>爱宠知识</h4></div><div class="news"><ul><li><img src="img/tb.gif" alt=""><a href="#">养狗比养猫对健康更有利</a></li><li><img src="img/tb.gif" alt=""><a href="#">日本正宗柴犬亮相，你怎么看柴犬？</a></li><li><img src="img/tb.gif" alt=""><a href="#">狗狗歌曲《新年旺旺》</a></li><li><img src="img/tb.gif" alt=""><a href="#">带宠兜风，开车带宠需要注意什么？</a></li><li><img src="img/tb.gif" alt=""><a href="#">【爆笑】这狗狗太不给力了</a></li><li><img src="img/tb.gif" alt=""><a href="#">狗狗与男童相同着装拍有爱造型照</a></li><li><img src="img/tb.gif" alt=""><a href="#">狗狗各个阶段健康大事件</a></li><li><img src="img/tb.gif" alt=""><a href="#">调皮宠物狗陷在沙发里的搞笑瞬间</a></li><li><img src="img/tb.gif" alt=""><a href="#">为什么每次大小便后，会用脚踢土？</a></li></ul></div></div></body>
</html>

【Web】CSS（No.21）Css经典案例（三）《爱宠知识》相关推荐

C语言函数不定长参数 ##__VA_ARGS__经典案例 - C语言零基础入门教程
目录一.##__VA_ARGS__简介二.##__VA_ARGS__经典案例三.猜你喜欢零基础 C/C++ 学习路线推荐 : C/C++ 学习目录 >> C 语言基础入门一.## ...
无领导小组讨论应对技巧及经典案例
现在已经是大三下学期了,这个时候不得不考虑的事情就是求职问题,而求职不得不面对的就是面试.晚上上就业指导课,老师组织大家模拟进行无领导小组讨论面试,结果当然是问题百出啦.还好只是模拟,还能有时间进行相 ...
名企中无领导小组经典案例分析
[size=large][b]一.无领导小组面试概况 [/b] 在这种形式中,应试者划分成每组人数四到八人不等,不指定负责人,大家地位平等,要求就某些争议性比较大的问题,例如干部提拔.工作任务分配.额 ...
【Web】CSS（No.32）Css页面布局经典案例（二）《云道商城首页》
需要素材点击图片联系我或私信.评论效果图 html源码: <!DOCTYPE html> <html lang="en"> <head>< ...
css笔记（css的三种引入方式综合案例新闻页面）
CSS引入方式 5.1CSS的三种样式表(CSS样式可以写在哪些地方) 5.2内部样式表(在html页面内部的style标签下写样式,也就是前面练习的所有)(优先级第二) 5.3行内样式表(优先级最高 ...
Web前端学习笔记——CSS京东案例、BFC
京东项目(一) 京东项目介绍项目名称:京东网项目描述:京东首页公共部分的头部和尾部制作,京东首页中间部分. 项目背景现阶段电商类网站很流行,很多同学毕业之后会进入电商类企业工作,同时电商类网站需 ...
【正在完善】高级CSS特效解析其示范案例
高级CSS特效解析其示范案例 Jack Lee 的 CSDN 博客邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550263?sp ...
2. web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
网页设计经典案例（Web）
网页设计经典案例一.实现效果(一) 源代码(二) <!DOCTYPE html> <html lang="en"> <head><met ...
web前端基础html,css,js,jquery
目录 1 前端技术: 1.1 学习方法 1.1.1 前端要怎么学? 1.1.2 前端技术栈 1.2 HBuilderX 1.2.1 介绍 1.2.2 安装 1.2.3 主题 1.2.4 字体 1.2. ...

【Web】CSS（No.21）Css经典案例（三）《爱宠知识》

效果图：

源码

【Web】CSS（No.21）Css经典案例（三）《爱宠知识》相关推荐

最新文章

热门文章