欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

pythonweb day05

程序员文章站 2022-06-13 12:26:32
...

pythonweb day05

目录

 

1，文本相关属性

2，表格属性

3，过渡效果

4，布局

1，文本相关属性

  1. 字体属性
    1. 设置字体大小
      属性：font-size
      取值：px
    2. 指定字体名称
      属性：font-family
      取值：字体名称，如果出现多个名称，使用，隔开
      注意：如果字体名称中出现中文或者空格，要是用引号括起来
      et:
      font-family:Arial,serif;
      font-family:'微软雅黑','黑体';
      font-family:'Microsoft YaHei';
    3. 设置字体加粗
      属性:font-weight
      取值:
      1. 单词表示
        normal 默认值，正常显示
        bold 加粗显示
        lighter 极细文本
      2. 数字表示
        可以取值100-200之间的整百数值，值越大字体越粗
        400 等价于 normal
        700 等价于 bold
    4. 设置字体样式
      属性：font-style
      取值：
      1. normal 正常显示
      2. italic 使用斜体
      3. oblique 文本倾斜，出现斜体效果
    5. 字体属性简写
      属性：font
      取值：style weight size family
      注意：font-family 属性值必须写，不写的话整个属性无效
      et：
      font:18px '黑体';
      font:18px '黑体',serif; 
      <!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		h1,p{
			font-size: 24px;
			font-family: serif;
		}
		p{
			font-family: fantasy;
			font-weight: 700;
			font-style: italic;
		}
		h2{
			font: normal 24px "黑体";
		}
	</style>
</head>
<body>
	<h1>中非人民大团结</h1>
	<p>Hello World</p>
	<h2>字体属性简写</h2>
