html和css学习

最新推荐文章于 2024-07-10 23:34:24 发布

是你的于哥哥

最新推荐文章于 2024-07-10 23:34:24 发布

阅读量673

点赞数

文章标签： css html 学习

本文链接：https://blog.csdn.net/weixin_55821046/article/details/125609493

版权

1 CSS快速入门

1.1 CSS的介绍与组成部分

1.1.1 介绍

在学习了基本HTML标签和样式后，接下来学习前端开发的第二门技术。

我们发现，虽然标签的属性可以调整一些样式，但是效果不够理想，而我们更愿意把样式编写在<style> 标签中，让页面设计更美观更丰富，实际上，这是通过CSS实现的。那么什么是CSS呢？

如果说，HTML是网页的"素颜"，那么CSS就是页面的"美妆师"，它就是让网页的外观更漂亮！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0oSG6tBO-1656942846680)(assets/css1.jpg)]

CSS (层叠样式表——Cascading Style Sheets，缩写为 CSS）
简单的说，它是用于设置和布局网页的计算机语言，会告知浏览器如何渲染页面元素
HTML负责界面的结构，CSS负责美化界面
例如，调整内容的字体，颜色，大小等样式，设置边框的样式，调整模块的间距等
所谓层叠 : 层叠性指的是样式的优先级，当产生冲突时以优先级高的为准
所谓样式：是指丰富的样式外观。拿边框距离来说，允许设置边框，允许设置边框与框内元素的距离，允许设置边框与边框的距离等等。

1.1.2 CSS的组成

CSS是一门基于规则的语言，你能定义用于你的网页中特定元素的一组样式规则
这里面提到了两个概念，一是特定元素，二是样式规则
对应CSS的语法，也就是选择器（selects）和样式声明（eclarations）

选择器：选择 HTML 元素的方式。可以使用标签名、class属性值、id值等多种方式
样式声明：用于给 HTML 元素设置具体的样式。格式是属性名:属性值

格式：

选择器 {
    属性名:属性值;
    属性名:属性值;
    属性名:属性值;
}

举例：

h1 {
    color: red;
    font-size: 5px;
}

分析：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NB8P9Zt6-1656942846682)(assets/1573553282632.png)]

1.2 入门案例

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0oFXvyC7-1656942846683)(img/css入门.png)]
实现步骤

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IEJ6UWGd-1656942846683)(img/css入门实现步骤.png)]
新建案例：01-入门案例.html
在初始页面的 <body>标签中，加入一对<h1> 标签。<h1>标签规定的固定的标题样式。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>页面标题</title>
  </head>
  <body>
      <h1>今天开始变漂亮!!!</h1>
  </body>
</html>

在<head>标签中加入一对<style> 标签中，表示准备应用样式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>页面标题</title>
    <!-- 加入style标签 -->
    <style>
      
    </style>
</head>
<body>
<h1 >今天开始变漂亮!!!</h1>
</body>
</html>

编写样式

   <style>
        h1{
            color: red;  /* 设置颜色为红色*/
            font-size:100px; /* 设置字体大小为100像素*/
        }
    </style>

打开浏览器查看，文字的颜色和大小都发生改变，应用了新的样式，效果如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BMOjv4uP-1656942846684)(assets/1573554231351.png)]

1.3 Chrome开发者工具

打开开发者工具

打开浏览器，点击键盘F12键，显示开发者工具窗口。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b1duUAQf-1656942846685)(assets/1573697452420.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RYdffRWB-1656942846685)(img/控制台.png)]
查看开发者工具

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HHyxB4uI-1656942846685)(assets/1573697622186.png)]
选择元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QDJ5z71s-1656942846686)(assets/1573697773675.png)]
修改样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bZFzjJtC-1656942846686)(assets/1573698020491.png)]

1.4 CSS小结

CSS 层叠样式表。可以为 HTML 元素添加一些样式。

CSS的主要部分有：

选择器：用来选择页面元素的方式。
样式声明：用来设置样式，格式属性名：值。

在学习CSS时，要抓住两个方面：

掌握多种选择器，能够灵活的选择页面元素。
掌握样式的声明，能够使用多种属性来设置多样的效果。

2 CSS基本语法

2.1 CSS的引入方式

2.1.1 内联样式

了解,几乎不用,维护艰难

内联样式：也叫行内样式，是CSS声明在元素的style属性中，仅影响一个元素：

格式：

<标签 style="属性名:属性值; 属性名:属性值;">内容</标签>

案例：02-引入方式1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入方式1</title>
</head>
<body>
    <!--内联样式-->
    <h1 style="color: red; font-size: 20px">Hello World</h1>

    <h1>CSS</h1>
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LKMUNuqr-1656942846687)(img/引入1.png)]

虽然格式简单，但是样式作用无法复用到多个元素上，不利于维护，此格式了解即可。

2.1.2 内部样式表

在<head>标签中通过<style>标签来控制样式。只能影响当前文件。
内部样式（内嵌样式）只能作用在当前页面上，如果是多个页面，就无法复用了。

格式：

<head>
    <style>
        选择器 {
            属性名: 属性值;
            属性名: 属性值;
        }
    </style>
</head>

案例：03-引入方式2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入方式2</title>
    <!--内部样式-->
    <style>
        div{
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GssinAVU-1656942846687)(img/引入2.png)]

2.1.3 外部样式表

