请按要求完成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>
网友评论