？？页面制作-期末考试主观题 3.5

1
（14分）
请按要求完成index.html（页面标题为“网易新闻“）和index.CSS的所有代码：
效果图：

有一则图片新闻，效果如上，要求如下：
总体：左图右文，总宽度未知，图文之间间距15px
左图：图片地址假设为 http://163.com/x.jpg，图片宽高均为100px
右文：字体为宋体，行高为25px，最多显示4行文字
右文中的标题：标题要求单行显示并且超出时显示”…“，标题文字为粗体，大小为16px，黑色
右文中的段落：段落文字大小为14px，颜色为#666

Q1.

• {
  margin:0;
  padding:0;
  }```

应用所用？？

Q2.自适应布局？？

 
  
  
    
  
 
  

    
![](http://upload-images.jianshu.io/upload_images/316258-7c4cf4feb8b3017f.jpg)
    

        
标题文字标题文字标题文字标题文字标题文字标题文字标题文字
        
段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字
    
  
 
```

• {
  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分）
已知登录表单效果图如下： 
![](http://upload-images.jianshu.io/upload_images/316258-3c8550f1c5a51f59.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
要求如下：
总体：表单提交地址假设为“/login”
标题：“登录网易通行证”为14px的微软雅黑字体，加粗，行高16px，距离第一个输入框15px；
左边文字：“用户名：”和“密码：”所在列列宽60px，文字为12px的宋体，文字与输入框垂直居中对齐；
输入框：输入框宽200px高20px（含边框），边框粗细为1px，颜色为#ddd，两个输入框以及按钮之间间距为15px
按钮：按钮与输入框左对齐，按钮宽40px高20px，蓝底白字无边框，按钮文字为12px的宋体且水平垂直都居中 
请完成以上登录表单的HTML和CSS

##Q1.左侧【用户名、密码】已设置 vertical-align: middle; 为何没有垂直居中对齐？？
##Q2. button 已设置 color:white; ，为何字体颜色仍为黑色？？

登录网易通行证

用户名：

密码：

登录

```

.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）
![](http://upload-images.jianshu.io/upload_images/316258-9b3fa9d71b424205.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

照片冲印价格详情

相片尺寸	相纸（元/张）
	富士	柯达
6寸	0.45	0.6
10寸	3.89	5
运费8元/单，满99元免运费

```

4
（8分）
请按以下效果图和要求完成下拉菜单的HTML和CSS：

Q1. butt 边框有问题，暂时无法解决？？

Q2. vertical-align: middle; text-align: center; 的设置为什么不能使menu中文字居中 ？？

Q3. menu 中设置 padding 无效？？

    
     
     



    

        按钮
    
 
    

        
下拉菜单
        
下拉菜单
        
下拉菜单
        
下拉菜单
    
     


```

//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;}```