在<head>标签中通过<link>标签来引入独立 css 文件，可以影响不同的文件
外部样式表（外链样式）是CSS附加到文档中的最常见和最有用的方法，因为您可以将CSS文件链接到多个页面，从而允许您使用相同的样式表设置所有页面的样式
外部样式表是指将CSS编写在扩展名为.css 的单独文件中，并从HTML<link> 元素引用它

格式：

<link rel="stylesheet" href="css文件路径">

rel：表示“关系 (relationship) ”，属性值指链接的文件与当前文档之间的关系，引入css文件固定值为stylesheet。
理解： 表示引入的文件是当前html文件的一个样式表（关系描述）
href：属性需要引用某文件系统中的一个文件。

案例：

创建css/01.css文件

div{
    color: red;
    font-size: 20px;
}

link标签引入文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入方式3</title>
    <!--外部样式-->
    <link rel="stylesheet" href="css/01.css"/>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cWh8QOB9-1656942846687)(img/引入2.png)]

2.2 关于注释

什么是注释：注释是用于解释说明程序的
注释的格式：/* 注释的内容 */
注释的特点：被注释掉的样式，不会被浏览器解析
与HTML一样，鼓励您在CSS中进行注释，以帮助您理解几个月后返回的代码工作方式，并帮助其他使用该代码的人对其进行理解
格式：

/* 设置h1的样式 */
h1 {
  color: blue;
}

案例：05-注释.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注释</title>
    <style>
        /*为div标签添加样式*/
        div{
            /*color: red;*/
        }
    </style>
</head>
<body>
    <!--div标签-->
    <div>div</div>
</body>
</html>

2.3 关于选择器

什么是选择器

一个 HTML 文件中会存在很多个元素，如果想对不同的元素添加不同的样式，就需要使用到选择器了

说白了，选择器就是用来选择指定的元素的
接下来我们将要详细的学习各种选择器的使用
选择器的分类：

分类	名称	符号	作用	示例
基本选择器	元素选择器	标签名	基于标签名匹配元素	div{ }
	类选择器	`.`	基于class属性值匹配元素	.center{ }
	ID选择器	`#`	基于id属性值匹配元素	#username{ }
属性选择器	属性选择器	`[]`	基于某属性匹配元素	[type]{ }
伪类选择器	伪类选择器	`:`	用于向某些选择器添加特殊的效果	a : hover{ }
组合选择器	后代选择器	`空格`	使用`空格符号`结合两个选择器，基于第一个选择器，匹配第二个选择器的所有后代元素	.top li{ }
	子级选择器	`>`	使用 `>` 结合两个选择器，基于第一个选择器，匹配第二个选择器的直接子级元素	.top > li{ }
	同级选择器	`~`	使用 `~` 结合两个选择器，基于第一个选择器，匹配第二个选择器的所有兄弟元素	.l1 ~ li{ }
	相邻选择器	`+`	使用 `+` 结合两个选择器，基于第一个选择器，匹配第二个选择器的相邻兄弟元素	.l1 + li{ }
	通用选择器	`*`	匹配文档中的所有内容	*{ }

2.2.1 基本选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WyOSupwo-1656942846688)(img/基本选择器02.png)]

1）元素选择器

页面元素：

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>

选择器：

选择所有li标签,背景变成蓝色
li{
    background-color: aqua;
}

2）类选择器

页面元素：

<div>
    <ul>
        <li class="ulist l1">List item 1</li>
        <li class="l2">List item 2</li>
        <li class="l3">List item 3</li>
    </ul>
    <ol>
        <!--class 为两个值-->
        <li class="olist l1">List item 1</li>
        <li class="olist l2">List item 2</li>
        <li class="olist l3">List item 3</li>
    </ol>
</div>

选择器：

选择class属性值为l2的,背景变成蓝色
.l2{
    background-color: aqua;
}
选择class属性值为olist l2的,字体为白色
.olist.l2{
   color: wheat;
}

3）ID选择器

页面元素：

<div>
    <ul>
        <li class="l1" id="one">List item 1</li>
        <li class="l2" id="two">List item 2</li>
        <li class="l3" id="three">List item 3</li>
    </ul>
    <ol>
        <li class="l1" id="four">List item 1</li>
        <li class="l2" id="five">List item 2</li>
        <li class="l3" id="six">List item 3</li>
    </ol>
</div>

选择器：

#tow{
    background-color: aqua;
}

4）通用选择器

页面元素：

<div>
    <ul>
        <li class="l1" id="one">List item 1</li>
        <li class="l2" id="two">List item 2</li>
        <li class="l3" id="three">List item 3</li>
    </ul>
    <ol>
        <li class="l1" id="four">List item 1</li>
        <li class="l2" id="five">List item 2</li>
        <li class="l3" id="six">List item 3</li>
    </ol>
</div>

选择器：

所有标签 
*{
    background-color: aqua;
 }

5）案例：

06-基本选择器.html

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <style>
        /*元素选择器*/
        div{
            color: red;
        }
        /*类选择器*/
        .cls{
            color: blue;
        }
        /*id选择器*/
        #d1{
            color: green;
        }
        #d2{
            color: pink;
        }
    </style>
</head>
<body>
    <div>div1</div>

    <div class="cls">div2</div>
    <div class="cls">div3</div>

    <div id="d1">div4</div>
    <div id="d2">div5</div>
</body>
</html>

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eE8hIcXi-1656942846688)(img/基本选择器.png)]

2.2.2 属性选择器

