search

博客列表 >引入字体图标和自定义样式与媒体查询

引入字体图标和自定义样式与媒体查询

新手1314
新手1314原创
2022年07月10日 17:04:44417浏览

1.引入字体图标

  1. 1.下载字体图标库
  2. 2.放入文件夹内
  3. 3.<link rel="stylesheet" href="******" />导入字体图标样式
  4. 4.<button class="iconfont icon-***"></button> 来引用字体图标

1.1HTML代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>表单元素</title>
  8.     <link rel="stylesheet" href="font/iconfont.css" />
  9.   </head>
  10.   <body>
  11.     <!--! 1.发送方式/请求方式 -->
  12.     <!--! 2.发送的数据： -->
  13.     <!--!   2.1 自定义(最灵活)：用户自己输入，例如：文本框，文本域-->
  14.     <!--!   2.2 预定义（最安全）：由程序员/开发者已经写好了，用户只要做一个选择，例如：复选框，单选框，下拉列表.... -->
  16.     <!-- 用户注册 -->
  17.     <h2>用户注册</h2>
  19.     <!-- get：查询，默认的 -->
  20.     <!-- get：数据以“查询字符串，键值对方式发送到后端” -->
  21.     <!-- 姓名/key=张三/value -->
  22.     <!-- get：用于查询，将用户的查询参数，通过URL发送到服务器 -->
  24.     <!-- post：用于向服务器提交数据，常用于写操作，也可以用于读/查询 -->
  25.     <!-- onsubmit="return false" 阻止表单提交操作（将表单默认的提交行为禁用） -->
  26.     <form action="reg.php" method="post" onsubmit="return false">
  27.       <div>
  28.         <label for="username">用户名：</label>
  29.         <!--* name:提交到后端的变量名,value:默认值 -->
  30.         <!--! autofocus:自动获取焦点，布尔属性，无值（默认值）就是TRUE，如果是FALSE，才有必要给值 -->
  31.         <input type="text" name="username" id="username" placeholder="用户名不能为空" autofocus />
  32.       </div>
  33.       <div class="ceshi">
  34.         <label for="password">密码：</label>
  35.         <input type="password" id="password" name="password" placeholder="密码不能为空" />
  36.         <!-- <span class="icon-yincang"></span> -->
  37.         <button class="iconfont icon-yincang" onclick="showPassword(this,this.form.password)"></button>
  38.         <!-- <p style="margin-top: -25px; margin-left: 230px; font-size: 30px" class="iconfont icon-xianshikejian" onclick="showPassword(this,this.form.password)"></p> -->
  39.         <!-- <button onclick="showPassword(this,this.form.password)">查看密码</button> -->
  40.       </div>
  41.       <!-- 单选按钮 -->
  42.       <!-- 预定义选项，必须给默认值，value -->
  43.       <div>
  44.         <label for="">性别：</label>
  45.         <!-- 单选按钮提交的数据只有一个变量一个值，所以name变量名后面要加上[] -->
  46.         <!-- 默认选择：checked，布尔属性，默认值为TRUE（默认值可不写），要赋予值只能是FALSE -->
  47.         <input type="radio" id="nan" name="sex" value="0" checked />
  48.         <label for="nan">男</label>
  49.         <input type="radio" id="nv" name="sex" value="1" />
  50.         <label for="nv">女</label>
  51.         <input type="radio" id="weizhi" name="sex" value="2" />
  52.         <label for="weizhi">未知</label>
  53.       </div>
  54.       <div>
  55.         <label for="">爱好：</label>
  56.         <!-- 复选框提交的数据是一组数组，哪怕只是一个值也是数组，所以name必须一致 -->
  57.         <input type="checkbox" id="dianying" name="hobbies[]" value="0" />
  58.         <label for="dianying">电影</label>
  59.         <input type="checkbox" id="dongman" name="hobbies[]" value="1" />
  60.         <label for="dongman">动漫</label>
  61.         <input type="checkbox" id="game" name="hobbies[]" value="2" />
  62.         <label for="game">游戏</label>
  63.       </div>
  64.       <div>
  65.         <label for="">城市：</label>
  66.         <!-- name,value是在同一个input控件标签中 -->
  67.         <!-- select中，name，value不在同一个标签中 -->
  68.         <select name="city" id="">
  69.           <!-- 下拉列表没有办法给用户提示，可以借助第一个选项来提示用户 -->
  70.           <!-- 因为第一个选项没有意义，所以通常是禁用的，指向一个视觉提示效果 -->
  71.           <option value="0" selected disabled>--请选择--</option>
  72.           <option value="1">福建</option>
  73.           <option value="2">上海</option>
  74.           <option value="3">北京</option>
  75.           <option value="4">武汉</option>
  76.         </select>
  77.       </div>
  78.       <div>
  79.         <button>提交</button>
  80.       </div>
  81.     </form>
  82.     <script>
  83.       function showPassword(bth, ele) {
  84.         if (ele.type === "password") {
  85.           ele.type = "text";
  86.           // bth.classContent = "隐藏";
  87.           bth.className = "iconfont icon-xianshikejian";
  88.           console.log(bth);
  89.         } else {
  90.           ele.type = "password";
  91.           bth.className = "iconfont icon-yincang";
  92.         }
  93.       }
  94.     </script>
  95.     <style>
  96.       .ceshi button {
  97.         border: none;
  98.         background-color: #fff;
  99.         font-size: 20px;
  100.       }
  101.     </style>
  102.   </body>
  103. </html>

