Bootstrap

【Web03】Css的引用方式，Css的其他属性，Css进阶布局（水平）

CSS回顾

选择器

基本：标签选择器、ID选择器

标签选择器:

标签{

}

ID选择器:标签中定义ID属性。

#ID值{

}

重点：类选择器

标签中定义ID属性。

.类名{

}

Div与Span

div——任意大小的长方形，大小css：width，height控制。–会换行

span——行内，不会换行。

css常用属性

width/height

宽度/高度

定义：（）px-固定好的 ，（）%–与容器大小比例有关

无

font字体

font-size
  • 28px;
  • 2em;–倍数
font-fimily

要用字体的名称：

eg：宋体，华文行楷……

font-weight

字体粗细–bold加粗

下载字体

color–字体颜色

表示方法：

  1. 英文单词
  2. #16进制
  3. RGB(red,green,blue) 0~255

background–背景

-color

颜色

-image

背景图片

-repeat

背景图片是否重复

  • x-repeat 横向重复
  • y-repeat 纵向重复
  • no-repeat 不重复
-size

背景图片大小 在这里插入图片描述

  • cover
  • 100% 100% —— 全屏放大后铺满
-position

背景图片位置

border–边框

顺时针–上下左右

-top
-right
-bottom
-left
-width
-color
-style

solid/dashed 实线/虚线

简写
border :  4px red solid;
border-colapse

边框是否合并，表格–默认分离

margin边距

与边(浏览器)的距离

-top
-right
-bottom
-left
居中
margin-left: auto;
margin-right: auto;

margin: 0 auto 0 auto;/*简写版*/

text–文本处理

text-decoration
text-decoration: none;/*去下划线/删除线....*/
text-align
  • left
  • right
  • center

Css的引用方式

内部引用

本页面有效

<head>
	<style>
		选择器{
		 
		}
	</style>
</head>

在这里插入图片描述

项目结构

在这里插入图片描述
在这里插入图片描述

引入外部字体–鼎猎珠海体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css-内部引用</title>
		<style>
			div{
				width: 50%;
				height: 300px;
				border: 3px green solid;
				margin: 10% auto 0 auto;
				
				background-image: url('../img/bluesky.jpg');
				/* background-size: cover; */
				background-size: 100% 100%;
				/* 文字居中 */
				text-align: center;
				/* font-family: 鼎猎珠海体; */
				font-family: mf;
			}
			@font-face {
				font-family: mf;
				src: url('../img/fonts/web-font04.ttf');/*下载的其他字体*/
			}
		</style>
	</head>
	<body>
		
		<div>
			<h1>天气状况</h1>
		</div>
	</body>
</html>

内嵌式

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css-内部引用</title>
		<style>
			div{
				width: 50%;
				height: 300px;
				border: 3px green solid;
				margin: 10% auto 0 auto;
				
				background-image: url('../img/bluesky.jpg');
				background-size: 100% 100%;
				/* 文字居中 */
				text-align: center;
				h1{
					color: aquamarine;
				}
			}
			
		</style>
	</head>
	<body>
		
		<div>
			<!-- 高优先级 -->
			<h1 style = "color: black;">天气状况</h1>
			<h1>下雨--放烟花</h1>
		</div>
	</body>
</html>

*外部引用

在这里插入图片描述

css

/* 外部div */
#outId{
	width: 80%;
	height: 800px;
	border: 10px blanchedalmond solid;
	margin: 0 auto 0 auto;
	background-image: url('../img/libai.jpg');
	background-size: 100% 100%;
}
/* 内部div */
#inID{
	width: 30%;
	border: 1px red solid;
	text-align: center;
	margin-left: 0%;
	margin-top: 50px;
	font-family: poemFont;
	font-size: 2em;
}
/* 自定义字体 */
@font-face {
	font-family:poemFont ;
	src: url('../img/fonts/web-font04.ttf');
}

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>古诗-外部css引用</title>
		<link rel="stylesheet" href="../css/stylr-poem.css" />
	</head>
	<body>
		<div id="outId">
			<div id="inID">
				<h3>静夜思</h3>
				<h6>唐·李白</h6>
				<hr />
				<p>床前明月光⑵，</p>
				<p>疑是地上霜⑶。</p>
				<p>举头望明月⑷，</p>
				<p>低头思故乡。</p>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

