請按要求完成index.html（頁面標(biāo)題為“網(wǎng)易新聞“）和index.CSS的所有代碼：
效果圖：
6630287112443278270.png
有一則圖片新聞生棍，效果如上颤霎，要求如下：
總體：左圖右文，總寬度未知，圖文之間間距15px
左圖：圖片地址假設(shè)為http://163.com/x.jpg友酱，圖片寬高均為100px
右文：字體為宋體晴音，行高為25px，最多顯示4行文字
右文中的標(biāo)題：標(biāo)題要求單行顯示并且超出時(shí)顯示”…“缔杉，標(biāo)題文字為粗體锤躁，大小為16px，黑色
右文中的段落：段落文字大小為14px或详，顏色為#666
代碼實(shí)現(xiàn)：
<!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>標(biāo)題文字標(biāo)題文字標(biāo)題文字標(biāo)題文字標(biāo)題文字</h2>
<p>段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字</p>
</div>
</div>
</body>
</html>
已知登錄表單效果圖如下:
Paste_Image.png
要求如下：
總體：表單提交地址假設(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
代碼實(shí)現(xiàn)：
<!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>登錄網(wǎng)易通行證</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
代碼實(shí)現(xiàn)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="" cellspacing="" cellpadding="">
<caption>照片沖印價(jià)格詳情</caption>
<thead>
<tr>
<th rowspan="2">相片尺寸</th>
<th colspan="2">相紙（元/張）</th>
</tr>
<tr>
<th>富士</th>
<th>柯達(dá)</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">運(yùn)費(fèi)8元/單,滿99元免運(yùn)費(fèi)</td>
</tr>
</tbody>
</table>
</body>
</html>
請按以下效果圖和要求完成下拉菜單的HTML和CSS：
Paste_Image.png
代碼實(shí)現(xiàn)：
<!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>下拉菜單項(xiàng)</li>
<li>下拉菜單項(xiàng)</li>
<li>下拉菜單項(xiàng)</li>
<li>下拉菜單項(xiàng)</li>
</ul>
</div>
</body>
</html>