属性选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QTFCH5o7-1656942846689)(img/属性选择器.png)]
案例：07-属性选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        [type]{
            color: red;
        }

        [type=password]{
            color: blue;
        }
    </style>
</head>
<body>
    用户名：<input type="text"/> <br/>
    密码：<input type="password"/> <br/>
    邮箱：<input type="email"/> <br/>
</body>
</html>

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FpxJGtau-1656942846689)(img/属性选择器效果.png)]

2.2.3 伪类选择器

伪类选择器，用于选择处于特定状态的元素，例如，一些元素中的第一个元素，或者某个元素被鼠标指针悬停。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5kttsYdC-1656942846689)(img/伪类选择器.png)]

注意：

伪类顺序 link ，visited，hover，active，否则有可能失效

格式：

标签名:伪类名{ }

案例：08-伪类选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        a{
            text-decoration: none;
        }

        /*未访问的状态*/
        a:link{
            color: black;
        }

        /*已访问的状态*/
        a:visited{
            color: blue;
        }

        /*鼠标悬浮的状态*/
        a:hover{
            color: red;
        }

        /*已选中的状态*/
        a:active{
            color: yellow;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>

2.2.4 组合选择器

组合选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Va0n84KA-1656942846690)(img/组合选择器.png)]

分组选择器，大家一般叫并集选择器
后代选择器与并集选择器，可以将任意的基本选择器进行组合
案例：09-组合选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style>
        /*后代选择器*/
        .center li{
            color: red;
        }

        /*分组选择器*/
        span,p{
            color: blue;
        }
    </style>
</head>
<body>
    <div class="top">
        <ol>
            <li>aa</li>
            <li>bb</li>
        </ol>
    </div>

    <div class="center">
        <ol>
            <li>cc</li>
            <li>dd</li>
        </ol>
    </div>

    <span>span</span> <br/>
    <p>段落</p>
</body>
</html>

补充：

后代选择器

div li{
    background-color: yellow;
}

子级选择器

ul > li{
    background-color: yellow;
}

2.4 总结

CSS的引入方式有三种（内联样式，内部样式，外部样式），建议使用外部样式表
注释类似于java多行注释。/* 注释的内容 */
选择器是CSS的重要部分：
1. 基本选择器：可以通过元素，类，id来选择元素
2. 属性选择器：可以通过属性值选择元素
3. 伪类选择器：可以指定元素的某种状态，比如链接
4. 组合选择器：可以组合基本选择器，更加精细的划分如何选择

3 CSS案例-头条页面

3.1 案例效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KPSQkT8t-1656942846690)(img/头条优化版.png)]

上图三个红框内容，之前都是一张图片
我们这一次就去真正实现一些这些布局

3.2 案例分析

3.2.1 边框样式

边框样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wQ25zeds-1656942846690)(img/边框样式.png)]

案例：案例一/01案例一：边框样式演示.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框样式演示</title>
    <style>
        #d1{
            /*设置所有边框*/
            /*border: 5px solid black;*/

            /*设置上边框*/
            border-top: 5px solid black;
            /*设置左边框*/
            border-left: 5px double red;
            /*设置右边框*/
            border-right: 5px dotted blue;
            /*设置下边框*/
            border-bottom: 5px dashed pink;

            width: 150px;
            height: 150px;
        }

        #d2{
            border: 5px solid red;
            /*设置边框的弧度*/
            border-radius: 25px;

            width: 150px;
            height: 150px;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
    <br/>
    <div id="d2"></div>
</body>
</html>

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KhuISrM1-1656942846691)(img/边框效果.png)]

3.2.2 文本样式

文本样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vRbiJvov-1656942846691)(img/文本样式.png)]

案例：02案例一：文本样式演示.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式演示</title>
    <style>
        div{
            /*文本颜色*/
            color: /*red*/ #ff0000;

            /*字体*/
            font-family: /*宋体*/ 微软雅黑;

            /*字体大小*/
            font-size: 25px;

            /*下划线  none：无  underline：下划线  overline：上划线  line-through：删除线*/
            text-decoration: none;

            /*水平对齐方式  left：居左  center：居中  right：居右*/
            text-align: center;

            /*行间距*/
            line-height: 60px;
        }


        span{
            /*文字垂直对齐  top：居上   bottom：居下  middle：居中   百分比*/
            vertical-align: 50%;
        }
    </style>
</head>
<body>

    <div>
        我是文字
    </div>
    <div>
        我是文字
    </div>

    <img src="../img/wx.png" width="38px" height="38px"/>
    <span>微信</span>
</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kvc8M5Wo-1656942846691)(img/文本样式效果.png)]

3.2.3 常见样式属性

其他属性：

分类	属性名	作用
边框	border	边框
	border-top	底部边框
	border-radius	设置边框圆角
文本	color	颜色
	font-family	字体样式
	font-size	字体大小
	text-decoration	下划线
	text-align	文本水平对齐
	line-height	行高，行间距
	vertical-align	文本垂直对齐

1）边框样式

在之前学习了简写属性来设置边框样式，接下来我们将研究如何创造性地使用边框。

<!--回顾简写样式 -->
div { 
  border: 1px solid black; 
}

单个边框

设置一个方向边框的宽度、样式和颜色，例如：

.box { 
  border-top: 1px solid black; 
  border-left: 5px double yellow;
  border-bottom: 5px dotted green;
  border-right: 5px dashed red;
} 
border-top: 上边框
border-left: 左边框
border-bottom: 底边框
border-right:  右边框

