html与css制作表单注册页面个人理解

最新推荐文章于 2022-12-03 09:56:09 发布

dr-y

最新推荐文章于 2022-12-03 09:56:09 发布

阅读量2k

点赞数 8

分类专栏：前端页面文章标签： html css

本文链接：https://blog.csdn.net/m0_49368195/article/details/108588445

版权

本文探讨了如何使用HTML和CSS制作常见的注册页面。首先，通过设置版心和居中属性来布局页面。然后，分析了h3、a、em标签的一般样式，并详细讲解了reg_form及内部form、ul、li、label和input的样式设定，包括取消默认样式、间距调整、对齐方式等。最后，提到了span标签和i标签的处理。

摘要由CSDN通过智能技术生成

常用的表单注册页面

1. 第一个注册页面

在这里插入图片描述

我的分析思路：

整个内容时居中的，所以需要有一个版心，根据ps测量，内容宽度是1200px，所以我设置版心（.w）为1200px(一般的内容的版心为1200px),再设置居中的属性margin: 100px auto;
整个框架如上图所示，这样就很容易写出代码
接下来，我们来研究h3里面的内容

在这里插入图片描述

一般样式：

*号一般设置（margin,padding）取消标签与标签的间隙

a标签一帮设置(color:#666, text-decoration:none) 取消a自带的下划线

em标签一般设置（font-style:normal）取消他的斜线的效果

具体样式：

位置，字体颜色，垂直居中，字体粗细，字体大小等

分析.reg_form里面的内容

在这里插入图片描述

.reg_form，宽600px，高400px，水平居中：margin:40px auto 0;

.reg_form里面嵌套这form

分析form里面的内容

form里面有一个ul，ul下面嵌套这7个li，因为li有默认样式，需要取消li的默认样式，设置li的样式（list-style:none）,而且li与li上下有间隙，所以设置他的样式为（margin-bottom:15px）
分析li里面的内容

为了让li与li之间对齐，让label变为行内块元素，设置label的高度，宽度，文字靠右对齐（display:inline-block ,width: 100px,height:36px,line-height:36px,text-align:right）

input 标签设置宽高，边框，左右位置（margin-left:15px）

input 设置一般样式（outline:none）
分析span标签里面的内容

i标签和文字i标签和文字
分析li里面的特殊

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GM3IZfLu-1600089640715)(F:\CSDN\前端\常用的表单注册样式.assets\image-20200914204034725.png)]$
分析li里面的特殊

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vMq8VwAx-1600089640717)(F:\CSDN\前端\常用的表单注册样式.assets\image-20200914205036140.png)]$

具体代码

	<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
    
            margin: 0;
            padding: 0;
        }
        
        html {
    
            font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
            color: #666;
        }
        
        a {
    
            color: #666;
            text-decoration: none;
        }
        
        input {
    
            outline: none;
        }
        
        em {
    
            font-style: normal;
        }
        
        li {
    
            list-style: none;
        }
        
        .w {
    
            width: 1200px;
            margin: 100px auto 0;
        }
        
        .register_area {
    
            height: 520px;
            border: 1px solid #ccc;
        }
        
        .reg

最低0.47元/天解锁文章

dr-y

关注

8
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
html与css制作表单注册页面个人理解

常用的表单注册页面1. 第一个注册页面我的分析思路：整个内容时居中的，所以需要有一个版心，根据ps测量，内容宽度是1200px，所以我设置版心（.w）为1200px(一般的内容的版心为1200px),再设置居中的属性margin: 100px auto;整个框架如上图所示，这样就很容易写出代码接下来，我们来研究h3里面的内容一般样式：*号一般设置（margin,padding）取消标签与标签的间隙a标签一帮设置(color:#666, text-decoration:n
复制链接

扫一扫

专栏目录