1. html骨架
<!-- 生成html框架 !+回车/Tab -->
<!DOCTYPE html>
<!-- html带<>的是标签，H5用标签摆放内容+css美化内容 -->
<!-- html表示整个网页 -->
<html lang="en">
<!-- head网页头部 放给浏览器看的代码 如css -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- title 网页标题，出现在网页标题栏 -->
<title>第一个H5页面</title>
</head>
<!-- body网页主体 放给用户看的内容，比如图片和文字、视频、音频 -->
<body>
111
</body>
</html>
2. 代码回顾
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>代码回顾</title>
<!-- CSS -->
<style>
/* css注释 */
/* 找标签用选择器
（1. 标签选择器 h1{} (同名标签设置相同样式)
2. 类选择器 .类名
3. ） */
/* 标签选择器 */
h1 {
font-weight: normal;
/* font-size要加单位px */
font-size: 50px;
color: lightcoral;
font-style: italic;
}
/* 类选择器 */
.mycolor {
color: blueviolet;
}
</style>
</head>
<body>
<h1>一级标题1</h1>
<!-- 一个标签可使用多个css类选择器，中间空格隔开 -->
<!-- 类名未定义不报错 -->
<h1 class="mycolor lei1">一级标题2</h1>
<h1>一级标题3</h1>
</body>
</html>
3. Flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex</title>
<style>
.father{
width: 800px;
height: 300px;
background-color: lightgoldenrodyellow;
/* 布局方式flex 内容一行排列 */
display: flex;
/* 主轴对齐方式 */
justify-content: space-between;
/* 交叉轴对齐方式 */
align-items: center;
}
.father div{
width: 100px;
/* height: 100px; */
background-color: lightgreen;
text-align: center;
}
.son1{
/* 单个交叉轴对齐方式 stretch拉伸在交叉轴方向上设有尺寸时不生效 */
align-self: stretch;
/* 占用主轴方向上父级剩余的尺寸 与鸿蒙中layoutWeight类似 */
flex: 1;
}
</style>
</head>
<body>
<!-- 一行显示多块内容时使用flex布局 -->
<div class="father">
<div class="son1">1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
4. css引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- link引入外部CSS文件，rel关系，stylesheet样式表，href路径 -->
<link rel="stylesheet" href="./css/mycss.css">
<!-- 实际开发做项目时用外部样式表，学习用内部样式 -->
</head>
<body>
<div class="father">111</div>
</body>
</html>
5. 版心居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>版心居中</title>
<style>
.box{
width: 1200px;
height: 100px;
background-color: lightcyan;
/* 版心居中 上下0，左右自动*/
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 版心居中 主要内容就叫版心 -->
<div class="box">版心居中</div>
</body>
</html>
6. input单行输入文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input {
border: none;
/* 焦点框 （输入文本时的框）*/
outline: none;
}
input::placeholder {
color: red;
}
</style>
</head>
<body>
<!-- 单行输入文本 -->
文本框：<input type="text" placeholder="搜一搜">
密码框：<input type="password" placeholder="请输入密码">
</body>
</html>
7. sprite
原图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sprite</title>
<style>
ul {
display: flex;
justify-content: space-evenly;
height: 58px;
}
/* ul 里面的 第二个li 里面的div */
ul li:nth-child(2) div {
background-position: 0 -58px;
}
ul li:nth-child(3) div {
background-position: 0 -116px;
}
ul li:nth-child(4) div {
background-position: 0 -174px;
}
ul li {
width: 190px;
height: 58px;
display: flex;
justify-content: space-between;
align-items: center;
/* CSS精灵 或CSS雪碧 （京东网页底部类似）
优点：降低服务器请求次数，减少服务器请求时间，（外部资源需上传到服务器） */
/* .ig2 {
// 背景图位置:水平 垂直
background-position: 0 -58px;
}
.ig3 {
background-position: 0 -116px;
}
.ig4 {
background-position: 0 -174px;
} */
}
ul li div {
width: 58px;
height: 58px;
background-image: url(./XTX_PC/images/sprite.png);
margin-right: 20px;
}
ul li span {
font-size: 28px;
}
</style>
</head>
<body>
<ul>
<li>
<div class="ig1"></div>
<span>价格亲民</span>
</li>
<li>
<div class="ig2"></div>
<span>物流快捷 </span>
</li>
<li>
<div class="ig3"></div>
<span>品质新鲜</span>
</li>
<li>
<div class="ig4"></div>
<span>售后无忧</span>
</li>
</ul>
</body>
</html>
8. 自定义列表dl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dl</title>
<style>
div {
width: 1200px;
display: flex;
justify-content: space-between;
}
dl {
width: 156px;
background-color: lightcyan;
line-height: 50px;
}
dl:nth-last-child(1) {
width: 300px;
}
dd {
margin-left: 0;
font-size: 14px;
color: gray;
line-height: 30px;
}
</style>
</head>
<body>
<div>
<!-- dl自定义列表 -->
<dl>
<!-- dt列表名 -->
<dt>购物指南</dt>
<!-- dd列表项 列表项默认有左外边距 -->
<dd>购物流程</dd>
<dd>支付方式</dd>
<dd>支付方式</dd>
</dl>
<dl>
<dt>购物指南</dt>
<dd>购物流程</dd>
<dd>支付方式</dd>
<dd>支付方式</dd>
</dl>
<dl>
<dt>购物指南</dt>
<dd>购物流程</dd>
<dd>支付方式</dd>
<dd>支付方式</dd>
</dl>
<dl>
<dt>购物指南</dt>
<dd>购物流程</dd>
<dd>支付方式</dd>
<dd>支付方式</dd>
</dl>
<dl>
<dt>购物指南</dt>
<dd>购物流程</dd>
<dd>支付方式</dd>
<dd>支付方式</dd>
</dl>
</div>
</body>
</html>
扫一扫
140
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