盒子模型

页面布局问题 在这里插入图片描述

image-20241117110537948

内部小红盒子左右居中

在这里插入图片描述
在这里插入图片描述

#outId{
	width: 500px;
	height: 400px;
	border: 1px darkblue solid;
	/* 上下压 */
	 padding-top: 100px;
	 padding-bottom: 100px;
}

#inID{
	width: 200px;
	border: 10px red dashed;
	/* padding-left: 100px; */
	text-align: center;
	padding-top: 50px;
	padding-bottom: 50px;
	margin: 0 auto 0 auto;
	
	background-image: url('../img/libai.jpg');
	background-size: 100% 100%;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Box</title>
		<link rel="stylesheet" href="../css/css-box01.css" />
	</head>
	<body>
		<div id="outId">
			<div id="inID">
				<p>测试一下盒子model</p>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

Css其他属性

border-radius(弧度)

有弧度的图像
在这里插入图片描述

#outId{
	width: 400px;
	height: 400px;
	border: 5px blue solid;
	margin: 0 auto 0 auto;
	/* 弧度切换 --画⚪ */
	border-radius: 200px 200px 200px 200px;

}

在这里插入图片描述

hover 伪类

选择器:hover 伪类 – 一个动作。

#outId{
	width: 400px;
	/* height: 400px; */
	border: 5px blue solid;
	margin: 0 auto 0 auto;
	/* 弧度切换 --画⚪ */
	border-radius: 200px 200px 200px 200px;
	padding-top: 100px;
	padding-bottom: 100px;
}

#inID{
	width: 200px;
	height: 200px;
	border: 0px blue solid;
	margin: 00 auto 0 auto;
	border-radius: 100px 100px 100px 100px;
	/* background-color: aquamarine; */
	background-image: url('../img/bluesky.jpg');
}

#inID:hover{
	background-image:url('../img/libai.jpg');
	background-size: 100% 100%;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Box</title>
		<link rel="stylesheet" href="../css/css-box02.css" />
	</head>
	<body>
		<div id="outId">
			<div id="inID">
				
			</div>
		</div>
	</body>
</html>

鼠标在大圆内的白色区域时–蓝天白云

在这里插入图片描述

在内部小圆时–李白
在这里插入图片描述

Css布局

绝对位置

目录：

在这里插入图片描述

#inId{
	width: 200px;
	height: 200px;
	border: 3px blue solid;
	
	position: fixed; /*只和浏览器有关*/
	z-index: 999;
	/* left: 100px;
	top: 0px; */
	right: 100px;
	/* left: 100px; */
	bottom: 100px;
	/* top:100px; */
}

在这里插入图片描述

让蓝框的位置不受屏幕放大缩小/红框而改变

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

鼠标样式：cursor

image-20241117142616084
在这里插入图片描述

水平方向左右布局–浮动

原理 挤过去

在这里插入图片描述

float

float: left; 朝左浮动

clear: left: 清除

在这里插入图片描述
在这里插入图片描述

jd

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

bmw

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>BMW</title>
		<link rel="stylesheet" href="../css/bmw.css" />
	</head>
	<body>
		<div class="main">
			<div class="left">
				<div class="pic"></div>
				<div class="txt">
					<p class="pBig">全新BMW 5系长轴距版</p> 
					车型售价￥439,900起 <br />
					月付￥
					2,000
					起
				</div>
				<div class="btnDiv">
					<a href="#" class="btnDesc">了解详情</a>
					<a href="#" class="btnDrive">预约试驾</a>
				</div>
			</div>
			<div class="right">
				<table class="tab">
					<caption>推荐8款配置</caption>
					<thead>
						<tr>
							<th>配置</th>
							<th>油耗(升/100公里)</th>
							<th>售价</th>
							<th>月付</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>525Li 豪华套装</td>
							<td>6.5</td>
							<td>￥439,900</td>
							<td>￥2,000起</td>
						</tr>
						<tr>
							<td>525Li 豪华套装</td>
							<td>6.5</td>
							<td>￥439,900</td>
							<td>￥2,000起</td>
						</tr>
						<tr>
							<td>525Li 豪华套装</td>
							<td>6.5</td>
							<td>￥439,900</td>
							<td>￥2,000起</td>
						</tr><tr>
							<td>525Li 豪华套装</td>
							<td>6.5</td>
							<td>￥439,900</td>
							<td>￥2,000起</td>
						</tr><tr>
							<td>525Li 豪华套装</td>
							<td>6.5</td>
							<td>￥439,900</td>
							<td>￥2,000起</td>
						</tr><tr>
							<td>525Li 豪华套装</td>
							<td>6.5</td>
							<td>￥439,900</td>
							<td>￥2,000起</td>
						</tr><tr>
							<td>525Li 豪华套装</td>
							<td>6.5</td>
							<td>￥439,900</td>
							<td>￥2,000起</td>
						</tr>
					</tbody>
				</table>
			</div>
			
			<div class="customer"></div>
		</div>
		
		
	</body>
