网页的基本结构
- 首先!DOCTYPE html声明这是一个网页 位于第一行 前边什么都不能加 空格也不行
- 再写
<html></html>网页的根元素 - 在其中加
<head></head>标签(head标签里边放网页的说明 不显示出来 用户看不到)<body></body>标签放网页的内容
示例
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
标签
单标签
- 又称自闭和标签
- 样式<标签/>
- 举例:
<hr/><br/><img/>等
双标签
- 成套出现
- 样式<标签></标签>
- 举例:
<p></p><div></div><span></span>等 - 格式化标签
<b>加粗
<strong>语气加重
<big>大号字体
<small>小号字体
<em>强调突出
<i>斜体
<sub>2下角标
<sup>2上角标
列表
- 无序列表
示例
<ul>
<li>刘备</li>
<li>关羽</li>
<li>张飞</li>
</ul>
- 有序列表
示例
<ol>
<li>起床</li>
<li>洗漱</li>
<li>吃饭</li>
<li>上学</li>
</ol>
- 自定义列表
示例
<dl>
<dt>中国</dt>
<dd>河南</dd>
<dd>河北</dd>
<dd>山东</dd>
<dt>美国</dt>
<dd>纽约</dd>
<dd>华盛顿</dd>
</dl>
- 列表嵌套
示例
<ul>
<li>刘邦
<ul>
<li>智力100</li>
<li>体力20</li>
<li>武力10</li>
</ul>
</li>
<li>项羽
<ul>
<li>智力90</li>
<li>体力100</li>
<li>武力100</li>
</ul>
</li>
</ul>
表格
<table></table>用来定义表格<tr>代表表格的行
<th><td>表示表格的单元格
<th>一般用于表头 字体加粗居中
<td>用于表体的单元格 字体靠左- 普通表格包括
<tr><th>或<td> - 标准表格包括
<thead><tbody><tfoot> - 表格的属性
- colspan表示单元格跨列
- rowspan表示单元格跨行
- border表示边框
- cellspacing表示单元格间距
示例
<body>
<table border="1" align="center" height="200px" cellspacing="0" style="text-align: center;">
<tr>
<td width="70px">姓名</td>
<td width="150px"> </td>
<td>性别</td>
<td width="150px"> </td>
<td>出生年月</td>
<td width="100px"> </td>
<td rowspan="4" width="150px"> </td>
</tr>
<tr>
<td>民族</td>
<td> </td>
<td>政治面貌</td>
<td> </td>
<td>身高</td>
<td> </td>
<!-- <td> </td> -->
</tr>
<tr>
<td>学制</td>
<td> </td>
<td>学历</td>
<td> </td>
<td>户籍</td>
<td> </td>
<!-- <td> </td> -->
</tr>
<tr>
<td>专业</td>
<td> </td>
<td colspan="2">毕业学校</td>
<!-- <td>毕业学校</td> -->
<td colspan="2"> </td>
<!-- <td> </td> -->
<!-- <td> </td> -->
</tr>
</table>
图片
- 标签格式
<img/>属于单标签 - 属性src代表图像的路径(url)
- 属性alt代表图片加载不出来时的替代文本
- 属性title代表图片加载出来时鼠标移动到图片时的提示信息
- 注意:图片的路径(url)分为两种
- 绝对路径:从目标盘符开始的路径例如C盘/…或者网站如http://www.baidu.com这种
- 相对路径:从当前位置出发找到图片的方式
./代表本级…/代表上一级 上上一级
示例
绝对路径
<img src="D:\前端练习\01\img/02.jpg" alt="图片好像未加载出来">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=362890820,1485655028&fm=26&gp=0.jpg" alt="图片好像未加载出来">
相对路径
<img src="../img/01.jpg" alt="图片好像未加载出来">
- 图片会出现的问题
图片默认会以基线对齐 所以会使图片与其他内容之间有空隙
解决方式:使图片不默认基线对齐
推荐设置居中
vertical-align: middle;
a标签
<a>标签的重要属性:
herf(规定链接指向的页面的 URL)url是我们要链接到的网页或者文件
<a>标签如果没有href属性,则鼠标放上去没有悬停小手的样式
target : 规定在何处打开链接文档
_blank : 在新窗口
_self：默认，在相同的框架中打开被链接文档
_parent：在父框架集中打开被链接文档
_top：在整个窗口中打开被链接文档- 各种链接类型:
1、将文字作为链接对象：
<a href="http://www.baidu.com" title="进入百度" target="_blank">百度</a>
<a href="mi.html">小米手机</a>
2、将图像作为链接对象：
<a href="mi.html"><img src="images/mi.jpg" alt="红米手机" /></a>
3、空链接：
<a href="#">空链接</a><a href="#">空链接</a>
<a href=“javascript:;">空链接</a>
4、锚点链接：可以链接到同一个页面的指定位置
实现步骤：
在要链接到的位置输入：
<p id="mi4"></p>
在要建立链接的对象上添加a标签
<a href="#mi4">小米手机4 </a>
form标签(表单)
<!-- action提交的地址
method提交的方式:GET(通过url提交,url可见,不安全,并且传值量少)
POST 不是url提交 安全 传值量多
enctype 当有图片 文件上传的时候要加上这个属性
-->
<form action="0104abiaoqian.html" method="GET" enctype="multipart/form-data">
<!-- input 的type值对应什么类型 input就是什么类型 -->
<!-- text文本类型框 -->
<!-- placeholder属性表示帮助用户填写输入字段的提示 -->
<!-- name规定 input 元素的名称
name 属性用于在提交表单时搜集字段的值 只能有一个值 -->
账 号:<input type="text" placeholder="用户名/手机号/邮箱" name="username" autofocus><br>
<!-- password密码框 -->
<!-- required属性代表此项必须输入否则不能提交表单 -->
密 码:<input type="password" placeholder="请输入您的密码" name="password" required><br>
<!-- radio单选框 -->
性 别: <input type="radio" name="sex">男 <input type="radio" name="sex">女<br>
<!-- checkbox多选框(复选框) -->
兴趣爱好:<input type="checkbox">篮球<br>
<input type="checkbox">足球<br>
<input type="checkbox">羽毛球<br>
<!-- file上传文件 -->
<input type="file"><br>
<!-- submit提交按钮 提交给form的action给的地址 -->
<input type="submit" value="提交">
<!-- formaction代表把数据提交到此处填写的地址 不跟表单提交到一处 -->
<input type="submit" value="登录" formaction="">
<!-- reset重置 把用户填写的数据内容重置-->
<input type="reset" value="重置">
<!-- button提交按钮 通常配合js一起使用 -->
<input type="button" value="提交">
<!-- size 代表可以同时显示出几项 multiple 代表可以多选-->
请选择地址:<select name="" id="" size="3" multiple>
<!-- selected表示在select下拉列表中默认显示这项 -->
<option value="0" selected>--请选择--</option>
<option value="1" >郑州</option>
<option value="2"> 洛阳</option>
<option value="3">驻马店</option>
<option value="4">平顶山</option>
</select>
<!-- label 标签为 input元素定义标注 标记
label元素内点击文本，就会触发此控件 就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
for 属性应当与相关元素的id属性相同 类似之前的锚点-->
<label for="username">用户名:</label>
<input type="text" id="username">
<!-- checked表示在单选框或多选框中默认选这项 -->
<input type="radio" name="sex" checked>男
</form>
视频音频
- 音频audio必须添加controls控件属性才能显示
标签内的内容为音频加载不出来时的提示
audio元素允许多个source元素
source元素可以链接不同的视频文件
浏览器将使用第一个可识别的格式
<audio controls>
<source src="../audiovideo/horse.ogg">
<source src="../audiovideo/horse.mp3">
<source src="../audiovideo/horse.wav">
标签内的内容为音频加载不出来时的提示
</audio>
- 视频video同上
css层叠选择器(为标签添加各种样式)
- 标签选择器
格式:标签{属性1:属性值;属性2:属性值;} - 通配符选择器 用于所有标签
格式: *{属性1:属性值;属性2:属性值;} - 类选择器
格式: .类名(class值){属性1:属性值;属性2:属性值;}
注意:一个标签可以有多个类名 多个标签也可以用一个类名 - id选择器
格式: #id值{属性1:属性值;属性2:属性值;}
注意:每个标签的id值必须唯一 不能相同 - 相邻选择器
格式: 标签1+标签2
注意:相邻选择器表现的是标签1后紧跟着的第一个标签2 - 属性选择器
格式: 标签[属性名]{} 或者 标签[属性名~=“属性值”]这种表示一个属性名有多个属性值时用 - 伪类选择器
格式:
标签:link a:link选择所有未被访问的链接
标签:visited a:visited 选择所有已被访问的链接
标签:hover a:hover 选择鼠标指针位于其上的链接
标签:active a:active 选择活动链接
css引入方式
- 从CSS 样式代码插入的形式来看基本可以分为以下3种：
内联式（行内样式）
内嵌式（内部样式）
外联式（外部样式）
css三大特性
-
层叠性
所谓层叠性，就是后定义的样式，会层叠（可以理解为覆盖）掉前面定义的样式。我们说的层叠性，是在样式产生冲突的时候才层叠，不冲突就不层叠。 -
继承性
所谓继承性，就是如果子元素没有定义样式，那么他默认会以父元素的样式来继承。
不是所有的样式都会继承，比如高度就从来不会继承，通常能继承的是一些文字相关的样式。
比如font-系列，text-系列，color 文字颜色，line-height行高等 -
优先级（权重高的生效）
1 行内样式的优先级最高,内部和外部样式遵循就近原则 谁离标签近谁优先
2 选择器的权重
权重规则:权值相加 大的优先
继承过来的选择器 权值为0
标签选择器 权值为1
类、伪类、属性选择器 权值为10
id选择器 权值为100
行内样式 权值为1000
font字体属性
- 字体大小
font-size: 30px; - 字体样式
font-style: italic; - 字体粗细
font-weight: bold; - 行高
line-height: 50px; - 字体系列
font-family: “仿宋”; - font属性为简写属性
简写顺序:font-style： font-variant：指定文本是否为小型的大写字母 font-weight font-size/line-height font-family(其中font-size 和font-family 不能省略不写)
示例
font: italic bold 50px/55px "楷体";
font: bold italic 50px/55px "楷体";
font: 50px/55px "楷体";
font: 50px"楷体";
text文本属性
- 定义块状元素内容的水平对齐方式
text-align: center; - 定义元素的文本装饰
text-decoration: underline; - 定义块内文本首行缩进
text-indent: 30px; - 定义字符间距
letter-spacing: 20px; - 定义单词间距
word-spacing: 20px; - 定义图片与文字的对齐方式，默认是基线对齐的
vertical-align: middle;
示例
<style type="text/css">
p { text-align: center;
text-decoration: underline;
text-indent: 30px;
letter-spacing: 20px;
word-spacing: 20px;
outline: 1px solid red;
}
div {
outline: 1px solid blue;
}
div>img {
vertical-align: middle;
}
</style>
<p>what is your name</p>
<div>这是一个在段落<img src="../imgs/eg_cute.gif">中的图片</div>
css中的标签类型
- 块状元素
<div>、<p>、<h1>、<ul>和<li>等都是块级元素
特点:
1 默认独占一行
2宽高可以设置 宽度不设置的情况下默认父容器宽度的100% - 行内元素
<span>、<a>、<label>、<strong>和<em>就是典型的行内元素（inline）元素
特点:
1一行多个
2宽高不能设置 默认为内容的宽度 - 行内块元素
同时具备行内元素、块状元素的特点 代表标签：img input
特点:
1、和其他元素都在一行上
2、元素的高度、宽度可设置 - 标签类型的转换
display:block;将行内、行内块元素转为块
display:inline;将块元素转为行内（一般不将块元素转为行内元素）
display:inline-block; 将块和行内元素转为行内块
盒子模型
- 标签就可称为一个盒子模型
包括:
外边距 margin
内边距 padding
边框 border
内容
margin属性
- 代表外边距
margin:10px; 四边
margin:10px 20px; 第一个值上下 第二个值代表左右
margin:10px 20px 30px; 第一个值上 第二个值左右 第三个下
margin:1px 2px 3px 4px;上右下左 - 设置margin遇到的问题:
在子框中设置margin-top时,并没有与父框顶部产生距离还是与父框紧贴,处理方式:
1.给父框加个边框
2.给父框加个padding值 但会使盒子变大
3.给父框设置overflow:hidden属性
4.设置伪类:before(选择器在被选元素的内容前面插入内容)
padding属性
- 代表内间距(边框与内容之间的距离)
写法同上
注意事项:
（1）如果盒子有宽度和高度，再加padding值，则盒子一定会变大。
（2）如果盒子没有设置宽度，且默认宽度等于是父亲的宽度，则这个盒子，加padding并不影响盒子的宽度,只影响高度。
（3）一个盒子真实占有的宽度：等于width+左padding+右padding+左border+右border
（4）一个盒子真实占有的高度：等于height+上padding+下padding+上border+下border
border属性
- 代表盒子的边框
写法 border:边框宽度 样式 颜色;
某一边的写法border-left:边框宽度 样式 颜色;
border-right:边框宽度 样式 颜色;
border-top:边框宽度 样式 颜色;
border-bottom:边框宽度 样式 颜色;
精灵图片
- 精灵图片是指多个小图片做成一个图片供多个标签使用为背景图片的图片
- 精灵图片可以提高网页加载速度 只需加载一张图片足以
- 需要使用background-position定位 默认以标签的top left为x y轴
浮动float
- 浮动元素 脱离了文档流 (半脱离文字仍然在文档流中)
- 浮动元素会去找离它最近的有浮动的元素的边贴
- 假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行
- 右浮动会颠倒盒子顺序
- 行内显示模式的标签加了浮动后，可以直接设置宽高，无需转换
- 块显示模式的元素，如果没有设置宽度，添加了浮动后，会收缩到内容的大小
- 浮动元素会脱离文档流，会压住下一个块元素，但不会压住其内容
清除浮动
- 由于元素浮动脱离文档流,会影响没有浮动的元素的位置 未浮动的元素会占据在浮动元素浮动前的位置,这种情况也叫浮动塌陷 为了防止布局乱掉 所以需要清除浮动
- 方式:
1.给父框设置一个高度
2.clear清除浮动left清除左浮动 right清除右浮动 both清除左右浮动
3.在父框中添加overflow:hidden属性(塌陷处理)
4.设置伪类:after清除浮动
示例
<!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 type="text/css">
.box {
border: 1px solid;
width: 600px;
/* margin: 0 auto; */
}
.box1 {
width: 200px;
height: 200px;
background-color: red;
}
.box2 {
width: 300px;
height: 300px;
background-color: blue;
}
.box3 {
width: 550px;
height: 100px;
background-color: green;
}
.box1,
.box2 {
float: left;
}
/* 清除浮动的方式1*/
.box {
height: 300px;
}
/* 方式2 */
.clean {
width: 600px;
height: 50px;
background-color: yellow;
clear: both;
}
/* 方式3 */
.box {
overflow: hidden;
}
/* 方式4 */
.box:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="clean"></div>
</div>
<div class="box3"></div>
</body>
</html>
选择器
<!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 type="text/css">
/* 选择带有 class 属性的所有元素
[class] {
color: brown;
} */
/* 选择 class=box1 的所有元素(只能有一个class值的才行)
[class=box1] {
color: cyan;
} */
/* 选择 class 属性包含单词 "box1"的所有元素(class值可以多个只要包含box1这个属性值就行)
[class~=box1] {
color: cyan;
} */
/* 选择 class 属性值以 "box" 开头的所有元素(只能有一个class值的才行)
[class|=box] {
color: green;
} */
/* 选择前面有<p>元素的每个<div>元素
p~div {
color: gold;
} */
/* 选择其 class属性值以 "box" 开头的每个元素(class值可以多个 box也可以为单词中的一部分)
[class^=box] {
background-color: hotpink;
} */
/* 选择其 class属性值以 "x1" 结尾的每个元素(class值可以多个 box也可以为单词中的一部分)
[class$=x1] {
background-color: red;
} */
/* 选择属于其父元素的首个 <p> 元素的每个 <p> 元素
p:first-of-type {
font-size: 50px;
} */
/* 选择属于其父元素的最后以个 <p> 元素的每个 <p> 元素
p:last-of-type {
font-size: 50px;
} */
/* 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素(必须在父元素中只有一个才可以)
p:only-of-type {
color: orange;
} */
/* 选择属于其父元素的第4个子元素的每个 <div> 元素(div在父框中必须时第四个元素 否则不行)
div:nth-child(4) {
background-color: tomato;
} */
/* 选择属于其父元素第4个<div>元素的每个 <div> 元素 (在父框中所有的div中的第四个div)
div:nth-of-type(4) {
color: navy;
} */
/* :empty p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。 3
:target #news:target 选择当前活动的 #news 元素。
:enabled input:enabled 选择每个启用的 <input> 元素。
:disabled input:disabled 选择每个禁用的 <input> 元素
:checked input:checked 选择每个被选中的 <input> 元素。 3
:not(selector) :not(p) 选择非 <p> 元素的每个元素。
::selection ::selection 选择被用户选取的元素部分。 */
</style>
</head>
<body>
<div>
<p>1暗示的内裤了</p>
<div>2深刻的扣篮时时刻都没你快来撒</div>
<p>3更加快乐发过来看看了</p>
<div>4交罚款了什么看</div>
</div>
<div class="box1">5深刻的扣篮时时刻都没你快来撒</div>
<div class="box">6深刻的扣篮时时刻都没你快来撒</div>
<p class="box1">7深刻的扣篮时时刻都没你快来撒</p>
<div class="box1 box2">8发来的生命力方面是多么</div>
<div class="out box1">9深刻的那款是卡拉是看到你</div>
<div class="box3">10发来的生命力方面是多么</div>
<div class="box1 box3">11发来的生命力方面是多么</div>
<div class="box-outter">12时刻都开始打卡的那是的旅客</div>
</body>
</html>
自定义字体
<!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 type="text/css">
@font-face {
/* font-family定义字体名称 */
font-family: "自定义字体";
/* src 字体的路径 */
src: url()
}
p {
font: 16px/1.5 "自定义字体";
}
</style>
</head>
<body>
<p>你好吗</p>
</body>
</html>
字体图标
- 用字体显示成图标的样式 通过调整字体属性可以设置图标样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 第一步 引入css字体图标库 -->
<link rel="stylesheet" href="../../font-awesome-4.7.0/css/font-awesome.css">
<body>
<!-- 第二步 使用 以下为具体格式-->
<!-- 一般用i标签<i class="fa 图标的具体名字" aria-hidden="true"></i> -->
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-camera-retro" aria-hidden="true"></i>
<p class="fa fa-camera-retro" aria-hidden="true"></p>
</body>
</html>
css3过渡
- transition 属性设置元素当过渡效果，四个简写属性为：
transition-property规定设置过渡效果的 CSS 属性的名称
transition-duration规定完成过渡效果需要多少秒或毫秒
注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果
transition-delay 定义过渡效果何时开始
transition-timing-function规定速度效果的速度曲线 取值:- linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
- ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
- ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
- ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
- ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过渡</title>
<style type="text/css">
.box { width: 100px;
height: 100px;
border: 1px solid;
background-color: crimson;
transition: all 3s;
transition-property: width height;
transition-duration: 5s;
transition-timing-function: linear;
transition-delay: 2s;}
.box:hover {width: 500px;height: 500px;}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
css3渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变</title>
<style type="text/css">
.box {
width: 400px;
height: 200px;
border: 1px solid red;
margin-bottom: 20px;
/* 线性渐变 语法 background-image: linear-gradient(direction, color-stop1, color-stop2, ...); */
/* direction代表方向 可以是上下左右也可以是角度(角度允许负值)可以不写 默认为to bottom 从上到下 */
/* background-image: linear-gradient(red, blue, yellow); */
/* background-image: linear-gradient(to right, red, blue, yellow); */
/* background-image: linear-gradient(45deg, red, blue, yellow); */
/* background-image: linear-gradient(-45deg, red, blue, yellow); */
/* 使用透明度渐变 */
/* background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.6), rgba(255, 0, 0, 1)); */
/* 重复的线性渐变 语法 background-image:repeating-linear-gradient() */
background-image: repeating-linear-gradient(to right, red, blue 10%, yellow 30%);
}
.box1 {
width: 400px;
height: 200px;
border: 1px solid red;
/* 径向渐变 语法 background-image: radial-gradient(shape size at position, start-color, ..., last-color); */
/* shape size at position指定渐变的中心、形状（圆形或椭圆形）、大小 */
/* background-image: radial-gradient(red, yellow, green); */
/* background-image: radial-gradient(circle, red, yellow, green); */
/* 颜色节点不均匀分布 */
/* background-image: radial-gradient( red 10%, yellow 15%, green 25%); */
/* 重复的径向渐变 语法 background-image:repeating-radial-gradient() */
background-image: repeating-radial-gradient(red 10%, yellow 20%, green 30%)
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
</html>
文字渐变
<!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 type="text/css">
.box {
display: inline-block;
font-size: 30px;
/* 第一步添加背景渐变色 */
background: linear-gradient(to right, red, blue);
/* 第二步将文字以外的区域剪裁掉 不绘制 */
-webkit-background-clip: text;
background-clip: text;
/* 第三步 使文字透明 让背景颜色透出来 */
color: transparent;}
</style>
</head
<body>
<div class="box">这是一段渐变文字</div>
</body>
</html>
css3盒子阴影
box-shadow 属性向框添加一个或多个阴影(多个阴影之间用逗号隔开)
语法 box-shadow: 水平偏移(必需) 垂直偏移(必需) 模糊程度 阴影尺寸 颜色 inset(加上代表内阴影 不加代表外阴影);
<!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 type="text/css">
.box {
width: 300px;
height: 300px;
background-color: turquoise;
box-shadow: 0px 0px 10px red, 5px -5px 10px blue, 10px -10px 10px yellow, 20px -20px 10px black;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
文字阴影
text-shadow 属性向文本添加一个或多个阴影(多个阴影之间用逗号隔开)
语法 text-shadow: 水平偏移 垂直偏移 模糊程度 颜色;
<!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 type="text/css">
.box {
text-shadow: 3px 3px 3px black;
}
</style>
</head>
<body>
<div class="box">这是一段有阴影的文字</div>
</body>
</html>
边框圆角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框圆角</title>
<style type="text/css">
.box {
margin: 0 auto;
width: 400px;
height: 200px;
border: 1px solid red;
/* 设置圆角(简写属性) */
border-radius: 20px;
/* 圆形 (框必需是正方形才可以)*/
border-radius: 50%;
/* 椭圆(框必须是长方形才行) */
border-radius: 50%;
/* 半圆 宽度必须是高度2倍*/
border-radius: 200px 200px 0 0;
/* 竖着的半圆 高度必须是宽度2倍*/
width: 100px;
border-radius: 0 100px 100px 0;
/* 三角形 盒子模型的宽高设置为0,设置边框
把其中三个边框的颜色设置透明 剩下的一个边框就是三角形 */
width: 0;
height: 0;
border: 50px solid green;
border: 50px solid transparent;
border-bottom-color: black;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
边框背景图象
<!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 type="text/css">
.box {
margin: 0 auto;
width: 200px;
height: 200px;
border: 20px solid red;
/* 定义边框背景图片的路径 */
border-image-source: url(./../imgs/border.png);
/* 设置切割背景图片为九宫格的形式
一个值代表上右下左四个方向的四条线切法 */
border-image-slice: 30;
/* 设置图片圆满的平铺完 */
border-image-repeat: round;
/* 图片平铺 距离不够铺不满一个整的也平铺 */
border-image-repeat: repeat;
/* 简写形式 */
border-image: url(./../imgs/border.png) 30 round;
/* 也可以添加多个边框背景图片 中间用逗号隔开 */
border-image: url(./../imgs/border.png) 30 round, url(./../imgs/xxx.png) 50 stretch;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
background-origin属性
- background-origin 属性规定 background-position 属性相对于什么位置来定位
background-origin: padding-box;景图像从内边距左上角开始填充(不设置时 浏览器默认)
background-origin: border-box;背景图像从边框左上角开始填充
background-origin: content-box;背景图像从内容左上角开始填充
<!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 type="text/css">
.box {
margin: 0 auto;
width: 200px;
height: 200px;
border: 5px dashed red;
padding: 10px;
background: url(./../imgs/anquanredian.png) no-repeat;
background-size: 150px;
background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;
background-position: top right;
}
</style>
</head>
<body>
<div class="box">
内容 可放大了卡萨富兰克林开发NDS发
</div>
</body>
</html>
background-clip属性
- background-clip 属性规定背景的绘制区域
background-clip: border-box;默认值背景绘制在边框方框内（剪切成边框方框）
background-clip: padding-box;背景绘制在衬距方框内（剪切成衬距方框）
background-clip: content-box;背景绘制在内容方框内（剪切成内容方框）
background-clip: text;背景绘制在文本内（剪切成文本背景）
<!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 type="text/css">
.box {
margin: 0 auto;
width: 200px;
height: 200px;
border: 5px dashed red;
padding: 10px;
background-color: mediumturquoise;
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<div class="box">
内容 可放大了卡萨富兰克林开发NDS发
</div>
</body>
</html>
box-sizing属性
- box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式
- 一般我们设置盒子宽高 默认的是内容区的宽高并没有加上内边距和边框,因此当盒子有边框border和padding时,盒子的实际宽高会增加,使用box-sizing: border-box;使盒子的宽高把边框和内边距都算进去,这时盒子的实际宽高不变
<!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 type="text/css">
.box {
width: 500px;
height: 200px;
margin: 0 auto;
border: 1px solid;
/* box-sizing: border-box; */
}
.box1 {
width: 250px;
height: 100px;
border: 1px solid red;
float: left;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box1"></div>
</div>
</body>
</html>
sizing 最主要的用法是规定容器元素的最终尺寸计算方式
- 一般我们设置盒子宽高 默认的是内容区的宽高并没有加上内边距和边框,因此当盒子有边框border和padding时,盒子的实际宽高会增加,使用box-sizing: border-box;使盒子的宽高把边框和内边距都算进去,这时盒子的实际宽高不变
<!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 type="text/css">
.box {
width: 500px;
height: 200px;
margin: 0 auto;
border: 1px solid;
/* box-sizing: border-box; */
}
.box1 {
width: 250px;
height: 100px;
border: 1px solid red;
float: left;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box1"></div>
</div>
</body>
</html>
扫一扫
290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
