盒子模型之京东快报页面

<!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;
}

//效果图

盒子模型之京东快报页面相关推荐

HTML第6章上机练习3(制作京东快报页面)
代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
制作京东快报页面html,HTML第6章上机练习3(制作京东快报页面)
代码如下: 制作京东快报页面 .title{ height: 186px; width: 230px; box-sizing: border-box; border: 1px solid gainsb ...
html盒子模型页面居中,【静态页面架构】CSS之盒子模型
CSS架构盒子模型: 以内容区(显示文本和图像) 内边距(内容区至边距的距离) 边距(内容区的边界) 外边距(元素的边框之间的距离) 1.边距: border属性: 简写属性用来设置边距的上(top ...
制作京东快报页面html,京东快报.html
京东快报 li{ list-style: none; } a{ text-decoration: none; color: black; } a:hover{ color:blue; } .box{ ...
HTML京东快报页面,京东快报.html
京东快报 ul{list-style-type:none; padding-left:10px;} div{width:230px; border:1px #999 solid; padding:0p ...
制作京东快报页面html,仿京东快报.html
京东快报 body h1{ margin: 0; padding: 0; } .kb{ width: 400px; height: 300px; box-sizing: border-box; bor ...
CSS盒子模型/页面布局
1.盒子模型页面布局要学习三大核心,盒子模型,浮动和定位.学好盒子模型对我们布局页面帮助很大! 1.1看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子利用CSS设置 ...
html把盒子置于盒子页面底部,HTML盒子模型.ppt
HTML盒子模型要点 Chapter HTML盒子模型章节目标掌握盒子模型结构和属性掌握margin,padding属性细分的属性使用盒子模型相关属性实现页面布局盒子模型的结构盒子模型的基 ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...

盒子模型之京东快报页面

盒子模型之京东快报页面相关推荐

最新文章

热门文章