初识html+css 3
1. 背景图的属性使用
<style>
body{
/* 如何添加一个背景图 background-image: url(" ") */
background-image: url("https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=137628589,3436980029&fm=26&gp=0.jpg");
/* 背景图的排列方式 不重复*/
background-repeat: no-repeat;
/* 背景图的排列方式 重复 repeat 是默认值*/
background-repeat: repeat;
}
div{
/* 想要背景图显示 一定要给宽高 */
width: 500px;
height: 300px;
background-color: #999;
background-image: url("https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=137628589,3436980029&fm=26&gp=0.jpg");
background-repeat: no-repeat;
/* background-position: x y; 分别设置的是x轴的值 和y轴的值*/
/* 分别向右 和向下偏移 */
/* background-position: 100px 100px; */
/* 分别向左 和向上偏移 */
/* background-position: -100px -100px; */
/* 只偏移y轴的值 */
/* background-position: 0 -100px; */
/* 只偏移X轴的值 */
/* background-position: 100px 0; */
background-position: 0 0;
/* background-size :分别设置的是宽 高 */
/* background-size: 50px 100px; */
/* 单独设置宽为100px 高度为自动 */
/* background-size: 100px auto; */
/* 单独设置高为100px 宽度为自动 */
/* background-size: auto 100px; */
/* 单独设置高等与盒子的高 宽度为盒子的宽度 */
/* background-size: 100% 100%; */
/* background-size: 100% auto; */
/* background-size: auto 100%; */
/* 以最短的边进行尺寸的改变 */
/* background-size: contain; */
/* 以最长的边进行尺寸的改变 */
/* background-size: cover; */
}
/*可以缩写成 颜色 地址 repeat 状态 图片定位/图片大小*/
/* background: red url("./image/bang.gif") no-repeat fixed 100px 100px/50px 50px;*/
</style>
里面注释的代码可以进行测试尝试。
2. 标签转换
有时候想插入一个块级标签但由于块级标签是独占一行的，或者行内需要调高度大小，或者让行内块标签独占一行，所以这时候需要转换一下，用display来转换。
<style>
/* display:block----行内或行内块 */
p{
/* width: 200px; */
/* height: 100px; */
/* display: inline; */
/* display: inline-block; */
}
/* display:inline----块级或行内块 */
span{
/* display: block; */
/* display: inline-block;
width: 200px;
height: 200px; */
}
/* display:inline-bolck ----块 */
img{
display: block;
}
</style>
3. 表格
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
/* 使表格线重合成一条线 已废弃*/
border-collapse: collapse;
width: 300px;
/* height: 200px; */
}
thead tr{
background-color: #eee;
height: 50px;
}
tbody tr{
height: 50px;
}
td{
text-align: center;
}
tbody tr:hover{
background-color: #eee;
}
</style>
</head>
<body>
<!-- 表格 -->
<!-- 合并单元格 colspan rowspan -->
<table border="1">
<thead>
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>zs</td>
<td>男</td>
</tr>
<tr>
<td>1</td>
<td>zs</td>
<td>男</td>
</tr>
<tr>
<td>1</td>
<td>zs</td>
<td>男</td>
</tr>
<tr>
<td>1</td>
<td>zs</td>
<td>男</td>
</tr>
<tr>
<td>1</td>
<td>zs</td>
<td>男</td>
</tr>
<tr>
<td>1</td>
<td>zs</td>
<td>男</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td>ls</td>
<td>男</td>
</tr>
<tr>
<td colspan="2">ww</td>
</tr>
</tbody>
<!-- <tfoot>
</tfoot> -->
<!-- -->
</table>
</body>
里面主要介绍表格的绘制，table表格标签，thead为表格的头部标签，tbody为表格的内容标签，tfoot表格的尾部标签，tr为行标签，td为单元格标签，th为表格头部标签，caption为表标题(已经废弃）。
如果合并单元格 跨行，意思是所在的单元格跟接下同列的第n-1个合并。
跨列，意思是所在的单元格跟接下同行的第n-1个合并。
4. 列表
列表一般分为三个有序列表，无序列表，自定义列表。有type 属性，可以改变前面的点的样式，不赞成使用。 li (一般情况下用背景图代替ul 前面的样式) ul 和 li 可以互相嵌套 ol li一样可以嵌套
- 有序列表
<ul id="outer">
<li>
苹果
<ul class="inner">
<li>红富士</li>
<li>阿克苏</li>
</ul>
</li>
<li>香蕉</li>
<li>西瓜</li>
</ul>
- 无序列表
<ol>
<li>神仙水</li>
<li>眼影</li>
<li>高光</li>
<li>散粉</li>
</ol>
- 自定义列表
<dl>
<dt>斗地主</dt>
<dd>给阿姨来一杯卡布奇诺</dd>
<dt>消消乐</dt>
<dd>perfect!</dd>
<dt>HTML</dt>
<dd>超文本标记语言!
<ul>
<li>div标签</li>
<li>span标签</li>
<li>img标签</li>
</ul>
</dd>
</dl>
li 或者dd同样有伪类::before ::after
ul li:not(:first-of-type)::before {
content: "|";
margin: 0px 5px;
}
除第一个li不要加其他li内容前加一个 ‘|’
5. 清除系统默认
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0" >
<style>
*{
margin:0px; /*清除外边距样式 下篇介绍*/
padding:0px; /*清除内边距样式 下篇介绍*/
list-style:none; /*清除li样式*/
text-decoration: none;
}
</style>
</head>
6. 表单
<body>
<!-- 表单 -->
<!-- action 表单提交到达的位置 提交表单的方法 get post -->
<form action="./这是接收到达的页面.html" method="GET" name="firtform">
<p>
<!-- minlenght 和 maxlenght 只适用于 type=text 和password -->
<!-- 文本输入框 type=“text” minlenght 限制输入的长度最小值 maxlenght 限制输入的长度最大值 readonly 设置文本框只读-->
用户名：<input type="text" minlength="6" maxlength="12" value="zs" readonly placeholder="请输入用户名">
</p>
<p>
<!-- 密码输入框 type="password" -->
密 码：<input type="password" minlength="6" maxlength="12" placeholder="请输入密码">
</p>
<!-- 提交按钮 type="submit" value可以改submit 按钮的文字 可以提交表单 disabled 设置按钮禁用-->
<input type="submit" value="submit" disabled>
<!-- 提交按钮 type="button" value可以改button 按钮的文字 不可以提交表单-->
<input type="button" value="点我">
<!-- 重置按钮 type="reset" 可以清空表单的文字-->
<input type="reset">
<p>
<!-- 一组按钮必须给同一个name -->
<!-- type=radio 是单选框 checked 默认按钮被选择状态 -->
<label for="nan">男：</label><input type="radio" name="gender" id="nan" checked>
女：<input type="radio" name="gender">
</p>
<p>
<!-- type=checkbox 是复选框 -->
<label for="lizi">梨子：</label>
<input type="checkbox" name="fruit" id="lizi" checked>
<br>
<label for="xiangjiao">香蕉：</label><input id="xiangjiao" type="checkbox" name="fruit">
<br>
苹果：<input type="checkbox" name="fruit">
</p>
<!-- type=file 上传文件的表单元素 -->
<p>
<input type="file">
</p>
<!-- 隐藏的表单，---有的时候提交表单的时候需要带一些不被用户识别到的参数 ，所有有一个type=hidden -->
<input type="hidden">
<!-- 可以提交表单的图片按钮 src="图片的地址" -->
<input type="image" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1694681277,1453280371&fm=26&gp=0.jpg">
<!-- 默认选择得选项 selected value 是每一个选项得值 -->
<select name="firstsel" id="first-sel" size="1">
<option value="xiangjiao">香蕉111</option>
<option value="lizi" selected>梨子111</option>
<option value="pingguo">苹果111</option>
</select>
<input type="submit">
<!-- <input type="text" placeholder="请输入用户名"> -->
<!-- cols 和 rows 是以 字符为单位 -->
<textarea name="myText" id="my-text" cols="100" rows="20" >
<!-- 可以加style="resize:none;" 去掉textarea 文本得可以改变大小得功能 -->
</textarea>
</form>
</body>
7. 盒子模型的组成
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
/* padding: 20px; */
/* border: 10px solid green; */
/* content-box 代表盒子默认尺寸 */
/* box-sizing: content-box; */
/* border-box：设定以后代表盒子的所有尺寸包含在我设置的宽高里 */
/* box-sizing: border-box; */
padding-top:50px;
box-sizing: border-box;
}
</style>
<!-- 盒子模型的尺寸组成 （默认尺寸）
宽 ：padding-left + border-left + 盒子本身的宽度 + padding-right + border-right
高 ：padding-top + border-top + 盒子本身的高度 + padding-bottom + border-bottom
-->
盒子组成还有外边距，外边距不随尺寸变化而变化。如果不想被内边距以及内容撑变形，可以设置box-sizing: border-box；， 默认是content-box。
8. 盒子border的属性运用
<style>
.box{
width: 200px;
height: 200px;
background-color: skyblue;
/* 长宽一致的情况下，设置盒子的border-radius 为长宽的一半，就可以设置 盒子为圆 */
border-radius: 100px;
/* 同时设置四个边的值为10px 的宽度 */
/* border-width: 10px; */
/* border-top-width: 10px;
border-right-width: 20px;
border-bottom-width: 30px;
border-left-width: 40px; */
/* 简写设置四个值是按照 ，上右下左 分别设置的 */
/* border-width:10px 20px 30px 40px; */
/* 简写设置三个值是按照 ，上 左右 下 分别设置的 */
/* border-width:10px 20px 30px; */
/* 简写设置两个值是按照 ，上下 左右 分别设置的 */
/* border-width:10px 30px; */
/* 如果不设置颜色 默认颜色是黑色 */
/* border-color: tomato; */
/* 可以单独设置每一条边得颜色 */
/* border-top-color: red;
border-right-color: yellow;
border-bottom-color: blue;
border-left-color: green; */
/* 同时设置四条边的颜色 */
/* border-color: red yellow blue green; */
/* border-style: solid; */
/* dotted 点状线 */
/* border-top-style: dotted; */
/* dashed 虚线 */
/* border-right-style: dashed; */
/* double 双线 */
/* border-bottom-style: double; */
/* 常用值 solid 实线 */
/* border-left-style: solid; */
/* 还有一些其他值，效果越炫酷，兼容性越差，不推荐使用太炫酷的属性值 */
/* border-style: dotted dashed double solid; */
/* border-width: 5px;
border-color:red ;
border-style: solid; */
/* 同时设置四个边的颜色 样式 和宽度 常用*/
/* border: 5px red solid; */
}
</style>
上端的代码可以把注释解开试试效果
9. 外边距 margin
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: skyblue;
/* display: inline-block; */
}
.box1{
/* margin-right: 40px; */
/* 给盒子设置上和左 ，是使自身进行变动 */
/* margin-top: 20px;
margin-bottom: 20px;
margin-left: 50px; */
/* 同样也是可以简写 */
/* margin: 10px 20px 30px 40px; */
/* margin-left: auto;
margin-right: auto; */
/* margin: 0 auto; 可以使盒子 水平居中 */
margin: 0 auto;
}
.box2{
/* margin-left: 20px; */
}
.box3{
width: 500px;
margin: 0 auto;
background-color: springgreen;
}
</style>
</head>
<body>
<div class="box3"> 我 是 box 3</div>
<div class="box box1">
</div>
<!-- <div class="box box2">
</div> -->
</body>
134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
