网页设计中的设计多图水平排列

  • 2019-10-09 10:21:45
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

网页设计中,经常能见到多张图片排列的情况,在本例中,将介绍对于多图排列的设置,并进一步了解CSS设置图片的方法。

【操作步骤】

第1步,启动Dreamweaver,新建文档,保存为index.html.。

第2步,构建网页的基本结构。本例中首先用<div>标签设置container容器,然后分别用<div>标签将页面分为4块,每一块中包含一个<img>标签、一个<a>标签和一个<p>标签。

<div class="container">    

<div class="one"><a href="#">

<img src="images/1.jpg">        

<p>老虎</p>        

</a></div>    

<div class="one"><a href="#">

<img src="images/2.jpg">        

<p>大熊猫</p>        

</a></div>    

<div class="one"><a href="#"><img src="images/3.jpg">        

<p>大象</p>        

</a></div>    

<div class="one"><a href="#"><img src="images/4.jpg">        

<p>野马</p>

</a>

</div>

</div>

此时的显示效果极其简单,仅仅是简单的图片和标题。

第3步,在网站建设中定义网页基本属性及container容器的样式。

body {    margin: 20px;

padding: 0;}

.container {    text-align: center;    

width: 800px;    

height: 240px;    

background-image: url(images/bg.jpg);    

border: 1px #000 solid;}

首先在body中定义了四周补白以及内边距为0。在container中定义了container下所有元素的水平对齐方式为居中对齐,定义了container的宽度、高度以及边框样式。background-im-age:url(bg.jpg)语句的作用是为container标签添加名为bg.jpg的背景图片。

第4步,设置container容器下的<div>标签,以及在<div>下的<p>标签的样式。

.container div {    

float: left;    

margin-top: 30px;    

margin-left: 35px;}

.container p {    

font-size: 20px;    

font-family: 黑体;}

第5步,设置<a>标签样式。

a {    text-decoration: none;                      /*不显示超链接的下划线*/   

color: #204402;                             /*字体颜色*/}a:hover {

text-decoration: underline;                 /*鼠标悬停时显示下划线*/    

color: red;                                 /*鼠标悬停时字体颜色*/}

a:hover img { border: 4px #0b35ce solid;        /*鼠标悬停时图片的边框样式*/}

<a>

标签的样式设置了下划线,a:hover定义了当鼠标悬停时链接的样式。a:hover img定义了图片在鼠标悬停时的样式。关于网页制作中<a>标签的CSS样式将在后面章节详细介绍。

当前文章标题:网页设计中的设计多图水平排列

当前URL:http://www.lyjtt.cn/news/wzzz/3107.html

上一篇:网页设计中的图片布局

下一篇:网页设计中的阴影图片

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)