【HTML基础习题】HTML5+CSS3做问卷星登录页面
源代码下载地址：https://download.csdn.net/download/weixin_44893902/12839539
码云仓库地址： https://gitee.com/ynavc/WJX
演示地址：http://ynavc.gitee.io/wjx
演示连接：https://www.wulihub.com.cn/go/QowRNQ/index.html
效果图：
图片素材（放到 img文件夹下）：img.zip
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>问卷星_登录页面</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div id="wrap">
<!--头部-->
<div id="header">
<div id="top_l">
<a href="#"><img src="img/logo.png"/></a>
</div>
<div id="top_f">
<a id="text_zc" href="#">注册</a>
<a id="text_fhsy" href="#">返回首页</a>
</div>
</div>
<!--中间内容部分-->
<div id="content">
<h1>问卷星登录</h1>
<form action="login" method="post">
<input id="input_1" type="text" value="" placeholder="用户名/Email/手机" />
<br />
<input id="input_2" type="text" value="" placeholder="请输入登录密码"/>
<br />
<input id="input_3" type="checkbox" value="" />
<a id="a_1" >下次自动登录</a>
<a id="a_2" href="#">忘记用户名/密码？</a>
<br />
<input type="submit" id="input_4" value="登录" />
</form>
<a id="a_3" href="#">立即注册</a>
<div id="content_foot_1">第三方登录</div>
<hr id="content_foot_2"></hr>
<div id="content_foot_3_1"><div class="img50"><img src="img/qq_hover.jpg"/></div>QQ登录</div>
<div id="content_foot_3_2"><div class="img50"><img src="img/weix_hover.jpg"/></div>微信登录</div>
<div id="content_foot_3_3"><div class="img50"><img src="img/qiye_hover.jpg"/></div>企业微信</div>
</div>
<!--脚部-->
<div id="footer">
<div style="margin-bottom:12px;font-size:20px;color: #a4a4a5;">
《登顶武功山》
</div>
<div style="padding-left:10px;font-size:16px;color: #a4a4a5;">
拍摄于问卷星团队二月徒步之旅
</div>
</div>
</div>
</body>
</html>
CSS代码（放到 CSS文件夹下）：
*{
margin: 0;
padding: 0;
}
#wrap{
margin: 0 auto;
width: 1920px;
height: 926px;
background-image: url(../img/bacg.jpg);
}
#header{
float: left;
width: 100%;
height: 10%;
}
#top_l{
float: left;
padding-left: 50px;
padding-top: 40px;
height: 100%;
}
#top_f{
float: right;
padding-top: 50px;
padding-right: 50px;
height: 100%;
float: right;
}
#top_f a{
margin-left: 20px;
padding: 10px 30px;
text-decoration: none;
color: #FFF;
width: 90px;
height: 48px;
border-radius: 100px;
font-size: 20px;
border: 1px solid #fff;
}
#top_f a:hover{
border: 3px solid #fff;
}
#content{
float: left;
margin: 0 auto;
margin-top: 90px;
margin-left: 700px;
border-radius: 14px;
background-color: white;
width: 490px;
height: 530px;
}
#content h1{
padding: 30px;
text-align: left;
color: #fa911e;
font-weight: bold;
font-size: 24px;
}
#input_1,#input_2{
margin-left: 50px;
font-size: 15px;
border: 1px solid #e6e6e6;
border-radius: 100px;
width: 70%;
height: 48px;
padding: 1px 0 1px 46px;
outline: none;
}
#input_1{
background-repeat: no-repeat;
background-position: left;
background-position: 15px;
background-image: url(../img/user.png);
}
#input_1:hover{
border: 1px solid #fa911e;
}
#input_2{
margin-top: 15px;
background-repeat: no-repeat;
background-position: left;
background-position: 15px;
background-image: url(../img/password.png)
}
#input_2:hover{
border: 1px solid #fa911e;
}
#input_3,#input_4{
margin-left: 60px;
margin-top: 35px;
}
#content a_1{
font-size: 16px;
}
#a_2{
font-size: 15px;
margin-left: 130px;
color: black;
}
#a_2:hover{
color: #f08200;
}
#input_4{
background-color: #fa911e;
width: 76%;
height: 48px;
font-size: 23px;
color: white;
border: none;
border-radius: 100px;
letter-spacing: 10px;
}
#input_4:hover{
background-color: #f08200;
}
#a_3{
line-height: 50px;
margin-left: 205px;
text-decoration: none;
color: #FA911E;
font-size: 18px;
}
#a_3:hover{
color: #f08200;
}
#content_foot_1{
width: 100px;
height: 20px;
margin-left: 200px;
margin-bottom: 20px;
color: #888888;
text-align: center;
}
#content_foot_2{
margin-left: 50px;
width: 80%;
float: left;
border-top: 2px solid #e6e6e6;
margin-top: -30px;
}
#content_foot_3_1,#content_foot_3_2,#content_foot_3_3{
font-size: 10px;
margin-left: 140px;
float: left;
width: 50px;
height: 50px;
}
#content_foot_3_1{
background-image: url(../img/qq.png);
}
#content_foot_3_2{
margin-left: 30px;
background-image: url(../img/weixin-nor.png);
}
#content_foot_3_3{
margin-left: 30px;
background-image: url(../img/qiye-nor.png);
}
#content img:hover{
display: none;
}
.img50{
width: 50px;
height: 50px;
}
#footer{
float: right;
padding-top: 700px;
padding-right: 100px;
}
【HTML基础习题】HTML5+CSS3做问卷星登录页面的更多相关文章
- 《零基础学HTML5+CSS3(全彩版)》读书笔记
2019年1月31日星期四 1点 <零基础学HTML5+CSS3(全彩版)>开始全面学习 前提: 11月20日开始学Python,可能因为太累了,也可能遇到了瓶颈,进入了一个迷茫期,1月6 ...
- 用Html5/CSS3做Winform，一步一步教你搭建CefSharp开发环境（附JavaScript异步调用C#例子，及全部源代码）上
本文为鸡毛巾原创,原文地址:http://www.cnblogs.com/jimaojin/p/7077131.html,转载请注明 CefSharp说白了就是Chromium浏览器的嵌入式核心,我们 ...
- 零基础学 HTML5+CSS3 全彩版 明日科技 编著
第1章 基础知识 1.1 HTML概述 1.1.1 什么是HTML 1.1.2 HTML的发展历程 1.2 HTML文件的基本结构 1.2.1 HTML的基本结构 1.2.2 HTML的基本标记 1. ...
- selenium+python+eclipse 实现 “问卷星”网站，登录与检查登录示例！
1.使用selenium+python+eclipse实现的登录"问卷星",问卷星访问地址:https://www.sojump.com/ 2.实现步骤:1)进入链接---首页-- ...
- HTML5+CSS3制作无限滚动与文字跳动效果
㈠用HTML5+CSS3做无限滚动效果 ⑴逻辑分析 ⑵实践示例 前5张图片为所有图片显示区,假设总长度为1100px: 后面出现的五张图片为克隆区,只是将前面的图片拷贝了一份: 然后将前五张和后五张的 ...
- 9款大气实用的HTML5/CSS3注册登录表单
1.HTML5/CSS3仿Facebook登录表单 利用CSS3制作的登录表单的确很漂亮,我们在html5tricks网站上也分享过几款了,比如CSS3密码强度验证表单可以显示密码的强度,这款纯CSS ...
- JavaScript——问卷星自动填写
一.前言: 我们学校要刷学术章,有些学术章又是指定在某个时间点填写问卷星的问卷报名的.但是由于我手速慢,导致总会有些时候报不上名,于是想着搞个代码实现自动填写问卷星的报名表.一顿操作后,在github ...
- 第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计
html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...
- HTML5/CSS3 第一章基础
HTML5/CSS3基础 1. HTML 1.1 什么是HTML HTML是用来制作网页的标记语言 HTML是Hypertext Markup Language的英文缩写,即超文本标记语言 HTML语 ...
随机推荐
- AFNetworking 网络错误提示data转换字符串
AFN在进行网络交互时,有时候会碰到返回502.500.404的时候.后台的总需要你配合他查出问题所在.但是AFN在返回数据序列化时解析错误只会转成NSData类型的数据,如果直接扔给后台Data的数 ...
- 【JAVA】【JVM】内存结构
虽然jvm帮我们做了内存管理的工作,但是我们仍需要了解jvm到底做了什么,下面我们就一起去看一看 jvm启动时进行一系列的工作,其中一项就是开辟一块运行时内存.而这一块内存中又分为了五大区域,分别用于 ...
- 【C/C++】习题3-2 分子量/算法竞赛入门经典/字符串
给出一种物质的分子式,求分子量.只包含4种原子,分别为C,H,O,N. [知识点] 1.ASCII码 [阿拉伯数字]48~57 [大写字母]65~90 [小写字母]97~122 2.输入循环到n-1的 ...
- 通过静态分析和持续集成 保证代码的质量 （Helix QAC）1
前言 现代软件开发团队面临着很多挑战,这些挑战包括:产品交付期限越来越紧,团队的分布越来越广,软件的复杂度越来越高,而且对软件的质量要求越来越高. 本文分为两个章节.第一章讨论持续集成的原理,持续集成 ...
- pipeline groovy
目录 一.变量 一.变量 1.直接定义 def x="abc" 2.从脚本执行结果赋值变量 branch = "/jen_script/return-branch.sh ...
- Go - 如何编写 ProtoBuf 插件（二）？
目录 前言 定义插件 使用插件 获取自定义选项 小结 推荐阅读 前言 上篇文章<Go - 如何编写 ProtoBuf 插件 (一) >,分享了使用 proto3 的 自定义选项 可以实现插 ...
- 摘要任务工期计算（Project）
<Project2016 企业项目管理实践>张会斌 董方好 编著 先说一个好消息:摘要工期是可以自动计算的. 比如A1.A2.A3.A4四个任务,工期如下图安排: 而他们的摘要任务,就不再 ...
- 资源相关视图（Project）
<Project2016 企业项目管理实践>张会斌 董方好 编著 这里就扯到资源了,资源是啥意思?如果是教科书,怕又是有一个名词解释要背吧,吼吼--其实这个资源在这里的意思基本上猜就能猜到 ...
- matplotlib模块详解
简单绘图,折线图,并保存为图片 import matplotlib.pyplot as plt x=[1,2,3,4,5] y=[10,5,15,10,20] plt.plot(x,y,'ro-',c ...
- AT5221 [ABC140C] Maximal Value 题解
Content 有一个长度为 \(n\) 的数列 \(A\) 未知,已知一个数列 \(B=\{b_1,b_2,...,b_{n-1}\}\),且满足 \(b_i\geqslant \max\{a_i, ...