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
Q1.
- {
margin:0;
padding:0;
}```
應(yīng)用所用采呐？？
Q2.自適應(yīng)布局搁骑？斧吐？
<!DOCTYPE html>
<html>
<head>
<title> 網(wǎng)易新聞 </title>
<meta charset=utf-8"/>
<link rel="stylesheet" href="try.css" />
</head>
<body>
<div id="container">
<div id="leftContent"></div>
<div id="rightContent">
<h3>標(biāo)題文字標(biāo)題文字標(biāo)題文字標(biāo)題文字標(biāo)題文字標(biāo)題文字標(biāo)題文字</h3>
<p>段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字</p>
</div>
</div>
</body>
</html>```
-
{
margin:0;
padding:0;
}img {
height:100px;
width:100px;
padding-right:15px;
}
h3 {
font: bold 16px/25px "宋體",arial,sans-serif;
color: #000000;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
p {
font: 14px/25px "宋體",arial,sans-serif;
color: #666;
}container {
width:300px; margin:0 auto; margin-top:10px; border:1px #666; position:relative;}
leftContent {
position:absolute; float: left;}
rightContent {
margin-left:115px; height: 100px; overflow: hidden;}
>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
##Q1.左側(cè)【用戶名鹃彻、密碼】已設(shè)置 vertical-align: middle; 為何沒有垂直居中對齊？妻献？
##Q2. button 已設(shè)置 color:white; 蛛株，為何字體顏色仍為黑色？育拨？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登錄網(wǎng)易通行證</title>
<link rel="stylesheet" href="try.css">
</head>
<body>
<p class="heading">登錄網(wǎng)易通行證</p>
<form action="/login" method="post">
<div class="tableRow">
<label for="name">用戶名：</label>
<input type="text" name="name" id="name">
</div>
<div class="tableRow">
<label for="passwards">密碼：</label>
<input type="passward" id="passwards">
</div>
<div class="tableRow">
<label></label>
<button type="button">登錄</button>
</div>
</form>
</body>
</html>```
.tableRow{
display: table-row;
}
label{
display: table-cell;
height: 60px;
font:12px "宋體";
text-align: left;
vertical-align: middle;
}
input{
border:1px solid #ddd;
padding-bottom: 15px;
width: 200px;
height: 20px;
display: table-cell;
}
button{
display: table-cell;
width: 40px;
height: 20px;
font: 12px "宋體"谨履；
color:#ffffff;
background-color: #54aede;
text-align: center;
vertical-align: middle;
border:none;
}```
>3
（6分）
請完成以下效果圖的HTML（不需要寫CSS）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table</title>
</head>
<body>
<table border="1">
<caption>照片沖印價格詳情</caption>
<thead>
<tr>
<th rowspan="2">相片尺寸</th>
<th colspan="2">相紙（元/張）</th>
</tr>
<tr>
<td>富士</td>
<td>柯達(dá)</td>
</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>
<td colspan="3">運費8元/單，滿99元免運費</td>
</tfoot>
</table>
</body>
</html>```
4
（8分）
請按以下效果圖和要求完成下拉菜單的HTML和CSS：
Q1. butt 邊框有問題熬丧，暫時無法解決笋粟？？
Q2. vertical-align: middle; text-align: center; 的設(shè)置為什么不能使menu中文字居中 析蝴？害捕？
Q3. menu 中設(shè)置 padding 無效？闷畸？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉菜單</title>
<link rel="stylesheet" href="try.css">
</head>
<body>
<div class="butt">
<div>
<button type="button">按鈕</button>
</div>
<div class="menu">
<div>下拉菜單</div>
<div>下拉菜單</div>
<div>下拉菜單</div>
<div>下拉菜單</div>
</div>
</div>
</body>
</html>```
//CSS
.butt{
width:50px;
height: 28px;
border: 1px solid #ddd;
background-color: #eee;
font:12px "宋體",serif,sans-serif;
}
.menu{
display: none;
font:12px "宋體",serif,sans-serif;
height: 30px;
vertical-align: middle;
text-align: center;
margin-top: 0px;
background-color:white;
padding: auto 10px;
border: 1px solid #ddd;
}
.menu:first-child{
margin-top: 1px;
padding: auto 10px;
}
.menu:hover{background-color:#ddd;}
.butt:hover .menu{display: inline-block;}```