无边框

当border值为none时，可以让边框不显示，用于特殊效果。

   div {
            width: 200px;
            height: 200px;
            border: none;
   }

圆角

通过使用border-radius属性设置盒子的圆角，虽然能分别设置四个角，但是通常我们使用一个值，来设置整体效果，例如

    div {
            width: 200px;
            height: 200px;
            border: 10px solid blue;
            border-radius: 50px;
    }

2）文本样式

颜色

该color属性设置所选元素的前景色的颜色
```
p {
  color: red;
}
```
颜色的值，可以由多种方式赋值，常见的有颜色单词，RGB十六进制，例如：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2xYWxxLX-1656942846692)(assets/1574001685034.png)]
字体种类

使用font-family属性-这允许您指定一种字体
字体大小

字体大小使用font-size属性设置，可以采用常见单位：

px：像素，文本高度像素绝对数值。

em：1em等于我们要设置样式的当前元素的父元素上设置的字体大小，这是相对数值，能看懂即可。
文本修饰

text-decoration:设置字体上的文本装饰线。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hDKV1iWs-1656942846692)(assets/1574002112573.png)]
文本对齐

该text-align属性用于控制文本如何在其包含的内容框中对齐。可用值如下，它们的工作方式与常规字处理器应用程序中的工作方式几乎相同：
- left：左对齐文本。
- right：右对齐文本。
- center：使文本居中。
- justify：使文本散布，改变单词之间的间距，以使文本的所有行都具有相同的宽度。
行高

该line-height属性设置每行文本的高度，也就是行距。

垂直对齐方式

vertical-aligin：top/middel/bottom/百分比

3.4 实现步骤

3.4.1 顶部和导航条

要实现的部分，如下图红框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wJp9dLbF-1656942846692)(img/顶部和导航条.png)]

步骤
1. 创建一个 html 文件
2. 创建顶部<div>标签
3. 通过三个<a>标签实现登录、注册、更多三个超链接
4. 设置顶部样式(背景色、行高、文字对齐方式、字体大小、超链接颜色、悬浮、和去除下划线)
5. 创建导航条<div>标签
6. 通过<img>标签引入 logo 图片
7. 通过两个<a>标签实现首页、科技两个超链接
8. 通过<font>标签实现正文两个字的显示
9. 设置导航条样式(行高)

代码：03案例一：头条页面.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>头条页面</title>
    <link rel="stylesheet" href="../css/news.css"/>
</head>
<body>
    <!--顶部登录注册更多-->
    <div class="top">
        <a href="#">登录&nbsp;&nbsp;</a>
        <a href="#">注册&nbsp;&nbsp;</a>
        <a href="#">更多&nbsp;&nbsp;</a>
    </div>

    <!--导航条-->
    <div class="nav">
        <img src="../img/logo.png"/>
        <a href="#">首页&nbsp;&nbsp;</a>/
        <a href="#">科技&nbsp;&nbsp;</a>/
        <font color="gray">正文</font>
        <hr/>
    </div>

</body>
</html>

样式代码：css/news.css

/*顶部样式*/
.top{
    background: black;  /*背景色*/
    line-height: 40px;  /*行高*/
    text-align: right;  /*文字水平右对齐*/
    font-size: 20px;    /*字体大小*/
}
/*顶部超链接样式*/
.top a{
    color: white;   /*超链接颜色*/
}

/*导航条样式*/
.nav{
    line-height: 40px;  /*行高*/
}

/*超链接样式*/
a{
    text-decoration: none;  /*去除下划线*/
     color: black;           /*超链接颜色*/
}
/*超链接悬浮样式*/
a:hover{
    color: red; /*悬浮颜色*/
}

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vWGuUbHX-1656942846692)(img/顶部导航条效果.png)]

3.4.2 左侧分享和中间正文和右侧广告图片的

要实现的部分：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TB7sjglb-1656942846693)(img/头条中间部分.png)]
步骤
1. 创建左侧分享<div>标签
2. 通过<a>标签嵌套<img>标签和<span>标签实现图片和文字的显示
3. 设置左侧分享样式(宽度、文字水平对齐、浮动、图片大小、文字垂直对齐)
4. 创建中间正文<div>标签
5. 实现正文内容的填充
6. 设置中间正文样式(宽度、浮动)
7. 创建右侧广告<div>标签
8. 通过<img>标签引入广告图片
9. 设置右侧广告样式(宽度、浮动)

