請按要求完成index.html（頁面標題為“網易新聞“）和index.CSS的所有代碼：
效果圖：
6630287112443278270.png
有一則圖片新聞，效果如上，要求如下：
總體：左圖右文，總寬度未知，圖文之間間距15px
左圖：圖片地址假設為http://163.com/x.jpg，圖片寬高均為100px
右文：字體為宋體，行高為25px，最多顯示4行文字
右文中的標題：標題要求單行顯示并且超出時顯示”…“，標題文字為粗體，大小為16px，黑色
右文中的段落：段落文字大小為14px，顏色為#666
代碼實現：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{font:16px "宋體";}
.news img{
width: 100px;
height: 100px;
float: left;
background-color: #0079BE;
}
.content{
height: 100px;
width: 200px;
margin-left: 10px;
float: left;
overflow: hidden;
}
.content h2{
font: bold 16px "宋體";
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.content p{
font-size: 14px;
color: #666;
}
.content h2,.content p{
line-height: 25px;
overflow: hidden;
}
.clearfix:after{
content: ".";
display: block;
clear: both;
height: 0;
overflow: hidden;
visibility: hidden;
}
.clearfix{*zoom:1;}
</style>
</head>
<body>
<div class="news a">
<div class="content">
<h2>標題文字標題文字標題文字標題文字標題文字</h2>
<p>段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字</p>
</div>
</div>
</body>
</html>
已知登錄表單效果圖如下:
Paste_Image.png
要求如下：
總體：表單提交地址假設為“/login”
標題：“登錄網易通行證”為14px的微軟雅黑字體，加粗，行高16px，距離第一個輸入框15px；
左邊文字：“用戶名：”和“密碼：”所在列列寬60px，文字為12px的宋體，文字與輸入框垂直居中對齊；
輸入框：輸入框寬200px高20px（含邊框），邊框粗細為1px，顏色為#ddd，兩個輸入框以及按鈕之間間距為15px
按鈕：按鈕與輸入框左對齊，按鈕寬40px高20px，藍底白字無邊框，按鈕文字為12px的宋體且水平垂直都居中
請完成以上登錄表單的HTML和CSS
代碼實現：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>login</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
font: 12px "宋體";
}
.login{
height: 200px;
width: 400px;
border: 1px solid #DDDDDD;
}
h1{
font:bold 14px/16px "微軟雅黑" ;
margin-bottom: 10px;
}
.longinTab{
display: table;
}
.longinTab label{
display: table-cell;
vertical-align: text-top;
}
.longinTab input{
display: table-cell;
width: 200px;
height: 20px;
border: 1px solid #ddd;
box-sizing: border-box;
margin-bottom: 15px;
}
.longinTab label,.longinTab p{
width: 60px;
}
.longinTab p{
display: table-cell;
}
.longinTab button{
display: table-cell;
width: 40px;
height: 20px;
line-height: 20px;
color: white;
background-color: #54AEDE;
border:none;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
</style>
</head>
<body>
<div class="login">
<h1>登錄網易通行證</h1>
<form action="/login" method="post">
<div class="longinTab">
<label >用戶名：</label>
<input type="text" />
</div>
<div class="longinTab">
<label >密碼：</label>
<input type="text" />
</div>
<div class="longinTab">
<p></p>
<button type="submit">登錄</button>
</div>
</form>
</div>
</body>
</html>
請完成以下效果圖的HTML（不需要寫CSS）
Paste_Image.png
代碼實現：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="" cellspacing="" cellpadding="">
<caption>照片沖印價格詳情</caption>
<thead>
<tr>
<th rowspan="2">相片尺寸</th>
<th colspan="2">相紙（元/張）</th>
</tr>
<tr>
<th>富士</th>
<th>柯達</th>
</tr>
</thead>
<tbody>
<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 colspan="3">運費8元/單,滿99元免運費</td>
</tr>
</tbody>
</table>
</body>
</html>
請按以下效果圖和要求完成下拉菜單的HTML和CSS：
Paste_Image.png
代碼實現：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{
font: 12px "宋體";
text-align:center;
line-height: 2.5;
}
.container{
width: 200px;
height: 200px;
}
.container,.btn,.container li,.container li:last-child{
border:1px solid #ddd;
}
.btn{
width: 50px;
height: 28px;
background: #eee;
}
.container ul{
list-style: none;
margin-top: 1px;
}
.container li{
height: 30px;
width: 60px;
background: #fff;
padding: 0 10px;
border-bottom: none;
}
.container li:hover{
background: #ddd;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="btn">按鈕</div>
<ul>
<li>下拉菜單項</li>
<li>下拉菜單項</li>
<li>下拉菜單項</li>
<li>下拉菜單項</li>
</ul>
</div>
</body>
</html>
