【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–字体颜色

表示方法：

英文单词
#16进制
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>

在这里插入图片描述

盒子模型

页面布局问题

内部小红盒子左右居中

在这里插入图片描述

#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

在这里插入图片描述

水平方向左右布局–浮动

原理挤过去

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