</html>

Css

body {
	margin: 0px 0 0 0px;
}


.main {
	width: 80%;
	height: 600px;
	border: 0px grey solid;
	margin: 0 auto 0 auto;
	font-family: bmwFont;
}


.left {
	width: 45%;
	border: 0px red solid;
	float: left;
}

.right {
	margin-top: 80px;
	width: 54%;
	border: 0px blue solid;
	float: left;

}


.pic {
	width: 100%;
	height: 300px;
	background-image: url('https://www.bmw.com.cn/content/dam/bmw/marketCN/bmw_com_cn/model_card/G68ICE.png');
	background-size: 100% 100%;
}

.tab {
	border-collapse: collapse;
	background-color: #e5e5e5;
	width: 100%;
	font-size: 14px;
}

th {
	font-weight: normal;
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom: 1px #aeaeae solid;
	text-align: left;
	text-indent: 20px;
}

td {
	padding-top: 5px;
	padding-bottom: 15px;
	border-bottom: 1px white solid;
	text-indent: 20px;
}

caption {
	padding-top: 15px;
	padding-bottom: 15px;
	font-weight: bold;
}

a {
	text-decoration: none;
}

.btnDiv {
	padding-top: 30px;
}

.btnDesc {
	background-color: #6d6d6d;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 10px;
	padding-bottom: 10px;
	color: white;
	opacity: 0.8;
}

.btnDrive {
	background-color: #1c69d4;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 10px;
	padding-bottom: 10px;
	color: white;
	margin-left: 80px;
	opacity: 0.8;
}

.pBig {
	font-size: 1.4em;
}

.btnDesc:hover {
	opacity: 1.0;
}

.btnDrive:hover{
	opacity: 1.0;
}

.customer{
	position: fixed;
	width: 150px;
	height: 150px;
	background-image: url('../img/customer_service.png');
	background-size: 100% 100%;
	z-index: 999;
	right: 20px;
	bottom: 50px;
	
}
.customer:hover{
	cursor: pointer;
}

@font-face {
	font-family: bmwFont;
	src: url('../img/fonts/web-font09.ttf');
}

水平布局2

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

flex

在这里插入图片描述
在这里插入图片描述

会自动压缩

在这里插入图片描述
在这里插入图片描述

display

在这里插入图片描述

justify-content

支持挤在这里插入图片描述

flex-wrap

在这里插入图片描述

#div01{
	width: 300px;
	height: 200px;
	background-color: blue;
}

#div02{
	width: 300px;
	height: 200px;
	background-color: red;
}
#div03{
	width: 300px;
	height: 200px;
	background-color: yellow;
}

	
.main{
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
}

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
多模态Transformer之视频与文本联合建模 - Transformer教程
移动端树形选择组件 -- 基于vant4+vue3 支持多选、单选、节点搜索
Java中JDBC的数据库连接池
快速排序（选定中轴值作为排序基准）
【80C51单片机】定时器/计数器的理解
BUUCTF刷题十一道(06)
《TCP/IP网络编程》学习笔记 | Chapter 4：基于TCP的服务器端/客户端（1）
【深度学习】图形模型基础(5)：线性回归模型第二部分：单变量线性回归模型
【面试题】IO多路复用模型之poll\epoll
python+requests接口自动化测试框架实例详解教程（米兔888）【适合半年或一年以上天天做自动化经验的大神下载使用】
;