如何在网页设计中设计图文混排列表效果

  • 2019-09-12 15:01:27
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

【操作步骤】

第1步,启动Dreamweaver,新建一个网页,保存为index.html。

第2步,构建网页结构。本例中首先用<div>标签设置container容器,然后通过<div>标签创建网页的title和content两部分,又通过<ul>标签分别创建这两个部分的列表。

<div id="container">    

<div class="title">                                       /*title部分*/        

<h3>财经资讯</h3>                                     /*title部分的标题*/        

<ul>                                                  /*title部分的新闻栏目*/            

<li><a href="#">最新资讯</a></li>            

<li><a href="#">国际财经</a></li>            

<li><a href="#">汽车房产</a></li>        

</ul>

</div>    <div class="content">                                     /*content部分*/        

<p>                                                   /*content部分的标题*/            

<a href="#"><img src="images/1.jpg"/></a>            

<span><a href="#">最新资讯</a></span>        

</p>        

<ul>                                                 /*content部分的新闻内容*/            

<li>·<a href="#">诸建芳:中国将继续加强“反通缩”明年或降准2次</a></li>            

<li>·<a href="#">美联储出台系统重要性银行附加资本要求  </a></li>            

<li>·<a href="#">所有省份制定大病保险实施方案 北京等全面推开</a></li>

<li>·<a href="#">减持方正证券获利3.18亿元 郑州煤电有望扭亏  </a></li>            

<li>·<a href="#">牛市“撞腰”不足惧</a></li>        

</ul>    

</div>    

<div class="list_unit" id="2">        

<p> <a href="#"><img src="images/2.jpg">

</a> 

<span><a href="#">国际财经</a></span> 

</p>        

<ul>            

<li>·<a href="#">全球最大集装箱船“中海环球”轮首航宁波港</a></li>            

<li>·<a href="#">中国中小企业全球发展论坛迎来重量级嘉宾</a></li>            

<li>·<a href="#">建行龙卡全球支付卡跨境支付更方便</a></li>            

<li>·<a href="#">明年美国经济增长3.1%</a></li>            

<li>·<a href="#">汇丰:2015年全球十大风险</a></li>

<li>·<a href="#">减持方正证券获利3.18亿元 郑州煤电有望扭亏  </a></li>            

<li>·<a href="#">牛市“撞腰”不足惧</a></li>        

</ul>    

</div>    

<div class="list_unit" id="2">        

<p> 

<a href="#"><img src="images/2.jpg"></a> <span><a href="#">国际财经</a></span> </p>        

<ul>            

<li>·<a href="#">全球最大集装箱船“中海环球”轮首航宁波港</a></li>            

<li>·<a href="#">中国中小企业全球发展论坛迎来重量级嘉宾</a></li>            

<li>·<a href="#">建行龙卡全球支付卡跨境支付更方便</a></li>            

<li>·<a href="#">明年美国经济增长3.1%</a></li>            

<li>·<a href="#">汇丰:2015年全球十大风险</a></li>

  </ul>    

</div>    

<div class="list_unit" id="3">        

<p> <a href="#"><img src="images/3.jpg"></a> <span><a href="#">汽车房产</a></span> </p>        

<ul>            

<li>·<a href="#">上海:奥迪Q3最高让利8.6万元 豪华小型SUV</a></li>            

<li>·<a href="#">上海:路虎发现4最高降13万 全国销售现车充足  </a></li>            

<li>·<a href="#">2015年投产 丰田扩大投资提高Mirai产能  </a></li>            

<li>·<a href="#">北京:新宝来现金优惠8500元起 置换另享补贴</a></li>            

<li>·<a href="#">首套房贷利率北京外资银行能打折</a></li>        

</ul>    

</div>    

<div class="di"></div>                                /*清除浮动*/    </div></body>

网页设计中,在整个container框架下,分别由title和con-tent两块组成,在title块下,又包含了h3和ul两部分。在content块下,定义了<p>标签和<ul>标签。

第3步,在<head>标签内添加<styletype="text/css">标签,定义一个内部样式表,然后输入下面样式,定义网页基本属性和wrap样式。

