边框
border—left-width:5px;
border-left-style:dotted;
border-left-color:#0000ff;
border-left:3px solid black;
border:10px solid orange;
画圆
border-radius：50%；
display
行内标签是无法设置长宽 只有块儿级可以设置
display:none 彻彻底底的隐藏标签(页面上不会显示 也不会保留标签的位置)
visibility: hidden 隐藏的不彻底
盒子模型
我们可以将标签看成是一个盒子(快递盒)
1.快递包里面的实际物体 content(内容)
2.物体与内部盒子墙的距离 padding(内边距、内填充)
3.快递盒的厚度 border(边框)
4.快递盒之间的距离 margin(外边距)
!*padding: 20px; 上下左右*!*/
!*padding: 20px 40px; 上下 左右*!*/
!*padding: 10px 20px 30px;上 左右 下*!*/
!*padding: 10px 20px 30px 40px;上 右 下 左*!*/
margin与padding用法一致
针对标签的嵌套 水平方向可以居中
margin: 0 auto;
浮动
浮动就是用来做页面布局的
浮动的现象：float:left\right
浮动带来的影响：浮动的元素是脱离正常文档流的 会造成父标签塌陷
如何解决浮动的影响：clear
解决浮动带来的影响终极方法
先提前写好样式类
.clearfix:after {
content: '';
display: block;
clear: both;
}
谁塌陷了 就给谁添加clearfix样式类就可以了
浏览器会优先展示文本内容(如果被挡住)
溢出
div {
height: 150px;
width: 150px;
border: 5px solid greenyellow;
border-radius: 50%;
overflow: hidden;
}
div img {
max-width: 100%;
}
定位
标签在默认的情况下都是无法通过定位的参数来移动的
针对定位有四种状态
1.static静态(标签默认的状态 无法定位移动)
2.relative相对定位(基于标签原来的位置)
3.absolute绝对定位(基于某个定位过的父标签做定位)
4.fixed固定定位(基于浏览器窗口固定不动)
.c1 {
background-color: red;
height: 100px;
width: 100px;
position: relative;
}
.c2 {
background-color: greenyellow;
height: 100px;
width: 200px;
position: absolute;
top: 100px;
left: 100px;
}
.c1 {
border: 5px solid black;
height: 100px;
width: 100px;
position: fixed;
right: 100px;
bottom: 200px;
}
z-index
body {
margin: 0;
}
.cover {
background-color: rgba(127,127,127,0.5);
position: fixed;
left: 0;
bottom: 0;
right: 0;
top: 0;
z-index: 100;
}
.modal {
height: 200px;
width: 400px;
background-color: white;
z-index: 101;
position: fixed;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -100px;
}
仿博客园洗浴中心
blog.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cnblog</title>
<link rel="stylesheet" href="blog.css">
</head>
<body>
<div class="blog-left">
<div class="blog-image">
<img src="洗浴.jpg" alt="">
</div>
<div class="blog-title">
<p>金牌洗浴中心</p>
</div>
<div class="blog-info">
<p>一场养生的旅程，一份心灵的约定。</p>
</div>
<div class="blog-link">
<ul>
<li><a href="">光临地址</a></li>
<li><a href="">联系电话</a></li>
<li><a href="">微信公众号</a></li>
</ul>
</div>
<div class="blog-tag">
<ul>
<li><a href="">#省心</a></li>
<li><a href="">#安全</a></li>
<li><a href="">#放心</a></li>
</ul>
</div>
</div>
<div class="blog-right">
<div class="article-list">
<div class="article-title">
<span class="title">完美服务</span>
<span class="date">2022/12/2</span>
</div>
<div class="article-content">
<p>按摩，洗脚，搓背，拔罐。</p>
</div>
<div class="article-bottom">
<span>#咸之缘，淡之情，泉之恋。</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<span class="title">完美服务</span>
<span class="date">2022/12/2</span>
</div>
<div class="article-content">
<p>按摩，洗脚，搓背，拔罐。</p>
</div>
<div class="article-bottom">
<span>#咸之缘，淡之情，泉之恋。</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<span class="title">完美服务</span>
<span class="date">2022/12/2</span>
</div>
<div class="article-content">
<p>按摩，洗脚，搓背，拔罐。</p>
</div>
<div class="article-bottom">
<span>#咸之缘，淡之情，泉之恋。</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<span class="title">完美服务</span>
<span class="date">2022/12/2</span>
</div>
<div class="article-content">
<p>按摩，洗脚，搓背，拔罐。</p>
</div>
<div class="article-bottom">
<span>#咸之缘，淡之情，泉之恋。</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<span class="title">完美服务</span>
<span class="date">2022/12/2</span>
</div>
<div class="article-content">
<p>按摩，洗脚，搓背，拔罐。</p>
</div>
<div class="article-bottom">
<span>#咸之缘，淡之情，泉之恋。</span>
</div>
</div>
</div>
</body>
</html>
CSS.blog
body{
margin: 0;
background-color: #eeeeee;
}
a{
text-decoration: none;
}
ul{
list-style-type:none;
padding-left: 0;
}
.clearfix:after{
content:'';
display: block;
clear:both;
}
.blog-left{
float: left;
background-color: #4e4e4e;
position: fixed;
width: 20%;
height: 100%;
}
.blog-image{
height: 200px;
width: 200px;
border-radius: 50%;
border: 5px solid white;
overflow: hidden;
margin: 20px auto;
}
.blog-image img{
max-width: 100%;
}
.blog-title,.blog-info{
color: darkgray;
font-size: 18px;
text-align: center;
}
.blog-link a,.blog-tag a{
color: darkgray;
font-size: 24px;
}
.blog-link a:hover,.blog-tag a:hover{
color: white;
}
.blog-link ul,.blog-tag ul{
text-align: center;
margin:80px 0;
}
.blog-right{
float: right;
width: 80%;
}
.article-list{
background-color: white;
margin: 20px 40px 10px 10px;
box-shadow: rgba(128,128,128,0.6) 5px 5px 10px;
}
.article-list .date{
float: right;
font-size: 20px;
margin: 10px 20px;
}
.article-list .title{
font-size: 38px;
}
.article-title{
border-left:5px solid red;
text-indent: 14px;
}
.article-content{
font-size: 20px;
text-indent: 20px;
border-bottom: 1px solid black;
}
.article-bottom{
padding: 10px 10px 10px 20px;
}
