<div><p></p><td></td><span></span></div>背景颜色设置：background-color=#000000; rgba(0,0,0,0.6) 最后一个表示透明度值在 0~1,1表示不透明,0表示全透明
背景图片设置：background-image=url("image.jpg")
背景是否填充; background-repeat=repeat-x,repeat-y ,repeat ,no-repeat
背景位置：background-position: x y 离左边和上边的距离, left center 表示靠左,上下居中,center top表示水平居中 靠上
背景是否固定：background-attachment: scroll /fixed 后着背景固定,前者是可以滚动的
综合设置：background: red url("img.jpg") no-repeat scroll 20px 50px 这五个参数无序,但是最好使用这个样式，中间使用空格分开
边界通用设置:border: 2px solid/dashed/dot blue 第二个参数代表是实线、虚线、点线 应用与四条边
上边界：border-top: 2px solid/dashed/dot blue 第一个表示边界的粗细
下边界：border-bottom: 2px solid/dashed/dot blue
左边界：border-right: 2px solid/dashed/dot blue
右边界：border-left: 2px solid/dashed/dot blue
当一个标签设置了宽度和高度,同时使用内边距的时候,会发生什么?宽度和高度会撑大实际的宽度和高度会发生变化。因此会有一个计算公式：
实际宽度:width+border-left+border-right+padding-left+padding-right.
实际高度:height+border-top+border-bottom+padding-bottom+padding-top.
关于内边距设置:
四个方向边距相同：padding: 10px; 上下左右
上下/左右边距一致: padding: 15px 20px; 上下 左右
左右边距相同:padding:10px 20px 5px; 上 左右 下
四个方向边距都不一样: padding:10px 15px 5px 8px; 上 右 下 左
单独设置边距：padding-left padding-right padding-top padding-bottom
假设一个div就是一个盒子,内边距就是盒子内部的间隔,但是如果盒子放在桌子上，它该如何放，放在哪里呢？这个就是外边距，也就是相当于盒子离桌子各个边的距离。
margin和padding的用法几乎是一样的
关于外边距的设置:
四个方向边距相同：margin: 10px; 上下左右
上下/左右边距一致: margin: 15px 20px; 上下 左右
左右边距相同:margin:10px 20px 5px; 上 左右 下
四个方向边距都不一样: margin:10px 15px 5px 8px; 上 右 下 左
单独设置边距：margin-left margin-right margin-top margin-bottom
一、新闻列表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>第四天新闻信息</title><style>* {margin: 0px;padding: 0px;}.aichong{width: 232px;height: 310px;border: 1px solid darkgreen;margin: 30px 50px 50px 150px;padding: 10px;background: url("../img/bg_tianchong.gif") repeat left top;}.aichong h3 strong{color: greenyellow;}.aichong h3{height: 35px;line-height: 35px;font-size: 20px;color: #ffffff;}.aichong ul{/*padding-left: 15px;*/padding: 0px 15px;background-color: #ffffff;list-style: none;}.aichong ul li{background: url("../img/tb.gif") no-repeat left center;height: 30px;line-height: 30px;text-align: left;border-bottom: 1px dashed #222222;font-size: 12px;}.aichong li a{padding-left: 15px;color: #00aaee;text-decoration: none;}.aichong li a:hover{color: red;text-decoration: underline;}</style>
</head>
<body>
<div class="aichong"><h3><strong>|</strong> 爱宠知识</h3><ul><li><a href="#">养狗比养猫对健康更有利</a></li><li><a href="#">笑看未来三十年</a></li><li><a href="#">绝对和党走的人生</a></li><li><a href="#">站外的那些日子里</a></li><li><a href="#">和那些过去的人聊来天</a></li><li><a href="#">你今天睡了吗？</a></li><li><a href="#">科技智能时代的到来</a></li><li><a href="#">人工智能教育平台的前景与展望</a></li><li><a href="#">今天的故事会</a></li></ul>
</div>
</body>
</html>
二、运动新闻
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>第四天鲁能热身赛</title><style>*{margin: 0px;padding: 0px;}.title{width: 600px;height: 1027px;padding: 8px 20px 15px;border: 1px solid #cccccc;border-top: 3px solid #00aaee;text-align: center;margin: 100px auto;}.title h1{line-height: 40px;height: 35px;font-size: 20px;text-align: center;font-weight: normal;font-family: 微软雅黑;}.title .first{text-align: center;line-height: 26px;height: 26px;font-size: 12px;border-bottom: 1px solid #cccccc;padding: 5px 0px 2px;font-weight: lighter;}.title .first a ,.title .first span{padding-left: 12px;text-decoration: none;color: #666666;}.title .first .f1{color: #ff3333;}.title .first .f2{padding-left: 0px;}#h{font-size: 12px;line-height: 20px;height: 20px;text-align: center;color: #666666;}.title .img{padding: 10px 0px 10px;}.title .padding{padding: 0px 15px;}.title .news{border: 1px dashed #cccccc;}.padding p{line-height: 24px;text-align: left;text-indent: 2em;font-size: 14px;padding: 10px 0px;}.title .news a{text-decoration: none;color: #00aaee;}.padding .news>p{padding:5px 10px 5px 10px;line-height: 24px;font-size: 14px;text-align: left;text-indent: 0em;}.padding .news h4{text-align: right;padding-right: 10px;font-size: 12px;line-height: 20px;height: 20px;padding-bottom: 5px;color: #666666;font-weight: lighter;}.padding .second{text-align: left;padding-bottom: 10px;}.padding .second span{font-size: 15px;font-weight: bold;color: #222222;font-family: 微软雅黑;line-height: 24px;height: 24px;}.padding .second a{font-size: 14px;color: #00aaee;text-decoration: none;padding-left: 5px;}.title .second a:hover{text-decoration: underline;}.title .last{width: 80%;height: 30px;background-color: #b3d4fc;text-align: center;display: inline-block;}.title .last a{font-size: 16px;line-height: 30px;text-decoration: none;color: #00aaee;}.title .last a:hover,.title .first a:hover,.title .news a:hover{text-decoration: underline;}</style>
</head>
<body>
<div class="title"><h1>鲁能热身赛16-0大胜业余队 野牛4球蒙蒂略戴帽</h1><h4 class="first">2015年08月08日18:19 <a href="#" class="f1">新浪体育</a><span>微博</span><a href="#" >我有话说(<span class="f1 f2">10,370</span>人参与)</a> <ahref="#" >收藏本文</a></h4><div class="img">[外链图片转存失败(img-hJO9NAuq-1562034202180)(.jpg)]</div><h4 id="h">鲁能热身赛16-0大胜 </h4><div class="padding"><p>新浪体育讯 北京时间8月8日消息，山东鲁能俱乐部在训练基地内与业余球队山东太阳金店足球俱乐部进行了一场热身赛，最终鲁能以16-0大胜对手，阿洛伊西奥上演大四喜，韩鹏和蒙蒂略完成帽子戏法，尤西雷梅开二度，塔尔德利、赵明剑、张文钊、成源均取得进球。</p><div class="news"><p><a href="#">鲁能泰山足球新闻</a>：#鲁能泰山#鲁能热身赛16-0击败一支业余球队，韩鹏和蒙蒂略帽子戏法，野牛大四喜，尤西雷梅开二度，塔尔德利、赵明剑、张文钊、成源取得进球。</p><h4 >2015-08-08 17:54 来自百度浏览器 转发(49) | 收藏 | 评论(50)</h4></div><p>由于国足征战东亚杯比赛，中超联赛获得了两周的间歇期，山东鲁能训练备战同时，也邀请了一支业余球队进行热身赛。尽管王大雷、王永珀、杨旭、王彤等人随国足征战东亚杯，但鲁能还是派出了现有最强阵容，以16-0大胜了对手，据悉上半场就取得了9-0的领先，尽管与业余球队比赛，胜负并不重要，但这样的大比分胜利也能看出鲁能全队目前状态不错</p><p>下周三中超第22轮就将打响，山东鲁能客场挑战北京国安，两支争冠球队的直接对话，无疑是本轮最焦点之战。由于国足本周日才结束东亚杯赛事，鲁能阵中的国脚体能能恢复多少非常关键，而以现有的鲁能球员组成的阵容，实力也绝对不容小觑。(瑪塔)</p><div class="second"><span>文章关键词：</span><a href="#">中超</a> <a href="#">鲁能</a> <a href="#">阿洛伊西奥</a> <a href="#">蒙蒂略</a></div></div><div class="last"><a href="#">点击下载【新浪体育客户端】，赛事视频直播尽在掌握</a></div></div>
</body>
</html>
本文发布于:2024-01-30 22:48:48，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170662612923388.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
