产品展示

Products Classification

HTML+CSS网页设计 企业网站资讯文章结构样式

  • 产品时间:2021-11-19 00:44
  • 价       格:

简要描述:大家好,本篇文章分享企业网站资讯文章的结构样式,这种结构样式通常用于企业网站首页。...

详细介绍
本文摘要:大家好,本篇文章分享企业网站资讯文章的结构样式,这种结构样式通常用于企业网站首页。

米乐app网页登录

米乐M6官网登录

大家好,本篇文章分享企业网站资讯文章的结构样式,这种结构样式通常用于企业网站首页。效果图:资讯文章HTML代码:<div class="tpt-1049"><div class="tpt-wp"><div class="tpt-md-3"><div class="tpt-a"><div class="tpt-c"><h3>最新资讯</h3><p>Newest information</p><span><img src="1.png"></span></div><ul class="tpt-b"><li><a href="#">高效简练但稳定实用的网站法式</a><span>2019-09-18</span></li><li><a href="#">高效简练但稳定实用的网站法式</a><span>2019-09-18</span></li><li><a href="#">高效简练但稳定实用的网站法式</a><span>2019-09-18</span></li><li><a href="#">高效简练但稳定实用的网站法式</a><span>2019-09-18</span></li><li><a href="#">高效简练但稳定实用的网站法式</a><span>2019-09-18</span></li><li><a href="#">高效简练但稳定实用的网站法式</a><span>2019-09-18</span></li></ul></div></div><div class="tpt-md-3"><div class="tpt-a"><div class="tpt-c"><h3>热门资讯</h3><p>Popular information</p><span><img src="2.png"></span></div><ul class="tpt-b"><li><a href="#">高效简练但稳定实用的网站法式</a><span>2019-09-18</span></li><li><a href="#">高效简练但稳定实用的网站法式</a><span>2019-09-18</span></li><li><a href="#">高效简练但稳定实用的网站法式</a><span>2019-09-18</span></li><li><a href="#">高效简练但稳定实用的网站法式</a><span>2019-09-18</span></li><li><a href="#">高效简练但稳定实用的网站法式</a><span>2019-09-18</span></li><li><a href="#">高效简练但稳定实用的网站法式</a><span>2019-09-18</span></li></ul></div></div><div class="tpt-md-3"><div class="tpt-a"><div class="tpt-c"><h3>推荐资讯</h3><p>Recommend information</p><span><img src="3.png"></span></div><ul class="tpt-b"><li><a href="#">高效简练但稳定实用的网站法式</a><span>2019-09-18</span></li><li><a href="#">高效简练但稳定实用的网站法式</a><span>2019-09-18</span></li><li><a href="#">高效简练但稳定实用的网站法式</a><span>2019-09-18</span></li><li><a href="#">高效简练但稳定实用的网站法式</a><span>2019-09-18</span></li><li><a href="#">高效简练但稳定实用的网站法式</a><span>2019-09-18</span></li><li><a href="#">高效简练但稳定实用的网站法式</a><span>2019-09-18</span></li></ul></div></div></div></div>CSS代码分析:首先界说整个结构的宽度为1200像素,并居中显示.tpt-wp { margin: 0 auto; width: 1200px;}给每个板块头部设置差别的配景颜色,用nth-child()选择器指定板块.tpt-c { position: relative; padding: 50px; background: #ff3333;}.tpt-1049 .tpt-md-3:nth-child(2) .tpt-c { background: #ffb933;}.tpt-1049 .tpt-md-3:nth-child(3) .tpt-c { background: #32c078;}给文章标题列表设置高度和虚线边框,内下边距和外下边距.tpt-b li { position: relative; height: 30px; line-height: 30px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed #eee}给文章标题设置字体巨细,字体颜色和宽度.tpt-b li a { padding: 0 0 0 15px; font-size: 15px; color: #333; width: 70%}给文章标题时间设置绝对定位,字体巨细和字体颜色.tpt-b li span { font-size: 15px; color: #999; position: absolute; right: 0; top: 0}固然,结构的方式有许多种,这只是其中一个方法,也接待大家留言分享一下其他的结构方式,一起学习HTML+CSS网页设计。


本文关键词:米乐官网app入口,HTML+CSS,网页设计,企业网站,资讯,文章,结构

本文来源:米乐官网app入口-www.jinshengxiangjiao.com

 


产品咨询

留言框

  • 产品:

  • 留言内容:

  • 您的单位:

  • 您的姓名:

  • 联系电话:

  • 常用邮箱:

  • 详细地址:


推荐产品

Copyright © 2009-2021 www.jinshengxiangjiao.com. 米乐官网app入口科技 版权所有 备案号:ICP备39069351号-3

在线客服 联系方式 二维码

服务热线

039-79233330

扫一扫,关注我们