代码

 <!--左侧分享-->
    <div class="left">
        <a href="#"> <img src="../img/cc.png"/> <span>&nbsp;评论</span> </a>
        <hr/>
        <a href="#"> <img src="../img/repost.png"/> <span>&nbsp;转发</span> </a>  <br/>
        <a href="#"> <img src="../img/weibo.png"/> <span>&nbsp;微博</span> </a>  <br/>
        <a href="#"> <img src="../img/qq.png"/> <span>&nbsp;空间</span> </a>  <br/>
        <a href="#"> <img src="../img/wx.png"/> <span>&nbsp;微信</span> </a>  <br/>
    </div>

    <!--中间正文-->
    <div class="center">
        <div>
            <h1>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h1>
        </div>

        <!--作者信息-->
        <div>
            <i><font size="2" color="gray">作者：itheima 2088-08-08</font></i>
            <hr/>
        </div>

        <!--副标题-->
        <div>
            <h3>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h3>
        </div>

        <!--正文内容-->
        <div>
            <p>这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常多。</p>
            <p>支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系下的产品多多，我们对比以下几个产品看看区别:
            <ol>
                <li>蚂蚁借呗，芝麻分600并且受到邀请开通福利，这个就是支付宝贷款，直接秒杀了银行贷款和线下金融公司，是现在支付宝用户使用最多的。</li>
                <li>微粒贷：于2015年上线，主要面向QQ和微信征信极好的用户而推出，受到邀请才能申请开通，额度最高有30万，难度较大</li>
                <li>蚂蚁巴士：这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等，目前非常火爆</li>
            </ol>
            <img src="../img/1.jpg" width="100%"/>
            </p>
            <p>说起支付宝中的芝麻信用功能，相信更是受到了许多人的推崇，因为随着自己使用的不断增多，信用分会慢慢提高，而达到了一个阶段，就可以获得许多的福利。而当我们的芝麻信用分可以达到600分以上的时候，会有令我们想象不到的惊喜，接下来就让我们一起来看看，具体都有哪些惊喜吧。</p>
            <p><b>一、芝麻分600以上福利之信用购。</b>网购相信大家都不陌生，但是很多时候，网购都有一个通病，就是没办法试用，导致很多人买了很多自己不喜欢的东西。但是只要你的支付宝芝麻分在650及以上，就能立马享有0元下单，收到货使用满意了再进行付款。还能享用美食的专属优惠，是不是很耐斯</p>
            <p><b>二、芝麻分600以上福利之信用免押。</b>芝麻信用与木鸟短租联合推出信用住宿服务，芝麻分600及以上的用户可享受免押入住特权。木鸟短租拥有全国50万套房源，是国内领先的短租民宿预订平台。包括大家知道的飞猪信用住，大部分酒店可以免押金入住，离店再交钱。</p>
            <img src="../img/2.jpg" width="100%"/>
            <p><b>三、芝麻分600以上福利之国际驾照。</b>我们经常听说的可能只是中国驾照，但现在芝麻分已经应用到了国际领域，只要你的芝麻分够550就可以免费办理国际驾照，也有不少人非常佩服马云，一个简单的芝麻分居然有如此大的功能，也从侧面反应出来马云在国际上的地位，这个国际驾照是由新西兰、德国、澳大利亚联合认证，可以在全球200多个国家通行，相信大家一定都有一个自驾全球的梦想吧，而现在支付宝就给了你一把钥匙，剩下的就你自己搞定了！有没有想带着你的女神来一次浪漫之旅呢？</p>
            <p>随着互联网对我们生活的改变越来越大，信用这一词也被大家推上风口浪尖，不论是生活出行，还是其他的互联网服务，与信用体系已经密不可分了，马云当初说道，找老婆需要拼芝麻分，如今似乎也要成为现实，那么你们的芝麻分有多少了呢？</p>
        </div>
    </div>

    <!--右侧广告图片-->
    <div class="right">
        <img src="../img/ad1.jpg" width="100%"/>
        <img src="../img/ad2.jpg" width="100%"/>
        <img src="../img/ad3.jpg" width="100%"/>
        <img src="../img/ad1.jpg" width="100%"/>
        <img src="../img/ad2.jpg" width="100%"/>
        <img src="../img/ad3.jpg" width="100%"/>
    </div>

样式代码

/*左侧分享样式*/
.left{
    width: 20%;     /*宽度*/
    text-align: center; /*文字水平居中对齐*/
    float: left;    /*浮动*/
}
/*左侧分享图片样式*/
.left img{
    width: 38px;
    height: 38px;
}
/*左侧文字*/
.left span{
    vertical-align: 50%;    /*文字垂直居中对齐*/
}

/*中间正文样式*/
.center{
    width: 60%; /*宽度*/
    float: left;    /*浮动*/
}

/*右侧广告图片样式*/
.right{
    width: 20%; /*宽度*/
    float: left;    /*浮动*/
}

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XqK67kW8-1656942846693)(img/中间部分效果.png)]

3.4.3 底部页脚超链接

要实现的效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yw4YoiT5-1656942846693)(img/页脚效果.png)]
步骤
1. 创建底部页脚<div>标签。
2. 通过<a>标签实现超链接。
3. 设置底部页脚样式(浮动、背景色、文字水平对齐、行高、超链接颜色)。

代码

<!--底部页脚超链接-->
    <div class="footer">
        <a href="#">关于黑马</a> &nbsp;
        <a href="#">帮助中心</a> &nbsp;
        <a href="#">开放平台</a> &nbsp;
        <a href="#">诚聘英才</a> &nbsp;
        <a href="#">联系我们</a> &nbsp;
        <a href="#">法律声明</a> &nbsp;
        <a href="#">隐私政策</a> &nbsp;
        <a href="#">知识产权</a> &nbsp;
        <a href="#">廉政举报</a> &nbsp;
    </div>

样式代码

/*底部页脚超链接样式*/
.footer{
    clear: both;    /*清除浮动*/
    background: blue;   /*背景色*/
    text-align: center; /*文字水平居中对齐*/
    line-height: 25px;
}

/*底部页脚超链接文字颜色*/
.footer a{
    color: white;
}

效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Qr9a5TC-1656942846694)(img/页脚效果.png)]

4 CSS案例-登录页面

4.1 案例效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XZWM6EEY-1656942846694)(img/登陆界面.png)]

4.2 案例分析

4.2.1 表格标签

1）什么是表格

