JavaWeb第一次阶段测试

简介：

俩个小时的测试，最后没有完成。还是太菜了。

最终效果图:

幼稚的 boy

要求：

  • 1.整体页面布局如下


  • 2.网页一共分为三栏，其中中间栏目占用空间最大。

  • 3.左边栏当中的链接要求实现悬停变色。

  • 4.右边栏是登录框，当用户提交登录数据的时候要求对登录数据进行检查。
    用户名有如下要求：
    不能为空
    必须超过7 个字符
    只能出现英文、数字和下划线字符。
    密码有如下要求：
    不能为空，
    并且必须超过6 个字符，
    必须同时包含英文、数字和其他符号。
    用户数据的数据有任何一项不满足，必须在点击提交按钮的时候提供反馈信息，反馈信息要求以弹出气泡框的形式显示在相应的输入框上

提示：

1 页面必须使用HTML 和CSS 标准。
2 所有文件必须使用utf-8 编码。
3 可以使用JQuery 实现功能，也可以使用普通JavaScript 方式。
4 不允许在页面中写CSS 样式和Javascript 代码。
5 除header 和footer 部分外，中间内容部分不允许限制高度。
6 选用的颜色不必和原型一样

Html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Java-web测试一</title>
        <link rel="stylesheet" href="css/wg.css" />
    </head>
    <body>
<div id="header">
    <div id="header-content" class="clearfix">
    <div id="logo" class="v-center">
        <img src="images/logo.png"/>
    </div>
    <div id="search" class="v-center">
         <input type="text" name="search_input" placeholder="大家正在搜:深圳查获无人机走私案">
    </div>
    <div id="double-link" class="v-center">
        <a href="#">注册</a>
        <span>|</span>
        <a href="#">登陆</a>
    </div>
    </div>
</div>
<div id="content" class="clearfix">
    
    
    <div id="content-left">
        <div id="nav">
            <ul>
                <li><a href="#"><span>热门</span></a></li>
                <li><a href="#"><span>头条</span></a></li>
                <li><a href="#"><span>视频</span></a></li>
                <li><a href="#"><span>新鲜事</span></a></li>
                <li><a href="#"><span>榜单</span></a></li>
                <li><a href="#"><span>搞笑</span></a></li>
                <li><a href="#"><span>社会</span></a></li>
                <li><a href="#"><span>时尚</span></a></li>
                <li><a href="#"><span>电影</span></a></li>
                <li><a href="#"><span>美女</span></a></li>
                <li><a href="#"><span>体育</span></a></li>
                <li><a href="#"><span>动漫</span></a></li>
            </ul>
        </div>
    </div>
    <div id="content-center">
        <div id="posts">
            <div id="post" class="clearfix">
                        <div id="post-head">
                            <img src="images/head.png" alt="headjpg">
                        </div>
                        <div id="post-title">
                            <div id="post-title-text">
                                这里遇到一个问题:关于ul下的 li里面的a标签字体颜色不能控制a元素继承自li的样式被浏览器的a元素的默认样式给覆盖了解决color: inherit;让a的颜色默认继承父级
                            </div>
                            <div id="post-info" class="clearfix">
                                <span><img src="images/smallhead.png" /></span>                             
                                <span id="reply-name">杨紫</span>
                                <span id="reply-data">今天 16:47</span>
                                <span id="reply-forward"><img src="images/wg1.png"/>29607</span>
                                <span id="reply-send"><img src="images/wg2.png"/>7693</span>
                                <span id="reply-good"><img src="images/wg3.png"/>800045</span>
                            </div>
                        </div>
             </div>
             <div id="post-fen"></div>
             <div id="post" class="clearfix">
                        <div id="post-head">
                            <img src="images/head.png" alt="headjpg">
                        </div>
                        <div id="post-title">
                            <div id="post-title-text">
                                     I love three things in this world, the sun ,the moon and you. The sun for the day, the moon for the night, and you forever!
                            </div>
                            <div id="post-info" class="clearfix">
                                <span><img src="images/smallhead.png" /></span>                             
                                <span id="reply-name">杨紫</span>
                                <span id="reply-data">今天 16:47</span>
                                <span id="reply-forward"><img src="images/wg1.png"/>29607</span>
                                <span id="reply-send"><img src="images/wg2.png"/>7693</span>
                                <span id="reply-good"><img src="images/wg3.png"/>800045</span>
                            </div>
                        </div>
             </div>
             <div id="post-fen"></div>
             <div id="post" class="clearfix">
                        <div id="post-head">
                            <img src="images/head.png" alt="headjpg">
                        </div>
                        <div id="post-title">
                            <div id="post-title-text">
                                    这里遇到一个问题:关于ul下的 li里面的a标签字体颜色不能控制a元素继承自li的样式被浏览器的a元素的默认样式给覆盖了解决color: inherit;让a的颜色默认继承父级
                           </div>
                            <div id="post-info" class="clearfix">
                                <span><img src="images/smallhead.png" /></span>                             
                                <span id="reply-name">杨紫</span>
                                <span id="reply-data">今天 16:47</span>
                                <span id="reply-forward"><img src="images/wg1.png"/>29607</span>
                                <span id="reply-send"><img src="images/wg2.png"/>7693</span>
                                <span id="reply-good"><img src="images/wg3.png"/>800045</span>
                            </div>
                        </div>
                        
             </div>
             <div id="post-fen"></div>
             <div id="post" class="clearfix">
                        <div id="post-head">
                            <img src="images/head.png" alt="headjpg">
                        </div>
                        <div id="post-title">
                            <div id="post-title-text">
                                     I love three things in this world, the sun ,the moon and you. The sun for the day, the moon for the night, and you forever!
                            </div>
                            <div id="post-info" class="clearfix">
                                <span><img src="images/smallhead.png" /></span>                             
                                <span id="reply-name">杨紫</span>
                                <span id="reply-data">今天 16:47</span>
                                <span id="reply-forward"><img src="images/wg1.png"/>29607</span>
                                <span id="reply-send"><img src="images/wg2.png"/>7693</span>
                                <span id="reply-good"><img src="images/wg3.png"/>800045</span>
                            </div>
                        </div>
             </div>
             <div id="post-fen"></div>
        </div>
    </div>
    <div id="content-right">
        <div id="username_msg">
            <span id="umessage"></span>
            <div class="username_arrow"></div>
        </div>
        <input type="text" class="username" id="username" name="username_input" value="" placeholder="邮箱/会员账号/手机号"/>
        <input type="password" class="password" id="password" name="password_input" placeholder="请输入密码"/>
        <input type="checkbox" class="remeber" name="remenberpassword" checked="checked"/><span class="rem-text">记住我</span>
        <div id="password_msg">
        <span id="pmessage"></span>
        <div class="password_arrow"></div>
        </div>
        <a href="#">忘记密码</a>
        <div id="land">
            <button onclick="check()">登陆</button>
        </div>      
    </div>
