web前端：7_选择器进阶与表单标签

最新推荐文章于 2024-09-03 16:07:32 发布
最新推荐文章于 2024-09-03 16:07:32 发布
阅读量36 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45906368/article/details/131674914
版权

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>

weixin_45906368
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
web前端选择器整理
2201_75408313的博客
07-10 730
类选择器最大的优点是可以为元素对象定义单独或相同的样式，而且多个标记可以使用同一个类名，可以实现为不同类型的标记指定相同的样式。上述选择器中，div 为祖先元素，p 为后代元素，其作用就是选择 div 元素的所有后代 p元素，不管 p 元素是 div 元素的子元素、孙辈元素或者更深层次的关系，都将被选中。后代选择器中的空格，是用来表示后代层级的，当然就不限于二级的。该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
web前端进阶之VUE基础篇
技术专家
11-09 746
vue 的特性 vue 框架的特性，主要体现在如下两方面： ① 数据驱动视图 ② 双向数据绑定
web前端篇:CSS选择器
ITmiaomiao666的博客
06-12 325
###一、CSS选择器 作用：规范页面中哪些元素能够应用声明好的样式 目的 ：匹配页面元素 1.标签选择器/元素选择器 特点：将标签名作为选择符，来匹配文档中所有的该标签，包含后代元素 语法： 标签名{ 属性：值 } 标签名如a,div text-decoration : none;取消下划线 <!DOCTYPE html> <html lang="en"> <...
web前端进阶教程目录
dreamingbaobei的博客
02-21 2635
web前端的学习的入门并不难，但是在学习和应用的过程中，你会发现各种新知识和新技术层出不穷，似乎没有止境，本教程从体系化的角度去设计，希望从高处着眼，用生活化的角度去理解。
1+X Web前端题6_技能进阶
氧的博客
07-10 2258
弹出输入框，默认内容是“Hello World”的正确javascript语法是？ A document.write(“HelloWorld”) B “Hello World” C response.write(“HelloWorld”) D prompt(“输入”，“Hello World”) 参考答案： D 打开名为“window2”的新窗口的JavaScript语法是？ A open.new(“http://www.w3schools.com”，“window2”) B window.open(“ht
web前端：9_复习
weixin_45906368的博客
07-12 32
【代码】web前端：9_复习。
2024年Web前端最新HTML与CSS的进阶版——HTML5与CSS3，不可多得的干货
2401_84435768的博客
05-05 390
section div:nth-child(1)设置样式，先是给所有盒子排序，再看第一个盒子是否是div这个盒子，再代码中第一个盒子是p标签这个盒子。n如果是数字，就可以选择第n个子元素，里面数字从1开始 n也可以是关键字：even 偶数，odd 奇数。section div:nth-of-type(1)设置样式，把指定的盒子先找到再看排序。n也可以是公式：（公式里面的n是从0开始，但是第0个元素或者超出了元素的个数会被忽略）2.属性选择器还可以选择属性=值的某些元素 ★这个是重点！
前端基础——ccs进阶（表单）
deartors的博客
10-18 301
双标签，cols列，rows行，控制输入框的宽高。同时可以用resize属性值，用于自适应宽高，horizontal横向改变宽度，vertical竖直方向改变宽度both两边都可以改变。placeholder属性值，是输入框灰色的提示词，准备输入即消失，在双标签中间可以设置初始值，在初始值后面可以继续输入，也可以删除掉初始值。给表单加一个边框用属性fieldset，里面嵌套legend，legend里面放表名，两个标签均可以常规设置css样式。代表一个单选框的选项，在这个选择器下只能选一个，
web前端开发薪资，HTML表单标签
m0_60125625的博客
07-22 105
一、如何入门，学习建议 在你开始入手学习前，有一些小的建议。根据我自己学习的经验发现，这些建议在现在乃至我以后的岗位生涯里都是有很大帮助的。还有就是开始学习前，建议可以先花几天时间，查找一些如何入门的文章，通过对许多文章及前人的建议。整理出适合自己学习的一套完整计划，然后在学习过程中，在自己对前端更加了解之后，做出一些计划的调整。我相信，在这样的计划学习之下比一来就开始学习具体知识要快速有效得多。 代码规范：不是说小白时期不重要，正是什么都不懂的时候，才要严格执行学到的规范。徐徐渐进，等到学有所成，
fe-blog：:party_popper:前端进阶笔记，记录工作学习中遇到的问题思考和解决方案。（:sparkles:Gitbook地址：https：daotin.gitbook.iofe-blog）
02-03
笔记可能涵盖了选择器、盒模型、布局（如Flexbox和Grid）、响应式设计、CSS预处理器（如Sass或Less）以及动画和过渡等，帮助开发者打造美观且功能完善的界面。 3. **HTML**：基础的HTML结构是构建网页的骨架。笔记...
Pemrograman-Web-lanjutan:UTS_PWL
04-29
2. **CSS3**：包括选择器的高级用法、过渡效果、动画、响应式设计（媒体查询）和Flexbox或Grid布局系统。 3. **JavaScript**：DOM操作、事件处理、异步编程（Promise和async/await）、AJAX请求以及可能的库和框架如...
web前端期末大作业：基于HTML+CSS+JS外卖服务平台10页 带购物车 (web课程设计与实现)
08-10
- **CSS3**：引入了新的样式属性和选择器，使得网页布局更加灵活，可以实现复杂的视觉效果，例如圆角、阴影、过渡效果等。 - **JavaScript**：用于增加网页的交互性，实现动态效果，如轮播图、下拉菜单等。此外，还...
跨页面进行数据通讯
榴莲不好吃的专栏
09-02 474
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
关于前端服务器字体的引用
qq_69304031的博客
09-02 458
服务器字体是一种强大的工具，可以帮助我们实现全场景字体风格的统一。通过定义服务器字体，我们可以确保网页在不同的设备和浏览器上都能呈现出一致的字体效果，提升用户体验和品牌形象。在使用服务器字体时，需要注意字体文件的版权问题，并确保字体文件的加载速度不会影响网页的性能。希望这篇博客对你在网页设计中使用服务器字体有所帮助。如果你有任何问题或建议，欢迎在评论区留言。
js对象操作常用方法
m0_75276704的博客
09-02 571
2.构造函数创建 2.方括号 三、添加属性 四、删除属性 五、判断属性是否存在 1.in运算符 2.hasOwnProperty方法 六、遍历对象属性 1.for...in...循环 2.Object.keys，Object.values，Object.entries 七、深拷贝与浅拷贝 1.浅拷贝 2.深拷贝 八、合并对象 Object.assign 九、其他方法 1.Object.is() 比较两个
后端输出二进制数据，前端fetch接受二进制数据，并转化为字符输出
cdcdhj的博客
09-01 572
在这个前端代码中，我们使用fetch API请求PHP脚本，并获取二进制数据。然后，我们将ArrayBuffer转换为字符串，以便在JavaScript中使用。在PHP中，你可以将字符串或其他数据类型转换为二进制数据，并通过HTTP响应发送给前端。
深入理解JavaScript闭包：避免常见的内存泄漏问题
官方推荐
09-02 4328
深入理解JavaScript闭包：避免常见的内存泄漏问题
WHAT - React 函数与 useMemo vs useCallback
最新发布
weixin_58540586的博客
09-03 806
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
Java Web进阶教程：HTML、CSS与JavaScript基础详解
CSS方面，内容包括基本写法、选择器（标签选择器、类选择器、id选择器和专用选择器）、盒子模型（边框、内容和间距），以及定位属性在实现动态效果中的应用。CSS对网页布局和视觉呈现起着至关重要的作用。 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值