* {/*网页中所有标签的共同样式*/    

margin:0;                       /*外边框为0*/    

padding:0;                      /*内边框为0*/    

font-size:12px;                 /*字体大小*/    

color:#000;                     /*字体颜色*/    

list-style:none;                /*不显示项目符号*/}a {/*定义网页中所有的<a>标签样式*/   

color:#03c;    text-decoration:none;           /*不显示下划线*/}

a:hover{    text-decoration:underline;      /*当鼠标经过时显示下划线*/}#wrap{/*wrap容器样式*/    

width:418px;                   /*宽度*/    

margin:30px auto;              /*上下补白是30px,左右为auto,显示为居中的效果*/    

border:1px solid #999;         /*边框样式*/}

在以上代码中,首先定义了网页基本属性;wrap容器样式类中定义了容器宽度和居中对齐等属性。

第4步,设置title部分样式。

.title { /*定义title样式*/   

 width:418px;                           /*title块的宽度*/    

height:32px;                           /*title块的高宽*/    

border-bottom:1px solid #999;          /*添加底部边框*/    

background:#f2f9fd;                    /*背景颜色*/}.title h3 { /*定义title部分*/    

float:left;                            /*左浮动*/    

ine-height:32px;                       /*行间距,实现文字垂直居中*/    

padding-left:20px;                     /*左侧内间距*/}.title ul { /*title中列表样式*/    

float:right;                           /*右浮动*/    width:230px;                           /*列表宽度*/}

.title ul li { /*<li>标签样式*/    float:left;    line-height:32px;                      /*行间距*/    

padding:0 5px;                         /*左右补白5px*/}.title ul li a { /*<a>标签样式*/        

color:#333;                        /*字体颜色*/}

第5步,设置warp样式。

.warp { /*warp块样式*/     

height:100px;                         /*块高宽*/     

margin-left:15px;                     /*左侧补白*/     

padding:15px 0 8px 0;                 /*顶部内边距15px,底部内边距8px*/     

border-bottom:1px dotted #9AC4E9;     /*底部边框*/}

第6步,完成warp块中<p>标签样式的设置,在<p>标签中,包含了<a>标签、<img>标签和<span>标签,分别定义了新闻栏目的图片和栏目标题。

在<p>标签中,包含了<a>标签、<img>标签和<span>标签,分别定义了新闻栏目的图片和栏目标题。

.warp p { /*warp块中<p>标签样式*/    

float:left;                                         /*左浮动,使<p>标签下的图片和标题靠左*/    

width:156px;                                        /* <p>标签的宽度*/}

.warp p a {                                             /*<a>标签样式*/    display:block;                                      /*定义<a>标签为块级元素*/}

.warp p a:hover {    border:1px dashed #00f;                             /*当鼠标经过时显示边框*/    }

.warp span a { /*warp块下的<span>标签样式也就是标题样式*/    height:22px;                                        /*高宽*/    

line-height:22px;                                   /*文字实现垂直居中*/    text-align:center;                                  /*水平居中*/}.warp span a:hover {                                    /*鼠标经过时的<span>标签样式*/      border:0;                                         /*清除边框*/      

color:#c00;                                       /*字体颜色*/}

在以上代码中,定义了warp中的<p>标签样式,在<p>标签中分别包含了一幅图片和一个标题,在这里关键是<a>标签和<span>标签的样式设置。其中a和a:hover的样式是针对图片的设置,spana和span a:hover是针对标题的样式,其中bor-der:0是清除边框,因为在网页设计时,语句warp pa:hove{ border:1px dashed #00f;}样式类中定义了<p>标签下所有的<a>标签显示边框,所以在这里需要清除边框。

第7步,从图4.38中可以看到,网页基本已经完成,最后再给warp中的<ul>标签进行设置。

.warp ul {                    /*warp中ul样式*/    

float:right;              /*右浮动*/    

width:216px;              /*ul宽度*/

margin:5px 0px;           /*设置上下补白*/}

.warp ul li a:hover{          /*鼠标经过时的li效果*/    

color:red;}.clear {                      /*清除左右浮动*/    clear:both;}

以上代码设置了网站建设时warp中ul列表样式,此时网页完全创建完成。

当前文章标题:如何在网页设计中设计图文混排列表效果

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

上一篇:如何在网页设计中设计列表版式

下一篇:网页设计中如何设计图文展示栏目

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