标签：标签 技术 学习 rg 前台 margin 选择器 css left
今天学习了前台技术中的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×tamp=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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。