由於考试的时候做的很不好，于是重新做了一次，代码真的不是看懂就可以的，再简单也要自己亲自练习过才是自己的。如果有看到这篇代码的大神，欢迎指正。
1（14分）请按要求完成index.html（页面标题为“网易新闻“）和index.CSS的所有代码：效果图：
有一则图片新闻，效果如上，要求如下：总体：左图右文，总宽度未知，图文之间间距15px左图：图片地址假设为http://163.com/x.jpg，图片宽高均为100px右文：字体为宋体，行高为25px，最多显示4行文字右文中的标题：标题要求单行显示并且超出时显示”…“，标题文字为粗体，大小为16px，黑色右文中的段落：段落文字大小为14px，颜色为#666
答案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网易期末考试1</title>
<style type="text/css">
/排版时利用margain设置两列自适应/
img{
float: left;
position: relative;
}
div{
float: right;
position: absolute;
margin-left: 115px;
font-family: "宋体",serif;
line-height: 25px;
}
h1{
font-size: 16px;
font-weight: bold;
color: black;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
p{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
font-size: 14px;
color: #666;
}
/CSS实现单行、多行文本溢出显示省略号（…）
参考以下网址：http://www.daqianduan.com/6179.html/
</style>
</head>
<body>
<div class="wenzi">
<h1>标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文</h1>
<p>段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字</p>
</div>
</body>
</html>
2（12分）已知登录表单效果图如下：
要求如下：总体：表单提交地址假设为“/login”标题：“登录网易通行证”为14px的微软雅黑字体，加粗，行高16px，距离第一个输入框15px；左边文字：“用户名：”和“密码：”所在列列宽60px，文字为12px的宋体，文字与输入框垂直居中对齐；输入框：输入框宽200px高20px（含边框），边框粗细为1px，颜色为#ddd，两个输入框以及按钮之间间距为15px按钮：按钮与输入框左对齐，按钮宽40px高20px，蓝底白字无边框，按钮文字为12px的宋体且水平垂直都居中请完成以上登录表单的HTML和CSS
答案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
<style type="text/css">
h1{
font-family:"微软雅黑";
font-weight:bold;
font-size: 14px;
text-align:left;
line-height: 16px;
margin-bottom: 15px;
}
/font：font-style font-variant font-weight font-size/line-height font-family/
lable{
display: inline-block ;
width: 60px;
font-family:"宋体";
font-size: 12px;
vertical-align: middle;
}
input{
display: inline-block ;
box-sizing:border-box;
width: 200px;
height: 20px;
border: 1px solid #ddd;
margin-bottom: 15px;
}
button{
display: table-cell;
width: 40px;
height: 20px;
background-color: #33AECC;
color:white;
border: none;
font-size: 12px;
font-family:"宋体";
text-align: center;
vertical-align: middle;
}
p{
display: table-cell;
}
</style>
</head>
<body>
<form action="/login" method="post">
<h1>登录网易通行证</h1>
<div class="table-row">
<lable for="name">用户名：</lable>
<input type="text" id="name">
</div>
<div class="table-row">
<lable for="password">密码：</lable>
<input type="password" id="password">
</div>
<div class="table-row">
<p></p>
<button type="submit">登录</button>
</div>
</table>
</form>
</body>
</html>
3（6分）请完成以下效果图的HTML（不需要写CSS）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1">
<caption>照片冲印价格详情</caption>
<tr>
<td rowspan="2" >相片尺寸</td>
<td>相纸（元/张）</td>
</tr>
<tr>
<td>富士</td>
<td>柯达</td>
</tr>
<tr>
<td>6寸</td>
<td>0.45</td>
<td>0.6</td>
</tr>
<tr>
<td>10寸</td>
<td>3.89</td>
<td>5</td>
</tr>
<tr>
<td clospan=“3”>运费8元/单，满99元免运费</td>
</tr>
</table>
</body>
</html>
请按以下效果图和要求完成下拉菜单的HTML和CSS：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style type="text/css">
body{
font-size: 12px;
font-family: "宋体"；
color:black;
}
button{
width: 50px;
height: 28px;
background-color: #eee;
border: 1px solid #ddd;
}
select{
height: 30px;
background-color: white;
padding: 0px 10px;
}
select{margin-top: 1px;}
select:hover{
background-color: #ddd;
}
</style>
</head>
<body>
<button>按钮</button>
<select>
<option>下拉菜单选项</option>
<option>下拉菜单选项</option>
<option>下拉菜单选项</option>
<option>下拉菜单选项</option>
</select>
</body>
</html>