</div>
<div id="footer" >
    <div id="footer-content" class="clearfix">
         <div id="updata" class="v-center">
              © 1997 - 2019 
           </div>
        <div id="copyright" class="v-center">
               公司版权所有
        </div>
          <div id="footer-links" class="v-center">
            <span>|</span>
            <a href="#">公司简介</a>
            <span>|</span>
            <a href="#">联系方式</a>
            <span>|</span>
            <a href="#">招聘信息</a>
            <span>|</span>
            <a href="#">客户服务</a>
            <span>|</span>
            <a href="#">隐私政策</a>
            <span>|</span>
            <a href="#">广告服务</a>
            <span>|</span>
            <a href="#">网站地图</a>
            <span>|</span>
            <a href="#">不良信息举报</a>
          </div>
    </div>
</div>
        <script type="text/javascript" src="js/wg.js" ></script>
    </body>
</html>

Css

html body {
    margin: 0;
    padding: 0;
    background-color: white
}
/*********************header************************/
#header{
    background-color: white;
}
#header-content{
    margin: 0 auto;/*水平居中*/
    height: 80px;
    width: 1000px;
}
#logo {
    float: left;
}
#search{
    float: left;
    margin-left: 10px;
}
#double-link{
    float: right;
    font-weight: bolder;
}
#double-link span{
    padding-left: 10px;
    padding-right: 10px;
}
#double-link a{
    color: #000000;
}
#header input{
    background-image: url(../images/search.png);/*注意这里是css文件目录下，所以需要上一层*/
    /*这里图片的信息是477*34 所以input的高度是35*/
    padding: 0;/*消去自带的padding*/
    height: 35px;
    width: 414px;/*宽度需要减去padding-lef和padding-right*/
    padding-left: 20px;/*让文字显示在放大镜符号🔍右边*/
    padding-right: 40px;/*让长文字不至于抵达右边距*/
    border: none;/*去掉文本框的边框*/
    outline: none;/*去掉在一些浏览器中input高亮边框*/
}
/*********************content************************/
#content{
    margin: 20px auto;
    width: 1000px;
}
/********content-left********/
#content-left{
    width: 100px;
    float: left;
}
#nav{
    background-color: white;
}
#nav ul{
    list-style: none;/*取消黑点*/
    margin: 0;/*取消ul自带的margin*/
    padding: 0;/*取消ul自带的padding*/
}
#nav li{
    text-align: center;/*里面的链接水平居中*/
    padding: 7px;/*把li撑大一点背景颜色也大一点了*/
    width: 70px;/*ul是100 li给70在右边留点空隙*/
}
/*这里遇到一个问题:关于<ul>下的 <li>里面的<a> 标签字体颜色不能控制
a元素继承自li的样式被浏览器的a元素的默认样式给覆盖了
解决
color: inherit;让a的颜色默认继承父级
*/
#nav ul li:hover{
    background-color: red;
    color: white;
}
#nav ul li a{
    color: inherit;/*让a的颜色默认继承父级*/
}

