HTML+CSS-Day12

最新推荐文章于 2024-07-14 12:57:13 发布

ONLY＆King

最新推荐文章于 2024-07-14 12:57:13 发布

阅读量319

点赞数

文章标签： servlet html javascript

本文链接：https://blog.csdn.net/qq_45229580/article/details/127101428

版权

分析标签

<div class=”nav”>

<a></a> 背景图

<span>|</span>

<a>注册</a>

<span>|</span>

</div>

(1)div 高度宽度行高

(2)a 行内块 50 50

(3)span margin-right:5px;

### 4. 浮动流体布局

PC端页面会有一个内容部分的固定宽度（例如：1200px、1190px、1004px、960px等等）。

(版心)

最小宽度 1400将最重内容放在中心位置(1200)，左右留白

3890 (1200)

#### (1) 分析pc端页面布局特点

pc端布局都存在一个用于适应最小屏幕显示的居中元素。一般会把内容的结构都放在这个居中的元素中，左右两侧留白。

因此在pc端布局中，可以在用于划分某个部分的元素内部加入一个用于居中的元素。如：

```html

<head>

<style>

.center {

/* 按照项目要求居中元素宽度是多少 */

width:1000px;

/* 在整个页面里居中显示 */

margin:0 auto;

}

</style>

</head>

<body>

</div>

</body>

```

#### (2) 封装自己的reset.css

如果开发网页项目需要reset.css

(1)直接下载完整reset.css文件

```css

/* 星号的效率过低，非练习时可以自定义某些元素去掉margin: 0;padding: 0; */

* {margin: 0;padding: 0;}

a {text-decoration: none;}

ul {list-style: none; }

/* 清除浮动 */

.clearFloat:after {

content: "";

display: block;

height: 0;

clear: both;

}

.clearFloat {*zoom: 1;}

/* 如：针对学子商城居中1000宽度 */

.center {

width: 1000px;margin: 0 auto;

}

```

## 十八、定位(!!!!!!!!)

#利器:如果网页中元素位置特殊(不靠左右上右;移动范围很大)需要定位

#微调:margin

#整体靠左靠右:float

#位置特殊,调整位置很大

(1)多张图片轮播图切换，位置切换

(2)右侧购物车;人工客服务

(3)小图片放大镜

建议：

(1)定位功能极强,不要过渡使用(改起来吃力)

如果网页后期发生改动

### 1.position属性

- `position`属性是定位属性，用于指定一个元素在文档中的定位方式。

- top，right，bottom 和 left 属性值则决定了该元素的距离四边的位置，可以为负值。

- 开发中多用绝对长度单位px进行调整，如果在移动端中，可以使用rem、vw等单位进行调整。

- 常用取值：

- `relative` 相对定位

- `absolute` 绝对定位

- `fixed` 固定定位

### 2.相对定位

- 相对定位position: relative (要移动)不脱离文档流(相对于自己原来位置调整)

- 可使用top，right，bottom 和 left (移动到哪)做偏移。

- 元素相对的位置是自己本来的位置，移动不改变页面布局。

- 相对定位属性不会影响周围的布局，但会出现新的层叠顺序。

- 当四个方向值发生重合时，以top和left为优先。

```html

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

.baba {

background-color: grey;

}

.baba > div{

width: 100px;

height: 100px;

}

/* 相对定位 */

.erzi1 {

background-color: blue;

/* 相对定位 relative 相对的是自己原来该有的位置*/

position: relative;

/* 当使用了定位属性，调整元素的位置就可以使用关键词top，left，right，bottom */

/* top:100px;

left:220px; */

bottom: 10px;

}

.erzi2 {

background-color: red;

position: relative;

top:50px;

}

.erzi3 {

background-color: green;

}

</style>

</head>

<body>

</div>

</body>

</html>

```

### 3.绝对定位

- absolute绝对定位，元素将脱离文档流（搬家），其他元素不为该元素预留空间。