表格是由行和列组成的结构化数据集(表格数据)。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IcrTaHgk-1656942846694)(assets/swimming-timetable.png)]

2）表格标签

表格标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qKGx7jCC-1656942846695)(img/表格标签.png)]

案例：01案例二：表格标签演示.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签演示</title>
</head>
<body>
    <!--
        表格标签：<table>
        属性：
            width-宽度
            height-高度
            border-边框
            align-对齐方式

        行标签：<tr>
        属性：
            align-对齐方式

        单元格标签：<td>
        属性：
            rowspan-合并行
            colspan-和并列

        表头标签：<th> 自带居中和加粗效果

        表头语义标签：<thead>
        表体语义标签：<tbody>
        表脚语义标签：<tfoot>
    -->
    <table width="400px" border="1px" align="center">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>数学</th>
                <th>语文</th>
            </tr>
        </thead>

        <tbody>
            <tr align="center">
                <td>张三</td>
                <td rowspan="2">男</td>
                <td>23</td>
                <td colspan="2">90</td>
                <!--<td>90</td>-->
            </tr>

            <tr align="center">
                <td>李四</td>
                <!--<td>男</td>-->
                <td>24</td>
                <td>95</td>
                <td>98</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td colspan="4">总分数：</td>
                <!--<td></td>
                <td></td>
                <td></td>-->
                <td>373</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ydDDIOyL-1656942846695)(img/表格效果.png)]

4.2.2

样式控制

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fwsQHh10-1656942846695)(img/样式控制.png)]
说明：

轮廓outline：是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

display属性，用来设置一个元素应如何显示。可以设置块级和行内元素的切换，也可以设置元素隐藏。

案例：02案例二：样式演示.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式演示</title>
    <style>
        /*背景图片重复  no-repeat：不重复  repeat-x：水平重复  repeat-y：垂直重复   repeat：水平+垂直重复*/
        body{
            background: url("../img/bg.jpg");

            background-repeat: repeat;
        }

        /*轮廓控制 double：双实线   dotted：圆点   dashed：虚线   none：无*/
        input{
            outline: none;
        }

        /*元素显示  inline：内联元素(无换行、无长宽)   block：块级元素(有换行)  inline-block：内联元素(有长宽)  none：隐藏元素*/
        div{
            display: inline-block;
            width: 100px;
        }
    </style>
</head>
<body>
    用户名：<input type="text"/> <br/>

    <div>春季</div>
    <div>夏季</div>
    <div>秋季</div>
    <div>冬季</div>
</body>
</html>

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cxf8RgAD-1656942846695)(img/样式效果.png)]

4.2.3 盒子模型

万物皆"盒子"
盒子模型是通过设置边框和元素内容的边距，从而实现布局的方式
分为内边距和外边距两种方式
分析图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CBQkEVaO-1656942846696)(img/盒子模型图.png)]
内外边距的设置，取决于所在视角，而我们一般经常使用的是外边距
内外边距介绍：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N0gL55Yv-1656942846696)(img/内外边距.png)]

案例：03案例二：盒子模型演示.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型演示</title>
    <style>
        .wai{
            border: 1px solid red;
            width: 200px;
            height: 200px;

            /*设置内边距,会导致外框的变化*/
            /*padding: 50px;*/
        }

        .nei{
            border: 1px solid blue;
            width: 100px;
            height: 100px;

            /*设置外边距*/
            /*margin-top: 50px;
            margin-left: 50px;
            margin-right: 50px;
            margin-bottom: 50px;*/

            /*margin: 50px;*/

            /*上、右、下、左*/
            /*margin: 70px 35px 30px 65px;*/
        }
    </style>
</head>
<body>
    <div class="wai">
        <div class="nei">

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

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7nSdopAl-1656942846696)(img/内外边距图.png)]
补充：值含义：

一个值时

/*  所有 4 个外边距都是 10px */
margin:10px;

两个值时

/* 上外边距和下外边距是 10px
右外边距和左外边距是 5px */

margin:10px 5px;

margin:10px auto;
auto 浏览器自动计算外边距，具有居中效果。

三个值时

/* 上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px*/

margin:10px 5px 15px;

四个值时

/*上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px*/

margin:10px 5px 15px 20px;

4.3 实现步骤

4.3.1 顶部图片和表单

要实现的内容如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g6OSHZb1-1656942846696)(img/登陆01.png)]
- 左上角是一个logo，就是顶部图片
步骤
1. 创建一个 html 文件。
2. 创建三个<div>标签划分区域(顶部公司图标、中间表单、底部页脚)。
3. 在顶部<div>标签中通过<img>标签引入图片。
4. 在中间表单<div>标签中通过表单标签和表格标签填充表单项。
5. 设置样式(背景图片、背景色、宽度、外边距、弧度、文字水平对齐)。

案例：04案例二：登录页面.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="../css/login.css"/>
</head>
<body>
    <!--顶部公司图标-->
    <div>
        <img src="../img/logo.png"/>
    </div>

    <!--中间表单-->
    <div class="center">
        <form action="#" method="get" autocomplete="off">
            <table >
                <thead>
                    <tr>
                        <th colspan="2">账&nbsp;密&nbsp;登&nbsp;录</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>
                            <label for="username">账号</label>
                        </td>
                        <td>
                            <input type="text" id="username" name="username" placeholder=" 请输入账号" required/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="password">密码</label>
                        </td>
                        <td>
                            <input type="password" id="password" name="password" placeholder=" 请输入密码" required/>
                        </td>
                    </tr>
                </tbody>

                <tfoot>
                    <tr>
                        <td colspan="2">
                            <button type="submit">确&nbsp;定</button>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </form>
    </div>

