<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<title>超清爽的几款网页配色</title>
<head>
<style type="text/css">
.style1{
width: 800px;
height: 100px;
margin: 0px auto;
margin-bottom:20px;
border:1px solid #96C2F1;
background-color: #EFF7FF
}
.style2{
width: 800px;
height: 100px;
margin: 0px auto;
margin-bottom:20px;
border:1px solid #9BDF70;
background-color: #F0FBEB
}
.style3{
width: 800px;
height: 100px;
margin: 0px auto;
margin-bottom:20px;
border:1px solid #BBE1F1;
background-color: #EEFAFF
}
.style4{
width: 800px;
height: 100px;
margin: 0px auto;
margin-bottom:20px;
border:1px solid #CCEFF5;
background-color: #FAFCFD
}
.style5{
width: 800px;
height: 100px;
margin: 0px auto;
margin-bottom:20px;
border:1px solid #FFCC00;
background-color: #FFFFF7
}
.style6{
width: 800px;
height: 100px;
margin: 0px auto;
margin-bottom:20px;
border:1px solid #92B0DD;
background-color: #FFFFFf
}
.style6 h5{
margin: 1px;
background-color: #E2EAF8;
height: 24px;
}
.style7{
width: 800px;
height: 100px;
margin: 0px auto;
margin-bottom:20px;
border:1px solid #A9C9E2;
background-color: #E8F5FE
}
.style8{
width: 800px;
height: 100px;
margin: 0px auto;
margin-bottom:20px;
border:1px solid #E3E197;
background-color: #FFFFDD
}
.style9{
width: 800px;
height: 100px;
margin: 0px auto;
margin-bottom:20px;
border:1px solid #ADCD3C;
background-color: #F2FDDB
}
.style10{
width: 800px;
height: 100px;
margin: 0px auto;
margin-bottom:20px;
border:1px solid #F8B3D0;
background-color: #FFF5FA
}
.style11{
width: 800px;
height: 100px;
margin: 0px auto;
margin-bottom:20px;
border:1px solid #D3D3D3;
background-color: #F7F7F7
}
.style12{
width: 800px;
height: 100px;
margin: 0px auto;
margin-bottom:20px;
border:1px solid #BFD1EB;
background-color: #F3FAFF
}
.style13{
width: 800px;
height: 100px;
margin: 0px auto;
margin-bottom:20px;
border:1px solid #FFDD99;
background-color: #FFF9ED
}
.style14{
width: 800px;
height: 100px;
margin: 0px auto;
margin-bottom:20px;
border:1px solid #CACAFF;
background-color: #F7F7FF
}
.style15{
width: 800px;
height: 100px;
margin: 0px auto;
margin-bottom:20px;
border:1px solid #A5B6C8;
background-color: #EEF3F7
}
.style16{
width: 800px;
height: 100px;
margin: 0px auto;
margin-bottom:20px;
border:1px solid #CEE3E9;
background-color: #F1F7F9
}
</style>
</head>
<body>
<div class="style1"><h5><a href="/">1</a></h5></div>
<div class="style2"><h5><a href="/">2</a></h5></div>
<div class="style6"><h5>3</h5></div>
<div class="style3"></div>
<div class="style4"></div>
<div class="style5"></div>
<div class="style7"></div>
<div class="style8"></div>
<div class="style9"></div>
<div class="style10"></div>
<div class="style11"></div>
<div class="style12"></div>
<div class="style13"></div>
<div class="style14"></div>
<div class="style15"></div>
<div class="style16"></div>
</body>
</html>
分享到:
相关推荐
本资源包“漂亮样式CSS”包含了几个精心设计的`DIV+CSS`样式示例,特别是3D按钮和层模拟窗口移动的效果,这些都是现代网页设计中非常流行和实用的元素。 首先,3D按钮是提升网页界面视觉吸引力的重要元素。在CSS3的...
在网页设计领域,Div+CSS是构建网页布局和样式的主流技术。本教程"Div+CSS网页样式与布局从入门到精通"旨在帮助初学者掌握这一核心技术,通过实例深入理解其工作原理和应用技巧。下面将详细介绍Div和CSS的基础概念、...
以下是对标题和描述中提到的几款Div+CSS模板的详细解读: 1. **一款非常漂亮的后台管理模板** 这款模板专为后台管理系统设计,通常包含有仪表盘、数据统计、用户管理等功能模块,界面设计简洁大方,色彩搭配和谐,...
在`div`中应用`css`样式,可以使页面的设计更加灵活和精确。下面我们将详细探讨这两个概念以及它们如何协同工作来创建美观且功能丰富的网页。 首先,`div`元素是通过`<div>`标签创建的,可以包裹任何数量的HTML元素...
【标题】"DIV+CSS样式模板"所涉及的知识点主要集中在网页布局和样式设计上,这是一种常见的网页开发技术,用于创建高效、灵活且易于维护的网页结构。在现代网页设计中,DIV(Division,分块)是HTML中的一个常用元素...
而“div css导航菜单用CSS样式表处理斜角导航条”这个主题,主要涉及如何使用HTML的`<div>`元素结合CSS(Cascading Style Sheets)来创建具有斜角边框效果的导航栏。下面我们将深入探讨这一主题,详细讲解相关的知识...
在网页设计领域,`div+css`是一种常用的技术,用于实现页面布局和样式控制。`div`元素作为容器,能够包裹其他HTML元素,而CSS(层叠样式表)则负责定义这些元素的外观和位置。在本教程中,我们将深入探讨如何使用`...
网页样式大全集结,聚焦于`div+css样式`这一核心主题,旨在为开发者提供丰富的样式设计资源和指导。`div`和`CSS`是构建现代网页界面不可或缺的元素,它们一起构成了网页布局的基础。`div`是HTML中的一个块级元素,常...
在网页设计中,`DIV+CSS`是一种常用的技术组合,用于实现页面的布局和样式控制。`DIV`(Division)是HTML中的一个容器元素,它主要用于组织和划分页面内容,而`CSS`(Cascading Style Sheets)则是一种样式表语言,...
在网页设计领域,`div` 和 `css` 是构建页面布局和样式的重要工具。`div` 元素是HTML中的一个通用容器,用于组织和分组其他元素,而CSS(层叠样式表)则负责定义这些元素的外观、布局和结构。本教程将深入讲解如何...
在网页设计领域,`div+css`是一种广泛采用的技术,用于实现高效、灵活的页面布局和样式控制。这种技术的核心是使用HTML中的`<div>`元素作为内容的容器,并通过CSS(Cascading Style Sheets)来定义这些容器的外观和...
DIV+CSS样式表,样式表全集。DIV技术。css层叠关系
在网页设计中,`div` 和 `css` 是不可或缺的部分,它们共同构成了页面的结构与样式。本示例聚焦于利用 `div` 和 `css` 创建一个淘宝物流订单流程图的样式代码。流程图在电商网站中至关重要,因为它能够清晰地向用户...
3.1 CSS文字样式 3.2 文字实例一:模拟Google公司Logo 3.3 文字实例二:制作页面的五彩标题 3.4 CSS段落文字 3.5 段落实例:百度搜索 第4章 用CSS设置图片效果 4.1 图片样式 4.2 ...
精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局....
Div(Division)是HTML中的一个块级元素,用于对网页内容进行区域划分,而CSS(Cascading Style Sheets)则是用来控制这些区域样式和布局的重要工具。本教程通过实例详细讲解Div+CSS的使用方法。 首先,Div标签在...
在网页设计中,`div+css`布局是构建页面结构和样式的重要技术。它通过HTML的`<div>`元素作为容器来组织内容,并利用CSS(层叠样式表)来定义这些容器的外观、位置和样式。`div+css`布局能够实现灵活、可维护的网页...
标题与描述中提到的“div+css div+css精通CSS”这一主题,主要涉及的是网页设计与布局的核心技术——利用HTML中的div元素结合CSS样式表进行网页内容的组织与美化。接下来,我们将深入探讨这一主题所包含的关键知识点...
### Div与CSS样式的知识点概览 #### 一、基础知识篇 ##### 1.1 DIV+CSS概述 - **定义**:DIV+CSS是一种网页布局技术,其中“DIV”指的是HTML语言中的`<div>`标签,“CSS”则是Cascading Style Sheets(层叠样式表...
【标题】"DIV+CSS样式教程(浅显易懂的教材)"揭示了本教程的核心内容,即关于网页设计中DIV和CSS样式的教学。DIV,全称是Division,是HTML中的一个区块元素,用于对网页内容进行分块管理,而CSS(Cascading Style ...