标签和css的应用实验报告"/>
html标签和css的应用实验报告
应用html标签和css完成如下所示页面效果，图片见附件。
说明：
- 内容相对于浏览器居中,宽860px
- 鼠标移动至列表项上，显示背景色#F8F8F8
- 分割线2px solid #ccc，每项高130px
- 第一行文字：20px 黑体
- 标签：字颜色#cccc00 16px
- 标签项：背景颜色#eee 字体颜色#999 文字大小14px
- 第三行文字：边框1px solid #eee; 圆角半径25px
其他样式可根据界面效果进行设置
运行截图
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}/* 整体样式设置 */.box {width: 860px;height: 98px;margin: 0 auto;border-top: 2px solid #ccc;padding-top: 15px;padding-bottom: 15px;}/* 鼠标移动背景色变化*/.box:hover {background: #F8F8F8;}/* 第一行文字设置 */.first {font-size: 20px;font-family: 黑体;padding-bottom: 16px;}/* ‘标签’样式设置 */.second {color: #cccc00;font-size: 16px;background: none;}/* ‘唇膏’等标签样式 */.box1 {background: #eee;color: #999;font-size: 14px;}/* ‘来源’样式设置 */.third {width: auto;text-align: center;border: 1px solid #eee;border-radius: 25px;float: left; margin-top: 12px;margin-right: 10px;color: #999999;font-size: 14px;}p {display: inline-block;margin-top: 13px;color: #999999;font-size: 14px;}img {width: 140px;height: 100px;float: left;padding-right: 24px;}li {list-style-type: none;display: inline-block;background: #eee;color: #999;font-size: 14px;margin: 0px 2px;}</style>
</head><body><div class="box"><img src="images/4.jpg" alt=""><div class="first">不只有看肤色挑唇色 选对口红衣服更美</div><div><ul><li class="second">标签</li><li>唇膏</li><li>衣服</li><li>粉色</li><li>化妆</li><li>美容美体</li></ul></div><div class="third">悦己self</div><p>2016-10-18</p></div><div class="box"><img src="images/5.jpg" alt=""><div class="first">学画红唇妆 让你的女王范分分钟秒杀路人</div><div><ul><li class="second">标签</li><li>唇膏</li><li>衣服</li><li>粉色</li><li>化妆</li><li>美容美体</li></ul></div><div class="third">毛戈平形象艺术学校</div><p>2016-10-18</p></div><div class="box"><img src="images/6.jpg" alt=""><div class="first">无数次给国外博主跪了 把自己的脸画成漫画人物好逼真</div><div><ul><li class="second">标签</li><li>美容美体</li></ul></div><div class="third">八公举</div><p>2016-10-18</p></div>
</body></html>初学web，若有不足，还望斧正。
更多推荐
html标签和css的应用实验报告
发布评论