QQ注册页（纯静态页面）适合刚学完html和css的小伙伴练手

最新推荐文章于 2024-06-27 19:18:01 发布

柳智麒

最新推荐文章于 2024-06-27 19:18:01 发布

阅读量1.1k

点赞数 29

文章标签： html css 前端

本文链接：https://blog.csdn.net/DL_dldlhhj/article/details/138311400

版权

本文详细介绍了HTML中的表单元素（如输入框、选项菜单、注册按钮）、CSS样式（包括字体大小、颜色、行高和布局），以及如何使用CSS控制密码输入和表单复选/单选功能。

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

英文字母形式：color:black; 十六进制形式：color:#DAE8FC; rgb形式：color：rgb(253,2217,106)

3.文字行高：

项目源码：

GitHub - Atopos-suyu/QQ-designed-2023.7.26: 编程二月，码有小成

页面展示：

HTML笔记

标准格式：

输入框

个性签名是个多行输入框，超过长度后会自动换行，而单文本输入框不会

<!-- name属性表示表单元素的名称，placeholder属性表示表单元素的占位文本 -->
<textarea
  name="sign"
  rows="5"
  cols="30"
  placeholder="请输入个性签名"
></textarea>

rows：行数（高度）cols:文本的可视宽度

2.密码输入框：用户输入的内容将会以黑圆点形式显示

<!-- type属性表示表单元素的类型，name属性表示表单元素的名称，placeholder属性表示表单元素的占位文本 -->
<input type="password" name="password" placeholder="密码" />

3.单选框：大部分表单元素都是通过改变标签属性type的值来实现的，属于同一道单选题的每个单选按钮，都应该有相同的name属性值。点击文字也能选中复选框。

<input type="radio" name="gender" value="male" />男
<input type="radio" name="gender" value="female" />女

显示效果：O男 O女

3.复选框：标签类型是checkbox

兴趣复选框：name属性值相同

<label> <input type="checkbox" name="interest" value="coding" />编程 </label>
<label> <input type="checkbox" name="interest" value="other" />其他 </label>

选项菜单+注册按钮

1.选项菜单

每个选项用标签表示，一组选项用包裹：

<select name="career">
  <option value="default">请选择职业</option>
  <option value="staff">公司职员</option>
  <option value="other">其他</option>
</select>

这是一个单选菜单，如果用户选择了“学生”，那么提交的数据是：career:"student"

多选菜单的话则在name标签后面加multiple：

2.注册按钮

 <button type="submit">注册</button>

CSS笔记

1.字体大小：

<!-- 设置字体的大小为12px -->
<p style="font-size: 12px;">
  一个轻量级和模块化的前端框架，用于开发快速和强大的web接口。
</p>

2.字体颜色：

英文字母形式：color:black; 十六进制形式：color:#DAE8FC; rgb形式：color：rgb(253,2217,106)

rgba形式：color:rgba(253,217,106,0.3)a代表透明度

<h3 style="color:#ff9a9e;font-weight:700;font-size: 24px;">UIzards</h3>
<h4 style="font-size: 16px;color: #474d5d;font-weight: 400;">
  Senior UX Designer
</h4>

设置文字对齐格式：

text-align:center;文字居中对齐

text-align:left;文字左对齐

text-align:right;文字右对齐

3.文字行高：

<p style="line-height:32px;">
  We understand every aspect of project and we put a great amount of time in
  understanding the project.
</p>

使文字上下居中：

<button
  style="width: 120px;height:50px;text-align: center;line-height:50px;color:white;font-size: 18px;"
> 提交</button>

设置字间距格式：letter-spaceing:30px

设置字体：font-family: 'Goudy Bookletter 1911', sans-serif, 'Gill Sans Extrabold';

字体粗细：其值可以是100-900，英文lighter(细)、normal（正常粗细）、bold(粗)、bolder（更粗）

<!DOCTYPE html>
<html lang="en">
  <head>  
    <meta charset="UTF-8" />
    <!--rel属性的stylesheet值被所有浏览器支持-->
    <link rel="stylesheet" type="text/css" href="./index.css" />
    <title>QQ注册</title>
  </head>
  <body>  <!--class是定义类的关键字，nav是类名-->
    <nav class="nav">  
      <a class="qq">  
        <img src="https://document.youkeda.com/P3-1-HTML-CSS/1.9/3-qq/qq.png" />
        <span>QQ</span>  
      </a>
      <ul class="right">  
        <li class="bright">
          <img
            src="https://document.youkeda.com/P3-1-HTML-CSS/1.9/3-qq/bright.png"
            alt="QQ靓号" />  <!--定义描述图像的替换文本-->  
        </li>
        <li class="language">
          <span>简体中文</span>  
          <img class="arrow"
            src="https://document.youkeda.com/P3-1-HTML-CSS/1.9/3-qq/arrow-down.png" />
        </li>
        <li class="contact">意见反馈</li>
      </ul>
    </nav>

    <main class="main">  

      <div class="bg"></div>  <!--用来附上左边的图片--> 

      <div class="content">  
        <div class="core">
          <h1>欢迎注册QQ</h1> 
          <div class="subtitle">
            <h2>每一天，乐在沟通。</h2>  
            <a class="free-bright">免费靓号</a>
          </div> 
          <form action=""><!--一个处理此表单信息的程序所在的URL，“”提交到当前页面-->
            <input type="text" placeholder="昵称" />
            <input class="password" type="password" placeholder="密码" />
            <div class="mobile">
              <select>  <!--选项菜单标签-->
                <option>+86</option>
                <option>+852</option>
              </select>
              <input type="text" placeholder="手机号码"  />
            </div>
            <p class="mobile-tip">可通过该手机号找回密码</p>
            <button class="submit">立即注册</button>  
            <div class="agreement">
              <input type="checkbox" />  <!--checkbox组件复选框-->
              <label>我已阅读并同意相关服务条款和隐私政策</label>
            </div>
          </form>
        </div> 
        <footer>Copyright © 1998-2019Tecent All Rights Reaserved</footer>
      </div>   
    </main> 
  </body>