- 它的移动参照为祖先元素的偏移，来确定元素位置。元素会逐层向上寻找自己的参照元素，当找到的最近一层祖先元素具有position属性时(注意)，该元素就会以这个祖先元素的原点为参照点。

<html> ?祖先浏览器窗口

<body> ?你开启定位

<div> ?你元素有定位没开启(以你为准)

<div></div> 我要绝对定位(以哪个位置为准)

</div>

</body>

</html>

- 可使用top，right，bottom 和 left 做偏移。

- 当四个方向值发生重合时，以“上top”和“左left”为优先。

- 绝对定位的元素可以设置外边距，且不会与其他边距合并。

```css

.baba {

background-color: gray;

position: relative;

}

.baba>div {width: 100px;height: 100px;}

.erzi1 {

background-color: blue;

position: absolute;

top: 10px;

left: 10px;

}

.erzi2 {

background-color: red;

position: absolute;

top: 0;

left: 0;

}

.erzi3 {

background-color: green;

position: absolute;

top: 20px;

bottom: 30px;

}

.erzi4 {

background-color: orange;

position: absolute;

top: 20px;

margin: 20px;

}

```

#### (1)子元素在父元素内居中

<div class=”item3”>

<div class=”item33”>

</div>

使用元素定位，让已知高度的子元素在父元素中上下左右居中

```html

<style>

.baba {

width: 500px;

height: 400px;

background-color: red;

position: relative;

}

.erzi {

width: 150px;

height: 200px;

background-color: blue;

position: absolute;

left:50%;

top:50%;

margin-left: -75px;

margin-top: -100px;

}

</style>

</head>

<body>

</div>

</body>

```

### 【练习】

> 按照标注图制作，注意背景的平铺方式

> 鼠标移入，两个导航项出现下拉菜单

> 可以不用严格按照该图做，可以适当改变

> 加入reset.css

```html

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

.bg{

width: 100%;

height: 1000px;

background-repeat: no-repeat;

background-size: contain;

}

.nav{

height: 100px;

background-color: rgba(0,0,0,0.5);

}

.center{

width: 1000px;

margin: 0 auto;

}

.nav .logo{

float: left;

margin-top: 30px;

margin-right: 50px;

}

.nav ul{

width: 500px;

float: left;

}

.nav>.center>ul>li{

width: 100px;

height: 100px;

float: left;

text-align: center;

}

.nav>.center>ul>li>a{

line-height: 100px;

color: #fff;

display: block;

/* border-bottom: 4px solid #f0301e; */

}

.nav>.center>ul>li:hover > ol{

display: block;

}

.nav>.center>ul>li ol{

background-color: #1a1b1d;

color: #fff;

/* 先不出现 */

display: none;

}

/* 当鼠标移入到li身上，让a出现下边框 */

.nav>.center>ul>li:hover>a{

border-bottom: 2px solid #f0301e;

}

.nav>.center>ul>li ol li{

line-height: 40px;

}

</style>

</head>

<body>

<ul>

<li>

</li>

<li>

<ol>

</ol>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

</body>

</html>

```

### 4.固定定位

fixed固定定位是元素，决定它的“包含块”是html，唯一可以限定固定定为元素的就是html跟元素

- `position: fixed;`它到父级始终是html

- 直接在窗口的某个位置固定

- 可使用top，right，bottom 和 left 做偏移。

#### (1)居中的弹窗

固定定为，元素在父元素中居中

```css

* {margin: 0;padding: 0;}

.alertBox {

width: 300px;

height: 200px;

color: red;

background-color: #aaa;

position: fixed;

top:50%;

left:50%;

margin-top: -100px;

margin-left: -150px;

}

```

#### (2)返回顶部元素

```html

<style>

* {

margin: 0;

padding: 0;

}

.pic {width: 100%;}

.pic img {

width: 100%;

display: block;

}

.top {

width: 100px;

height: 100px;

border-radius: 5px;

background-color: rgba(0,0,0,0.5);

font-size: 30px;

text-align: center;

line-height: 100px;

position: fixed;

bottom: 100px;

right: 100px;

}

.top a {

color: #fff;

text-decoration: none;

}

</style>

<body>

</div>

</div>

</body>

</html>

```

