一、HTML
二、CSS
层叠样式表，给页面中的HTML标签设置样式
导入：内嵌式、外联式、行内式
CSS三大特性：继承性、层叠性、优先级
CSS 属性书写顺序
基础选择器
- 标签选择器
- 类选择器
- id 选择器
- 通配符选择器
选择器进阶
- 复合选择器
- 后代选择器：空格
- 子代选择器：>
- 并集选择器：选择器1，选择器2 { }
- 交集选择器：选择器1.选择器2 { }
- hover 伪类选择器
字体
font：style weight size family（顺序）
口诀：swsf（稍微舒服），前2个可省略
文本样式
背景相关属性
盒子模型
清除浮动
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 1226px;
margin: 0 auto;
background-color: pink;
/* 1、直接设置父元素的高度 */
/* height: 400px; */
/* 5、给父元素设置一个 overflow:hidden */
overflow: hidden;
}
.left {
float: left;
width: 234px;
height: 400px;
background-color: orange;
}
.right {
float: left;
width: 992px;
height: 400px;
background-color: red;
}
/* 3、单伪元素清除法 */
/* .clearfix::after {
content: "";
display: block;
clear: both;
} */
/* 4、双伪元素消除法 */
/* .clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
} */
</style>
<div class="box clearfix">
<div class="left">左盒子</div>
<div class="right">右盒子</div>
<!-- 2、额外标签法 -->
<!-- <div style="clear: both"></div> -->
</div>
结构伪类选择器
- first-child
- last-child
- nth-child(n)
- nth-last-child(n)
- nth-of-type(n)
伪元素
- ::before
- ::after
必须设置 content 属性才能生效，伪元素默认是行内元素
标准流
浮动
清除浮动
盒子模型
标准盒子模型 和 怪异盒子模型
CSS 高级技巧
精灵图
字体图标
三角形
.triangle {
width: 0;
height: 0;
border: 50px solid transparent;
border-left-color: #000;
}
京东案例：
.jd span {
position: absolute;
right: 15px;
top: -10px;
width: 0;
height: 0;
border: 5px solid transparent;
border-bottom-color: #000;
/* 照顾兼容性 */
line-height: 0;
font-size: 0;
}
CSS 用户界面样式
① 鼠标样式
<ul>
<li style="cursor: default">默认鼠标</li>
<li style="cursor: pointer">鼠标小手</li>
<li style="cursor: move">鼠标移动</li>
<li style="cursor: text">鼠标文本</li>
<li style="cursor: not-allowed">鼠标禁止</li>
</ul>
② 取消表单轮廓、防止拖拽文本域
<style>
input,
textarea {
/* 取消表单轮廓 */
outline: none;
}
textarea {
/* 防止拖拽文本域 */
resize: none;
}
</style>
<body>
<!-- 1. 取消表单轮廓 -->
<input type="text" />
<!-- 2. 防止拖拽文本域 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
vertical-align 属性应用
图片、表单和文字对齐
<style>
img {
vertical-align: middle; /* top,bottom */
}
</style>
<body>
<img src="./images/ldh.jpg" alt="" /> 刘德华
</body>
解决图片底部默认空白缝隙的问题
1、给图片添加 vertical-align: middle;
2、把图片转换为块级元素 display：block；
常见布局技巧
① margin 负值的巧妙运用
<style>
ul li {
/* 2、 */
position: relative;
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}
ul li:hover {
/* 1. 如果盒子没有定位，则鼠标经过添加相对定位即可 */
position: relative;
border: 1px solid blue;
}
ul li:hover {
/* 2.如果li都有定位，则利用 z-index提高层级 */
z-index: 1;
border: 1px solid blue;
}
</style>
② 文字围绕浮动元素
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 300px;
height: 70px;
background-color: pink;
margin: 0 auto;
padding: 5px;
}
.box .pic {
float: left;
width: 120px;
height: 60px;
margin-right: 10px;
}
.pic img {
width: 100%;
}
</style>
<div class="box">
<div class="pic">
<img src="./images/img.png" alt="" />
</div>
<p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场</p>
</div>
③ 行内块的巧妙运用
只要给父元素添加：text-align：center，那么子元素所有的行内元素和行内块元素都会自动居中对齐
<style>
* {
padding: 0;
margin: 0;
}
.box {
text-align: center;
}
.box a {
display: inline-block;
width: 36px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #ccc;
text-align: center;
line-height: 36px;
text-decoration: none;
color: #333;
font-size: 14px;
}
.box .prev,
.box .next {
width: 85px;
}
.box .current,
.box .elp {
background-color: #fff;
border: none;
}
.box input {
width: 45px;
height: 36px;
border: 1px solid #ccc;
outline: none;
}
.box button {
width: 60px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
</style>
<div class="box">
<a href="#" class="prev"><< 上一页</a>
<a href="#" class="current">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#" class="elp">...</a>
<a href="#" class="next">下一页 >></a>
到第
<input type="text" />
页
<button>确定</button>
</div>
④ CSS 三角强化
<style>
/* 直角三角形 */
.triangle {
width: 0;
height: 0;
/* 1.只保留右边的边框有颜色 */
border-color: transparent red transparent transparent;
/* 2. 样式都是solid */
border-style: solid;
/* 3. 上边框宽度要大， 右边框宽度稍小，其余的边框该为 0 */
border-width: 100px 50px 0 0;
}
</style>
完整案例：
<style>
.price {
width: 160px;
height: 24px;
border: 1px solid red;
margin: 0 auto;
/* 继承 */
line-height: 24px;
}
.price .miaosha {
position: relative;
float: left;
width: 90px;
height: 100%;
background-color: red;
text-align: center;
color: #fff;
font-weight: 700;
margin-right: 8px;
}
.price .miaosha i {
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-color: transparent #fff transparent transparent;
border-style: solid;
border-width: 24px 10px 0 0;
}
.price .origin {
font-size: 12px;
color: gray;
text-decoration: line-through;
}
</style>
<div class="price">
<span class="miaosha"> ￥1650 <i></i> </span>
<span class="origin">￥5690</span>
</div>