css(2)

边框

 /*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="https://img2023.cnblogs.com/blog/2987264/202212/2987264-20221202183517769-2033393420.jpg" alt="">-->
  </div>
  <div class="left_text user_name">&nbsp;&nbsp;用户：<a href="">冰柠檬檬</a></div>
  <div class="left_text">&nbsp;&nbsp;我的优点有很多哦：<br></div><div class="left_text">&nbsp;&nbsp;我是敲代码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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<a href="">#记录每天的生活开心的句子</a>
</div>
</div>
 
</body>
</html>```

posted @ 2022-12-02 20:39 冰柠檬檬阅读(22) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 前端html

· jQuery、bootstrap

· 前端 css

· css边框盒子模型浮动定位

· 边框、display、盒子模型、浮动、溢出、定位、z-index

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）

公告

昵称：冰柠檬檬
园龄： 2年5个月
粉丝： 0
关注： 4

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

flask(6)

bnmm

css(2)

边框

display

盒子模型

浮动

溢出

定位

z-index

简易博客页面搭建

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

	/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: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;
	}

	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="https://img2023.cnblogs.com/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>```