目录
01-复合选择器
<!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>
div.a1#b1,
#b7 {
color: aquamarine;
}
/* 交集选择器 在一个选择器的基础上 在增加一个选择器来增加条件*/
/* 中间不允许有任何符号包括空格 */
.a3,
#b7 {
color: blue;
}
/* 并集选择器 多个选择器之间用逗号隔开 表示 同时选择多个标签使用样式 */
/* table .box1 td {
text-align: center;
} */
/* 后代选择器 使用空格分隔 */
table>tbody>.box1>td {
text-align: center;
background-color: #456;
}
/* 子元素选择器 使用> 分割*/
/* 后代选择器 全部后代 直接后代子元素选择器 */
</style>
</head>
<body>
<div class="a1" id="b1">杨丞琳风波后首现身成都机场div a1</div>
<div class="a2" id="b3">《花少》北斗七行开车追赶日出div a2</div>
<div class="a3" id="b5">陈伟霆曾怕母亲担心暂时离家div a1</div>
<p class="a1" id="b6">金庸曾说愿意为周海媚改写结局p a1</p>
<p class="a2" id="b7">第一次见仙侠剧拍男主阿萨大大的p a2</p>
<table border="1" width="200" height="100">
<tr class="box1">
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr class="box1">
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>456</td>
<td>456</td>
<td>456</td>
</tr>
</table>
</body>
</html>02-标签显示模式
<!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>
div {
width: 100px;
height: 100px;
}
span {
width: 100px;
height: 100px;
}
hr {
width: 50px;
height: 100px;
}
input {
width: 9000px;
}
a {
width: 500px;
height: 500px;
}
.box {
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
display: inline-block;
/* 设置标签的显示模式 */
/* block 块级元素 */
/* inline 行内元素 */
/* inline-block 行内块元素 */
/* none 隐藏元素 */
}
</style>
</head>
<body>
<!-- 标签显示模式的区别 -->
<!-- 1.块级元素 div p ul li dt dd dl ol h1 - h6 br hr -->
<!-- 1.1 默认大小都是一整行 占满一整行-->
<!-- 1.2 可以设置宽度 高度 内边距 外边距 -->
<!-- 1.3 块级元素可以容纳任意的内容或标签 -->
<div>123</div>
<div>123</div>
<hr>
<!-- 2.行内元素 span b i s u a -->
<!-- 2.1 默认大小就是内容大小-->
<!-- 2.2 不可以设置宽度 高度 内边距 外边距-->
<!-- 2.3 行内元素只能容纳文本或图片 任意的行内元素 -->
<span>
<span>444</span>
</span>
<span>456</span>
<img src="../02百度首页/images/bd_logo1.png" alt="" width="10">
<input type="text">
<a href="#">百度一下，你就知道</a>
<!-- 3.行内块元素 input img -->
<!-- 3.1 默认大小就是内容大小 -->
<!-- 3.2 可以设置宽度 高度 内边距 外边距 -->
<!-- 3.3 块级元素可以容纳任意的内容或标签 -->
<div class="box">暑期清凉季</div>
<div class="box">京东生鲜</div>
<div class="box">企业会员</div>
<div class="box">京东五金城</div>
<div class="box">大牌奥莱</div>
</body>
</html>03-背景样式
<!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-color: #000;
}
#box {
width: 150px;
height: 500px;
/* background-color: rgba(255, 132, 220, 0.31); */
/* 背景颜色 */
background-image: url(./images/饭团.png);
/* 背景图片 */
background-repeat: no-repeat;
/* 背景重复方式 repeat xy轴全部重复*/
/* no-repeat 不重复 */
/* background-position: 200px 100px; */
/* 背景图片定位 */
/* background-attachment: fixed; */
/* 背景图片固定 附着 */
/* background: red url(./images/饭团.png) no-repeat scroll 10px 10px; */
/* color image repeat attachment position */
background-size: cover;
/* contain 自适应 */
/* cover */
}
.obox {
width: 27px;
height: 240000000px;
background-image: url(./images/index.webp);
background-repeat: no-repeat;
background-position: -155px -108px;
/* 精灵图的使用 */
}
</style>
</head>
<body>
<div id="box"></div>
<div class="obox"></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>
.nav,
.sidebar {
font-size: 18px;
font-family: "宋体";
}
.sidebarRight>a {
color: red;
}
.nav>ul a {
color: gray;
}
.nav>em {
font-weight: 900;
}
</style>
</head>
<body>
<!-- 主导航栏 -->
<div class="nav">
<ul>
<li>
<a href="">公司首页</a>
</li>
<li>
<a href="">公司简介</a>
</li>
<li>
<a href="">公司产品</a>
</li>
<li>
<a href="">联系我们</a>
</li>
</ul>
<em> 收藏本站 </em>
<div> 联系我们:
<em>1234567890</em>
</div>
</div>
<!-- 侧导航栏 -->
<div class="sidebar">
<div class="sidebarLeft">左侧导航栏</div>
<div class="sidebarRight"><a href="#">登录</a></div>
</div>
</body>
</html>
249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