</body>
</html>

       

  2. 文本属性
    1. 文本颜色
      属性：color
      取值：颜色值
    2. 文本水平对齐方式
      属性：text-align
      取值：left(默认值）/ center / right / justify(两端对齐) 
      <!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		div{
			width: 200px;
			height: 300px;
			border: 1px solid red;
			text-align: justify;
		}
	</style>
</head>
<body>
	<div>
		W3C has published a new version of its Roadmap of Web Applications on Mobile, an overview of the various technologies developed in W3C that increase the capabilities of Web applications, and how they apply more specifically to the mobile context.
	</div>
	<div>
		中华文化博大精深，吖，中非，合作源远流长，中华文化博大精深，中非，合作源远流长，中华文化博大精深，中非合作源远流长，中华文化博大精深，中非合作源远流长
	</div>
</body>
</html>

       

    3. 设置行高
      属性：line-height
      取值：像素值 或无单位的数值，表示是当前文本大小的倍数
      et： 
      line-height:32px;
p{
    font-size:18px;
    line-height:2;
    //行高为字体大小的2倍 36px
}

      常用：使用行高设置文本的垂直居中
      用法：将元素的行高与高度保持一致 
      div{
    width:100px;
    height:50px;
    line-height:50px;  
    
}

      用法2：使用行高对文本上下进行微调
      line-height = height 垂直居中
      line-height > height 文本偏下
      line-height < height 文本偏上
      注意：一行文本，在当前行中一定是垂直居中的，上下的空隙由浏览器自动分配

    4. 文本的装饰线
      属性：text-decoration
      取值：

      1. underline：下划线

      2. overline：上划线

      3. line-through：删除线

      4. none：针对超链接，取消默认下划线
         

        <!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		div{
			width: 300px;
			height: 50px;
			background-color: pink;
			font-size: 24px;
			line-height: 50px;
			text-align: center;
			text-decoration: underline;
		}
	</style>
</head>
<body>
	<div>行高的使用</div>
</body>
</html>

         

2，表格属性

  1. 基础样式属性是通用
    width height background color margin padding ...
  2. 独有的CSS属性
    1. 边框合并
      属性：border-collapse
      1. 取值：
        1. separate 默认值 边框分离
        2. collapse 边框合并
      2. 注意：
        1. td 不支持外边距
        2. 边框合并属性只能写在table标签里
    2. 边框边距
      1. 设置单元格之间的距离
      2. 属性：border-spacing
        取值：h-Value v-Value
        h-value：表示水平方向的距离
        v-value：表示垂直方向的距离
        两个值之间使用空格隔开
      3. 注意：
        只能在表格边框分离状态下使用 
        <!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		table{
			border: 1px solid red;
			/*表格边框合并*/
			/*border-collapse: collapse;*/
			border-spacing: 10px 20px;
		}
		td{
			border: 1px solid green;
			/*td 不支持外边距*/
			margin: 0;
		}
	</style>
</head>
<body>
	<table>
		<tr>
			<td>数据</td>
			<td>数据</td>
			<td>数据</td>
		</tr>
	</table>
</body>
</html>

         

3，过渡效果

  1. 过渡效果指的是元素CSS属性值在变化时的一种平滑效果
  2. 语法：
    1. 指定过渡属性
      作用：用来指定哪些CSS属性需要添加过渡效果
      transition-property
      取值：
      1. 单个的属性名称
        et：transition-property:width;
      2. all
        但凡能添加过渡效果的属性都添加效果
      3. 指定多个属性名称，使用 , 隔开
        et： 
        div{
    width:  100px;
    height: 100px;
    background: red;
    transiton-property:all;
    }
div:hover{
    width:200px;
    height:200px;
    }

         

      4. 能够添加过渡效果的属性
        1. 所有颜色相关的属性
        2. 所有取值为数字的属性
    2. 指定过渡时长
      表示在多长时间内完成过渡效果
      属性：transition-duration
      取值：单位为s（秒）或者是ms（毫秒）的数值
      et： 
      1s = 1000ms
0.3s = 300ms
.3s = 300ms

       
    3. 指定过渡效果的速度时间曲线
      属性：transition-timing-function
      作用：设置过渡效果的变化速率
      取值：
      1. ease 默认值
        慢速开始，中间快速变快，慢速结束
      2. linear 匀速变化
      3. ease-in 慢速开始，加速结束
      4. ease-out 快速开始，减速结束
      5. ease-in-out 慢速开始和结束，中间过程先加速后减速
    4. 指定过渡延迟
      属性：transition-delay
      作用：延迟几秒之后再发生过渡效果
      取值：s / ms为单位的数值 
      <!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background-color: red;
			/*指定过渡属性*/
			/*transition-property: all;*/
			/*过渡时长*/
			/*transition-duration: 3s;*/
			/*时间速率*/
			/*transition-timing-function: ease;*/
			/*延迟执行*/
			/*transition-delay: 1s;*/

		}
		div:hover{
			width: 300px;
			height: 300px;
			/*写在伪类影响过渡效果*/
			background-color: green;
			transition-property: all;
			transition-duration: 3s;
		}

	</style>
</head>
<body>
	<div></div>
</body>
</html>

       

    5. 使用注意：
      1. 其他属性都可以省略（transition-property, timing-function, delay）过渡时长duration必须设置，否则CSS样式的变化就又成顺时变化，没有过渡效果了
      2. 使用过渡相关的属性时，要定义在元素的默认样式中，不能写在伪类选择器中，会影响过渡效果

        练习：
        1. 创建200*200的元素，背景色为红色
        2. 鼠标悬停时，
          1. 尺寸400*400
          2. 背景颜色为绿色
          3. 元素变成圆形，样式改变在5s内完成
              
            <!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			background-color: red;
			transition-duration: 5s;
		}
		div:hover{
			width: 400px;
			height: 400px;
			background-color: green;
			border-radius: 50%;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

             

    6. 属性简写
      属性：transition
      取值：property duration timing-function delay
      注意：duration 必须写

4，布局

  1. 设置元素在网页中的排列方式和位置
  2. 分类
    1. 普通流布局/标准流布局/文档流布局
      默认布局方式
      特点：
      将元素按照书写顺序和元素类型，从左向右，从上至下排列
    2. 浮动布局
      属性：float
      取值：left / right / none(默认值)
        left：元素向左浮动，停靠在其他元素的边缘
        right：元素向右浮动，停靠在其他元素的边缘
      特点：
      1. 元素设置浮动之后，会脱离文档流，脱流之后，元素在文档中不占位，呈现一种浮动元素‘漂浮’在文档流上方的效果
      2. 浮动元素后面的正常元素会上移，占据原本浮动元素所在的位置
      3. 多个元素同时左浮或右浮，浮动元素会依次停靠在前一个元素的边缘位置
      4. 如果父元素中无法并排显示浮动元素，浮动元素会自动换行显示
      5. 浮动元素在文档中不占位
      6. 所有类型的元素，只要设置浮动，就可以设置宽高，行内/行内块元素浮动之后，水平方向上就没有空隙了 
        <!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		body{
			margin:0;
		}
		div{
			width: 300px;
			height: 300px;
		}
		#left{
			background: red;
			float: left;
		}
		#right{
			background-color: green;
			float: left;
		}
		span,label{
			float: left;
			width: 200px;
			height: 300px;
		}
		span{
			background-color: blue;
		}
		label{
			background-color: orange;
		}
	</style>
