本文详细介绍了前端开发中的关键技巧，包括盒子模型的水平居中方法，文本属性的设置与应用，字体案例展示，CSS reset的实践，深入探讨了高级选择器的使用及其优先级，并讲解了边界圆角、a标签的伪类、背景图片操作及精灵图技术。最后通过具体案例进行了综合应用展示。
盒子水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子水平居中</title>
<style>
boby {
margin: 0;
}
.sup {
width: 500px;
height: 100px;
background-color: orange;
/*屏幕水平居中*/
/*margin-left: calc((100% - 500px) / 2);*/
/*屏幕水平居右*/
/*margin-left: auto;*/
margin: 0 auto;
}
.sub {
width: 50px;
height: 50px;
background-color: red;
/*父级水平居中*/
/*margin-left: calc((500px - 50px) / 2);*/
/*父级水平居右*/
/*auto自适应父级可利用的剩余宽度*/
/*margin-left: auto;*/
/*能不能通过自适应完成水平居中*/
margin-left: auto;
margin-right: auto;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="sup"></div>
<div class="sub"></div>
</body>
</html>
文本属性操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本操作</title>
<style>
.p1 {
width: 500px;
height: 200px;
background-color: orange;
}
.p1 {
/*颜色 大小 字重 字族 行高 水平居中方式*/
color: red;
font-size: 50px;
/*字体加粗*/
/*100~900| normal | lighter | bold*/
font-weight: bold;
/*字族可以设置备用字体*/
font-family: "STSong", "微软雅黑";
/*将行高值以盒子高度一致*/
line-height: 200px;
/*left | center | right*/
/*text-align: center;*/
}
.p1 {
/*简写*/
/*text-align: center;*/
color: red;
font: normal 30px/200px "STSong", "微软雅黑";
}
.p1 {
font-size: 50px;
/*em就是一个字的大小*/
text-indent: 2em;
/*underline | line-through | overline*/
/*文本装饰*/
text-decoration: overline;
}
html {
/*rem: r => root 只和html字体大小关联*/
font-size: 50px;
}
body {
font-size: 20px;
}
.sup {
/*最小字体只能到达12px*/
font-size: 12px;
}
.sub {
/*inherit:继承*/
font-size: inherit;
}
</style>
</head>
<body>
<p class="p1">
一二三四五
</p>
<div class="sup">
<div class="sub">呵呵</div>
</div>
</body>
</html>
字体案例
text-align: center; # 水平居中方式
color: red; # 字体颜色
font: 900 30px/120px "STSong"; # 字重 大小/行高 字族
了解
em(自身->父->html) | rem(html)
text-indent: 2em;
字划线
underline | line-through | overline
text-decoration: overline;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体案例</title>
<style>
/* 清除系统默认样式 => reset操作 */
/*h2, p, h3 {*/
/*margin: 0;*/
/*}
.box {
width: 800px;
border-bottom: 1px solid #999;
margin: 0 auto;
/*文本对齐*/
text-align: center;
padding: 20px 0;
}
</style>
</head>
<body>
<div class="box">
<h2>领先的 Web 技术教程 - 全部免费</h2>
<p>在 w3school，你可以找到你所需要的所有的网站建设教程。</p>
<p>从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。</p>
<h3>从左侧的菜单选择你需要的教程！</h3>
</div>
</body>
</html>
reset操作
what|why: 大多系统预定义标签，有默认样式，不满足实际开发需求，反倒影响布局，通常在开发前将需要用到的预定义标签的默认样式清除，该操作就称之为reset操作
body, h1, h6, p {
margin: 0;
}
ul {
margin: 0px;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>reset</title>
<style>
body, h1, h6, p {
margin: 0;
}
ul {
margin: 0px;
padding: 0;
list-style: none;
}
a {
/*文本装饰*/
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<a href="https://www.baidu.com">前往百度</a>
</body>
</html>
高级选择器
1.群组
div, p, a {
}
2.后代
body div {
}
3.兄弟
.div1 ~ .div2 {
}
4.位置
li:nth-child(2n) {
}
5.多类
.d.dd {
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高级选择器</title>
<style>
/*1.群组选择器:
同时控制多个
选择器之间用逗号隔开
每一个选择器位均可以替换为任意基础选择器或高级选择器
*/
.div1, .p1 {
color: red;
}
/*2.后代子代选择器
通过关系层次控制一个目标选择器
>代表父子关系 | 空格代表后代关系
*/
.sup1 > .sub {
color: orange;
}
/*sub是body的后代，但不是子代*/
body .sub {
color: pink;
}
/*3.兄弟选择器，通过关系层次控制一个目标选择器*/
/* + 相邻 */
.b2 + .b3 {
color: blueviolet;
}
/* ~ 兄弟 */
.b1 ~ .b3 {
color: brown;
}
/*4.伪类选择器 - 位置*/
ul:nth-child(10) > li:nth-child(2n) {
color: green;
}
</style>
</head>
<body>
<div class="div1">123</div>
<p class="p1">456</p>
<div>3333</div>
<div class="sup1">
<div class="sub">sub</div>
</div>
<div class="sup2">
<div class="sub">sub</div>
</div>
<div class="b3">b3 333</div>
<div class="b1">001</div>
<div class="b2">002</div>
<div class="b3">b3 003</div>
<ul>
<h3>标题</h3>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<ul>
<h3>标题</h3>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<div>
<p>0001</p>
<p>0002</p>
<p>0003</p>
</div>
</body>
</html>
高级选择器优先级
优先级和个数(权重)相关
基础选择器优先级占主导：id 无限大于class无限大于标签
选择器优先级相同时，和顺序有关
高级选择器类型不会影响优先级
伪类选择器相当于class
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高级选择器优先级</title>
<style>
/* 优先级和个数(权重)相关
基础选择器优先级占主导：id无限大于class无限大于标签
选择器优先级相同时，和顺序有关
高级选择器类型不会影响优先级
伪类选择器相当于class
*/
.div {
font-size: 100px;
color: red;
}
div > .div {
color: orange;
}
div ~ div ~ .div {
color: brown;
}
div .div {
color: pink;
}
/*父元素的第3个子元素的颜色*/
.div:nth-child(3) {
color: yellowgreen;
}
.sup .div {
color: darkgreen;
}
</style>
<style>
/*多类名*/
.div.div1 {
color: black;
}
/* div.div#dd.div1 */
</style>
</head>
<body>
<div>
<div class="sup">
<div>
<div>
<div></div>
<div></div>
<div class="div div1" id="dd">123</div>
</div>
</div>
</div>
</div>
</body>
</html>
边界圆角
/*左上为第一个角，顺时针赋值，不足找对角*/
/*border-radius: 30px 60px;*/
/*border-radius: 150px;*/
/*border-radius: 50%;*/
/*横向第一个角50px，第二个角10px，不足找对角*/
/*纵向均是150px*/
/*边界半径*/
border-radius: 50px 10px / 150px;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边界圆角</title>
<style>
div {
width: 300px;
height: 300px;
background-color: red;
}
div {
/*左上为第一个角，顺时针赋值，不足找对角*/
/*border-radius: 30px 60px;*/
/*border-radius: 150px;*/
/*border-radius: 50%;*/
/*横向第一个角50px，第二个角10px，不足找对角*/
/*纵向均是150px*/
/*边界半径*/
border-radius: 50px 10px / 150px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
a标签的四大伪类
:link 链接初始状态
:hover 鼠标悬浮状态 *****
:visited 链接访问后的状态
:active 鼠标按下时的状态 ***
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a的四大伪类</title>
<style>
/*链接初始状态 | 鼠标悬浮状态 | 链接访问后的状态 | 鼠标按下时的状态*/
/*a:link {*/
/*color: black;*/
/*}*/
/*a:hover {*/
/*cursor: pointer;*/
/*}*/
/*a:visited {*/
/*color: yellow;*/
/*}*/
/*a:active {*/
/*color: green;*/
/*}*/
/*鼠标悬浮状态 | 鼠标按下时的状态*/
div {
width: 200px;
height: 200px;
background-color: pink;
}
div:hover {
background-color: yellowgreen;
cursor: pointer;
}
div:active {
background-color: red;
}
</style>
<style>
body {
margin: 0;
/*不让用户复制*/
user-select: none;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
color: black;
text-decoration: none;
}
h3 {
margin: 0;
}
.ul1 {
/*border: 1px solid black;*/
padding: 20px 0 15px 10px;
width: 180px;
}
.ul1 h3 {
font-size: 16px;
}
.ul1 li {
text-indent: 10px;
font-size: 14px;
}
.ul1 li:hover {
background-color: #666;
}
.ul1 li:hover > a {
color: white;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">标签a</a>
<div></div>
<ul class="ul1">
<h3>HTML 教程</h3>
<li><a href="">HTML</a></li>
<li><a href="">HTML5</a></li>
<li><a href="">XHTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">CSS3</a></li>
<li><a href="">TCP/IP</a></li>
</ul>
<ul class="ul1">
<h3>HTML 教程</h3>
<li><a href="">HTML</a></li>
<li><a href="">HTML5</a></li>
<li><a href="">XHTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">CSS3</a></li>
<li><a href="">TCP/IP</a></li>
</ul>
</body>
</html>
背景图片操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景图片</title>
<style>
.div {
width: 500px;
height: 500px;
border: 1px solid black;
}
.div {
background-image: url("img/001.png");
/*平铺: repeat-x | repeat-y | repeat | no-repeat*/
/*背景重复*/
background-repeat: no-repeat;
/*背景图片位置*/
/*水平: left|center|right 垂直:top|center|bottom*/
background-position: -200px 50px;
}
.div:hover {
/*过渡*/
transition: 2s;
/*当鼠标悬浮的时候从左边移动到中间*/
background-position-x: center;
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>
精灵图操作
div {
background: url("img/bg.png") no-repeat 10px 20px;
图片地址 不平铺 x轴偏移 y轴偏移
}
精灵图操作本质: 控制背景图片的位置
backgroud-position-x
backgroud-position-y
div:hover {
backgroud-position-y: -20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>精灵图的操作</title>
<style>
a {
color: #333;
text-decoration: none;
}
h1 {
width: 500px;
height: 100px;
border: 1px solid black;
}
h1 a {
width: 500px;
height: 100px;
display: block;
background-color: yellow;
background: url("img/bg.png") no-repeat 0 -150px;
}
h1 a:hover {
background-position-y: -250px;
}
</style>
<style>
.li {
width: 157px;
height: 48px;
border: 1px solid black;
background: url("img/bg.png") no-repeat -155px 0;
}
.li:hover {
cursor: pointer;
background-position-y: -48px;
}
</style>
</head>
<body>
<h1><a href=""></a></h1>
<div class="li"></div>
</body>
</html>
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.box {
width: 810px;
border: 1px solid black;
margin: 0 auto;
padding: 30px 0 40px 0;
}
.box h2 {
margin-left: 120px;
}
.box p {
margin-left: 120px;
margin-top: 15px;
}
.box p a {
/*padding-bottom: 5px;*/
border-bottom: 1px solid darkred;
margin-right: 20px;
}
.box p a:hover {
/*padding-bottom: 5px;*/
border-bottom-color: red;
}
.bottom-left {
width: 289px;
height: 87px;
background-color: orange;
margin-top: 50px;
margin-left: 50px;
background: url("img/icon9.png") no-repeat 0 0;
/*解决坑*/
padding-top: 1px;
}
.bottom-left div {
margin-left: 55px;
margin-top: 20px;
}
.bottom-left a {
display: block;
width: 130px;
font-size: 14px;
border-bottom: 1px solid darkred;
}
.bottom-left a:hover {
border-bottom-color: red;
}
.bottom-right {
width: 297px;
height: 87px;
background-color: yellow;
margin-left: auto;
margin-right: 50px;
margin-top: -87px;
}
</style>
</head>
<body>
<div class="box">
<h2>W3School 友情链接</h2>
<p>
<a href="">Firefox 中文社区</a>
<a href="">w3ctech</a>
<a href="">WeTest腾讯质量开放平台</a>
</p>
<div class="bottom-left">
<div>
<span>新浪微博</span>
<a href="">W3School 官方微博</a>
</div>
</div>
<div class="bottom-right"></div>
</div>
</body>
</html>
==================================reset.css=====================================
html, body, h1, h2, h3, p, ul {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
color: #333;
text-decoration: none;
}
2241
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
