文档章节

使用HTML和CSS制作下图界面(溢出)

学霸猫
 学霸猫
发布于 2016/04/26 23:27
字数 587
阅读 22
收藏 1

 

<!DOCTYPE html>

<html>
 <head>
  <meta charset="UTF-8"/>
  <title>homework</title>
  <style>
#d1{
width:320px;
height:100px;
border:1px solid black;
overflow:auto;
text-align:center;
padding-top:5px;
} 
#d1 td div{
border:2px solid transparent;
border-radius:5px;
}
#d1 td div:hover{
border:2px solid red;
} 
  </style>
 </head>
 <body> 
<div id="d1" >
<table width="490px" height="74px" >
<tr>
<td><div><img src="images/p_small_001.jpg"/></div></td>
<td><div><img src="images/p_small_002.jpg"/></div></td>
<td><div><img src="images/p_small_003.jpg"/></div></td>
<td><div><img src="images/p_small_004.jpg"/></div></td>
<td><div><img src="images/p_small_005.jpg"/></div></td>
<td><div><img src="images/p_small_006.jpg"/></div></td>
<td><div><img src="images/p_small_007.jpg"/></div></td>
</tr>
</table>
</div>
 </body>
</html>
<!doctype html>
<html>
<head>
<meta charset="UTF-8"> 
<title></title>
<link rel="stylesheet" style="text/css" href="demo2.css">
</head>
<body>
<div class="out">
<div class="inner">
<img src="images/1.jpg"/>
<img src="images/2.jpg" class="selected"/>
<img src="images/3.jpg"/>
<img src="images/4.jpg"/>
<img src="images/5.jpg"/>
<img src="images/6.jpg"/>
<img src="images/7.jpg"/>
</div>
</div>
</body>
</html>


.out{
width:318px;


/* margin:160px auto; */
overflow-x:auto;
border:1px solid black;
}


.inner{
width:580px;
}
img{
border:1px solid white;
border-radius:5px;
}


img:hover{
border-color:red;
}


.selected{
border:1px solid red;
}

比较上面两端代码,第一段代码和第二段代码实现的结果基本一致,只是第一段代码通过padding-top,使得最终所得的页面框中的图片更加居中,

整体效果相较第二段代码更好。但是第二段代码明显更加不错,代码简练,并且实现了第一段代码实现的所有效果。

第二段代码直接在div中使用div并且没有规定height高度,直接实现了溢出。而第一段代码因为起初就规定了div的height导致使用div溢出时失败,

不得已选择table来进行布局,实现溢出。而且也没有搞清楚img的特点,没有给img直接加边框,而是选择又在td内套用一个div,这里十分冗余。

img也是块元素,可以直接加边框。

第二段代码在id命名方面也是胜出很多,使代码可读性很强,条理清晰。

第一段代码是本人自己所写,问题很多,在看到别人的代码后感觉很有必要比对进步,所以写下此文。

外面的div和里面的div都要写width,否则里面的div的元素会向下溢出

img要被Inner div包裹,单纯排列img只会自动向下溢出

© 著作权归作者所有

学霸猫
粉丝 5
博文 99
码字总数 52419
作品 0
深圳
程序员
私信 提问
【京东商城首页实战9】导航菜单栏和下拉列表

接下来开始做下面的部分,包括红色背景部分、导航菜单栏、右边的图片,如图: 图1 分析: 1.构架:全部商品分类是一个盒子、导航菜单是一个盒子,图片是一个盒子。 2.点击红色部分会出现下拉...

sinat_34647836
2017/05/03
0
0
【京东商城首页实战2】导航条制作(1)

接下来,开始制作京东的导航条。效果如下图: 图1 业务分析: 1.通栏盒子,并且有背景颜色 2.有版心。 3.版心里面包含左右浮动的两个盒子。 4.有下拉效果的盒子后面,有三角形标志。 5.右边的...

sinat_34647836
2017/05/01
0
0
如何在静态页面上使用markdown排版

”Markdown是一种轻量级标记语言,创始人是约翰·格鲁伯(John Gruber)。它允许人们 “使用易读易写的纯文本格式编写文档,然后转换成有效的 HTML 文档。”,转换成html最方便的方式是用插件...

tianyawhl
01/11
18
0
完整的网页制作视频

基础:http://edu.51cto.com/course/12283.html 进阶:http://edu.51cto.com/course/12338.html 课程目标在第一阶段HTML&CSS网页制作基础课程的前提下,力求通过一个实际网站页面的编写,让学...

杨胜强的号
2018/01/22
0
0
小创意:圣诞球切换开关

小创意:圣诞球切换开关 设计达人2017-12-200 阅读 CSS3HTMLcssCSS 还有几天就到圣诞节,几乎到哪里都能看到圣诞气氛的设计,网站也是如此,为了让网站页面更有气氛,我们不能放过任何小创意...

设计达人
2017/12/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.1K
14
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
38
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部