</body>
</html>

样式代码：css/login.css

/*背景图片*/
body{
    background: url("../img/bg.png");
}

/*中间表单样式*/
.center{
    background: white;      /*背景色*/
    width: 40%;             /*宽度*/
    margin: auto;           /*水平居中外边距*/
    margin-top: 100px;      /*上外边距*/
    border-radius: 15px;    /*边框弧度*/
    text-align: center;     /*文本水平居中*/
}

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dsCaB3vT-1656942846696)(img/登陆效果01.png)]

4.3.2 中间表单的样式

步骤
1. 设置表头样式(字体大小、颜色)
2. 设置表体提示样式(文字大小)
3. 设置表体输入框样式(边框、弧度、宽度、高度、轮廓)
4. 设置表底按钮样式(边框、弧度、宽度、高度、背景色、字体颜色、字体大小)
5. 设置表行样式(行高)

代码

<!--结构增加 hr , table增加width-->
<table width="100%">
    <thead>
        <tr>
            <th colspan="2">账&nbsp;密&nbsp;登&nbsp;录
                <hr/>
            </th>
        </tr>
    </thead>
    ...
</table>

样式代码：login.css增加如下代码

/*表头样式*/

thead th {
    font-size: 30px;
    /*字体大小*/
    color: orangered;
    /*字体颜色*/
}


/*表体提示信息样式*/

tbody label {
    font-size: 20px;
    /*字体大小*/
}


/*表体输入框样式*/

tbody input {
    border: 1px solid gray;
    /*边框*/
    border-radius: 5px;
    /*边框弧度*/
    width: 90%;
    /*输入框的宽度*/
    height: 40px;
    /*输入框的高度*/
    outline: none;
    /*取消轮廓的样式*/
}


/*表底确定按钮样式*/

tfoot button {
    border: 1px solid crimson;
    /*边框*/
    border-radius: 5px;
    /*边框弧度*/
    width: 95%;
    /*宽度*/
    height: 40px;
    /*高度*/
    background: crimson;
    /*背景色*/
    color: white;
    /*文字的颜色*/
    font-size: 20px;
    /*字体大小*/
}

/*表行高度*/

tr {
    line-height: 60px;
    /*行高*/
}

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2gA4UFwY-1656942846697)(img/登陆效果02.png)]

4.3.3 底部页脚

步骤
1. 在底部页脚<div>标签中通过文字和<a>标签实现超链接
2. 设置底部页脚样式(宽度、外边距、字体大小、字体颜色)
3. 设置超链接样式(去除下划线、超链接文字颜色)
4. 在案例一头条页面登录超链接中，引入跳转登录页面

代码

<!--底部页脚-->
<div class="footer">
    <br/><br/> 登录/注册即表示您同意&nbsp;&nbsp;
    <a href="#" target="_blank">用户协议</a>&nbsp;&nbsp; 和&nbsp;&nbsp;
    <a href="#" target="_blank">隐私条款</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="#" target="_blank">忘记密码?</a>
</div>

样式代码

/*底部页脚样式*/

.footer {
    width: 35%;
    /*宽度*/
    margin: auto;
    /*水平居中外边距*/
    font-size: 15px;
    /*字体大小*/
    color: gray;
    /*字体颜色*/
}

/*超链接样式*/

a {
    text-decoration: none;
    /*去除超链接的下划线*/
    color: blue;
    /*超链接颜色*/
}

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y5ipghAL-1656942846697)(img/登陆效果03.png)]

4.3.4 登陆跳转页面

点击案例一中的登陆，跳转到登陆界面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-52I9Xoap-1656942846697)(img/跳转.png)]

修改案例一代码：03案例一：头条页面.html

<a href="../案例二/04案例二：登录页面.html" target="_self">登录&nbsp;&nbsp;</a>

5 HTML案例-网站发布

将网站部署到服务器，浏览器通过URL地址访问页面

5.1 案例效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NZPpaxQG-1656942846697)(assets/1573812990799.png)]

在地址栏输入URL地址，访问服务器上的页面。

5.2 案例分析

5.2.1 Nginx服务器概述

Nginx是一种服务器软件，其最主要，最基本的功能是可以与服务器硬件(电脑)结合，让程序员可以将程序发布在Nginx服务器上，让成千上万的用户可以浏览。

除此之外，Nginx还是一种高性能的HTTP和反向代理服务器，同时也是一个代理邮件服务器。也就是说，我们在Nginx上可以：

可以发布网站(静态, html,css,js)
可以实现负载均衡,
代理服务器
可以作为邮件服务器实现收发邮件等功能

本课程我们只讨论Nginx发布网站的功能，其它的功能后续课程会深入学习.

5.2.2 在Linux上使用Nginx

1）下载Nginx

进入http://nginx.org/网站，下载nginx-1.17.5.tar.gz文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-33bcHUR1-1656942846698)(assets/1573805867978.png)]

今日资料有这个压缩包，可以直接用：nginx-1.17.5.tar.gz

2）上传并解压

