其他分享
首页 > 其他分享> > 前台技术学习2

前台技术学习2

作者:互联网

今天学习了前台技术中的css,学习的主要内容为css如何和html结合。

css与html结合的三种方式

① 在标签的style属性上设置键值对,修改标签的样式。这种方式在复杂页面中代码量庞大,占内存,可读性差、修改困难。

②在<head>标签内,用style标签定义样式。它只能在一个页面中修改。

③把css写成一个单独文件,使用link标签引入html  <link rel="stylesheet" type="text/css" href="css文件">

css选择器,使用css选择器可以更加方便的修改html中的样式。

①标签名选择器  标签名{属性:值;} 它可以决定哪些标签使用该样式

②id选择器 #id属性值{属性:值;} 它可以让用户选择性的使用样式。

③class选择器 .class属性值{属性:值;} 可以通过class属性选择性地使用样式

④组合选择器  选择器1,选择器2,..选择器n{属性:值;} 多个选择器共用一个css样式。

对于css中的一些属性值请参照下面的两个网址:

https://www.runoob.com/css/css-tutorial.html 菜鸟教程

https://xcdn.php.cn/shouce/qianduan/css4.2.7%20%E4%B8%AD%E6%96%87%E6%89%8B%E5%86%8C.zip?sign=aa2960077fb10e900c8e78f9a86b3936&timestamp=1640500787 帮助文档

学完之后,自已做了一个注册页面,效果图如下

 

 下面是我的源码

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>注册</title>
  6     <style>
  7         *{
  8             margin: 0px;
  9             padding: 0px;
 10             box-sizing: border-box;
 11         }
 12         body{
 13             background: url("xk.jfif");
 14         }
 15 
 16         .rg_layout{
 17             width: 900px;
 18             height: 500px;
 19             border:5px solid #EEEEEE;
 20             background: white;
 21             margin-left: auto;
 22             margin-right: auto;
 23             margin-top: 20px;
 24         }
 25         .rg_left{
 26             float: left;
 27             margin: 15px;
 28         }
 29         .rg_center{
 30             float: left;
 31             width: 450px;
 32         }
 33         .rg_right{
 34             float: right;
 35             margin: 15px;
 36         }
 37     </style>
 38     <style type="text/css">
 39         .rg_p1{
 40             color: #0000FF;
 41             font-size: 25px;
 42         }
 43         .rg_p2{
 44             color: #00FFFF;
 45             font-size: 25px;
 46         }
 47         a{
 48             text-decoration: none;
 49             color: #eb7350;
 50             font-size: 15px;
 51         }
 52         .td_left{
 53             width: 100px;
 54             text-align: right;
 55             height: 45px;
 56         }
 57         .td_right{
 58             padding-left: 50px;
 59         }
 60         #username,#password,#email,#name,#phone{
 61             width: 240px;
 62             height: 32px;
 63             border: 1px solid black;
 64             border-radius: 5px;
 65             padding-left: 5px;
 66         }
 67         #btn{
 68             width: 150px;
 69             height: 40px;
 70             background: yellow;
 71             border: 1px solid yellow;
 72         }
 73     </style>
 74 </head>
 75 <body>
 76 <div class="rg_layout">
 77     <div>
 78         <h2 align="center">欢迎使用XX注册系统</h2><br>
 79     </div>
 80     <div class="rg_left">
 81         <p class="rg_p1">新用户注册</p>
 82         <p class="rg_p2">USER REGISTER</p>
 83     </div>
 84     <div class="rg_center">
 85         <div class="rg_form">
 86             <form action="#" method="post">
 87             <table>
 88                 <tr>
 89                     <td class="td_left">用户名:</td>
 90                     <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
 91                 </tr>
 92                 <tr>
 93                     <td class="td_left">密码:</td>
 94                     <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
 95                 </tr>
 96                 <tr>
 97                     <td class="td_left">性别:</td>
 98                     <td class="td_right">
 99                         <input type="radio" name="sex" value="男">男
100                         <input type="radio" name="sex" value="女" >女
101                     </td>
102                 </tr>
103                 <tr>
104                     <td class="td_left">姓名:</td>
105                     <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入真实姓名"></td>
106                 </tr>
107                 <tr>
108                     <td class="td_left">邮箱:</td>
109                     <td class="td_right"><input type="text" name="email" id="email" placeholder="请输入邮箱"></td>
110                 </tr>
111                 <tr>
112                     <td class="td_left">手机号:</td>
113                     <td class="td_right"><input type="text" name="phone" id="phone" placeholder="请输入真实手机号"></td>
114                 </tr>
115                 <tr>
116                     <td colspan="2" align="center"><input type="submit" value="注册" id="btn"></td>
117                 </tr>
118             </table>
119             </form>
120         </div>
121     </div>
122     <div class="rg_right">
123         <p>已有帐号?<a href="#">登录</a></p>
124     </div>
125 </div>
126 </body>
127 </html>

明天将学习JavaScript。

 

标签:标签,技术,学习,rg,前台,margin,选择器,css,left
来源: https://www.cnblogs.com/jzz-111jy/p/15733608.html