由於考试的时候做的很不好，于是重新做了一次，代码真的不是看懂就可以的，再简单也要自己亲自练习过才是自己的。如果有看到这篇代码的大神，欢迎指正。
1（14分）请按要求完成index.html（页面标题为“网易新闻“）和index.CSS的所有代码：效果图：
网易微专业 页面制作 期末试题 1 - make.money.y - 这一切
有一则图片新闻，效果如上，要求如下：总体：左图右文，总宽度未知，图文之间间距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>
网易微专业 页面制作 期末试题 2 - make.money.y - 这一切
要求如下：总体：表单提交地址假设为“/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）
网易微专业 页面制作 期末试题 2/3 - make.money.y - 这一切
<!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>
网友评论