### 5.z-index (css层叠样式表)!!!!!!!!!!!!

#第一层底层(文档流)

#上一层定位/浮动

z-index就是z轴的顺序，z-index可以设置字符值，如：auto，多数情况设置整数值，可以为负值。

z-index的最大值是 21,4748,3647 (21亿多)。跨度尽量10以上

#### (1) 层叠顺序取值

#建议:属性通常和绝对定位配合使用

- `z-index`层叠顺序

# 元素 z-index:10;下面

# 元素 z-index:20;上面

- 直接设置没有单位的整数，可以为负值，值越大层级越高

#### (2) 层叠领域的准则

- 值大的在上：z-index的值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的。

- 后来的在上：当元素的层叠水平一致的时候，在文档流中处于后面的元素会覆盖前面的元素。

```html

<style>

.box {

width: 100%;

position: fixed;

z-index: -1;

}

</style>

</div>

<p>Lorem*3</p>

```

## 十九、渐变

以前的渐变使用的是图片平铺

### 1. 线性渐变

#### (1) 颜色和角度

- `background-image: linear-gradient(color1,color2,……);`渐变最少两个颜色，才能体现出颜色的变化

- `linear-gradient()`渐变颜色的参数用逗号分开，可以写多种颜色表达方式

- 渐变的方向，按照参数顺序依次向下，可以在颜色前加入角度或关键字控制渐变方向

- `90deg` 角度

- to 终点关键词，就是终点在哪个位置，top，left，right，bottom，记得加空格（不建议使用）

### 【练习】

> 使用七种颜色作出彩虹渐变效果

> 颜色可以使用任何表示色值的方式

### 【练习】

> 渐变的导航,颜色自定义

> 导航总宽度1000px 高度 30px

> 需要加入鼠标悬停改变背景颜色的效果

```css

* {

margin: 0;

padding: 0;

}

.center {

width: 1000px;

margin: 0 auto;

}

.nav {

width: 100%;

/* margin-top: 100px; */

}

.nav a {

display: block;

text-decoration: none;

width: 200px;

height: 40px;

text-align: center;

line-height: 40px;

color: #fff;

font-size: 18px;

float: left;

}

.nav a:hover {

color: #222;

background: aqua;

}

```

#### (2) 渐变的比例

- `background-image：linear-gradient(方向，颜色1 起始值结束值，颜色2 起始值结束值，颜色n 起始值结束值……)`

- 多个颜色渐变时，渐变的区域需要调整，可采取控制颜色范围的方法。在函数内颜色的后面加入长度单位（如px或%）用空格分隔。

- 【注意】浏览器版本低时，渐变的开始值和结束值无效。需要升级浏览器版本，下载谷歌新版浏览器。

```css

div {

width: 600px;

height: 300px;

border: 2px solid black;

background-image: linear-gradient(90deg, green 0 200px, yellow 200px 400px, red 400px 600px);

}

```

### 2. 径向渐变

#### (1) 渐变方向和范围

- `background-image: radial-gradient(color1,color2,……);`

- background-image：radial-gradient(颜色1 起始值结束值，颜色2 起始值结束值，颜色n 起始值结束值……)

```css

.d1 {

}

.d2 {

background-image: radial-gradient(rgb(48, 63, 199),rgb(19, 194, 179),rgb(0, 255, 0));

}

.d3 {

}

```

#### (2) 半径

- `background-image: radial-gradient(半径,颜色1,颜色4,颜色3);`

- `background-image: radial-gradient(x轴半径 y轴半径,颜色1,颜色4,颜色3);`

- 半径只传入一个参数，则表示该渐变形状为圆

- 半径可以是px或%，使用px不会因为半径的变化而变化

- 颜色范围用的百分比,半径变化，百分比参照半径

- 【注意】真实的渐变控制如果比外层空间小，剩下都是部分会被最后一个颜色填充

