前端—01：HTML + CSS_css jingzhi-CSDN博客

本文链接：https://blog.csdn.net/jingzhi111/article/details/93621802

一、HTML

HTML的块标签:

div标签：默认占一行,自动换行
span标签：内容显示在同一行

常用快捷键：

Ctrl + / ：注释当前行
Ctrl + R ：运行当前网页/刷新当前网页
Alt + / ：元素属性提示

二、CSS

1.三种选择器：

ID选择器

以#号开头  ID在整个页面中必须是唯一的s
#ID的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}

类选择器

以 . 开头
.类的名称{
属性名称:属性的值;
属性名称:属性的值;
}

元素选择器

元素的名称{
属性名称:属性的值;
属性名称:属性的值;
}

2.三种样式表

行内样式：直接在标签中添加一个style属性, 编写CSS样式

<div class="shuiguo" style="color: yellow;">香蕉</div>

内部样式：直接在head中的style标签内编写CSS代码

<head>
    <style>
         .shuiguo{
             color: yellow;
         }
    </style>
</head>
<body>
    <div class="shuiguo">香蕉</div>
</body>

外部样式：通过link标签引入一个外部的css文件

<head>
    <!--通过link引入外部css样式-->
    <link href="style1.css" rel="stylesheet"/>
</head>
<body>
    <div class="shuiguo">香蕉</div>
</body>


<!--外部样式style1.css-->
.shuiguo{
    color: yellow;
}

3.CSS浮动 : 浮动的元素会脱离正常的文档流，常用在布局中让多个div显示在同一行。

float属性：left、right
clear属性：清除浮动（both : 两边都不允许浮动； left: 左边不允许浮动； right : 右边不允许浮动）
流式布局

4.CSS的其他选择器

选择器分组：选择器1，选择器2 {属性名称：属性值}
属性选择器：选择器 [属性的名称=' ' ]
后代选择器：爷爷选择器孙子选择器找出所有的后代，中间以空格隔开
子元素选择器：父选择器 > 儿子选择器
伪类选择器：通常都是用在a标签上

5.CSS的盒子模型

内边距：padding ，控制的是盒子内容的距离（顺序都是上右下左）

padding-top:
padding-right:
padding-bottom:
padding-left:

padding: 10px;  上下左右都是10px
padding: 10px 20px;  上下是10px 左右是20px
padding: 10px 20px 30px;  上 10px 右20px  下30px  左20px
padding: 10px 20px 30px 40px;  上右下左, 顺时针的方向

外边距：margin，控制盒子与盒子之间的距离

margin-top:
margin-right:
margin-bottom:
margin-left:

6.CSS绝对定位

position: absolute

top: 控制距离顶部的位置
left: 控制距离左边的位置

常用的网站首页实现步骤：

1. 创一个最外层div
2. 第一部份: LOGO部分: 嵌套三个div
3. 第二部分: 导航栏部分 : 放置5个超链接
4. 第三部分: 轮播图
5. 第四部分:
6. 第五部分: 直接放一张图片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一张图片
9. 第八部分: 放一堆超链接