</html>
<!DOCTYPE html>

html,body {            /*margin:0 auto使盒子在父盒子中左右居中，但必须得有宽度*/
  height: 100%;        /*display:block：行内元素转成块元素，宽高有效*/
  margin: 0;  /*撑满上下的屏幕并去除默认的样式*/
}
ul,li {
  margin: 0;  /*清除标签默认的外边距*/
  padding: 0;  /*清除标签默认的内边距*/
}
li {
  list-style: none;  /*去除li标签前面的小圆点*/
}
h1,h2 {
  margin: 0;
}
p {
  margin: 0;
  padding: 0;
}
/* 浏览器都有自己的默认样式，以上部分为清除浏览器默认样式 */
.nav {        /*浏览器默认的文档流布局static，top，left，right等属性无效*/
  position: fixed;  
  top: 0;
  left: 0;
  right: 0;
  padding: 0 20px;  /*上下内边距为0，左右内边距为20px*/
}
a.qq {
  float: left; 
  margin-left: 10px;
  margin-top: 20px;
  cursor: pointer;  /*可以让鼠标停留在元素上，变成可点击的形状*/
  font-size: 0;  /*消除元素之间的空隙*/
}
a.qq > img {  /*子选择器*/
  width: 40px; 
  height: 40px;  
  vertical-align: middle;  /*内联级元素相对于父元素垂直对齐*/
}
a.qq > span {
  vertical-align: middle;
  font-size: 36px;  
  line-height: 43px;  
  margin-left: 6px;
}
ul.right {
  float: right; 
}
ul.right > li {
  float: left;  
  margin-top: 20px;
  margin-right: 40px;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
}
.bright {
  width: 95px;
  height: 34px;
}
.bright > img {
  width: 100%;
  height: 100%;
}
ul.right > li.language {
  font-size: 0;
  margin-top: 30px;
}
ul.right > li.language span {
  font-size: 16px;
  vertical-align: middle;
}
ul.right > li.language .arrow {
  vertical-align: middle;
  width: 12px;
  height: 8px;
}
ul.right > li.contact {
  margin-top: 30px;
}

.main{
  height: 100%;  /*这里的%是相对于父元素的*/
  overflow: hidden;
}
.bg{
  float: left;
  width:480px;
  height: 100%;
  background: url(http://qgt-document.oss-cn-beijing.aliyuncs.com/P3-1-HTML-CSS/1.11/bg.png) no-repeat center;
  background-size: cover;  /*满足图片长宽中较小的一方撑满屏幕*/
}                          /*contain就是满足图片长宽中较大一方撑满屏幕*/
.content {
  position: relative;  /*相对定位后调整是相对于当前元素进行调整*/
  box-sizing: border-box;  /*border-box的width包含了content/padding/border*/
  width: calc(100% - 480px);
  margin-left: 480px;
  height: 100%;
  overflow: hidden;
}
.core {
  width: 480px;
  height: 576px;
  position: absolute;  /*寻找最近的非static的祖先节点进行偏移*/
  left: 50%;
  top: 50%;
  margin-left: -240px;
  margin-top: -288px;  /*元素垂直居中对齐*/
}
h1 {
  font-size: 44px;
  line-height: 62px;
  font-weight: normal;  
}
.subtitle {
  margin-top: 13px;
  height: 34px;
}
h2 {
  font-size: 27px;
  line-height: 34px;
  font-weight: normal;
  float: left;
}
.free-bright {
  float: right;
  font-size: 23px;
  line-height: 34px;
  color: #359eff;  
  cursor: pointer;
}
form {
  margin-top: 63px;
}
select,input {  /*select和input设置成相同样式，减轻代码量*/
  box-sizing: border-box;
  width: 480px;
  height: 52px;
  border: 1px solid #aaaaaa;  /*设置边框线.22*/
  border-radius: 4px;  /*设置圆角*/
  padding: 15px 20px;
  font-size: 19px;
}
.mobile,input.password {
margin-top: 32px;
}
.mobile > select {
width: 154px;
background-color: #ffffff  /*背景颜色*/
/*outline: none;*/  /*会移除浏览器的默认聚焦样式*/
}
.mobile > input {
width: 307px;
float: right;
}
::placeholder {  /*伪元素：：占位符*/
color: #aaaaaa;
font-size: 19px;
font-weight: normal;
}
.mobile-tip {
margin-top: 10px;
font-size: 13px;
line-height: 14px;
color: #999;
}
.submit {
margin-top: 38px;
width: 480px;
box-sizing: border-box;
height: 60px;
background-color: #3487ff;
border: 1px solid #3083ff;
box-sizing: border-box;
box-shadow: 0px 5px 8px rgba(24, 95, 255, 0.1);/*元素的框架上添加阴影效果*/
border-radius: 4px;
outline: none;
font-weight: 200;
font-size: 24px;
line-height: 60px;
color: #ffffff;
cursor: pointer;
}
.agreement {
margin-top: 32px;
font-size: 13px;
line-height: 30px;
color: #aaaaaa;
}
.agreement > input {
width: 18px;
height: 18px;
vertical-align: middle;
padding: 0;
margin: 0;
}
.agreement > label {
vertical-align: middle;
}
footer {
position: absolute;
width: 344px;
bottom: 26px;
left: 50%;
margin-left: -172px;
font-size: 14px;
line-height: 20px;
text-align: center;  /*行内元素水平居中*/
color: #bbbbbb;
}