```css

div {

width: 500px;

height: 300px;

border: 2px solid black;

}

.d1 {

}

.d2 {

}

.d3 {

}

```

#### (3) 圆心起点

- background-image: radial-gradient(x轴半径 y轴半径 at x轴圆心 y轴圆心,颜色1 起始值结束值，颜色2 起始值结束值……)

- 在圆心后面增加at 空格 x轴 y轴的原点位置，可以使用长度单位或关键词。取值可使用px，% 或者关键词：left/top/bottom/right

- 注意重点

- 半径只传入一个参数，则表示该渐变形状为圆

- 颜色范围用的百分比,半径变化，百分比参照半径

- 颜色范围用的是px，则不会因为半径的变化而变化

```css

.d1{

}

.d2{

}

```

### 3. 重复的渐变

- 注意重复的渐变要求浏览器版本，版本过低的浏览器版本无法查看效果

- `background-image: repeating-linear-gradient()` 重复的线性渐变

- `background-image: repeating-radial-gradient()` 重复的径向渐变

- 当半径过小，页面分辨率显示效果会怪异

```css

.d1{

background-image: repeating-linear-gradient(red 0 2px, yellow 4px 6px, green 8px 10px);

}

.d2{

background-image: repeating-radial-gradient(red 0 2%, yellow 2% 4%, green 4% 6%);

}

```

### 【练习】

> 信封用重复渐变 background-image: repeating-linear-gradient(-45deg,#f00 0 10px,#fff 10px 20px,#00f 20px 30px,#fff 30px 40px)

> 按钮使用渐变background-image: linear-gradient(#ecf6ff,#9bc1e1); 阴影 box-shadow: 0 5px 0 0 #346a9a;

```html

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

.xzbj {

margin: 100px auto;

width: 400px;

height: 200px;

overflow: hidden;

background-image: repeating-linear-gradient(-45deg,#f00 0 10px,#fff 10px 20px,#00f 20px 30px,#fff 30px 40px)

}

.xzbj p {

width: 360px;

height: 160px;

margin: 20px;

padding: 10px;

box-sizing: border-box;

background-color: #fff;

}

</style>

</head>

<body>

<p>寄给xxx的一封信</p>

</div>

</body>

</html>

```

### 4. 对渐变的兼容

渐变效果不支持低版本浏览器，之前关于css3的浏览器兼容，厂商的私有前缀

浏览器厂商制作的浏览器，不同时期对css的兼容不同，每个浏览器都有自己的内核

查看学子商城渐变的写法，对应每一个内核都要写一遍，要写四遍。但最终只会按照当前浏览器的内核执行对应的代码

#### （1）浏览器私有前缀

- `-webkit-` 浏览器：chrome/safari/edge

- `-moz- ` 浏览器：firefox

- `-o- ` 浏览器：opera

- `-ms-` 浏览器：IE

#雷峰 postcss 工具软件(将所有css涉及兼容加前端) 所有私有浏览器前缀 (vue)

#### （2）渐变的方向

- 不写私有前缀，要写终点的方式，如 to bottom

- 没有私有前缀正确写法:`background-image: linear-gradient(to bottom,red,yellow);`

- 没有私有前缀错误写法:`background-image: linear-gradient(bottom,red,yellow);`

- 写私有前缀要写起点的方式如top

- 有私有前缀正确的写法:`background-image: -webkit-linear-gradient(top,red,yellow);`

- 有私有前缀错误的写法:`background-image: -webkit-linear-gradient(to top,red,yellow);`

ONLY＆King

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS-Day12

信封用重复渐变 background-image: repeating-linear-gradient(-45deg,#f00 0 10px,#fff 10px 20px,#00f 20px 30px,#fff 30px 40px)`background-image：linear-gradient(方向，颜色1 起始值结束值，颜色2 起始值结束值，颜色n 起始值结束值……z-index就是z轴的顺序，z-index可以设置字符值，如：auto，多数情况设置整数值，可以为负值。padding: 0;
复制链接

扫一扫