制作京东快报页面html,HTML第6章上机练习3(制作京东快报页面)

代码如下：

制作京东快报页面

.title{

height: 186px;

width: 230px;

box-sizing: border-box;

border: 1px solid gainsboro;

}

.one{

background-image: linear-gradient(to bottom, gainsboro, #ffffff);

color: gray;

font-size: 16px;

line-height: 43px;

vertical-align: center;

padding: 0px 0px 1px 10px;

}

p{

border: gainsboro 2px dotted;

margin: 0px;

padding: 0px;

}

ul{

margin: 0px;

padding: 5px 0px ;

}

li{

list-style: none;

line-height: 26px;

padding: 0px 26px;

font-size: 12px;

}

ul a{

text-decoration: none;

color: gray;

}

a:hover{

color: #640000;

}

京东快报

• [特惠]海飞丝去屑又去油 超清爽
• [公告]京东公益支持鲁甸新动作
• [特惠]4688元抢iPhone 6
• [公告]小米电视携豪礼高调入驻京东

效果图如下：

鼠标移上文字后的效果图如下：

ps：说一下，近期会把以前作业的代码都完善下，再把以前以图片形式发出来的文章，还有在现在看来不太合格的文章代码修一下，免得误人子弟 我可担不起这罪名，快跑。 哈哈哈哈哈