web实验（1）
（1）
应用html和css完成如图所示界面效果。内容相对于浏览器居中，图标见附件disc.jpg。
说明：
- 内容相对于浏览器居中，图标见附件disc.jpg
- 盒子边框1px solid #ccc，内边距20px
- 文本字体颜色#122e67，文本高度30px
<!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>.center {margin: 200px auto;border: 1px solid #ccc;padding: 20px;color: #122e67;width: 450px;}li {line-height: 30px;text-decoration: solid;list-style-image: url(./disc.jpg);border-bottom: 1px dotted #ccc;}</style>
</head>
<body><div class="center"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul></div>
</body>
</html>（2）
完成如下图所示界面设计效果
说明：
- 可考虑基于列表进行设计，居中显示
- 将列表转换为inline-block实现横向显示，每项高200px 宽216px，上、左内间距20px
- 上部字体大小18px，颜色#000，下部字体大小14px，颜色#64C333
- 所需图片见附件，图片宽度154px，左间距60px
<!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>.center {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 85%;margin-left: 10px;}li {display: inline-block;height: 200px;width: 216px;padding: 20px 0 0 20px;border: 4px solid #ccc;margin-left: -10px;}.wordTop {font-size: 18px;color: #000;margin: 0 0 0 0;}.wordBottom {font-size: 14px;color: #64C333;margin-top: 0px;margin-bottom: 0px;}img {width: 154px;margin: 0 0 0 60px;}</style>
</head>
<body><div class="center"><ul><li> <p class="wordTop">抱抱果新首发</p> <p class="wordBottom">抱一下就幸福</p> <img src="./1.jpg"> </li><li> <p class="wordTop">天猫冰箱节 </p> <p class="wordBottom">智由随风</p> <img src="./2.jpg"></li><li> <p class="wordTop">西门子全球精选</p> <p class="wordBottom">旗舰精品享你所想</p> <img src="./3.jpg"></li><li> <p class="wordTop">进口葡萄酒专场</p> <p class="wordBottom">原瓶进口品质保证</p> <img src="./4.jpg"></li><li> <p class="wordTop">手机专场</p> <p class="wordBottom">原装正品</p> <img src="./5.jpg" alt=""></li></ul></div>
</body>
</html>（3）
完成下图所示的静态网页制作
说明：
- 可考虑基于列表进行设计，居中显示
- 列表项高320px 宽250px，外间距10px，内间距10px，边框线1px solid #ccc
- 每项中第一行文字14px，颜色#666，文本行高度32px。其他行文字12px，颜色#66667F，文本行高度25px
- “原创作品”加粗，颜色#FF5584
- 所需图片见附件，图片宽度250px，高度188px
<!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>.center {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}li {height: 320px;width: 250px;margin: 10px;padding: 10px;border: 1px solid #ccc;list-style: none;}.first {font-size: 14px;color: #666;line-height: 32px;}.other {font-size: 12px;color: #66667F;line-height: 25px;}strong {color: #FF5584;}.size2 {width: 250px;height: 188px;}*{padding: 0px;margin: 0px;}.red {color: red;}</style>
</head>
<body><div class="center"><li><img src="./web实验一/images/pic1.jpg" alt="" class="size2"><p class="first">动画便利店X果壳网《西门子洗碗机...</p><p class="other"> <strong>原创作品</strong>-影视-Motion Graphic</p><p class="other">2小时前上传</p><p class="other"><span class="red">1284</span> 人气/<span class="red">11</span> 评论/<span class="red">47</span> 推荐</p><img src="./web实验一/images/play.png" alt=""></li><li><img src="./web实验一/images/pic2.gif" alt="" class="size2"><p class="first">动画便利店X视知《到底工资怎么发...</p><p class="other"><strong>原创作品</strong>-影视-Motion Graphic</p><p class="other">3小时前上传</p><div class="other"><span class="red">1569</span> 人气/<span class="red">50</span> 评论/<span class="red">123</span> 推荐</div><img src="./web实验一/images/play.png" alt=""></li></div>
</body>
</html>