前端工程师面试题

来源：互联网发布：编译arm linux内核4.5 编辑：程序博客网时间：2024/05/16 11:06

请按要求完成index.html（页面标题为西安新闻“）和index.CSS的所有代码：

效果图：

有一则图片新闻，效果如上，要求如下：

总体：左图右文，总宽度未知，图文之间间距15px

左图：图片地址假设为http://163.com/x.jpg，图片宽高均为100px

右文：字体为宋体，行高为25px，最多显示4行文字

右文中的标题：标题要求单行显示并且超出时显示”…“，标题文字为粗体，大小为16px，黑色

右文中的段落：段落文字大小为14px，颜色为#666
答案：

<!DOCTYPE html><html>    <head>     <meta charset="UTF-8">     <title>西安新闻</title>     <style type="text/css">     body{     font-family: "宋体"；     }     img{     width: 100px;     height: 100px;     float: left;     background-color: #0079BE;     }     h1{     font-weight: bold;     font-size: 16px;     text-overflow: ellipsis;     white-space: nowrap;     color: black;     }     p{     font-size: 14px;     color: #666;     height: 75.2px;     }     h1,p{     margin: 0;     line-height: 25px;     overflow: hidden;     }     .news{     height: 100px;     width: 185px;     float: left;     margin-left: 15px;     }     </style>    </head>    <body>         ![背景图片](http://upload-images.jianshu.io/upload_images/2508642-c7f9ac2eeb889aa1.jpg)         <div class="news">             <h1>标题文字标题文字标题文字</h1>             <p>段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字                 段落文字段落文字段落文字段落文字</p>         </div>    </body></html>

2.

已知登录表单效果图如下：

要求如下：
总体：表单提交地址假设为“/login”
标题：“登录网易通行证”为14px的微软雅黑字体，加粗，行高16px，距离第一个输入框15px；
左边文字：“用户名：”和“密码：”所在列列宽60px，文字为12px的宋体，文字与输入框垂直居中对齐；
输入框：输入框宽200px高20px（含边框），边框粗细为1px，颜色为#ddd，两个输入框以及按钮之间间距为15px
按钮：按钮与输入框左对齐，按钮宽40px高20px，蓝底白字无边框，按钮文字为12px的宋体且水平垂直都居中

label{ display: table-cell; width: 60px; font-size: 12px; font-family: "宋体"; vertical-align: text-top; } input{ display: table-cell; width: 200px; height: 20px; box-sizing: border-box; border:1px solid #ddd; margin-bottom: 15px; } button{ display: table-cell; width: 40px; height: 20px; color: white; background-color: #54AEDE; border:none; font-size: 12px; font-family: "宋体"; text-align: center; vertical-align: middle; cursor: pointer; } p{ display: table-cell; } </style></head><body> <h1>登陆网易通行证</h1> <form action="/login" method="post"> <div class="table-row"> <label for="name">用户名:</label> <input type="text" name="name"> </div> <div class="table-row"> <label for="password">密码:</label> <input type="password" name="password"> </div> <div class="table-row"> <p></p> <button type="submit">登陆</button> </div> </form></body></html>

3.

请完成以下效果图的HTML（不需要写CSS）

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>照片冲印价格详情</title></head><body>    <table border="1">    <caption>照片冲印价格详情</caption>    <thead>        <tr><th rowspan="2">相片尺寸</th><th colspan="2">相纸（元/张）</th></tr>        <tr><th>富士</th><th>柯达</th></tr>        </thead>        <tbody>        <tr><th>6寸</th><td>0.45</td><td>0.6</td></tr>        <tr><th>10寸</th><td>3.89</td><td>5</td></tr>    </tbody>    <tfoot>        <tr><td colspan="3">运费8元/单,满99元免运费</td></tr>    </tfoot>    </table></body></html>

4. 请按以下效果图和要求完成下拉菜单的HTML和CSS：

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>下拉菜单</title> <style type="text/css"> body{ font-size: 12px; font-family: "宋体"; text-align:center; line-height:2.5; } div,li,li.border{ border:1px solid #ddd; } div{ width: 50px; height: 28px; background-color: #eee; } ul{ list-style: none; margin-top: 1px; padding-left: 0px; } li{ height: 30px; width: 60px; background-color: white; padding:0 10px; border-bottom: none; } li:hover{ background-color: #ddd; } </style></head>    <body>         <div>按钮</div>             <ul>                 <li>下拉菜单项</li>                 <li>下拉菜单项</li>                 <li>下拉菜单项</li>                 <li class="border">下拉菜单项</li>             </ul>    </body></html>

0 0