/********content-center********/
#content-center{
    width: 700px;
    float: left;
}

/*****post*****/
#post{
    height: 100px;
    overflow: hidden;/*这里很重要 后面当title很长的时候能保证不变形*/
}
#post-head{
    float: left;
}
#post-head img{
    height: 90px;
    width: 141;
    padding-top: 5px;/* 因为post的height为100 所以 90+5*2=100*/
}
#post-title{
    float: left;
    height: 70px;
    padding-top: 15px;/* 70+15*2=100 */
    padding-left: 10px;
}
#post-title-text{
    height: 52.5px;/* 70*0.75 */
    width: 500px;
    overflow: hidden;/*标题保持俩行 多余hidden*/
    line-height: 28px;/*为了使全英文也保持俩行 加大间距*/
}

#post-info{
    height: 17.5px;/* 70*0.25 */
    font-size: 10px;
    color: #A9A9A9;
}
#post-info img{
    width: 18px;
    height: 18px;
    top: 4px;/*图片稍微靠上解决*/
    position: relative;
}
#reply-forward{
    position: relative;
    left: 206px;
}
#reply-send{
    position: relative;
    left: 206px;
}
#reply-good{
    position: relative;
    left: 206px;
}
#post-fen{
    height: 1px;
    width: 651px;
    background-color: #808080;
    margin-bottom: 5px;
    margin-top: 5px;
}
/********content-right********/
#content-right{
    width: 200px;
    float: left;
    position: relative;
}
#content .username{
    background-image: url(../images/username.png);
    padding: 0;/*消去自带的padding*/
    height: 39px;
    width: 213px;/*宽度需要减去padding-lef和padding-right*/
    padding-left: 40px;/*让文字显示在图标右边*/
    padding-right: 20px;/*让长文字不至于抵达右边距*/
    border: none;/*去掉文本框的边框*/
    outline: none;/*去掉在一些浏览器中input高亮边框*/
}
#content .password{
    margin-top: 10px;
    background-image: url(../images/pass.png);/*注意这里是css文件目录下，所以需要上一层*/
    padding: 0;/*消去自带的padding*/
    height: 39px;
    width: 213px;/*宽度需要减去padding-lef和padding-right*/
    padding-left: 40px;/*让文字显示在图标🔍右边*/
    padding-right: 20px;/*让长文字不至于抵达右边距*/
    border: none;/*去掉文本框的边框*/
    outline: none;/*去掉在一些浏览器中input高亮边框*/
}
#content .remeber{
    position: relative;
    top: 2px;
}

#content .username:after{
    content: "1";
}

#content #username_msg{
    position: absolute;/*父元素#content-right设置position: relative;*/
    width: 200px;
    height: 35px;
    top: -33px;
    right: -71px;
    background-color: darkorange;
    border-radius: 16px;
    text-align: center;
    visibility:hidden;
}
#content #password_msg{
    position: absolute;
    width: 200px;
    height: 35px;
    top: 85px;
    left: 70px;
    background-color: darkorange;
    border-radius: 16px;
    text-align: center;
    z-index: 1;
    visibility:hidden;
}
#content-right #umessage{
    color: red;
    font-size: 12px;
    position: relative;
    top: 5px;
}
#content-right #pmessage{
    color: red;
    font-size: 12px;
    position: relative;
    top: 5px; 
}
/* 箭头参考:https://www.jb51.net/css/150389.html*/
.username_arrow{
    position:absolute;
    top: 35px;/*箭头的位置调整*/
    right: 19px;
    width:0;
    height:0;
    font-size:0;
    border:solid 7px;
    border-color:darkorange white white darkorange;
}
.password_arrow{
        position: absolute;
    top: -14px;
    right: 18px;
    width: 0;
    height: 0;
    font-size: 0;
    border: solid 7px;
    border-color: white white darkorange darkorange;
}

