盒子模型之京东快报页面

最新推荐文章于 2023-03-25 18:34:16 发布

qq_33151859

最新推荐文章于 2023-03-25 18:34:16 发布

阅读量3.6k

点赞数 7

分类专栏： HTML基础编程题

本文链接：https://blog.csdn.net/qq_33151859/article/details/78213780

版权

HTML基础编程题专栏收录该内容

32 篇文章 13 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>京东快报页面</title>
<link href="css/Page_199_3.css" rel="stylesheet" type="text/css"  />
</head>
<body>
<div id="list">
<h1>京东快报</h1>
<ul>
<li><span>[特惠]</span><a href="#">海飞丝去屑又去油 超清爽</a></li>
<li><span>[公告]</span><a href="#">京东公益支持鲁甸新动作</a></li>
<li><span>[特惠]</span><a href="#">4688元抢iPhone 6</a></li>
<li><span>[公告]</span><a href="#">小米电视携豪礼高调入驻京东</a></li>
</ul>
</div>
</body>
</html>

//css样式
#list{
width: 230px;
box-sizing: border-box;
border: 1px solid gray;
margin:30px;
}


h1{
background: linear-gradient(to bottom,#CCCCFF,#FFFFFF);
font-size: 14px;
font-weight: normal;
/*text-indent: 1em;*/
/*margin-left: 10px;*/
margin-top: 0px;
margin-bottom: 0px;
height: 43px;
line-height: 43px;
border-bottom: 1px dashed #e8e8e7;
padding-left: 10px;
}


ul{
margin-bottom: 5px;
margin-top: 5px;
list-style: none;
   padding-left: 20px;
   padding-left: 26px;
   padding-right: 26px;
}
span{
color:black;
font-weight: bold;
font-size: 10px;
}
a{
color: #666666;
text-decoration: none;
font-size: 10px;
}


a:hover{
font-size: 12px;
color:green;
}

//效果图

qq_33151859

关注

7
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
盒子模型之京东快报页面

京东快报页面京东快报[特惠]海飞丝去屑又去油超清爽[公告]京东公益支持鲁甸新动作[特惠]4688元抢iPhone 6[公告]小米电视携豪礼高调入驻京东//css样式#list{width: 230px;box-sizing: border-box;border: 1px solid gray;margin:30px;}h1{background
复制链接

扫一扫