</head>
<body>
	<div id="left"></div>
	<div id="right"></div>
	<span>span</span>
	<label>label</label>
</body>
</html>

         

    3. 浮动元素的特殊效果
      文字环绕效果
      浮动元素虽然会遮挡后面正常的元素，但是不会遮挡正常元素中内容的显示，内容会自动围绕在浮动元素周围显示
      示例如下： 
      <!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		#box{
			width: 600px;
		}
		img{
			float: left;
		}
	</style>
</head>
<body>
	<div id="box">
		<img src="northStar.jpg">
		<span>
			北极星小姐姐，女，1994，学霸，多年芭蕾舞经验，天赋异禀中精湛的演技被大众所熟知。北极星小姐姐，女，1994，学霸，多年芭蕾舞经验，天赋异禀中精湛的演技被大众所熟知，北极星小姐姐，女，1994，学霸，多年芭蕾舞经验，天赋异禀中精湛的演技被大众所熟知
		</span>
	</div>
</body>
</html>

       

    4. 浮动元素对父元素高度的影响
      由于浮动元素在文档中不占位，一旦子元素全部浮动，父元素的高度就变成0，影响父元素背景颜色，背景图片显示，影响后面元素的布局
      1. 指定父元素的高度
        弊端：无法确认父元素的高度，不一定每次都清楚知道
      2. 父元素中设置overflow:hidden;
        弊端：如果父元素要显示溢出的内容，设置overflow之后，溢出内容就不显示了
      3. 清除浮动带来的影响
        1. 在父元素的末尾添加空的块级元素
        2. 设置空标签clear : both; 
          <!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		body{
			margin: 0;
		}
		#nav,#main{
			width: 800px;
			margin: 0 auto;
		}
		#nav{
			background: pink;
			/*父元素指定高度*/
			/*height: 50px;*/
			/*overflow: hidden;*/
		}
		#nav ul{
			/*取消列表的项目符号*/
			list-style: none;
			padding:0;
		}
		#nav li{
			float: left;
			width: 200px;
			height: 50px;
			background-color: rgba(255,0,0,.5);
			text-align: center;
			line-height: 50px;

		}
		#nav p{
			clear: both;
		}

		#main{
			height: 500px;
			background-color: green;
		}
	</style>
</head>
<body>
	<div id="nav">
		<ul>
			<li>首页</li>
			<li>天气</li>
			<li>首页</li>
			<li>天气</li>
		</ul>
		<p></p>
	</div>
	<div id="main"></div>
</body>
</html>

           

    5. 清除浮动
      由于浮动元素会对其后正常元素和其父元素带来一定的影响，所以在网页布局中要清除这种影响
      属性：clear
      取值：
      1. none 默认值，不做处理
      2. left 清除当前元素前面左浮元素带来的影响，当前正常元素左边不允许出现浮动元素
        et：未写
      3. right 正常元素右边不允许出现浮动元素
      4. both 正常元素两边都不能出现浮动元素 
        <!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
		}
		.d0{
			background-color: blue;
			float: left;
		}
		.d1{
			background-color: red;
			float: right;
		}
		.d2{
			width: 100%;
			background-color: green;
			/*clear:left;*/
			/*clear: right;*/
			clear: both;
		}
	</style>