#content-right span{
    font-size: 10px;
    color: darkgray;
}
#content-right a{
    font-size: 10px;
    color: darkgray;
    position: relative;
    left: 161px;
}
#land{
    margin-top: 10px;
    width: 273px;
    text-align: center;
}
#land button{
    background-color: firebrick;
    width: 271px;
    height: 40px;
    color: white;
    font-size: 15px;
    border: solid 1px white;
}
/*********************footer************************/
#footer{
    background-color: #242424;
}
#footer-content{
    width: 1000px;
    height: 50px;
    margin: 0 auto;
    position: relative;
    color: #808080;
    font-size: 14px;
}
#updata{
    float: left;
    color: white;
}
#copyright{
    padding-left: 20px;
    float: left;
    color: white;
}
#footer-links{
    float: right;
    color: white;
}
#footer-links a{
    color: white;
    padding-left: 5px;
    padding-right: 5px;
}
/*********************辅助样式************************/
/* 清除浮动 */
.clearfix{
    *zoom: 1;
}
.clearfix::after{
    content:".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}
/* 垂直居中 */
.v-center{
    position: relative;
    top: 50%;
    transform: translateY(-50%);/*y值移动负50%即向上移动自身宽度的50%*/
}
/* 水平居中 */
.h-center{
    position: absolute;/*用absolute定位时，要把其上一级的元素样式属性position设置为relative。*/
    left: 50%;
    transform: translateX(-50%);
}
/*垂直且水平居中*/
.vh-center{
     position: absolute;/*用absolute定位时，要把其上一级的元素样式属性position设置为relative。*/
     top: 50%;
     left: 50%;
     transform: translateY(-50%) translateX(-50%);
}

a{
    text-decoration: none;
}

Js

function check(){
    if(!checkUserName()){
        document.getElementById("username_msg").style.visibility='visible'
    }else{
        document.getElementById("username_msg").style.visibility='hidden'
    }
    if(!checkPassWord()){
        document.getElementById("password_msg").style.visibility='visible'
    }else{
        document.getElementById("password_msg").style.visibility='hidden'
    }
}
/*****检查字母数字下划线*****/
function checkUserName(){ 
    let userstr = document.getElementById("username").value; /*别用Document.getElementsByClassName()*/
    console.log(userstr);
    let strReg = /^[0-9a-zA-Z_]{1,}$/;
    if(userstr == null || userstr == undefined || userstr == '') {
        document.getElementById("umessage").innerHTML="用户名不能为空";
//      console.log("用户名不能为空");
        return false;
    } else if(userstr.length < 8) {
        document.getElementById("umessage").innerHTML="用户名必须大于7个字符";
//      console.log("用户名必须大于7个字符");
        return false;
    } else if(!(strReg.test(userstr))) {
        document.getElementById("umessage").innerHTML="只能出现英文、数字和下划线字符";
//      console.log("只能出现英文、数字和下划线字符");
        return false;
    }else{
        return true;
    }
    
} 
/***检查密码*****/
function checkPassWord(){
    let passstr = document.getElementById("password").value;
    console.log(passstr);
    let reg = /^(?!([a-zA-Z\d]+|[a-zA-Z`~\!@#\$%\^&\*\(\)\-_=\+\[\{\]\}\\\|;:\'\",<\.>\/\?]+|[\d`~\!@#\$%\^&\*\(\)\-_=\+\[\{\]\}\\\|;:\'\",<\.>\/\?]+)$)[a-zA-Z\d`~\!@#\$%\^&\*\(\)\-_=\+\[\{\]\}\\\|;:\'\",<\.>\/\?]+$/;
    if(passstr == null || passstr == undefined || passstr == '') {
        document.getElementById("pmessage").innerHTML="密码不能为空";
//      console.log("密码不能为空");
        return false;
    } else if(passstr.length < 7) {
        document.getElementById("pmessage").innerHTML="密码必须大于6个字符";
//      console.log("密码必须大于6个字符");
        return false;
    } else if(!(reg.test(passstr))) {
        document.getElementById("pmessage").innerHTML="同时包含英文、数字和其他符号";
//      console.log("同时包含英文、数字和其他符号");
        return false;
    }else{
        return true;
    }
    
}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 28,403评论 1赞 45
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 14,697评论 1赞 92
  • 面试问题答案综合版(web)
    $HTML， HTTP，web综合问题 1、前端需要注意哪些SEO 2、 的title和alt有什么区别 3、HT...
    Hebborn_hb阅读 10,131评论 0赞 20
  • 导引养生0918玉东
    今天孩子军训，不知道为什么我会觉得很轻松。于是想可以安排一个美容，或者按摩，或者艾灸，或者把脏车给洗一洗，但是，惯...
    苏梅LI阅读 1,747评论 0赞 3
  • 你，坚持了吗
    有一个习惯，日历的每一个月都会写一句话勉励自己或是警醒自己。 这个月和上个月写的都是这句话：“如果你不努力，一年以...
    鑫瑤阅读 3,222评论 7赞 2

友情链接更多精彩内容