掌握css/html# 学习目标：
提示：这里可以添加学习目标
例如：
- 一周掌握 Java 入门知识
学习内容：
4-29前端web学习之CSS/HTML
服务器开发的语言：
-Java
-PHP
-C#
-python
-Node.js
网页特点：（B/S架构）
1.不需要安装
2.无需更新
3.跨平台
结构
HTML用于描述页面的结构
表现
CSS用于控制页面中元素的样式
行为：
JavaScript用于响应用户操作
一、HTML简介
超文本标记语言。
负责网页的三个要素之中的结构。
HTML使用标签的形式来标识网页中的不同组成部分。
所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面
卸载notepad++
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cestZVoJ-1653622187552)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220429210805603.png)]
vscode快捷键 ！+ tab键快速生成网页
<!–当我们需要跳转到服务器内部的页面时，我们一般使用相对路径
相对路径都会使用.或…开头
./
…/
写了./和不写./是一样的，默认是./
./表示当前文件所在的目录
在这里当前页面就是09.refPath.html
./就相当于09.refPath.html所在的目录path
…/表示当前目录的上一级目录
–>
二、CSS简介
id和class的区别
id不可以重复，class可以重复
选择器
1.父元素
-直接包含子元素
2.子元素
-直接被父元素包含
3.祖先元素
-直接或间接包含后代的元素
-一个元素的父元素也是它的祖先元素
4.后代元素
-直接或间接被祖先元素包含
-子元素也是后代元素
5.兄弟元素
-拥有相同父元素
* 子元素选择器（ >）
-作用:选中指定父元素中指定子元素
-语法：
父元素 > 子元素 */
/* div.box > span{
color: orange;
} */
/*
后代元素选择器（空格）
-作用:选中指定元素内的指定后代元素
-语法：祖先 后代
*/
/*
选择下一个兄弟(+表示紧挨着的)
-语法：前一个 + 下一个
选择下边所有的兄弟(~)
-语法：兄 ~ 弟
*/
p + span{
color: red;
}
p ~ span{
color: blue;
}
/* div span{
color:skyblue;
}
div p span{
color:red;
} */
</style>
</head>
<body>
<!--
父元素
-直接包含子元素
子元素
-直接被父元素包含
祖先元素
-直接或间接包含后代的元素
-一个元素的父元素也是它的祖先元素
后代元素
-直接或间接被祖先元素包含
-子元素也是后代元素
兄弟元素
-拥有相同父元素
-->
以后在vscode敲代码的时候，尽量引用提示的代码，不要自己敲很容易出错！！
看zeal里面的background-color是否可以继承
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Na1J1uLp-1653622187553)(D:\appfiles\Typora\image-20220504230115221.png)]
盒模型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DqVr93Zh-1653622187554)(D:\appfiles\Typora\image-20220505104048352.png)]
盒子模型——水平方向布局
通过浮动可以让一个元素向父元素靠左或靠右移动
使用float属性来设置元素的移动
可选值：
none：默认值 元素不移动
left：元素向左浮动
right：元素向右浮动
注意：元素设置浮动以后，水平布局的等式便不需要强制成立
元素设置浮动以后会完全脱离文档流，不再占用文档流位置，
所以元素下边的还在文档流的元素会自动向上移动
–浮动的特点
1.浮动元素会完全脱离文档流，不再占据文档流中的位置
2.设置浮动以后元素会向父元素的左侧或右侧移动
3.浮动元素默认不会从父元素中移出
4.浮动元素向左或向右移动时，不会超过他前边的其他浮动元素
5.如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
6.浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高
定位（position）
-定位是一种更加高级的布局手段
-通过定位可以将元素摆在页面的任意位置
-使用position属性来设置定位
可选值：
static 默认值，元素是静止的没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位
–相对定位
–当元素的position属性值设置为 relative 时则开启了相对定位
–相对定位的特点：
1.元素开启相对定位后，如果不设置偏移量元素不会发生任何的变化
2.相对定位是参考元素在文档流中的位置定位的
3.相对定位会提升元素的层级
4.相对定位不会脱离文档流
5.相对定位不会改变元素的性质 块还是块 行内还是行内
–偏移量（offset）
当元素开启了定位以后，可以通过偏移量来设置元素的位置
top --定位元素和定位位置上边的距离
bottom --定位元素和定位位置下边的距离
–定位元素垂直方向的位置由top和bottom两个属性来控制
通常情况下我们只使用一个
–top值越大，越往下移动
–bottom值越大，越往上移动
left --定位元素和定位位置左侧的距离
right --定位元素和定位位置右侧的距离
–定位元素水平方向的位置由left和right两个属性来控制
通常情况下我们只使用一个
–left值越大，越往右移动
–right值越大，越往左移动
京东导航条错误代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东顶部导航条</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
.clearfixed::before,
.clearfixed::after {
content: "";
display: table;
clear: both;
}
body {
font: 12px/1.5;
color: #999;
}
.top-bar-wrapper {
width: 100%;
background-color: #E3E4E5;
line-height: 30px;
border: 1px #ddd solid;
}
.top-bar {
width: 1190px;
margin: 0 auto;
position: relative;
}
/*
设置字体的样式
*/
.top-bar a,
.top-bar span,
.top-bar i {
color: #999;
text-decoration: none;
}
.top-bar a:hover,
.top-bar a.highlight {
color: #f10125;
}
.location {
float: left;
}
/*
设置城市下拉框样式
*/
.location.city-list {
/* display: none; */
top: 31px;
width: 320px;
height: 436px;
background-color: #999;
border: 1px solid rgb(204, 203, 204);
box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
/*
设置绝对路径，使其不占据页面位置
*/
position: absolute;
}
/*
当鼠标一如location时，让city-list显示
*/
.location:hover .city-list {
display: block;
}
.current-city {
padding: 0 10px;
/* background-color: #999;
border: 1px solid rgb(204, 203, 204);
border-bottom: none;
padding-bottom: 2px; */
z-index: 999;
position: relative;
}
.location:hover .current-city{
background-color: #999;
border: 1px solid rgb(204, 203, 204);
border-bottom: none;
padding-bottom: 1px;
}
.shortcut {
float: right;
}
/*
设置分割线
*/
.shortcut .line {
width: 1px;
height: 10px;
background-color: #999;
margin: 12px 12px 0;
}
.shortcut li {
float: left;
}
</style>
</head>
<body>
<!--创建外围容器-->
<div class="top-bar-wrapper">
<!--创建内部容器-->
<div class="top-bar">
<!--左侧的菜单-->
<div class="location">
<div class="current-city">
<i class="iconfont"></i>
<a href="javascript:;">北京</a>
</div>
<!--放置城市列表div-->
<div class="city-list">
</div>
</div>
<!--右侧的菜单-->
<ul class="shortcut">
<li>
<a href="javascript:;">你好,请登录</a>
<a class="highlight" href="javascript:;">免费注册</a>
</li>
<!--分割线-->
<li class="line"></li>
<li> <a href="javascript:;">我的订单</a></li>
<li class="line"></li>
<li> <a href="javascript:;">我的京东</a>
<!-- <i class="fas fa-angle-down"> -->
<i class="iconfont"></i>
</li>
<li class="line"></li>
<li> <a href="javascript:;">京东会员</a></li>
<li class="line"></li>
<li> <a class="highlight" href="javascript:;">企业采购</a>
<i class="iconfont"></i>
</li>
<!-- <li class="line">
<span>客户服务</span>
<i class="iconfont"></i>
</li>
<li class="line">
<span>网站导航</span>
<i class="iconfont"></i>
</li> -->
<li class="line">
<li><span>手机京东</span></li>
</li>
</ul>
</div>
</div>
</body>
</html>
快捷键：alt + shift + F 格式化代码
网易有道词典快捷键：ctrl + alt + D (截屏翻译)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7yiZ5ASd-1653622187555)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220511113513327.png)]
ps快捷键：
ctrl + r 显示标尺
错误：.app.qrcode img{
width: 90px;
}
连着写就会失效！！ 要分开！
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4AEnEufA-1653622187555)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220514221046151.png)]
设置类选择器，中间用逗号隔开！！
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wTrGf9Rx-1653622187556)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220520161220897.png)]
提示：这里可以添加要学的内容
例如：
- 搭建 Java 开发环境
- 掌握 Java 基本语法
- 掌握条件语句
- 掌握循环语句
学习时间：
提示：这里可以添加计划学习的时间
例如：
- 周一至周五晚上 7 点—晚上9点
- 周六上午 9 点-上午 11 点
- 周日下午 3 点-下午 6 点
学习产出：
提示：这里统计学习计划的总量
例如：
- 技术笔记 2 遍
- CSDN 技术博客 3 篇
- 习的 vlog 视频 1 个
扫一扫
3519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