使用crt上传压缩包
- 打开crt，连接linux，然后alt+p，进入如下界面
- 执行命令：put xx/xx.gz
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B7EhCTde-1656942846698)(img/upload.png)]
解压
- 先进入根目录：cd ~
- 将压缩包移动到 /home/目录： mv xx.gz /home/
- 解压缩：tar -zxvf xx.gz
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Qpkd792-1656942846698)(img/upload2.png)]
- 安装好之后进入安装好的目录
  
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rjzb1Nne-1656942846698)(img/upload3.png)]

3）准备依赖环境

#安装Nginx依赖环境，‐y表示所有提示默认选择y
yum -y install pcre pcre-devel
yum ‐y install zlib zlib‐devel  
yum ‐y install openssl openssl‐devel
yum -y install gcc gcc-c++ autoconf automake make

4）编译安装

./configure
#执行这一步的时候可能会报错：error C compliler cc is not found
#解决：yum -y install gcc gcc-c++ autoconf automake make  
make
make install
# 安装成功之后,就会在/usr/local下多出了一个nginx目录.

5）启动服务器

#进入nginx的sbin目录
cd /usr/local/nginx/sbin

#在sbin目录下启动
./nginx
#在sbin目录下停止
./nginx ‐s stop
#在sbin目录下重写加载
./nginx ‐s reload

#开放linux的对外访问的端口80，在默认情况下，Linux不会开放80端口号
#执行关闭防火墙命令：systemctl stop firewalld 

#查看是否有nginx的线程是否存在
ps ‐ef | grep nginx

6）浏览器访问

浏览器输入虚拟机ip地址，默认80端口

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5jEPSiB1-1656942846699)(img/upload4.png)]

5.2.3 发布项目

在 /home 下创建一个 toutiao 目录：mkdir toutiao
将项目上传到该目录下：put xx/web.zip （web.zip在今天资料中：资料\发布的项目\web.zip）
解压项目压缩包：unzip web.zip
编辑 nginx 配置文件：vi /home/nginx-1.17.5/conf/nginx.conf
- 将root改为头条目录，如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jei7LSGI-1656942846699)(assets/1573812368563.png)]

重启服务

关闭 nginx 服务：/usr/local/nginx/sbin/nginx –s stop
启动 nginx 服务并加载配置文件：/usr/local/nginx/sbin/nginx -c /home/nginx-1.17.5/conf/nginx.conf

访问

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GQb1tcl2-1656942846699)(img/fangwen.png)]
- 点击超链接，可以跳转到案例1
- 案例1中，点击登录，可以跳转到案例2

5.2.4 windows版本的Nginx操作

将"day02_css\资料\nginx-1.18.0.zip"解压到无中文的目录下：C:\DevelopSoft
双击运行nginx.exe（窗口会一闪而过，然后打开浏览器访问http://localhost:80，可以看到nginx的欢迎界面即可）
将“day02_css\资料\发布的项目\web.zip”复制到一个无中文的目录下：比如：C:\DevelopSoft\nginx-1.18.0\project（自己建一个project文件夹）
然后将web.zip解压

配置nginx.conf （注意目录的斜杠是 / ）

location / {
    root   C:/DevelopSoft/nginx-1.18.0/project;
    index  index.html index.htm;
}

重新加载nginx

nginx -s reload
如果重新加载不管用，然后停止重启，还是不管用，那就可以使用杀进程的命令：
taskkill /im nginx.exe /f
然后双击nginx.exe启动

windows下nginx常用命令：（需要将cmd进入到nginx.exe目录下才能执行如下命令）

查看Nginx的版本号：nginx -V

启动Nginx：start nginx

快速停止或关闭Nginx：nginx -s stop

正常停止或关闭Nginx：nginx -s quit

配置文件修改重装载命令：nginx -s reload

访问：http://localhost/web/

是你的于哥哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html和css学习

在学习了基本HTML标签和样式后
复制链接

扫一扫

html和css学习

1 CSS快速入门

1.1 CSS的介绍与组成部分

1.1.1 介绍

1.1.2 CSS的组成

1.2 入门案例

1.3 Chrome开发者工具

1.4 CSS小结

2 CSS基本语法

2.1 CSS的引入方式

2.1.1 内联样式

2.1.2 内部样式表

2.1.3 外部样式表

2.2 关于注释

2.3 关于选择器

2.2.1 基本选择器

1）元素选择器

2）类选择器

3）ID选择器

4）通用选择器

5） 案例：

2.2.2 属性选择器

2.2.3 伪类选择器

2.2.4 组合选择器

2.4 总结

3 CSS案例-头条页面

3.1 案例效果

3.2 案例分析

3.2.1 边框样式

3.2.2 文本样式

3.2.3 常见样式属性

1）边框样式

2）文本样式

3.4 实现步骤

3.4.1 顶部和导航条

3.4.2 左侧分享和中间正文和右侧广告图片的

3.4.3 底部页脚超链接

4 CSS案例-登录页面

4.1 案例效果

4.2 案例分析

4.2.1 表格标签

1）什么是表格

2）表格标签

4.2.2

4.2.3 盒子模型

4.3 实现步骤

4.3.1 顶部图片和表单

4.3.2 中间表单的样式

4.3.3 底部页脚

4.3.4 登陆跳转页面

5 HTML案例-网站发布

5.1 案例效果

5.2 案例分析

5.2.1 Nginx服务器概述

5.2.2 在Linux上使用Nginx

1）下载Nginx

2）上传并解压

3）准备依赖环境

4）编译安装

5）启动服务器

6）浏览器访问

5.2.3 发布项目

5.2.4 windows版本的Nginx操作

“相关推荐”对你有帮助么？

5）案例：