目录
英文字母形式:color:black; 十六进制形式:color:#DAE8FC; rgb形式:color:rgb(253,2217,106)
项目源码:
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;
}