更多样式
-
透明度
1.opacity
它设置的是整个元素的透明，它的取值是0~1
2.在颜色位置设置alpha通道（rgba） -
鼠标样式
使用cursor设置用某图片做鼠标样式，auto为图片加载失败时的处理
cursor：url("路径"),auto
- 盒子隐藏
1.display：none
不生成盒子
2.visibility：hidden
生成盒子，只是在视觉上移除盒子，仍占据空间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
ul li{
list-style: none;
float: left;
display: block;
margin: 0 2px;
background:yellow;
border: 1px solid #b4da0a;
width: 60px;
height: 30px;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
当第三个li设置display：none，第三个li看不到
当给第四个li元素设置visibility：hidden，结果如下：
- 背景图
img是HTML的概念（当图片属于网页内容时）
背景图是CSS的概念（用于美化网页）
涉及的css元素：
1.background-imag：url（“路径”）
背景图默认情况下会横纵方向重复
2.background-repeat
no-repeat/repeat-x/repeat-y
3.background-size
i.cover:表示撑满，且比例不变
ii.contain
4.background-position（横 纵）
center、left、bottom、top、right
5.backgroung-attachment：fixed（相对于视口）
通常用于控制背景图是否固定
6.速写：
background：url（“路径”）no-repeat 50% 50%/100% fixed #000（先位置后尺寸）
如下例子：
<!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>
body{
background:url("./Saved Pictures/beijingtu.jpg") no-repeat;
width: 100%;
height: 100%;
background-size:cover;
background-attachment:fixed;
}
</style>
</head>
<body>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, sed repellendus blanditiis aut distinctio minima. Doloribus minus natus soluta accusantium fugit consequatur sapiente, fugiat sequi, magni itaque vel at sit veniam suscipit blanditiis, consectetur odio. Rerum quod et atque tempore unde, sequi maxime vel facere porro cumque nihil fuga excepturi repellendus odit nam exercitationem veniam similique quam eum quisquam voluptate natus deserunt possimus recusandae. Beatae, delectus assumenda cumque quos a, laudantium soluta veniam deserunt quibusdam quas ex consequuntur, fugiat tempora atque! Facere ut esse necessitatibus sunt omnis a unde rem aliquam distinctio, aspernatur eius quisquam fugiat repellendus, illum dolor suscipit dignissimos rerum? Ullam labore iure fugit! Ex dolorem aut minus voluptatum ipsa possimus deleniti distinctio hic. Aut praesentium tempore quos? Provident eum excepturi veritatis voluptate similique dolor exercitationem placeat, nostrum expedita cumque voluptas dolore explicabo iure saepe quam ullam debitis. Optio eveniet at amet necessitatibus fuga nihil esse possimus, neque exercitationem aut assumenda vel delectus mollitia consequatur error! Omnis, quidem temporibus. Expedita officia laborum cum magnam sapiente repellat ex quaerat, impedit quam debitis vitae, totam iste nam quos dolor aspernatur suscipit! Ad vel, quasi quam incidunt facilis id quis. Id laboriosam eaque alias ducimus ipsam tenetur exercitationem nisi voluptates, minus suscipit eos beatae ad voluptate molestias! Veniam, non. Accusamus accusantium amet quidem eius quaerat nemo quasi facilis unde iusto voluptatibus, corporis quam consequuntur sunt aut qui assumenda eum totam, laboriosam, eos et quibusdam doloribus! Magni omnis sit nostrum quaerat, obcaecati voluptate at ab dolore dicta, numquam aspernatur magnam veniam! Commodi atque ullam dolor. Aperiam eius deserunt ullam accusantium animi quod. Quae voluptatem nihil maiores maxime fugiat quaerat, dolore, commodi accusantium vitae ab repudiandae ipsa velit ratione non consequatur? Fuga natus consequatur ratione temporibus fugiat hic odit qui eum perferendis corrupti, deserunt dolorum saepe at autem alias atque nemo consequuntur porro voluptatum assumenda repellat? Nobis in, maiores nam ea ipsam quos atque? Labore aliquam, recusandae placeat est perspiciatis fugiat alias animi, delectus ratione nemo aspernatur aliquid? Voluptatibus in, laudantium magnam laborum incidunt repudiandae recusandae delectus sequi. Tempora aut commodi possimus reiciendis, ratione recusandae ipsum quia fugiat odit voluptas exercitationem libero officiis voluptatibus placeat earum. Mollitia animi dignissimos, eius dolorum laudantium iusto repellat necessitatibus atque ipsum quo, laboriosam rem. Velit nihil accusamus, doloremque aliquid reiciendis ducimus rem. Consequuntur, aperiam expedita. Atque ducimus quam corporis maiores dolore nobis nostrum possimus consectetur amet magnam ipsum, reprehenderit architecto alias sunt ut facere dicta! Corrupti dolores dolore iusto mollitia nesciunt sint dignissimos inventore temporibus odio magni, harum unde voluptatem libero earum nam consectetur non ipsa! Adipisci facere molestiae quas animi quibusdam iste. Veniam eos minus quia assumenda dolores ab debitis nemo placeat unde praesentium, eaque quam at accusantium beatae quisquam numquam, quidem deleniti? Exercitationem, incidunt. Facere veniam, officia cupiditate est consequatur aliquam delectus fuga. Nisi nemo assumenda accusamus omnis repellat delectus nobis praesentium! Odio maxime recusandae libero perferendis ipsum voluptas est nihil ut voluptatum dicta placeat, temporibus sequi at quibusdam labore aliquid doloribus enim expedita, dolores atque illum fugit molestiae tenetur! Ipsa et laudantium nisi cumque necessitatibus, natus animi molestias unde eius voluptas velit deleniti doloribus officiis explicabo ab dolore esse recusandae vitae fugiat rerum. Veniam placeat saepe cupiditate tempora eaque tempore itaque, eos animi accusamus iure, nulla rerum! Fugiat, quos voluptatum dignissimos cumque et quae commodi amet praesentium? Repellendus esse, quia eos magni reiciendis ipsum fugiat omnis eius, fuga ipsa alias totam! Reiciendis dignissimos delectus consequatur nostrum praesentium perferendis, architecto minus officia ex reprehenderit beatae sapiente laborum repellendus sed, aspernatur autem expedita, voluptates tempore. Hic sequi ullam quae modi consequatur natus dolore facere veniam earum harum, nisi facilis eaque ad eos. Non tempore dolores voluptate, nihil laudantium, amet numquam quam reprehenderit sint dolorem officiis veniam, nulla assumenda in odio? Omnis consequatur repudiandae maiores incidunt nihil dicta placeat cumque distinctio adipisci. Enim eius, quisquam impedit officiis nostrum assumenda modi officia accusamus consequatur, tempore expedita explicabo nemo aliquid asperiores voluptatibus culpa quidem aspernatur maxime in numquam quasi? Officiis distinctio assumenda rem natus, expedita optio accusantium, ducimus sunt excepturi, sint amet voluptatum nulla. Architecto voluptatum nemo consequuntur veniam cupiditate maxime! Culpa odit blanditiis quia sunt ratione reprehenderit, cupiditate rerum veniam, soluta mollitia similique voluptates eos est! Eius illo praesentium non est sint necessitatibus esse itaque quo voluptates dolorum provident eligendi deleniti pariatur ea explicabo minus, veritatis, eos vero blanditiis distinctio a! Ea consectetur, laudantium aut nam similique praesentium dolorum cupiditate sint eaque recusandae quod porro accusantium deleniti cum odio est voluptas aperiam? Animi necessitatibus quod consectetur quo, optio accusantium, ipsam blanditiis dolore vel soluta, tempore pariatur sed! Repellat incidunt, laudantium facere laboriosam beatae est necessitatibus nobis in sunt ducimus. Unde adipisci harum molestias numquam voluptatem, libero nemo non labore. Modi magni nulla obcaecati asperiores a at, sunt necessitatibus, illum perferendis iste provident explicabo ipsam amet placeat atque temporibus id qui! Quibusdam iure voluptatibus aut fugiat quo sequi, expedita commodi ipsa repellendus accusamus adipisci minima dolorem at corporis voluptatem! Quibusdam voluptate molestias ipsa! Qui esse tempora inventore amet! Neque perferendis quidem hic ratione magni iusto commodi quas? Consequuntur officia quo unde quisquam repellat fuga nisi atque molestiae ex autem nulla et sunt nihil sint maxime labore dicta iure dolor voluptates voluptatum obcaecati doloribus in, quis non. Minus, nulla hic saepe, alias asperiores quasi voluptatem tempore commodi itaque voluptas impedit. Odit, quasi eos optio quis a dolore iure aliquam iusto. Sunt nostrum, minima ab sapiente dolorem esse iste ipsum laboriosam hic dolor velit ipsam cupiditate incidunt animi architecto quas in quidem rerum rem porro officiis consectetur vel aspernatur eaque! Numquam provident eaque enim dolorem officia voluptatibus neque eum! Porro a quos quam dolorum, labore dolor nostrum numquam suscipit voluptatibus cum iure officia impedit harum deleniti excepturi pariatur molestiae nam sit culpa sequi illo iusto? Officiis temporibus, laborum voluptas possimus sequi ipsa doloribus corporis vitae impedit quaerat eum vero, commodi voluptatum. Molestiae, ipsam ipsa! Eos odio assumenda placeat nobis labore ducimus amet voluptatibus laborum quos fugiat dignissimos corrupti minus tempora reiciendis facilis tenetur, molestias dolorem velit, provident vero dolores neque? Rerum facere officiis pariatur explicabo sit vero accusamus sunt expedita modi!
</body>
</html>
- iframa元素
通常用于在一个网页中嵌入另一个网页
特点：
1.行盒
2.显示元素内容取决于元素的属性
3.具有航块盒的特点
<!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>
iframe{
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<iframe src="http://www.baidu.com" frameborder="0"></iframe>
</body>
</html>
- 在页面中使用flash元素
MIME(多用途互联网邮件类型）
<object data="路径" type="类型">
<param name="" value="">
</object>
还有一种
<embed src="" type="">
但以上两者存在兼容性问题
最好的写法如下：
<object data="" type="">
<param name="" value="">
<embed src="" type="">
</object>
扫一扫
943
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
