1,选择器进阶
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--
.msg >p{} 子代选择器,选择msg里的子元素的p标签。孙子不选
-->
<style>
.box >p{
color: red;
}
</style>
</head>
<body>
<div class="box">
<p>1</p>
<div class="box1">
<p>2</p>
<div class="box2">
<p>3</p>
</div>
</div>
</div>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 伪类选择器 在特定情况下,给标签添加样式-->
<style>
/* 当鼠标经过时,促发样式 */
h1:hover{
color: red;
}
/* 当鼠标点击元素时,促发样式 */
h1:active{
font-size: 70px;
color: blue;
}
/* 当鼠标被访问过时,促发样式 */
a:visited{
color: red;
}
/* 当鼠标未被访问过时,促发样式 */
a:link{
color: darkorange;
}
</style>
</head>
<body>
<h1>官场文化</h1>
<a href="https://mp.csdn.net/mp_blog/creation/editor">这个网站我没去过</a>
<a href="https://pan.baidu.com/s/1cSGwjbyxNvE0lCsdtOlrzA?pwd=7070#list/path=%2Fsharelink2733649490-955897279160757%2F%E8%AF%BE%E4%BB%B6%2F4-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E4%B8%8E%E6%A0%B7%E5%BC%8F%E6%8E%92%E7%89%88&parentPath=%2Fsharelink2733649490-955897279160757">这个网站我去过</a>
</body>
</html>
伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 伪元素选择器 只能看,不能用。防止内容被下载/选中-->
<style>
/* 在元素前面添加一个子元素 */
.box::before{
content: '我想二次';
}
/* 在元素后面添加一个子元素 */
.box::after{
content: "文件存放玩具";
}
</style>
</head>
<body>
<div class="box">
<span>外部成本</span>
</div>
</body>
</html>
结构选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
font-size: 3px;
}
/* 结构选择器 当有多个元素时,可以选中指定元素 */
/* 选中p的第一个子元素 */
p:first-child{
color: red;
}
/* 选中p的最后一个子元素 */
p:last-child{
color: pink;
}
/* 选中p的第5个元素子元素 指定*/
p:nth-child(5){
color: gold;
}
</style>
</head>
<body>
<p>我是1娃</p>
<p>我是2娃</p>
<p>我是3娃</p>
<p>我是4娃</p>
<p>我是5娃</p>
<p>我是6娃</p>
<p>我是7娃</p>
</body>
</html>
2,表单(form)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 表单 提供一个让用户进行交互的窗口(输入框,选择框,提交按钮,登录框) -->
<!-- form的属性:
action = 数据提交的位置(数据提交到后台/数据库)
method = 数据提交方式(get/post) 默认是get -->
<!-- form的功能控件(工具箱)
1,input 输入框 placeholder 提醒输入内容
2,textarea 多行输入框 placeholder 提醒输入内容
3,select 下拉菜单 option 下拉菜单里的选项
4,button 按钮,一般是结合js来操作-->
<form >
<input type="text" placeholder="请输入你的姓名">
<textarea name="" id="" cols="30" rows="10" placeholder="请输入你的个人简介:"></textarea>
<select name="" id="">
<option value="">席尔瓦</option>
<option value="">测</option>
<option value="">常温</option>
<option value="">成人网</option>
<option value="">文旅</option>
<option value="">vtr</option>
<option value="">荣誉</option>
<option value="">犹太人你的</option>
<option value="">牡</option>
</select>
<button>我是一个按钮</button>
<!-- input的类型:
text -- 文本框
password -- 密码框
checkbox -- 多选框
radio -- 单选框
submit --提交按钮
file --文件上传
reset --重置按钮 -->
<br>
<input type="text" name="" id="">
<input type="password">
<!-- 多选框 -->
<br>
<span>是的v</span> <input type="checkbox">
<span>ve</span> <input type="checkbox">
<span>二v我</span> <input type="checkbox">
<span>企鹅v让我给</span> <input type="checkbox">
<span>去微软</span> <input type="checkbox">
<!-- 单选框 -->
<p>你是对的吗?</p>
<p>是</p> <input type="radio" name="sex">
<p>不是</p> <input type="radio" name="sex">
<!-- 互动按钮 -->
<input type="submit" value="点我提交">
<input type="file" >
<input type="reset" value="点我重置内容">
</form>
</body>
</html>
3,reset.css 重设网页,再进行开发
4,博客登录案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{ /* 正式开发一般不用通配符选择器.用reset.css*/
margin: 0;
padding: 0;
}
html,body{
height: 100%; /* 把网页高度改为浏览器的100%*/
}
body{
display: flex; /* 把body转为弹性盒模型*/
justify-content: center; /* 把主轴横轴设为居中*/
align-items: center; /* 把副轴纵轴 设为居中*/
background: url(img/05.jpg) no-repeat center/cover;
}
#login{
width: 300px;
height: 300px;
background-color:rgb(255,250,240);
border-radius: 10px;
}
/* 伪元素 */
#login::before{
content: ''; /* 激活伪元素*/
display: block; /* before默认为行内样式.不能展开*/
width: 100%;
height: 10px;
/* 普通做法: 写5个盒子,分别设置颜色. 再float */
/* 实现功能很简单,终点是要突出自己的价值/核心竞争力 --> 代码性能,正规,码风
骚气做法: 用css3的新功能. 叫做渐变色. 代码少,性能更好 */
/* 方向,颜色 起点,颜色 终点 */
background-image: -webkit-linear-gradient(left,#096 0%, #096 25%,aqua 25%,aqua 50%,gold 50%,gold 75%,pink 75%,pink 100%);
border-radius: 15px 15px 0 0; /* 只给左上角/右上角设置边框圆角.下面不设置*/
}
#login-title{
line-height: 80px;
text-align: center;
font-size: 2em; /* 相当于两个默认字符的大小*/
color: #096;
}
#login-content{
display: flex;
flex-direction: column; /* 把flex的主轴改为竖轴.布局变为上下垂直布局*/
justify-content: space-around; /* 上下均分布局空间*/
align-items: center; /* 左右居中*/
height: 200px;
}
#login-content input{
width: 80%; /* 把宽度设为父级的80%*/
height: 40px;
border: 3px solid #6cf;
text-indent: 1em; /* 设置字符缩进一个字*/
border-radius: 15px;
}
</style>
</head>
<body>
<div id="login">
<h2 id="login-title">Login</h2>
<form action="" id="login-content">
<input type="text" placeholder="请输入用户名">
<input type="password" name="" id="" placeholder="请输入密码">
<input type="submit" value="登录">
</form>
</div>
</body>
</html>
5,作业:登录页面制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面制作</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 400px;
margin: 50px auto;
border: 3px solid black;
}
#R{
margin-right: 50px;
}
#L{
float: left;
}
</style>
</head>
<body>
<div class="box">
<h3>注册页</h3><br>
<!-- 表单 -->
<form action="">
<!-- 输入框 提示输入内容 -->
<p>姓名:<input type="text" placeholder="请输入你的姓名"></p>
<p>密码:<input type="text" placeholder="请输入密码"></p>
<!-- 单选框 radio -->
<span>性别:</span>
<span>男</span><input type="radio" name="sex">
<span>女</span><input type="radio" name="sex">
<br>
<!-- 文件上传 -->
<span>照片:</span><input type="file" >
<br>
<!-- 多选框checkbox -->
<span>爱好:</span>
<span>书</span> <input type="checkbox">
<span>运动</span> <input type="checkbox">
<span>聊天</span> <input type="checkbox">
<br>
<!-- 下拉菜单 select-option -->
<span>所在城市:</span>
<select name="" id="">
<option>重庆</option>
<option>汉州</option>
<option>上海</option>
<option>天津</option>
</select>
<!-- 多行输入框 textarea -->
<p>协议:</p>
<textarea name="" id="" cols="30" rows="10" placeholder="请遵守相关规定,互相尊重,营造良好氛围。"></textarea>
<br>
<input type="radio"><span>我认真阅读并接受以上协议。</span>
<br>
<!-- 提交按钮 submit-->
<input type="submit" id="L">
<!-- 重置按钮 reset -->
<input type="reset" id="R">
</form>
</div>
</body>
</html>