标签：开心 nbsp 20px border 句子 css left
边框
/*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样式类就可以了
ps:浏览器会优先展示文本内容(如果被挡住)
溢出
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;
}
简易博客页面搭建
1.分析页面结构
利用布局标签div和span搭建架子
2.先编写网页骨架
HTML
3.再编写CSS
4.最后编写JS
<html lang="en">
<head>
<meta charset="UTF-8">
<title>博客园</title>
<style>
body {
margin: 0;
background-color: #eeeeee;
}
a {
text-decoration: none;
color: rgba(249, 208, 245, 0.82);
}
ul {
list-style-type: none;
padding-left: 0;
}
.user_info{float: left;height: 100%;width:20%;background-color:rgb(182,135,144);position:fixed;left: 0;top: 0;}
.user_info>.user_photo{width: 70%;height:20%;border:2px rgba(255, 255, 255, 0.98) solid;border-radius: 50%;margin: 20px auto;overflow: hidden;}
.user_info>.user_photo img{max-width: 100%;}
.user_msg{float:right; width: 80%; background-color: white;height: 100%}
ul li{text-align: center;}
.user_d1{float: left; padding: 15px ;}
.user_d2:after{margin: 0px auto; overflow: hidden}
#user{overflow: hidden;}
.left_text{}
.butten{margin-top: 100px;overflow: hidden}
.left_text{padding-bottom: 15px}
#fensi{padding-left: 30px}
.info{ margin: 20px 50px 20px 20px;
box-shadow: 20px 20px 20px rgba(0,0,0,0.5);}
.time{float: right}
.user_title{font-size:30px; border-left:10px red solid }
span{tab-index: 2em}
.info_msg{border: 1px black;border-bottom:solid;text-indent: 20px }
.biaoqian{text-indent: 20px}
</style>
</head>
<body>
<!--个人简介-->
<div id="user" class="user_info ">
<!-- 头像框-->
<div class="user_photo">
<img src=https://img0.baidu.com/it/u=1883883452,156851265&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1670086800&t=5db3f65e78a4f62d766a1cce0a652220" alt="">
<!-- <img src="/i/l/?n=23&i=blog/2987264/202212/2987264-20221202183517769-2033393420.jpg" alt="">-->
</div>
<div class="left_text user_name"> 用户：<a href="">冰柠檬檬</a></div>
<div class="left_text"> 我的优点有很多哦：<br></div><div class="left_text"> 我是敲代码2年半的小鲜肉，我会唱、跳、rap。如果你喜欢我请关注我吧。</div>
<div>
<ul class="butten">
<li ><a href="">QQ：925236345</a></li>
<li><a href="">微信：15937461371</a></li>
<li><a href="">手机：15937461371</a></li>
</ul>
</div>
<div class="user_d2">
<ul >
<li class="user_d1"><a href="" id="fensi">粉丝</a></li>
<li class="user_d1"><a href="">关注</a></li>
<li class="user_d1"><a href="">打赏</a></li>
</ul></div>
</div>
<!-- 个人主页-->
<div class="user_msg ">
<div class="info">
<div class="time">2022/12/2</div>
<div class="user_title">每日开心一句话 希望每天都开心的句子</div>
<div class="info_msg"><span>1、希望每天没心没肺的活着，开心就大笑，难过就大哭，累了就睡一觉，醒来觉得~晨安夜眠都甚好</span>。</div>
<div class="biaoqian"><a href="">#每天都特别开心的句子</a> <a href="">#记录每天的生活开心的句子</a>
</div>
</div>
<div class="info">
<div class="time">2022/12/2</div>
<div class="user_title">每日开心一句话 希望每天都开心的句子</div>
<div class="info_msg"><span>2、人海茫茫，友谊相连;真诚相待，祝福永远!缘分可贵，友情无价，让我们带着微笑，开心每一天。</span>。</div>
<div class="biaoqian"><a href="">#每天都特别开心的句子</a> <a href="">#记录每天的生活开心的句子</a>
</div>
</div>
<div class="info">
<div class="time">2022/12/2</div>
<div class="user_title">每日开心一句话 希望每天都开心的句子</div>
<div class="info_msg"><span>3、人生路上，很多时候看不清未来，回不到过去。那么，就别让时间在眺望未来中流逝，莫让年华在回忆过去中沧桑，把握今天，开心享受每一天。</span>。</div>
<div class="biaoqian"><a href="">#每天都特别开心的句子</a> <a href="">#记录每天的生活开心的句子</a>
</div>
</div>
<div class="info">
<div class="time">2022/12/2</div>
<div class="user_title">每日开心一句话 希望每天都开心的句子</div>
<div class="info_msg"><span>4、多一分淡泊，人生就多一分幸福。人生的烦恼来自于：我们忘了自己的事，爱管别人的事，担心老天爷的事。要轻松自在很简单：打理好自己的事，不干涉别人的事，甭操心老天爷的事。与大家共勉，做好自己，开心每一天。</span>。</div>
<div class="biaoqian"><a href="">#每天都特别开心的句子</a> <a href="">#记录每天的生活开心的句子</a>
</div>
</div>
<div class="info">
<div class="time">2022/12/2</div>
<div class="user_title">每日开心一句话 希望每天都开心的句子</div>
<div class="info_msg"><span>5、我们都有缺点，所以彼此包容一点。我们都有优点，所以彼此欣赏一点。我们都有个性，所以彼此谦让一点。我们都有差异，所以彼此接纳一点。我们都有伤心，所以彼此安慰一点。我们都有快乐，所以彼此分享一点。因为我们有缘相识，请珍惜生命中的每一位家人、朋友!开心的过好每一天。</span>。</div>
<div class="biaoqian"><a href="">#每天都特别开心的句子</a> <a href="">#记录每天的生活开心的句子</a>
</div>
</div>
<div class="info">
<div class="time">2022/12/2</div>
<div class="user_title">每日开心一句话 希望每天都开心的句子</div>
<div class="info_msg"><span>6、生活没有过不去的坎，那些放不下的过去，终会随时间烟消云散，一辈子不长，愿我们都能，拥有一颗淡然的心，开心的度过每一天。</span>。</div>
<div class="biaoqian"><a href="">#每天都特别开心的句子</a> <a href="">#记录每天的生活开心的句子</a>
</div>
</div>
<div class="info">
<div class="time">2022/12/2</div>
<div class="user_title">每日开心一句话 希望每天都开心的句子</div>
<div class="info_msg"><span>6、生活没有过不去的坎，那些放不下的过去，终会随时间烟消云散，一辈子不长，愿我们都能，拥有一颗淡然的心，开心的度过每一天。</span>。</div>
<div class="biaoqian"><a href="">#每天都特别开心的句子</a> <a href="">#记录每天的生活开心的句子</a>
</div>
</div>
<div class="info">
<div class="time">2022/12/2</div>
<div class="user_title">每日开心一句话 希望每天都开心的句子</div>
<div class="info_msg"><span>6、生活没有过不去的坎，那些放不下的过去，终会随时间烟消云散，一辈子不长，愿我们都能，拥有一颗淡然的心，开心的度过每一天。</span>。</div>
<div class="biaoqian"><a href="">#每天都特别开心的句子</a> <a href="">#记录每天的生活开心的句子</a>
</div>
</div>
</body>
</html>```
标签：开心,
nbsp,
20px,
border,
句子,
css,
left
From： https://www.cnblogs.com/bnmm/p/16945565.html