1.2 效果：

1.3 自定义样式：

  1. 1.创建一个自定义样式文件
  2. 2.将字体图标样式导入自定义样式文件
  3. 3.引用样式文件

css与HTML：

  1. yangshi.css:
  2. @import "font/iconfont.css";
  4. .ceshi button {
  5.   border: none;
  6.   background-color: #fff;
  7.   font-size: 20px;
  8. }
  9. html:
  10. html与上面相同，只修改了导入文件和删除了<style></style>里的代码
  11. <link rel="stylesheet" href="yangshi.css" />

效果：

2.媒体查询(pc适配模式)

  1. 媒体查询所控制的按钮不能设置为绝对值
  2. （PC适配模式由大适配到小）

2.1 html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>媒体查询</title>
  8.   </head>
  9.   <body>
  10.     <button class="anniu xiao">按钮1</button>
  11.     <button class="anniu zhong">按钮2</button>
  12.     <button class="anniu da">按钮3</button>
  13.   </body>
  14.   <style>
  15.     html {
  16.       font-size: 10px; /* 10px = 1rem */
  17.     }
  18.     .anniu {
  19.       background-color: violet;
  20.       border: none;
  21.       color: #fff;
  22.       /* 将 outline 设置为 0 或 none 会移除浏览器的默认聚焦样式 */
  23.       /* outline: none; */
  24.     }
  25.     .anniu:hover {
  26.       cursor: pointer;
  27.       /* 动画时长，也可以是过度效果 */
  28.       /* transform: 20s; */
  30.       /* opacity 属性指定了一个元素的不透明度 */
  31.       opacity: 0.5;
  32.     }
  33.     .xiao {
  34.       /* 媒体查询不能用绝对值 */
  35.       /* px:绝对值 */
  36.       /* font-size: 13px; */
  38.       font-size: 1.3rem;
  39.     }
  40.     .zhong {
  41.       font-size: 1.6rem;
  42.     }
  43.     .da {
  44.       font-size: 2rem;
  45.     }
  47.     /* Pc适配模式 */
  48.     /* 断点 1000 800 600 450 350 */
  49.     @media (min-width: 1000px) {
  50.       html {
  51.         font-size: 60px;
  52.       }
  53.     }
  54.     @media (max-width: 999px) and (min-width: 800px) {
  55.       html {
  56.         font-size: 50px;
  57.       }
  58.     }
  59.     @media (max-width: 799px) and (min-width: 600px) {
  60.       html {
  61.         font-size: 40px;
  62.       }
  63.     }
  64.     @media (max-width: 599px) and (min-width: 450px) {
  65.       html {
  66.         font-size: 30px;
  67.       }
  68.     }
  69.     @media (max-width: 449px) and (min-width: 350px) {
  70.       html {
  71.         font-size: 20px;
  72.       }
  73.     }
  74.   </style>
  75. </html>

2.2 效果：

上一条：字体单位尺寸、可视窗口大小、表格常用样式、移动端自适应、PC端自适用下一条：CSS中引入字体图标以及实例演示媒体查询
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多