</head>
<body>
	<div class="d0"></div>
	<div class="d1"></div>
	<div class="d2"></div>
</body>
</html>

         

作业：完成下图，

pythonweb day05

提供左边的插图

pythonweb day05

解析：

先把内容写出来

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="00-regist.css">
</head>
<body>
	<div id="container">
		<!-- 1. 标题 -->
		<h2>会员登录</h2>
		<!-- 2. 主体分两部分 -->
		<div class="left">
			<img src="huiyuan.jpg">
			<a href="#">煞笔</a>
		</div>
		<div class="right"> 
			<form action="" method="">
				<!-- 第一行 -->
				<div class="form-line">
					<p>手机号</p>
					<input type="text" name="uname" class="form-control">
				</div>
				<!-- 第二行 -->
				<div class="form-line">
					<p>密码</p>
					<input type="password" name="upwd" placeholder="请输入6-20位的字符" class="form-control">
				</div>
				<!-- 第三行 -->
				<div class="form-line">
					<p></p>
					<div>
						
						<p class="forget">
							<a href="#">忘记密码</a>
							<a href="#">快捷登录</a>
						</p>
						<input type="checkbox" name=" " class="isSaved"> 记住密码
					</div>
				</div>
				<!-- 最后 -->
				<div class="form-line">
					<p></p>
					<div>
						<input type="submit" name="" value="登录" class="denglu">
						<a href="#" class="zhuce">会员注册</a>
					</div>
				</div>

			</form>
		</div>
	</div>
</body>
</html>

然后写排版建立.css文档

/*1. 清除浏览器默认样式*/
body,h2,p{
	margin:0;
}
#container{
	width: 990px;
	margin: 0 auto;
}
#container h2{
	font-weight: normal;
	color: #999;
	border-bottom: 1px solid #ccc;
	padding: 20px 0;
	margin-bottom: 20px;
}
.left{
	float: left;
}
.right{
	float: right;
	margin-top : 70px;
	margin-right: 40px;
}
.form-line>p{
	float: left;
	color: #999;
	width: 64px;
	/*跟输入框高度保持一致*/
	height: 40px;
	text-align: right;
	line-height: 40px;
	margin-right: 40px;

}
.form-line>input,.form-line>div{
	float: right;
	width: 300px;
}
.form-control{
	/*宽高 边框 边距*/
	box-sizing: border-box;
	width: 300px;
	height: 40px;
	border: 1px solid #ccc;
	/*轮过线*/
	outline: none;
	padding: 0 12px;
	/*文本颜色*/
	color: #555;
	/*默认输入框的字体为13.33px*/
	font-size: 16px;
}
.form-line{
	margin-top: 20px;
	/*由于子元素都浮动了，每行的div需要单独指定*/
	height: 40px;
	color: #999;

}
.forget{
	float: right;
}
.isSaved{
	width: 18px;
	height: 18px;
	vertical-align: middle;
}
.forget a{
	color: #999;
}
.denglu,.zhuce{
	box-sizing: border-box;
	width: 145px;
	height: 38px;
	border: 1px solid #64a131;
	text-align: center;
	line-height: 38px;
	border-radius: 5px;
	/*字体大小*/
	font-size: 18px;
}
.zhuce{
	float: right;
	text-decoration: none;
	color: #64a133;
}
.denglu{
	background-color: #64a131;
	color: #fff;
}
.left{
	position: relative;

}
.left>a{
	box-sizing: border-box;
	width: 153px;
	height: 48px;
	text-align: center;
	line-height: 48px;
	border: 1px solid #64a131;
	text-decoration: none;
	color: #54a131;
	/*定位布局*/
	position: absolute;
	left: 173px;
	bottom: 20px;


}

 

 

 

 

 

 

 

 

 

上一篇： SpringCloud Alibaba 之Nacos服务注册和配置中心

下一篇： 【每天学点管理】——员工激励-随机应变策略

推荐阅读