实战系列 —— CSS 加成的 HTML “注册表”

需要做到的—样式

在这里插入图片描述

自备材料

zc.jpg:
在这里插入图片描述

zc_bt01.jpg :
在这里插入图片描述

zc_bt02.jpg :

在这里插入图片描述
yzm.jpg:
在这里插入图片描述

纯文本HTML的效果图

: 对于HTML的构造思路我们就不详细解释了,相关内容实战系列 —— HTML 的 “注册信息表”里面有详细解说。

在这里插入图片描述
效果图中的细节解剖

(需要注意的是
: 1. 路径要具体到他本身,我们在属性中看到的是它所在的位置,并没有具体到它 本身,所以我们要具体到他本身,在HTML文本中手动添加他的名字,前面用斜线分开)

在这里插入图片描述

CSS加成详细解说

:1.CSS与HTML如何联系?

:要想使用 CSS 为 HTML进加成操作,就得使用 link 属性了

(需要注意的是
: 1. 路径要具体到他本身,我们在属性中看到的是它所在的位置,并没有具体到它 本身,所以我们要具体到他本身,在HTML文本中手动添加他的名字,前面用斜线分开)
: 2. CSS定义的斜线是和windows的斜线方向相反。

在这里插入图片描述

2.使用CSS加成布局

2.1:整体布局修饰

图片解说

: 这里我们在 CSS 中对于body中的内容进行了大致规划,其中最明显的就是背景图的引入;

属性解释

    body{
        font-family:'微软雅黑';(字体设置)
        background-image:url("背景图所在位置");
        background-position:center top;
          (background-position 属性设置背景图像的起始位置)
        background-repeat:no-repeat;
          (background-repeat 属性设置是否及如何重复背景图像。
                      默认地,背景图像在水平和垂直方向上重复。)
        }

在这里插入图片描述
效果图 2.1

: 从效果图中我们可以明显看出背景不再是空白茫然一篇了,而是我们选择的背景图,对于其他变化我们的好好对比一下就可以看出他的变化。

在这里插入图片描述
2.2:标题布局

: 我们进行了整体的布局后,开始慢慢去进行细节的修饰。我们现在进行的是对标题修饰。

 属性解释
       h1{
          text-align:center;
          margin-top: 190px;
          margin-bottom:30px;
          color:#990000;  
         }

以上属性都属于CSS盒子模型属性,相关内容请到 HTML 的豪华外套之 ”CSS“中查看

在这里插入图片描述

效果图 2.2:

: 从效果图中我们看到了标题发生了变化,跟着我们定义的属性变化,标题是可以更改的,虽然我们给出样式,但是我们还是可以多变的。一成不变不是我们的作风,所以标题就留给你想象了。

在这里插入图片描述
2.3:表格修饰

   属性解释
                 table{
                      margin:auto;(让元素水平居中)
                      }

在这里插入图片描述
2.3:效果图

:从效果图中我们看见表格遵循着我们的布局,实现了居中。

在这里插入图片描述
2.4.表格 td 修饰

 属性解释 
          table tr td{
           padding-top:10px;
        }
       table tr td.td_1{
           font-size: 18px;
           text-align:right;
        }

以上属性都是在我上面推荐的文章可以找到,所以我就不在这里进行详细解释了。

在这里插入图片描述
2.4:效果图

: 如果你不仔细看得话,是不好发现区别的,但是你仔细的观察,就发现最明显的就是表格之间的距离发生了改变。

在这里插入图片描述
2.5 input 布局

属性解释
         input{
              width:160px;
              height:22px;
              border:1px solid #ccc;
              }

以上属性都是在我上面推荐的文章可以找到,所以我就不在这里进行详细解释了。

在这里插入图片描述
2.5:效果图

:这个就好观察了,因为这个的范围就小多了,你只需要关注 最下面那个 注册用户 就行了,因为其他的都是对应的空白框,它不会有啥变化的。而下面那个 注册用户 一看就知道 它发生了变化

在这里插入图片描述
2.6 input细节布局

      input[name="yanzheng"]+img{
             vertical-align: top;
                      }
      input[type="submit"]{
           	border:none;
        	width: 127px;
            height: 44px;
         	color:white;
            font-size: 20px;
        	font-weight: bolder;
        	background-image: url
    ("C:/Users/Administrator/Desktop/zc_btn01.jpg");
                       }
      input[type="submit"]:hover{
            background-image: url
 	("C:/Users/Administrator/Desktop/zc_btn02.jpg");
                       }

以上属性都是在我上面推荐的文章可以找到,所以我就不在这里进行详细解释了。

在这里插入图片描述

2.6:效果图

: 最明显的就是 注册用户 变成红色了

在这里插入图片描述

HTML 代码

<!DOCTYPE HTML>
<html>
<head>
     <title>自定义内容</title>
   <meta http-equiv="Content-type" content="text/html charset=utf-8" />
 <link rel ="stylesheet" href="C:/Users/Administrator/Desktop/CSS.css" />
</head>
      <body>
         <h1>自定义内容</h1>
          <form action="#" method="POST">
          <table>
             <tr>
               <td class="td_1">用户名:</td>
               <td><input type="text" name="username"></td>
             </tr>
              <tr>
               <td class="td_1">密码:</td>
               <td><input type="password" name="password1"></td>
             </tr>
              <tr>
               <td class="td_1">确认密码:</td>
               <td><input type="password" name="password2"></td>
             </tr>
              <tr>
               <td class="td_1">昵称:</td>
               <td><input type="text" name="nickname"></td>
             </tr>
 	      <tr>
               <td class="td_1">邮箱:</td>
               <td><input type="text" name="email"></td>
             </tr>
               <tr>
               <td class="td_1">验证码:</td>
               <td><input type="text" name="identifying code">
                 <img alt="验证码图片" 
                    src="C:\Users\Administrator\Desktop\yzm.jpg">
               </td>
             </tr>
              <tr>
                <td colspan="2" align="center">
                  <input type ="submit" value="注册用户">
                                                        </td>
         <table>
        <form>
      </body>
</html>

CSS代码

  body{
        font-family:'微软雅黑';
        background-image:url("C:/Users/Administrator/Desktop/zc.jpg");
        background-position:center top;
        background-repeat:no-repeat;
        }

       h1{
          text-align:center;
          margin-top: 190px;
          margin-bottom:30px;
          color:#990000;  
          }

      table{
          margin:auto;
            }
      table tr td{
          padding-top:10px;
            }
      table tr td.td_1{
          font-size: 18px;
          text-align:right;
            }
      input{
          width:160px;
          height:22px;
          border:1px solid #ccc;
            }
      input[name="identifying code"]{
          width:80px;
          vertical-align:top;
            }
input[name="yanzheng"]+img{
	vertical-align: top;
            }
      input[type="submit"]{
	border:none;
	width: 127px;
	height: 44px;
	color:white;
	font-size: 20px;
	font-weight: bolder;
	background-image: url("C:/Users/Administrator/Desktop/zc_btn01.jpg");
                           }
      input[type="submit"]:hover{
	background-image: url("C:/Users/Administrator/Desktop/zc_btn02.jpg");
                            }
    
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读