收藏
批改状态：未批改
老师批语：
记录11.13直播学习内容：css常用选择器、内外边距、浮动；
CSS选择器：【优先级：内联>内部>外部】
<!-- 讲解css层级样式表：内部，外部，内联
常用css选择器
选择器：需要改变样式html元素 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>常用css选择器</title>
<!-- 外部样式表，共享 -->
<link rel="stylesheet" href="style.css">
<!-- 内部样式表，针对单个文档 -->
<style>
/* 基础选择器 */
/* 标记选择器 */
body{}
/* *通配符，作用于所有标签 */
*{margin: 0;padding: 0;}
/* id选择器 以“#”定义，特殊性：唯一*/
#box{
width: 200px;
height: 200px;
margin: 0 auto;
background: blueviolet;
}
/* 类选择器 以"."定义，用于描述一组元素的样式，class可以在多个元素中使用 */
/* 单类 */
/* .main{
border: 1px solid #ccc;
} */
p.main{
background: black;
}
/* 多类 */
.l{
width: 50px;
}
.s{
height: 150px;
}
/* 选择器分组 选择器可以分享相同的声明 写法：用逗号将选择器隔开 */
h1,h2,.main{
font-size: 30px;
border: 1px solid #888;
}
/* 派生选择器 通过元素文档中位置的上下文关系来定义杨书记 优点 使标更加简结 */
/* css 后代选择器 */
div span{
font-size: 10px;
}
/* 子选择器 子选择器使用大于号*/
p>span{
color: red;
}
p>b>span{
color: chartreuse;
}
</style>
</head>
<body>
<!-- 内联样式表 针对当前元素-->
<!-- 元素同时拥有多个class样式 -->
<p class="main l s" style="color:red;">外部</p>
<div id="box" class="main"></div>
<h1>我</h1>
<h2>你</h2>
<h3>他</h3>
<div>
<span>php中文网</span>
</div>
<p>
<span>谷歌</span>
<b><span>火狐</span></b>
</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
元素的显示及内外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>元素的显示及内外边距</title>
<style>
/* 块级，行内，行内快相互转换 */
/* display:inline 转换为行内元素*/
/* display:inline-block 转换为行内块元素 */
/* display:block 转换为块元素 */
div{
width: 100px;
height: 100px;
background: red;
}
.first-p{
width: 50px;
height: 20px;
background: #ccc;
}
input{
width: 250px;
height: 40px;
background: rgb(182, 23, 161);
}
.line{
display: inline;
/* 宽高失效 */
margin: 0 20px;
}
.block{
display: block;
/* 宽高有效 */
}
</style>
</head>
<body>
<!-- 块级元素 独占一行 识别宽高 多个元素排列由上到下 -->
<!-- div p ul li -->
<div class="box"></div>
<p class="first-p">标签</p>
<!-- 行内元素 宽高无效，对margin仅能左右有效，上下无效，不会自动换行 多个元素由左到右-->
<!-- span b -->
<span>span标签-行内元素！！</span>
<b>b标签-行内元素</b>
<!-- 行内块级元素 不自动行换，能够识别宽高 -->
<!-- img input -->
<input type="text">
<!-- 行内，块状元素转换： -->
<p class="line">块状换行内</p>
<span class="block">行内转块状</span>
<!-- 内外边距 margin、padding
padding
元素的内边距是在边框和内容区之间 -->
<!-- 复合写法：上 右 下 左
上下 左右
上 左右 下
-->
</body>
</html>点击 "运行实例" 按钮查看在线实例
3.重点：浮动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
</head>
<body>
<!-- float 属性实现元素的浮动，属性值：left right
浮动的框可以水平方向移动，直到它的外边缘碰到包含框或者另一个浮动为止
注意：浮动使元素的位置与文档流无关（脱离文档流），不占据空间
-->
<style>
*{margin: 0;padding: 0;}
body{
width: 1370px;
margin: 0 auto;
}
.left{
width: 100px;
height: 100px;
background-color: #ccc;
float: left;
}
.right{
width: 100px;
height: 100px;
background-color: #ccc;
float: right;
}
.init{
width: 100px;
height: 100px;
background-color:red;
}
.clear{
clear: both;
}
</style>
<div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<!-- 清楚浮动 占位 -->
<div class="clear"></div>
<!-- 脱离文档流，被遮挡 -->
<div class="init"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>优酷案例</title>
<link rel="shortcut icon" href="images/1.ico" type="image/x-icon">
<style>
*{margin: 0;padding: 0;}
a{color: #000;text-decoration: none;}
li{list-style: none; float: left;}
small{font-size: 12px;color: #999;}
.left{float: left;}
.mr{margin-right: 10px;}
.clear{clear: both;}
.contents{
/* background: rgb(205, 88, 209); */
width: 1350px;
margin: 0 auto;
}
.content{
width: 100%;
margin-top: 20px;
}
.contentUL{line-height: 60px;}
.hot_tv img{
width: 192px;
height: 288px;
}
.big_show img{width: 394px;height: 280px;}
.tab li{margin-left: 25px;}
.tv_tab img{width: 193px;height: 118px;}
</style>
</head>
<body>
<div class="contents">
<div class="content">
<div class="contentUL">
<h2>正在热播</h2>
</div>
<ul class="hot_tv">
<li class="mr">
<a href="">
<img src="images/a.jpg" alt=""><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class=" mr">
<a href="">
<img src="images/b.jpg" alt=""><br>
<span>摘金奇缘</span>
</a><br>
<small>摘金奇缘</small>
</li>
<li class="mr">
<a href="">
<img src="images/c.jpg" alt=""><br>
<span>王牌对王牌</span>
</a><br>
<small>中国最红王牌大PK</small>
</li>
<li class="mr">
<a href="">
<img src="images/d.jpg" alt=""><br>
<span>我们村里的人</span>
</a><br>
<small>回乡创业带动乡村发展</small>
</li>
<li class="mr">
<a href="">
<img src="images/e.jpg" alt=""><br>
<span>黑色四叶草</span>
</a><br>
<small>黑色暴牛骑士团</small>
</li>
<li>
<a href="">
<img src="images/f.jpg" alt=""><br>
<span>大城晓聚</span>
</a><br>
<small>大城晓聚</small>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="content">
<div class="contentUL">
<h2 class="left">剧集 ></h2>
<ul class="tab left">
<li><a href="">最新</a></li>
<li><a href="">大陆剧</a></li>
<li><a href="">日韩剧</a></li>
<li><a href="">港台剧</a></li>
<li><a href="">英美剧</a></li>
</ul>
<div class="clear"></div>
</div>
<div class="tv_show">
<div class="big_show left mr">
<a href="">
<img src="images/tv.jpg" alt=""><br>
<span>逆流而上的你·爆笑</span>
</a><br>
<small>新晋辣妈萌爸！潘粤明马丽咸鱼夫妻带娃逆袭！</small>
</div>
<!-- <div class="left">
</div> -->
<ul class="tv_tab">
<li class="mr">
<a href="">
<img src="images/tv1.jpg" alt=""><br>
<span>都挺好</span>
</a><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</li>
<li class="mr">
<a href="">
<img src="images/tv2.jpg" alt=""><br>
<span>乡村爱情11</span>
</a><br>
<small>刘能赵四争C位</small>
</li>
<li class="mr">
<a href="">
<img src="images/tv3.jpg" alt=""><br>
<span>小女花不弃</span>
</a><br>
<small>林依晨张彬彬苏甜来袭</small>
</li>
<li class="mr">
<a href="">
<img src="images/tv4.jpg" alt=""><br>
<span>春暖花又开</span>
</a><br>
<small>姚芊羽李建上演新农村创业</small>
</li>
<li class="mr">
<a href="">
<img src="images/tv5.jpg" alt=""><br>
<span>老中医</span>
</a><br>
<small>陈宝国冯远征许晴弘扬医道</small>
</li>
<li class="mr">
<a href="">
<img src="images/tv6.jpg" alt=""><br>
<span>重耳传奇</span>
</a><br>
<small>春秋版“王子历险记”</small>
</li>
<li class="mr">
<a href="">
<img src="images/tv7.jpg" alt=""><br>
<span>只为遇见你.甜蜜开播</span>
</a><br>
<small>霸气帅总撩动你的少女心</small>
</li>
<li class="mr">
<a href="">
<img src="images/tv8.jpg" alt=""><br>
<span>国宝奇旅</span>
</a><br>
<small>刘烨袁姗姗携手护国宝</small>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
