1.
請按要求完成index.html（頁面標題為“網(wǎng)易新聞“）和index.CSS的所有代碼：
效果圖：
有一則圖片新聞亲族，效果如上炒考，要求如下：
總體：左圖右文，總寬度未知霎迫，圖文之間間距15px
左圖：圖片地址假設(shè)為http://163.com/x.jpg斋枢，圖片寬高均為100px
右文：字體為宋體，行高為25px知给，最多顯示4行文字
右文中的標題：標題要求單行顯示并且超出時顯示”…“瓤帚，標題文字為粗體，大小為16px涩赢，黑色
右文中的段落：段落文字大小為14px戈次，顏色為#666
答案：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網(wǎng)易新聞</title>
<style type="text/css">
body{
font-family: "宋體"；
}
img{
width: 100px;
height: 100px;
float: left;
background-color: #0079BE;
}
h1{
font-weight: bold;
font-size: 16px;
text-overflow: ellipsis;
white-space: nowrap;
color: black;
}
p{
font-size: 14px;
color: #666;
height: 75.2px;
}
h1,p{
margin: 0;
line-height: 25px;
overflow: hidden;
}
.news{
height: 100px;
width: 185px;
float: left;
margin-left: 15px;
}
</style>
</head>
<body>
<div class="news">
<h1>標題文字標題文字標題文字</h1>
<p>段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字
段落文字段落文字段落文字段落文字</p>
</div>
</body>
</html>
2.
已知登錄表單效果圖如下：
要求如下：
總體：表單提交地址假設(shè)為“/login”
標題：“登錄網(wǎng)易通行證”為14px的微軟雅黑字體筒扒，加粗怯邪，行高16px，距離第一個輸入框15px霎肯；
左邊文字：“用戶名：”和“密碼：”所在列列寬60px擎颖，文字為12px的宋體榛斯，文字與輸入框垂直居中對齊；
輸入框：輸入框?qū)?00px高20px（含邊框）搂捧，邊框粗細為1px驮俗，顏色為#ddd，兩個輸入框以及按鈕之間間距為15px
按鈕：按鈕與輸入框左對齊允跑，按鈕寬40px高20px王凑，藍底白字無邊框，按鈕文字為12px的宋體且水平垂直都居中
label{
display: table-cell;
width: 60px;
font-size: 12px;
font-family: "宋體";
vertical-align: text-top;
}
input{
display: table-cell;
width: 200px;
height: 20px;
box-sizing: border-box;
border:1px solid #ddd;
margin-bottom: 15px;
}
button{
display: table-cell;
width: 40px;
height: 20px;
color: white;
background-color: #54AEDE;
border:none;
font-size: 12px;
font-family: "宋體";
text-align: center;
vertical-align: middle;
cursor: pointer;
}
p{
display: table-cell;
}
</style>
</head>
<body>
<h1>登陸網(wǎng)易通行證</h1>
<form action="/login" method="post">
<div class="table-row">
<label for="name">用戶名:</label>
<input type="text" name="name">
</div>
<div class="table-row">
<label for="password">密碼:</label>
<input type="password" name="password">
</div>
<div class="table-row">
<p></p>
<button type="submit">登陸</button>
</div>
</form>
</body>
</html>
3.
請完成以下效果圖的HTML（不需要寫CSS）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>照片沖印價格詳情</title>
</head>
<body>
<table border="1">
<caption>照片沖印價格詳情</caption>
<thead>
<tr><th rowspan="2">相片尺寸</th><th colspan="2">相紙（元/張）</th></tr>
<tr><th>富士</th><th>柯達</th></tr>
</thead>
<tbody>
<tr><th>6寸</th><td>0.45</td><td>0.6</td></tr>
<tr><th>10寸</th><td>3.89</td><td>5</td></tr>
</tbody>
<tfoot>
<tr><td colspan="3">運費8元/單,滿99元免運費</td></tr>
</tfoot>
</table>
</body>
</html>
4.
請按以下效果圖和要求完成下拉菜單的HTML和CSS：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜單</title>
<style type="text/css">
body{
font-size: 12px;
font-family: "宋體";
text-align:center;
line-height:2.5;
}
div,li,li.border{
border:1px solid #ddd;
}
div{
width: 50px;
height: 28px;
background-color: #eee;
}
ul{
list-style: none;
margin-top: 1px;
padding-left: 0px;
}
li{
height: 30px;
width: 60px;
background-color: white;
padding:0 10px;
border-bottom: none;
}
li:hover{
background-color: #ddd;
}
</style>
</head>
<body>
<div>按鈕</div>
<ul>
<li>下拉菜單項</li>
<li>下拉菜單項</li>
<li>下拉菜單項</li>
<li class="border">下拉菜單項</li>
</ul>
</body>
</html>
來紀念下自己的考試聋丝，為后來人的一些經(jīng)驗索烹。考試是網(wǎng)易云課堂微專業(yè)前端開發(fā)工程師課程的考試弱睦。
