一、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. 第八部分: 放一堆超链接