网站开发需求说明书/新闻最新消息今天
链接的伪类
| 伪类 | 说明 |
|---|---|
| ：link | 未访问的链接 |
| ：visited | 已访问的链接 |
| ：hover | 鼠标悬停状态 |
| ：active | 激活的链接 |
伪类的顺序
：link>:visited>:hover>:active
<style>/* 访问之前*/a:link{color: deeppink;}/*访问过的伪类*/a:visited{color: yellow;}/*鼠标悬停伪类*/a:hover{color: red;}/*鼠标激活伪类*/a:active{color: green;}</style>
</head>
<body>
<a href="#">百度</a>
</body>
css的盒子模型
-
盒子模型用来放网页中的各种元素
-
网页设计中的内容，如文字，图片等元素，都可是盒子（DIV嵌套）
边框属性
4个方向来表示（上、右、下、左） -
边框宽度：
border-width：thin | medium | thick |长度值 -
边框颜色：
border-color：颜色 | transpartant (透明色) -
边框样式：
border-style:值 | none | hidden
不同方向表示：
border-[left | right | top | bottom ]-width
border-[left | right | top | bottom ]-color
border-[left | right | top | bottom ]-style
边框缩写：
border：[宽度] | [样式] | [颜色]
不同方向：
border-top： [宽度] | [样式] | [颜色]
border-left： [宽度] | [样式] | [颜色]
border-right： [宽度] | [样式] | [颜色]
border-bottom： [宽度] | [样式] | [颜色]
<style type="text/css">/* p{width:150px;height:100px;background-color: #ececec;line-height: 100px;border-width:medium;border-color: #0099ee;border-style:solid;} */p{width:150px;height:100px;background-color: #ececec;line-height: 100px;}/* .one{border-top-width: 5px;border-top-color: blue;border-top-style: solid;}.two{border-top-width:5px;border-top-color: yellow;border-top-style: dotted;border-right-width: 10px;border-right-color: pink;border-right-style: solid;border-left-width: 10px;border-left-color: greenyellow;border-left-style: dashed;border-bottom-width: 5px;border-bottom-color:purple;border-bottom-style: double;}*//*缩写边框属性*/.one{border:10px blue solid;}.two{border-top: 5px yellow dashed;border-right:10px pink solid;border-left:10px greenyellow dotted;border-bottom:5px purple double;}</style>
</head>
<body><!--border属性---><!-- <p>边框属性border</p> --><!--border属性不同方向设置--><p class="one">边框属性border</p><p class="two">边框属性border</p>
</body>
内边距属性：padding
元素内容与边框之间的距离。
padding-top：长度值 | 百分比
padding-right：长度值 | 百分比
padding-bottom：长度值 | 百分比
padding-left：长度值 | 百分比
说明：padding值不能为负值。
内边距属性缩写
padding：值1； //4个方向都为值1
padding：值1 值2； //上下=值1，左右=值2
padding：值1 值2 值3； // 上=值1，左右=值2，下=值3
padding：值1 值2 值3 值4； //上=值1，右=值2，下=值3，左=值4
.one{width:300px;height:300px;background-color: #acacac;padding-top:20px;padding-left:30px;padding-bottom: 50px;padding-right: 40px;}.content1{width:100px;height:100px;background-color: #ececec;padding-top:10px;padding-left:5px;}.two{width:300px;height:300px;background-color: #acacac; padding:20px 10px 10px 8px;}.content2{width:100%;height:100%;background-color: #ececec;} .six{width:300px;height:300px;background-color: #acacac;margin-top: 30px;}</style>
</head>
<body><div class="one"><div class="content1">padding属性</div></div><br/><br/><br/><!----padding内边距缩写-->
<!-- <div class="two"><div class="content2">padding属性缩写</div></div> -->外边距属性：margin
设置元素与元素之间的距离。
margin-top: 长度值 |百分比 |auto
margin-right: 长度值 |百分比 |auto
margin-bottom: 长度值 |百分比 |auto
margin-left: 长度值 |百分比 |auto
说明：值可以为负值。
margin值为auto时，实现水平方向居中显示效果。
- 垂直方向，两个相邻元素都设置外边距，外边距会发生合并
- 合并后外边距高度=margin-top和margin-bottom中取最大值
box-sizing：border-box（转为盒内边框），只有设置宽和高时box-sizing才有效
<style>*{margin: 0;padding: 0;}html,body{width: 100%;height: 100%;border: 1px solid silver;box-sizing: border-box;/*在设置宽和高有效*/}/*盒子模型中 上下放置的元素 之间的外间距不累加 取最大值*//*盒子模型中 左右放置的元素 之间的外间距累加*/.block_left{width: 300px;height: 300px;border: 5px solid black;/*设置外间距*/margin:100px;float: left;/*设置内间距*//*padding: 100px;*//*上 右 下 左*//*padding: 100px 100px 100px 100px;*//*padding: 100px 60px 20px;*//*padding: 100px 60px;*/padding: 100px;box-sizing: border-box;}.block_right{width: 300px;height: 300px;border: 5px solid black;box-sizing: border-box;/*设置外间距*/margin:100px;float: left;}</style>
</head>
<body><div class="block_left">我是文本内容</div><div class="block_right"></div>
盒子模型计算
盒子在页面中所占宽度（width）=左边距+左边框+左填充+内容宽度+右边距+右边框+右填充
盒子在页面中所占高度（height）=上边距+上边框+上填充+内容高度+下边距+下边框+下填充
<head lang="en"><meta charset="UTF-8"><title>盒子模型计算</title><style type="text/css">div{width:68px;height:48px;margin: 10px;padding:5px;border:1px red solid; }</style>
</head>
<body><!--页面总占宽100px,高80px，其中margin:10px; padding:5px; border:1px--><div>盒子模型计算</div>
</body>盒子实际小案例
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>盒子应用</title><style type="text/css">body,p,div{margin:0px;padding:0px;font-family: "微软雅黑";}.course{width:220px;background-color:#f2f4f6;border:1px #ececec solid; margin:0 auto;}.list1{width:100%;height:90px;background-color: #040410;padding-top:60px;}.content{font-size: 20px;color:white;font-weight:bold;text-align: center;}.list2{font-size:16px;border-bottom:1px white solid;margin:0px 15px;padding:10px 5px 5px 5px;line-height:1.5em; }.special{border-bottom-style:none;}span{color:#93999f;font-size:12px;}</style>
</head>
<body>
<div class="course"><div class="list1"><p class="content">前端课程排序</p></div><div class="list2"><p>HTML和CSS基础课程</p><span>99999人在学</span></div><div class="list2"><p>HTML和CSS基础课程</p><span>99999人在学</span></div><div class="list2 special"><p>HTML和CSS基础课程</p><span>99999人在学</span></div>
</div>
</body>
</html>
结果展示
