由於考試的時候做的很不好，于是重新做了一次抗果，代碼真的不是看懂就可以的筋帖，再簡單也要自己親自練習(xí)過才是自己的奸晴。如果有看到這篇代碼的大神冤馏，歡迎指正。
1（14分）請按要求完成index.html（頁面標(biāo)題為“網(wǎng)易新聞“）和index.CSS的所有代碼：效果圖：
有一則圖片新聞寄啼，效果如上逮光，要求如下：總體：左圖右文，總寬度未知墩划，圖文之間間距15px左圖：圖片地址假設(shè)為http://163.com/x.jpg涕刚，圖片寬高均為100px右文：字體為宋體，行高為25px乙帮，最多顯示4行文字右文中的標(biāo)題：標(biāo)題要求單行顯示并且超出時顯示”…“杜漠，標(biāo)題文字為粗體，大小為16px察净，黑色右文中的段落：段落文字大小為14px驾茴，顏色為#666
答案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>網(wǎng)易期末考試1</title>
<style type="text/css">
/排版時利用margain設(shè)置兩列自適應(yīng)/
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實(shí)現(xiàn)單行、多行文本溢出顯示省略號（…）
參考以下網(wǎng)址：http://www.daqianduan.com/6179.html/
</style>
</head>
<body>
<div class="wenzi">
<h1>標(biāo)題文字標(biāo)題文字標(biāo)題文字標(biāo)題文字標(biāo)題文字標(biāo)題文字標(biāo)題文字標(biāo)題文字標(biāo)題文字標(biāo)題文</h1>
<p>段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字</p>
</div>
</body>
</html>
2（12分）已知登錄表單效果圖如下：
要求如下：總體：表單提交地址假設(shè)為“/login”標(biāo)題：“登錄網(wǎng)易通行證”為14px的微軟雅黑字體氢卡，加粗锈至，行高16px，距離第一個輸入框15px译秦；左邊文字：“用戶名：”和“密碼：”所在列列寬60px峡捡，文字為12px的宋體，文字與輸入框垂直居中對齊筑悴；輸入框：輸入框?qū)?00px高20px（含邊框）们拙，邊框粗細(xì)為1px，顏色為#ddd阁吝，兩個輸入框以及按鈕之間間距為15px按鈕：按鈕與輸入框左對齊砚婆，按鈕寬40px高20px，藍(lán)底白字無邊框求摇，按鈕文字為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>登錄網(wǎng)易通行證</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>柯達(dá)</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”>運(yùn)費(fèi)8元/單射沟，滿99元免運(yùn)費(fèi)</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>下拉菜單選項(xiàng)</option>
<option>下拉菜單選項(xiàng)</option>
<option>下拉菜單選項(xiàng)</option>
<option>下拉菜單選項(xiàng)</option>
</select>
</body>
</html>
