精华内容
下载资源
问答
  • 2019-04-21 17:00:27

    HTML部分

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>登陆页面</title>
            <link rel="stylesheet"href="css/new_file.css"type="text/css"/>
        </head>
        <body>
        <div class="container">
            <div class="main">
                <div class="sideleft">
                    <h1>为天地立心,为生民立命,为往圣继绝学,为万世开太平</h1>
                    <h4>寄意寒星荃不察,我以我血荐轩辕。</h4>
                    </br></br></br>
                    <p>草原之上,雄鹰展翅。</p>
                    <p>如花似朵,含苞待放。</p>
                    <p>广阔天地,策马奔驰。</p>
                    <p>学业有成,扬帆远航。</p>
                </div>
                <div class="sideright">
                    <div class="index">
                        <form action="#" method="get">
                            <p class="headline">用户登陆</p>
                            <p class="astyle">用户名:</p>
                            <input type="text" value="">
                            <p class="astyle">密码:</p>
                            <input type="text" value="">
                            <input type="submit" value="登陆" name="login" >
                            </br>
                        </form>
     
                    </div>
                </div>
            </div>
            <div class="footer">
                    <ul>
                        <li><a href="#">厚德</a></li>
                        <li><a href="#">远志</a></li>
                        <li><a href="#">笃学</a></li>
                        <li><a href="#">创新</a></li>
                        <li><a href="#">河北北方学院</a></li>
                    </ul>
     
            </div>
     
        </div>
    </body>
    </html>

    CSS部分

    *{margin: 0;padding: 0;list-style: none;}
    body{
        background:url(../img/123.png) no-repeat 0 0/cover; ;
        background-size: 100%; 
    }
    .container{
        width: 1200px;
        height: 870px;
        margin: 0 auto;
    }
    .main{
        width:1200px;
        height: 450px;
    }
    .sideleft{
        width:460px;
        height: 250px;
        float: left;
        font-size: 18px;
        padding:130px 130px;
    }
    .sideright{
        width: 480px;
        height: 450px;
        float: right;
    }
    .sideright .index{
        width: 330px;
        height: 350px;
        background-color:rgba(255,255,255,0.75);
        margin: 155px 90px;
    }
    .headline{
        font-size: 22px;
        text-align: center;
        padding: 20px;
    }
    input[type="text"],
    input[type="submit"]{
        -web-kit-appearance:none;
          -moz-appearance: none;
          display: block;
          margin: 0 auto;
          width: 260px;
    }
    input[type="text"]{
        height:35px;
        border-radius:3px;
        border:2px solid #c8cccf;
        color:#6a6f77;
        outline:0;
    }
    input[type="submit"]{
        margin-top: 25px;
        height: 35px;
        background: #357eb8;
        color: #bcedff;
        font-weight: bold;
        font-size: 20px;
    }
    .astyle{
        margin: 5px 0 5px 42px;
        font-size:22px; 
        color: #6a6f77;
    }
    .cstyle a{
        text-decoration: none;
    }
    .footer{
        width: 1000px;
        margin:100px auto;
    }
    .footer ul{
        margin-left: 100px;
    }
    .footer ul li{
        float: left;
    }
    .footer ul li a{
        text-decoration: none;
        color: black;
        border-left: 5px solid black;
        padding:0 10px;
    }

    更多相关内容
  • 大学生Web前端静态网页设计期末大作业(高分必看)大学生Web前端静态网页设计期末大作业(高分必看)大学生Web前端静态网页设计期末大作业(高分必看)大学生Web前端静态网页设计期末大作业。大学生Web前端静态网页...
  • web前端登录页面设计技巧

    千次阅读 2019-10-25 23:08:44
    好的用户体验度,将提升产品的品质,赋予产品独特的气质,登录界面虽然功能简单,但是也是一个发挥情感化设计,提升用户体验;想要做的完美,必须要掌握以下几点 1、精致的外观 外观的重要性不言而喻,外观是给用户...

    首先我们先来了解的用户登录流程,先点击是注册,然后是登录,再有就是忘记密码,然后,每个功能做一个界面,这是最早的流程,现在越来越多的大型网站把登录和首页放在一起设计,原因就在于用户体验度;好的用户体验度,将提升产品的品质,赋予产品独特的气质,登录界面虽然功能简单,但是也是一个发挥情感化设计,提升用户体验;想要做的完美,必须要掌握以下几点

    1、精致的外观

    外观的重要性不言而喻,外观是给用户的第一感觉,它的覆盖面比较广,比如配色,布局,文字大小,质感,创意,图标等,还包括鼠标特效,选中状态,提示信息等。做为web前端设计师,在重视代码的准确性的同时,也需要和像素和颜色搞好关系,必须一个像素一个像素地检查屏幕上的每个细节,确保相关的图像准确对齐。

    2、完美用图

    在web前端开发中,配图非常具有表现力,它与颜色关系密切。所以大部分ui设计网页设计职位,对手绘能力出众者格外青睐,许多表现技法都是借鉴了绘画的表现技法。绘画与网页设计的的结合,具有独特的艺术魅力,从而更具表现力。越来越多的网页设计师,将插画运用到网页设计中来,生动有趣温情的配色和用途,能迅速的抓住用户的眼球,让登录界面的更加具有亲和力

    3、品牌传达

    虽然仅仅只是一个登录界面,客户停留的时间也比较短,但是作为开发者,我们还是要在里面强化品牌,设计以人为本,以人为本的设计不仅能提高产品的品质,还能提高设计的艺术水平,而登录页面是体现品牌文化,传播品牌理念的绝佳位置;表现形式可以是图片广告的形式,或者是文字链接的形式,或者是动画的形式等

    4、登录框

    登录界面要说谁最重要,肯定是登录框了,随着用户越来越追去人性化的操作,现在主流的登录框是越来越大,大输入框,可以让用户输入起来感到心情舒畅,登录过程非常愉悦,而且在显示器越来越大的今天,登录框和登录按钮必须要大而明显!后期还需要web工程师添加更好的用户体验效果,比如输入信息的正确性等

    5、简约而不简单

    用户看到的也许只是一个登录界面,但是作为设计师来说,里面包括的知识点是很多的,比如登录框的高度,宽度,比例,阴影,颜色,形状,纹理,背景等。作为web前端设计师来说,需要各种判断,兼容,跳转。总之现在的登录界面越来越倾向于简洁,最大程度的减少用户分心,从视觉的角度来看,简约的设计是平静的,取消了多余的元素,提高整体的视觉效果,实现真正的简约而不简单。
    在这里插入图片描述

    展开全文
  • Web前端页面设计毕业论文.pdf
  • 用jquery手写的web登录界面前端代码,欢迎讨论相互学习。
  • Web前端设计 苏州园林网页 网站首页、景点一览、留言反馈页(基于HTML5表单)实现响应式分布,增加互动效果,外部CSS样式
  • 主页设计布局是在网站的左上... 首先选定 本网页制作工具是前端开发利器: WebStorm,创建前端项目工程,并创建相应的文件夹,存放各个css、js,还有网页中用到的各种图片放到pic文件夹中,背景音乐放到music文件夹中。
  • 期末结课大作业 html+css+javascript网页设计实例 企业网站制作,资源里面有网页的HTML文件、CSS文件、JAVASCRIPT文件和网页中的图片文件,用于大学web网页课程设计参考以及相关从业人员参考学习
  • 原始HTML+CSS+JS页面设计,可以学习学习,大学网页设计作业,很好的,很好的~~这是一个不错的网页制作,画面精明,非常适合初学者学习使用。
  • web前端课程设计.zip

    2020-05-31 16:46:26
    适用于大学网页设计课,非专业选修课,课程设计(大作业)。仅使用了CSS和HTML语言,结构简单,仅用于应付作业
  • web前端期末节课大作业 ,html+css+javascript实现~HTML学校后台用户登录界面模板,江西师范大学软件学院毕业设计选题,选项卡切换不同角色的登录,分别是学生登录、导师登录、教务登录,有表单验证功能。
  • web大作业制作网页代码 前端网页设计作业【带设计说明报告】 web网页大作业
  • web前端设计,使用html,css等基础技术设计个人主页。包括欢迎页面和子页面,欢迎页面提供个人空间入口和子页面目录;子页面分别就不同的角度介绍展示空间情况。
  • 购物网站web前端

    2020-11-02 21:54:33
    使用bootstrap框架,html+css技术编写
  • web前端设计与开发期末作品/期末大作业,共有8个静态页面,主题是中华传统美食之旅,图片非常精美且诱人噢。
  • WEB前端实战——制作登录页面

    千次阅读 多人点赞 2021-01-31 10:02:15
    参考视频:https://ke.qq.com/course/320021 代码 <!DOCTYPE html> <html lang="en"> <...登录页面</title> <style> body { background-image: url("img/星空.jpg");

    参考视频:https://ke.qq.com/course/320021

    代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录页面</title>
        <style>
            body {
                background-image: url("img/星空.jpg");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-attachment: fixed;      /*图片铺满整个页面*/
            }
            .main {
                width: 500px;
                height: 300px;
                box-shadow: 0 5px 20px 0 #e8e8e8;
                background-color: white;
                border-radius: 10px;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
            }
            .main h2 {
                color: lightseagreen;
                margin-left: 150px;
            }
            .form {
                margin-top: 30px;
                margin-left: 60px;
            }
            .form input {
                width: 300px;
                height: 25px;
                border: 1px solid lightgray;
                outline: none;      /*输入内容时不显示边框*/
            }
            .form button {
                width: 150px;
                height: 30px;
                color: white;
                background-color: lightseagreen;
                border-style: none;
                border-radius: 5px;
                font-size: 15px;
                margin-top: 15px;
                margin-left: 130px;
                outline: none;
                cursor: pointer;    /*光标放到上面有小手*/
            }
        </style>
    </head>
    <body>
        <div class="main">
            <h2>欢迎访问管理系统</h2>
            <form action="" method="get" class="form">
                用户名: <input type="text", name="username"><br>    <!--输入的用户名保存到username变量,传回后端-->&nbsp;&nbsp;&nbsp;码: <input type="password", name="password"><br>
                <button type="submit">登录</button><br>
            </form>
        </div>
    </body>
    </html>
    

    效果

    在这里插入图片描述

    展开全文
  • 大工20春《Web前端网页制作》大作业答案
  • h5+css+javascript+php制作简单交互网页,内含轮播图与PHP数据渲染公告栏
  • 这是一个模仿投票的网站,可以注册登录然后投票,投票有条形图,实时更新,还可以看排行榜的web前端在线网站投票系统 包含项目文件+报告
  • Web前端设计基础——HTML5、CSS3、JavaScript》张树明版前十章课后习题答案
  • web前端课程设计

    2019-01-01 10:58:16
    基于bootstrap的新闻类网页,包含服装、美发、美容、养生、运动等分类的内容。
  • WEB前端开发-案例汇总(81例),前端资源大汇总;适合初学者进阶,几乎涵盖前端开发所有案例,可供学习及设计参考。
  • web前端制作一个简单的登录页面

    千次阅读 2021-06-10 17:21:50
    网页制作web前端制作一个简单的登录网页代码实现效果图代码效果图夏夏天是个多姿多彩的世界。在这个季节,是最充满快乐的。我们在这个夏天中好好的学习,努力的学习,抱着一种兴趣态度的去学习,只有这样我们的生活...

    d7b66f38b09f3972a0a4f9ca9187f7cf.png

    网页

    制作

    web前端

    制作一个简单的登录网页

    96d32f6e048fe6e6abaff45417477bb7.gif

    2ace2a9018ebe3d6c8e5c04d748cff11.png

    43d713287ee76b40f5845c3af1b573a4.gif

    1de6a0c3654f506c7c7fc7d19311d61e.gif

    代码实现效果图

    cb449666d25b1496158b108a0c16e255.gif

    96d32f6e048fe6e6abaff45417477bb7.gif

    ceac1a92ab6ebc9423aac874522dccde.png

    43d713287ee76b40f5845c3af1b573a4.gif

    1de6a0c3654f506c7c7fc7d19311d61e.gif

    代码效果图

    cb449666d25b1496158b108a0c16e255.gif

    96d32f6e048fe6e6abaff45417477bb7.gif

    b94ebdf6edb21b8f550eb791c332e6dc.png

    43d713287ee76b40f5845c3af1b573a4.gif

    1de6a0c3654f506c7c7fc7d19311d61e.gif

    62bb1293d4b9b6d05c12adacfb7ecb7d.png

    80e3923177bf9fa9c3025e96fec99ee2.png

    f92752e82e701a4da524d8d58315a73a.png

    夏天是个多姿多彩的世界。

    在这个季节,是最充满快乐的。

    我们在这个夏天中好好的学习,努力的学习,抱着一种兴趣态度的去学习,只有这样我们的生活才会越来越有趣,加油,成为程序员的路上,磕磕碰碰只要经历的多了,相信你就会非常了解编程这个行业的过程,坚持下去。

    全部代码:

    -----------------------------------------

    *{

    margin:0;

    padding:0;

    }   /* 通用选择器,清楚标签默认的内外边距*/

    body{

    font-size:12px;   /*文字大小的属性设置 网页正文中巨大多数都是12px*/

    font-family:"宋体";    /*宋体是所有人电脑都有的字体*/

    width:450px;

    margin:0 auto;  /* 以上2行代码设置布局的盒子居中对齐*/

    margin-top: 220px;  /*向下推动220px;也就是像素*/

    }

    ul{

    list-style:none;   /*清楚列表的项目符号类型*/

    }

    a{

    text-decoration:none;   /*去掉超级链接的下划线*/

    }

    #a{ width: 450px; height: 250px; background: #56d6a1;}

    .a{ margin-left: 161px;}

    web网页制作

    账号:

    密码:

    accb4cfb0a8f0aa5c8f5477487753aec.gif

    accb4cfb0a8f0aa5c8f5477487753aec.gif

    关注我们清凉一夏

    展开全文
  • html+css+javascript做的网页,有音乐网站,个人博客,个人主页,网页设计网站五套。 可以根据自己的需要修改样式,适合初学者下载使用。
  • HTML WEB前端大屏页面源代码 大数据可视化WEB页面源代码
  • 主要基于HTML5+css3实现的中华传统文化网页设计包含源码、设计文档
  • Web前端大作业2.0.zip

    2021-04-03 19:29:15
    首先选定 本网页制作工具是前端开发利器: WebStorm,创建前端项目工程,并创建相应的文件夹,存放各个css、js,还有网页中用到的各种图片,以及除了主页面index.html之外的二级页面,其存放在html文件夹下,在各个...
  • 根据清华大学出版社的HTML5网页前端设计实战课后实战 代码与注释如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>用户注册页面实例</title> <style>...
  • Web前端

    2021-02-08 23:47:58
    html + css + JavaScript 网页设计
  • Web前端期末大作业

    2020-12-17 08:53:32
    大学生网页设计大作业-以下5个网页设计制作作品自己任选: ...3.大学生期末网页大作业-6页面网页设计,是个人主页类型。包含了6个页面,包含视频、脚本等元素。水平不高,但交选修作业就足够了。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 182,477
精华内容 72,990
关键字:

web前端登录页面设计