div css网页设计源代码_HTML+CSS网页设计，企业网站资讯文章布局样式

大家好，本篇文章分享企业网站资讯文章的布局样式，这种布局样式通常用于企业网站首页。

效果图：

资讯文章

HTML代码：

`最新资讯`

Newest information

高效简洁但稳定实用的网站程序2019-09-18高效简洁但稳定实用的网站程序2019-09-18高效简洁但稳定实用的网站程序2019-09-18高效简洁但稳定实用的网站程序2019-09-18高效简洁但稳定实用的网站程序2019-09-18高效简洁但稳定实用的网站程序2019-09-18

`热门资讯`

Popular information

`推荐资讯`

Recommend information

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网页设计。

div css网页设计源代码_HTML+CSS网页设计，企业网站资讯文章布局样式相关推荐

div css网页设计源代码_HTML+CSS网页设计，企业网站服务项目布局样式
大家好,本篇文章分享企业网站服务项目的布局样式,这种布局样式通常用于企业网站首页,企业可以向客户提供的服务内容,不同类型的企业服务项目样式也不同,这只是其中一种. 效果图: 服务项目 HTML代码: ...
web网页设计期末课程大作业：企业网站设计——大气的装饰装修一体化公司网站模板(14页) HTML+CSS+JavaScript
HTML5期末大作业:企业网站设计--大气的装饰装修一体化公司网站模板(14页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码 ...
php表单网页实例,40多个漂亮的网页表单设计实例_HTML/Xhtml_网页制作
下面我们介绍40多个漂亮的网页表单例子以及现代的解决方案和与网页表单设计有关的创造性思维.其中有一些是flash的:尽管如此,在大多数情况下,你能很容易的使用简单的css和(x)html来创建相同的设 ...
外链引入css有哪些方式_HTML+CSS基础(三) CSS的引入方式和CSS选择器
一.CSS概念: 什么是CSS,CSS说白了就是给页面添加样式,让整个页面变的好看起来的一种东西,用来定义网页外观,如字体.背景.颜色等二.在页面中使用css的3种常用方式 1.行内样式就是在一个 ...
pyquery获取不到网页完整源代码_python动态网页爬取：爬取pexel上的图片
前言同样的,我们在写一个爬虫前要明确自己想要爬取的东西是什么,明确下载目标数据在浏览器的操作如何对于动态网页的爬取,在网页地址不变的情况下,我们首先要明确如何获取AJAX请求首先我们看看这个网站 ...
静态网页制作作业_HTML CSS复习之制作静态网页
这一周我先是复习了一些基础的布局,下面是比较常用的几种基本布局: 左边aside部分左浮动,右边content部分也左浮动,两个部分无空隙左边aside部分左浮动,右边content部分右浮动然后 ...
html简单网页代码案例_HTML+CSS静态网页练习案例（转动的八卦图）
需要的知识 1.div标签的运用 2.id选择器,后代选择器, 3.简单的css样式长,宽,高,背景颜色,浮动,绝对定位,边框弧度 4.div的布局特点静态的完成效果动态效果(点击链接观看) 太极 ...
php做一个网页的源代码,用HTML5做一个个人网站此文仅展示个人主页界面。内附源代码下载地址...
下载说明: 1.再好的作品都不如将来要做的作品.在每一次的设计当中都能有所收获,才是设计师在web开发中最得益的. 2.本站所有作品均是杨青个人设计.如果发现模板有错,请尽情谅解. 3.如果遇到什么问 ...
css竖向箭头符号_HTML CSS 特殊字符表
HTML有许多特殊的字符,您对此有多少了解?平时在WEB制作中,您又有用到多少?或者说你在平时使用之时,是否也会碰到,有许多特殊字符要如何打印出来?比如说"笑脸",比如说" ...

div css网页设计源代码_HTML+CSS网页设计，企业网站资讯文章布局样式

`最新资讯`

`热门资讯`

`推荐资讯`

div css网页设计源代码_HTML+CSS网页设计，企业网站资讯文章布局样式相关推荐

最新文章

热门文章