文章目录
雪碧图（p92）
雪碧图的使用步骤
1.确定要使用的图标
2.测量图标的大小
3.根据测量结果创建一个元素
4.将雪碧图设置为元素的背景图片
5.设置一个偏移量以显示正确的图片
雪碧图的特点：
一次性将多个图片放入，提高访问速度
<style>
a:link{
display: block;
width: 206px;
height: 175px;
background-image: url("/img/按钮.jpg");
background-position: 0px 0px ;
background-repeat: no-repeat;
background-position: -25px -5px;
}
a:hover{
background-position: -235px -5px;
}
a:active{
background-position: -445px -5px;
}
</style>
线性渐变（p93）
<style>
.box1{
width: 200px;
height: 200px;
/*
通过渐变设置一些复杂的背景颜色，实现从一个颜色过度到其他颜色
！！渐变是图片，需要通过background-image 来设置
*/
/*
线性渐变，颜色沿着一条直线发生变化
linear-gradient(颜色，颜色，颜色……)默认从上往下
deg 旋转多少度.
repeating-linear-gradient(red 0px,yellow 50px);
}
*/
/* background-image: linear-gradient(180deg,red 100px ,yellow,green,orange); */
background-image:repeating-linear-gradient(red 0px,yellow 50px);
}
.box2{
width: 200px;
height: 200px;
/* linear-gradient(to right 颜色，颜色，颜色……)往右变
to bottom */
background-image: linear-gradient(to right ,red,yellow,green
);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
径向线变（p94）
<style>
.box1{
width: 300px;
height: 500px;
background-color: aquamarine;
background-image: repeating-radial-gradient(100px 100px at 10px 10px,red,yellow);
/*
radial-gradient(red,yellow) 默认情况下径向渐变根据元素形状改变,也可以手动设定渐变的大小
circle
ellipse
radial-gradient
- 也可以指定渐变的位置
radial-gradient(大小 at 位置，颜色 位置，颜色 位置，颜色 位置)
*/
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
表格的简介（p96）
table 创建表格
tr 创建一行
td 创建一个单元格
colspan 横向合并单元格
rowspan 纵向合并单元格
<body>
<!-- 通过table来创建表格 -->
<table border="1" width="50%" align="center">
<!-- 在table中使用tr来表示一行 -->
<tr>
<!-- 用td来表示格 -->
<!-- 纵向合并表格 -->
<td rowspan="2">A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
<tr><td>c1</td>
<td>c2</td>
<td>c3</td>
<td>c4</td>
</tr>
<tr><td>D1</td>
<td>D2</td>
<td colspan="2">D3</td>
<!-- colspan横向合并单元格 -->
</tr>
</table>
长表格（p97）
可以将表格分为三部分
头部 thead
主体 tbody
底部 tfoot
th 可以用来代替td，表示头部的单元格
<table border="1" width="50%" align="center">
<thead>
<tr>
<td>日期</td>
<td>收入</td>
<td>支出</td>
<td>合计</td>
</tr>
</thead>
<tbody>
<tr>
<td>2000.1.1</td>
<td>2000</td>
<td>2000</td>
<td>0</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>2000</td>
<td>2000</td>
<td>0</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>2000</td>
<td>2000</td>
<td>0</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>0</td>
</tr>
</tfoot>
</table>
表格的样式（p98）
border-spacing
指定边边块之间的距离
border-spacing: 0px;
border-collspacing
设置边框的合并
table-cell
display: table-cell;
<style>
table{
width: 50%;
border: 1px solid red;
margin:0 auto;
border-spacing: 0ch;
}
td{
border: 1px solid red;
height: 100px;
}
tbody tr:nth-child(2n){
/* tr 是 tbody的子元素 */
background-color: aqua;
}
</style>
表单简介（p99 p100）
文本框 text
密码框 password
单选按钮 radio
多选框 checkbox
下拉列表 select
<form action="target.html">
文本框 <input type="text" name=""><br><br>
密码框 <input type="password" name="提交给服务器">
单选框 <input type="radio" name="1">
<input type="radio" name="1" checked>
<!-- 提交按钮
submit
value 指定为什么文字 -->
<input type="submit" value="注册">
<input type="checkbox" name="2">
<input type="checkbox" name="2">
<input type="checkbox" name="2">
<input type="checkbox" name="2">
<select name="3" id="">
<option value="">选项1</option>
<option value="">选项2</option>
<option value="">选项3</option>
</select>
</form>
在text中
autocomplete=“off” 关闭自动补全
readonly 将表单设置为只读，数据会提交
disabled 将表单设置为禁用，数据不会提交
autofocus 设置表单项自动获取焦点
<input type="text" name="username" value="" autocomplete="off" readonly autofocus><br><br>
项目搭建（p101~p106）
/* 主页的index.html的样式表 */
/* -------------顶部导航条容器-------------- */
.topbar-wrapper{
/* 设置宽度全屏 */
width: 100%;
background-color: #333;
height: 40px;
line-height: 40px;
}
/* 设置超链接颜色 */
.topbar a{
font-size: 12px;
color: #b0b0b0;
/* 生成块元素，让a的一个区域可以点击 */
display: block;
}
/* --------设置左侧导航栏 -----------*/
.service{
float: left;
}
/* --------设置右侧导航条------------ */
.shop-cart ,.user-info{
float: right;
}
.topbar li{
float: left;
}
/* 设置超链接移入的效果 */
.topbar a:hover{
color: aliceblue;
}
/* 设置中间的分割线 */
.topbar .line{
color: #424242;
margin: 0 8px;
}
/* 设置购物车的样式 */
.shop-cart1{
width: 120px;
background-color: #424242;
text-align: center;
}
i{
margin-right: 2px;
}
.shop-cart:hover a{
background-color:white ;
color: orange;
}
/* ------------设置下载app 的下拉二维码------------- */
.app .qrcode{
display: none;
position: relative;
width: 124px;
height: 148px;
background-color: #ffffff;
text-align: center;
box-shadow: 0 0 10px rgba(0, 0, 0 ,0.3);
left: -30px;
}
.app:hover .qrcode{
display: block;
}
.app{
width: 46px;
}
/* 设置app的小三角 */
.app::after{
content:" ";
width: 0px;
height: 0px;
position:relative;
border: 10px transparent solid;
/* 去除上边框 */
border-top: none;
/* 单独设置下边框颜色 */
border-bottom-color: rgb(255, 255, 255);
left: 20px;
top: -186px;
}
/* -------------设置购物车下拉框--------------- */
.shop-cart2{
content: "购物车中还没有商品，赶紧选购啊！";
background-color:white;
display: none;
}
.shop-cart:hover .shop-cart2{
display: block;
width: 350px;
height: 200px;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0 ,0.3);
position: relative;
right: 230px;
}
/* -----------------头部logo------------------- */
.header{
height: 100px;
}
.header .logo{
margin-top: 22px;
}
.header .logo a{
display:block;
width: 60px;
height: 55px;
background-position: center;
background-image: url(/img/logo.png);
background-position: center;
}
```html
<!-- 引入重置样式表 -->
<link rel="stylesheet" href="/reset.css">
<!-- 引入图标字体库 -->
<link rel="stylesheet" href="/06.font&background/font/css/all.css">
<!-- 引入当前页面的样式表 -->
<link rel="stylesheet" href="/mi/css/index.css">
<!-- 引入公共样式表 -->
<link rel="stylesheet" href="/mi/css/base.css">
<style>
</style>
</head>
<body>
<!-- 顶部盗号条 -->
<!-- 顶部导航条外部容器 -->
<div class="topbar-wrapper">
<!-- 创建内部容器 -->
<div class="topbar w clear-fix">
<!-- 左侧导航条 -->
<ul class="service">
<li><a href="#">小米商城</a></li>
<li class="line">|</li>
<li><a href="#">MIUI</a></li>
<li class="line">|</li>
<li><a href="#">loT</a></li>
<li class="line">|</li>
<li><a href="#">云服务</a></li>
<li class="line">|</li>
<li><a href="#">金融</a></li>
<li class="line">|</li>
<li><a href="#">有品</a></li>
<li class="line">|</li>
<li><a href="#">小爱开放平台</a></li>
<li class="line">|</li>
<li><a href="#">企业团购</a></li>
<li class="line">|</li>
<li><a href="#">资质证照</a></li>
<li class="line">|</li>
<li><a href="#">协议规则</a></li>
<li class="line">|</li>
<li>
<a href="#" class="app">下载app
<!-- 添加一个弹出层 -->
<div class="qrcode">
<div class="app1"></div>
<img src="/img/小米二维码.png" alt="">
</div>
</a>
</li>
<li class="line">|</li>
<li><a href="#">select location</a></li>
<li class="line select">|</li>
</ul>
<!-- 购物车 -->
<ul class="shop-cart">
<li><a href="#" class="shop-cart1" >
<i class="fas fa-shopping-cart">
</i>
购物车(0)<div class="shop-cart2"></div></a>
</li>
</ul>
<!-- 登入注册 -->
<ul class="user-info">
<li><a href="#">登入</a></li>
<li class="line">|</li>
<li><a href="#">注册</a></li>
<li class="line">|</li>
<li><a href="#">消息通知</a></li>
<li class="line">|</li>
</ul>
</div>
</div>
<!-- 创建一个头部的外容器 -->
<div class="header-wrapper">
<div class="header w">
<!-- 创建一个logo -->
<h1 class="logo">
<a href="#">
</a>
</h1>
</div>
</div>
</body>
191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
