【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语 ...
随机推荐
- Java 8实现BASE64编解码
Java一直缺少BASE64编码 API,以至于通常在项目开发中会选用第三方的API实现.但是,Java 8实现了BASE64编解码API,它包含到java.util包.下面我会对Java 8的BAS ...
- clickhouse输入输出格式 TSKV CSV
TSKVTSKV格式不适合有大量小列的输出.TSKV的效率并不比JSONEachRow差.TSKV数据查询和数据导入.不需要保证列的顺序. 支持忽略某些值,这些列使用默认值,例如0和空白行.复杂类型的 ...
- When do we pass arguments by reference or pointer?
在C++中,基于以下如下我们通过以引用reference的形式传递变量. (1)To modify local variables of the caller function A reference ...
- 多线程异步操作导致异步线程获取不到主线程的request信息
org.springframework.web.context.request.RequestContextHolderorg.springframework.web.context.request. ...
- 【Java 基础】Collectors 使用小结
Collectors 与集合转换 Collectors toList streamArr.collect(Collectors.toList()); List<Integer> colle ...
- Java Bean 与Spring Bean 的区别
什么是JavaBean: JavaBean是一种JAVA语言写的可重用组件.JavaBean符合一定规范写的Java类,是一种规范.它的方法命名,构造以及行为必须符合特定的要求: 1.所有属性 ...
- springmvc中拦截器的定义和配置
package com.hope.interceptor;import org.springframework.lang.Nullable;import org.springframework.web ...
- 【C/C++】vector 动态二维数组
声明 vector<vector<int> vec; //赋值思路可以从这个很基础的操作里看出来 vector<int> a; a.push_back(1); a.pus ...
- Jenkins获取发版人的人名
目录 一.简介 二.自由风格使用 三.pipeline使用 脚本式 声明式 一.简介 Jenkins在构建记录中,是可以看到谁点的构建的,但pipeline中的全局变量,默认是不支持获取当前构建任务的 ...
- Jenkins动态选择分支/tag
目录 一.简介 二.配置 三.配置tag 四.其它方法 五.List Git Branches插件 一.简介 一般选择分支构建,Git Parameter插件即可.这里是应用pipline的同时,可以 ...